import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { ArrowLeft, Save, Eye, EyeOff, MessageSquare, Sparkles, Loader2, Bold, Italic, List, ListOrdered, Quote, Heading2, Heading3 } from "lucide-react";
import { toast } from "sonner";
import { AdminLayout } from "@/components/admin/AdminLayout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Link from "@tiptap/extension-link";
import Placeholder from "@tiptap/extension-placeholder";
import {
  useKbCategories,
  useKbArticle,
  useCreateKbArticle,
  useUpdateKbArticle,
} from "@/hooks/useKnowledgeBase";
import { extractPlainText } from "@/lib/tiptap-utils";
import { AITiptapToolbar } from "@/components/admin/AITiptapToolbar";
import { AITextAssistant } from "@/components/admin/AITextAssistant";
import { Toggle } from "@/components/ui/toggle";
import { Separator } from "@/components/ui/separator";

export default function KbArticleEditorPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const isNew = !id || id === "new";

  const { data: categories, isLoading: categoriesLoading } = useKbCategories();
  const { data: article, isLoading: articleLoading } = useKbArticle(isNew ? "" : id || "");
  const createArticle = useCreateKbArticle();
  const updateArticle = useUpdateKbArticle();

  const [formData, setFormData] = useState({
    title: "",
    slug: "",
    question: "",
    category_id: "",
    is_published: true,
    is_featured: false,
    include_in_chat: true,
  });

  const editor = useEditor({
    extensions: [
      StarterKit,
      Link.configure({ openOnClick: false }),
      Placeholder.configure({ placeholder: "Write a detailed answer..." }),
    ],
    content: "",
    editorProps: {
      attributes: {
        class: "prose prose-sm max-w-none min-h-[200px] focus:outline-none p-4",
      },
    },
  });

  // Load existing article
  useEffect(() => {
    if (article && editor) {
      setFormData({
        title: article.title,
        slug: article.slug,
        question: article.question,
        category_id: article.category_id,
        is_published: article.is_published,
        is_featured: article.is_featured,
        include_in_chat: article.include_in_chat,
      });
      if (article.answer_json) {
        editor.commands.setContent(article.answer_json as any);
      }
    }
  }, [article, editor]);

  // Auto-generate slug from title
  useEffect(() => {
    if (isNew && formData.title) {
      const slug = formData.title
        .toLowerCase()
        .replace(/[åä]/g, "a")
        .replace(/ö/g, "o")
        .replace(/[^a-z0-9]+/g, "-")
        .replace(/^-|-$/g, "");
      setFormData(prev => ({ ...prev, slug }));
    }
  }, [formData.title, isNew]);

  const handleSave = async () => {
    
    if (!editor) {
      toast.error("Editor not ready");
      return;
    }
    
    if (!formData.category_id) {
      toast.error("Please select a category");
      return;
    }

    if (!formData.title.trim()) {
      toast.error("Please enter a title");
      return;
    }

    if (!formData.question.trim()) {
      toast.error("Please enter a question");
      return;
    }
    
    

    const answer_json = editor.getJSON() as unknown;
    const answer_text = extractPlainText(answer_json);

    const data = {
      category_id: formData.category_id,
      title: formData.title.trim(),
      slug: formData.slug.trim(),
      question: formData.question.trim(),
      is_published: formData.is_published,
      is_featured: formData.is_featured,
      include_in_chat: formData.include_in_chat,
      answer_json: answer_json as import("@/integrations/supabase/types").Json,
      answer_text,
    };

    try {
      if (isNew) {
        const created = await createArticle.mutateAsync(data);
        toast.success("Article created!");
        navigate(`/admin/knowledge-base/${created.id}`);
      } else if (id) {
        await updateArticle.mutateAsync({ id, ...data });
        toast.success("Article saved!");
      }
    } catch (error) {
      toast.error(`Save failed: ${(error as Error).message}`);
    }
  };

  const isPending = createArticle.isPending || updateArticle.isPending;
  const isLoading = !isNew && articleLoading;

  if (isLoading) {
    return (
      <AdminLayout>
        <div className="space-y-4">
          <Skeleton className="h-10 w-48" />
          <Skeleton className="h-[400px]" />
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" onClick={() => navigate("/admin/knowledge-base")}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold">{isNew ? "New Article" : "Edit Article"}</h1>
              <p className="text-sm text-muted-foreground">
                {isNew ? "Create a new knowledge base article" : formData.title}
              </p>
            </div>
          </div>
          <Button onClick={handleSave} disabled={isPending}>
            {isPending ? (
              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
            ) : (
              <Save className="h-4 w-4 mr-2" />
            )}
            {isPending ? "Saving..." : "Save"}
          </Button>
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Article Content</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label>Title</Label>
                  <Input
                    value={formData.title}
                    onChange={e => setFormData(prev => ({ ...prev, title: e.target.value }))}
                    placeholder="How to reset your password"
                  />
                </div>

                <div>
                  <Label>Slug</Label>
                  <Input
                    value={formData.slug}
                    onChange={e => setFormData(prev => ({ ...prev, slug: e.target.value }))}
                    placeholder="how-to-reset-password"
                  />
                </div>

                <div>
                  <div className="flex items-center justify-between">
                    <Label>Question</Label>
                    <AITextAssistant
                      value={formData.question}
                      onChange={(text) => setFormData(prev => ({ ...prev, question: text }))}
                      actions={['improve']}
                      compact
                    />
                  </div>
                  <Textarea
                    value={formData.question}
                    onChange={e => setFormData(prev => ({ ...prev, question: e.target.value }))}
                    placeholder="How do I reset my password?"
                    rows={2}
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    The question as users would ask it
                  </p>
                </div>

                <div>
                  <Label className="mb-2 block">Answer</Label>
                  <div className="border rounded-lg overflow-hidden bg-card">
                    {editor && (
                      <div className="border-b px-3 py-2 flex items-center gap-1 flex-wrap bg-muted/30">
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('bold')}
                          onPressedChange={() => editor.chain().focus().toggleBold().run()}
                          aria-label="Bold"
                        >
                          <Bold className="h-4 w-4" />
                        </Toggle>
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('italic')}
                          onPressedChange={() => editor.chain().focus().toggleItalic().run()}
                          aria-label="Italic"
                        >
                          <Italic className="h-4 w-4" />
                        </Toggle>
                        <Separator orientation="vertical" className="h-6 mx-1" />
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('heading', { level: 2 })}
                          onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
                          aria-label="Heading 2"
                        >
                          <Heading2 className="h-4 w-4" />
                        </Toggle>
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('heading', { level: 3 })}
                          onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
                          aria-label="Heading 3"
                        >
                          <Heading3 className="h-4 w-4" />
                        </Toggle>
                        <Separator orientation="vertical" className="h-6 mx-1" />
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('bulletList')}
                          onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
                          aria-label="Bullet list"
                        >
                          <List className="h-4 w-4" />
                        </Toggle>
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('orderedList')}
                          onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
                          aria-label="Numbered list"
                        >
                          <ListOrdered className="h-4 w-4" />
                        </Toggle>
                        <Toggle
                          size="sm"
                          pressed={editor.isActive('blockquote')}
                          onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
                          aria-label="Quote"
                        >
                          <Quote className="h-4 w-4" />
                        </Toggle>
                        <Separator orientation="vertical" className="h-6 mx-1" />
                        <AITiptapToolbar editor={editor} context="Knowledge base article" />
                      </div>
                    )}
                    <EditorContent editor={editor} className="tiptap" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label>Category</Label>
                  {categoriesLoading ? (
                    <Skeleton className="h-10" />
                  ) : (
                    <Select
                      value={formData.category_id}
                      onValueChange={value => setFormData(prev => ({ ...prev, category_id: value }))}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories?.map(category => (
                          <SelectItem key={category.id} value={category.id}>
                            {category.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                </div>

                <div className="flex items-center justify-between rounded-lg border p-3">
                  <div className="flex items-center gap-2">
                    {formData.is_published ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
                    <div>
                      <Label>Published</Label>
                      <p className="text-xs text-muted-foreground">Visible on public pages</p>
                    </div>
                  </div>
                  <Switch
                    checked={formData.is_published}
                    onCheckedChange={checked => setFormData(prev => ({ ...prev, is_published: checked }))}
                  />
                </div>

                <div className="flex items-center justify-between rounded-lg border p-3">
                  <div className="flex items-center gap-2">
                    <Sparkles className="h-4 w-4" />
                    <div>
                      <Label>Featured</Label>
                      <p className="text-xs text-muted-foreground">Show prominently</p>
                    </div>
                  </div>
                  <Switch
                    checked={formData.is_featured}
                    onCheckedChange={checked => setFormData(prev => ({ ...prev, is_featured: checked }))}
                  />
                </div>
              </CardContent>
            </Card>

            <Card className="border-primary/20 bg-primary/5">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MessageSquare className="h-4 w-4" />
                  AI Chat Integration
                </CardTitle>
                <CardDescription>
                  Include this article in AI Chat context
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium">Include in Chat</p>
                    <p className="text-xs text-muted-foreground">
                      AI will use this to answer questions
                    </p>
                  </div>
                  <Switch
                    checked={formData.include_in_chat}
                    onCheckedChange={checked => setFormData(prev => ({ ...prev, include_in_chat: checked }))}
                  />
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </AdminLayout>
  );
}
