"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "@tanstack/react-form";
import { toast } from "sonner";
import useSWR from "swr";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Image from "@tiptap/extension-image";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import NewsService from "@/services/news.service";
import AdminNewsService from "@/services/admin.news.service";
import MediaService from "@/services/media.service";
import type { News, Category, Tag } from "@/types/news.type";
import {
  Plus,
  Trash,
  Upload,
  X,
  Bold,
  Italic,
  List,
  ListOrdered,
  Quote,
  Undo,
  Redo,
  Image as ImageIcon,
} from "lucide-react";
import { useDropzone } from "react-dropzone";

interface NewsFormProps {
  news?: News;
  mode: "create" | "edit";
}

const NewsForm = ({ news, mode }: NewsFormProps) => {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [imageUrl, setImageUrl] = useState(news?.imageUrl || "");
  const [isUploading, setIsUploading] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState("");
  const [isCreatingCategory, setIsCreatingCategory] = useState(false);
  const [newTagName, setNewTagName] = useState("");
  const [newTagBgColor, setNewTagBgColor] = useState("#fed97a");
  const [newTagTextColor, setNewTagTextColor] = useState("#000000");
  const [isCreatingTag, setIsCreatingTag] = useState(false);

  const { data: categories = [], mutate: mutateCategories } = useSWR<Category[]>(
    "/admin/news/categories",
    () => NewsService.getCategories()
  );

  const { data: tags = [], mutate: mutateTags } = useSWR<Tag[]>(
    "/admin/news/tags",
    () => NewsService.getTags()
  );

  // TipTap Editor
  const editor = useEditor({
    extensions: [StarterKit, Image],
    content: news?.content || "",
    editorProps: {
      attributes: {
        class: "prose prose-sm max-w-none focus:outline-none min-h-[300px] p-4",
      },
    },
  });

  const form = useForm({
    defaultValues: {
      title: news?.title || "",
      excerpt: news?.excerpt || "",
      content: news?.content || "",
      categoryId: news?.category?.id || "",
      status: news?.status || "DRAFT",
      isFeatured: news?.isFeatured || false,
      isRecommended: news?.isRecommended || false,
      address: news?.address || "",
      tagIds: news?.tags?.map((t) => t.id) || [],
    },
    onSubmit: async ({ value }) => {
      if (!editor) return;

      setIsSubmitting(true);
      try {
        const data = {
          ...value,
          content: editor.getHTML(),
          imageUrl,
        };

        if (mode === "create") {
          await AdminNewsService.create(data);
          toast.success("Berita berhasil ditambahkan");
        } else if (mode === "edit" && news) {
          await AdminNewsService.update(news.id, data);
          toast.success("Berita berhasil diperbarui");
        }

        router.push("/admin/news");
      } catch (error) {
        toast.error(mode === "create" ? "Gagal menambahkan berita" : "Gagal memperbarui berita");
      } finally {
        setIsSubmitting(false);
      }
    },
  });

  // Image upload
  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      "image/*": [".jpeg", ".jpg", ".png", ".webp"],
    },
    maxSize: 5 * 1024 * 1024,
    onDrop: async (acceptedFiles) => {
      if (acceptedFiles.length === 0) return;

      setIsUploading(true);
      try {
        const file = acceptedFiles[0];
        const response = await MediaService.upload(file, "news");
        if (response) {
          setImageUrl(response.url);
          toast.success("Gambar berhasil diupload");
        }
      } catch (error) {
        toast.error("Gagal mengupload gambar");
      } finally {
        setIsUploading(false);
      }
    },
  });

  // Create new category
  const handleCreateCategory = async () => {
    if (!newCategoryName.trim()) return;

    setIsCreatingCategory(true);
    try {
      const newCategory = await AdminNewsService.createCategory({
        name: newCategoryName,
      });
      await mutateCategories();
      form.setFieldValue("categoryId", newCategory.id);
      setNewCategoryName("");
      toast.success("Kategori berhasil ditambahkan");
    } catch (error) {
      toast.error("Gagal menambahkan kategori");
    } finally {
      setIsCreatingCategory(false);
    }
  };

  // Create new tag
  const handleCreateTag = async () => {
    if (!newTagName.trim()) return;

    setIsCreatingTag(true);
    try {
      const newTag = await AdminNewsService.createTag({
        name: newTagName,
        bgColor: newTagBgColor,
        textColor: newTagTextColor,
      });
      await mutateTags();
      
      const currentTagIds = form.getFieldValue("tagIds");
      form.setFieldValue("tagIds", [...currentTagIds, newTag.id]);
      
      setNewTagName("");
      toast.success("Tag berhasil ditambahkan");
    } catch (error) {
      toast.error("Gagal menambahkan tag");
    } finally {
      setIsCreatingTag(false);
    }
  };

  // Insert image to editor
  const insertImage = async (file: File) => {
    if (!editor) return;

    try {
      const response = await MediaService.upload(file, "news");
      if (response) {
        editor.chain().focus().setImage({ src: response.url }).run();
        toast.success("Gambar berhasil ditambahkan");
      }
    } catch (error) {
      toast.error("Gagal menambahkan gambar");
    }
  };

  const { getRootProps: getEditorImageProps, getInputProps: getEditorImageInputProps } = useDropzone({
    accept: { "image/*": [".jpeg", ".jpg", ".png", ".webp"] },
    maxSize: 5 * 1024 * 1024,
    onDrop: async (acceptedFiles) => {
      if (acceptedFiles.length > 0) {
        await insertImage(acceptedFiles[0]);
      }
    },
  });

  // Generate slug from title
  const generateSlug = (title: string) => {
    return title
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)/g, "");
  };

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
      className="space-y-6"
    >
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">
            {mode === "create" ? "Tambah Berita" : "Edit Berita"}
          </h1>
          <p className="text-slate-500">
            {mode === "create" ? "Buat artikel berita baru" : "Perbarui artikel berita"}
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            type="button"
            variant="outline"
            onClick={() => router.push("/admin/news")}
          >
            Batal
          </Button>
          <Button type="submit" disabled={isSubmitting}>
            {isSubmitting ? "Menyimpan..." : "Simpan"}
          </Button>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Left Column - Main Content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Content Card */}
          <Card>
            <CardHeader>
              <CardTitle>Konten Berita</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Title */}
              <form.Field name="title">
                {(field) => (
                  <div className="space-y-2">
                    <Label htmlFor="title">Judul Berita *</Label>
                    <Input
                      id="title"
                      value={field.state.value}
                      onChange={(e) => {
                        field.handleChange(e.target.value);
                        // Auto-generate slug if in create mode
                        if (mode === "create") {
                          // You might want to store slug separately
                        }
                      }}
                      placeholder="Judul artikel..."
                    />
                    {field.state.meta.errors && (
                      <p className="text-sm text-red-500">
                        {field.state.meta.errors[0]}
                      </p>
                    )}
                  </div>
                )}
              </form.Field>

              {/* Excerpt */}
              <form.Field name="excerpt">
                {(field) => (
                  <div className="space-y-2">
                    <Label htmlFor="excerpt">Ringkasan</Label>
                    <Textarea
                      id="excerpt"
                      value={field.state.value}
                      onChange={(e) => field.handleChange(e.target.value)}
                      placeholder="Ringkasan singkat artikel..."
                      rows={3}
                    />
                  </div>
                )}
              </form.Field>

              {/* Address */}
              <form.Field name="address">
                {(field) => (
                  <div className="space-y-2">
                    <Label htmlFor="address">Lokasi/Alamat</Label>
                    <Input
                      id="address"
                      value={field.state.value}
                      onChange={(e) => field.handleChange(e.target.value)}
                      placeholder="Lokasi atau alamat berita..."
                    />
                  </div>
                )}
              </form.Field>

              {/* Rich Text Editor */}
              <div className="space-y-2">
                <Label>Konten *</Label>
                <div className="border rounded-lg overflow-hidden">
                  {/* Toolbar */}
                  <div className="flex items-center gap-1 p-2 border-b bg-slate-50">
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().toggleBold().run()}
                      className={editor?.isActive("bold") ? "bg-slate-200" : ""}
                    >
                      <Bold className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().toggleItalic().run()}
                      className={editor?.isActive("italic") ? "bg-slate-200" : ""}
                    >
                      <Italic className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().toggleBulletList().run()}
                      className={editor?.isActive("bulletList") ? "bg-slate-200" : ""}
                    >
                      <List className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().toggleOrderedList().run()}
                      className={editor?.isActive("orderedList") ? "bg-slate-200" : ""}
                    >
                      <ListOrdered className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().toggleBlockquote().run()}
                      className={editor?.isActive("blockquote") ? "bg-slate-200" : ""}
                    >
                      <Quote className="h-4 w-4" />
                    </Button>
                    <Separator orientation="vertical" className="h-6 mx-1" />
                    <div {...getEditorImageProps()}>
                      <input {...getEditorImageInputProps()} />
                      <Button type="button" variant="ghost" size="sm">
                        <ImageIcon className="h-4 w-4" />
                      </Button>
                    </div>
                    <Separator orientation="vertical" className="h-6 mx-1" />
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().undo().run()}
                    >
                      <Undo className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor?.chain().focus().redo().run()}
                    >
                      <Redo className="h-4 w-4" />
                    </Button>
                  </div>
                  {/* Editor Content */}
                  <EditorContent editor={editor} className="min-h-[300px]" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right Column - Settings */}
        <div className="space-y-6">
          {/* Hero Image Card */}
          <Card>
            <CardHeader>
              <CardTitle>Gambar Utama</CardTitle>
            </CardHeader>
            <CardContent>
              <div
                {...getRootProps()}
                className="border-2 border-dashed border-slate-300 rounded-lg p-6 text-center cursor-pointer hover:border-primary transition-colors"
              >
                <input {...getInputProps()} />
                {imageUrl ? (
                  <div className="flex flex-col items-center gap-2">
                    <Avatar className="h-32 w-32 rounded-lg">
                      <AvatarImage src={imageUrl} className="object-cover" />
                      <AvatarFallback>IMG</AvatarFallback>
                    </Avatar>
                    <p className="text-sm text-slate-500">
                      Klik untuk mengganti gambar
                    </p>
                  </div>
                ) : (
                  <div className="flex flex-col items-center gap-2">
                    <Upload className="h-8 w-8 text-slate-400" />
                    <p className="text-sm text-slate-500">
                      {isUploading ? "Mengupload..." : "Upload gambar utama"}
                    </p>
                    <p className="text-xs text-slate-400">
                      Maksimal 5MB (JPG, PNG, WebP)
                    </p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Category Card */}
          <Card>
            <CardHeader>
              <CardTitle>Kategori</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <form.Field name="categoryId">
                {(field) => (
                  <div className="space-y-2">
                    <Label>Pilih Kategori *</Label>
                    <Select
                      value={field.state.value}
                      onValueChange={(value) => {
                        if (value) field.handleChange(value);
                      }}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Pilih kategori" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((cat) => (
                          <SelectItem key={cat.id} value={cat.id}>
                            {cat.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {field.state.meta.errors && (
                      <p className="text-sm text-red-500">
                        {field.state.meta.errors[0]}
                      </p>
                    )}
                  </div>
                )}
              </form.Field>

              {/* Add New Category */}
              <div className="pt-2 border-t">
                <p className="text-sm font-medium mb-2">Buat Kategori Baru</p>
                <div className="flex gap-2">
                  <Input
                    placeholder="Nama kategori..."
                    value={newCategoryName}
                    onChange={(e) => setNewCategoryName(e.target.value)}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={handleCreateCategory}
                    disabled={isCreatingCategory || !newCategoryName.trim()}
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Tags Card */}
          <Card>
            <CardHeader>
              <CardTitle>Tags</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <form.Field name="tagIds">
                {(field) => (
                  <div className="space-y-2">
                    <Label>Pilih Tags</Label>
                    <div className="flex flex-wrap gap-2">
                      {tags.map((tag) => (
                        <Badge
                          key={tag.id}
                          variant={
                            field.state.value.includes(tag.id)
                              ? "default"
                              : "outline"
                          }
                          style={{
                            backgroundColor: field.state.value.includes(tag.id)
                              ? tag.bgColor || undefined
                              : undefined,
                            color: field.state.value.includes(tag.id)
                              ? tag.textColor || undefined
                              : undefined,
                          }}
                          className="cursor-pointer"
                          onClick={() => {
                            const current = field.state.value;
                            if (current.includes(tag.id)) {
                              field.handleChange(
                                current.filter((id) => id !== tag.id)
                              );
                            } else {
                              field.handleChange([...current, tag.id]);
                            }
                          }}
                        >
                          {tag.name}
                          {field.state.value.includes(tag.id) && (
                            <X className="h-3 w-3 ml-1" />
                          )}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}
              </form.Field>

              {/* Add New Tag */}
              <div className="pt-2 border-t space-y-2">
                <p className="text-sm font-medium">Buat Tag Baru</p>
                <div className="flex gap-2">
                  <Input
                    placeholder="Nama tag..."
                    value={newTagName}
                    onChange={(e) => setNewTagName(e.target.value)}
                  />
                  <div className="flex flex-col gap-1">
                    <label htmlFor="tag-bg-color" className="text-xs text-slate-500">BG</label>
                    <input
                      id="tag-bg-color"
                      type="color"
                      value={newTagBgColor}
                      onChange={(e) => setNewTagBgColor(e.target.value)}
                      className="w-8 h-8 rounded cursor-pointer"
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label htmlFor="tag-text-color" className="text-xs text-slate-500">Text</label>
                    <input
                      id="tag-text-color"
                      type="color"
                      value={newTagTextColor}
                      onChange={(e) => setNewTagTextColor(e.target.value)}
                      className="w-8 h-8 rounded cursor-pointer"
                    />
                  </div>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={handleCreateTag}
                    disabled={isCreatingTag || !newTagName.trim()}
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Settings Card */}
          <Card>
            <CardHeader>
              <CardTitle>Pengaturan</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <form.Field name="status">
                {(field) => (
                  <div className="space-y-2">
                    <Label>Status</Label>
                    <Select
                      value={field.state.value}
                      onValueChange={(value) => {
                        if (value) field.handleChange(value as "DRAFT" | "PUBLISHED" | "ARCHIVED");
                      }}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="DRAFT">Draft</SelectItem>
                        <SelectItem value="PUBLISHED">Published</SelectItem>
                        <SelectItem value="ARCHIVED">Archived</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                )}
              </form.Field>

              <form.Field name="isFeatured">
                {(field) => (
                  <div className="flex items-center justify-between">
                    <div>
                      <Label className="text-base">Featured</Label>
                      <p className="text-sm text-slate-500">
                        Tampilkan di halaman utama
                      </p>
                    </div>
                    <Switch
                      checked={field.state.value}
                      onCheckedChange={field.handleChange}
                    />
                  </div>
                )}
              </form.Field>

              <Separator />

              <form.Field name="isRecommended">
                {(field) => (
                  <div className="flex items-center justify-between">
                    <div>
                      <Label className="text-base">Recommended</Label>
                      <p className="text-sm text-slate-500">
                        Tampilkan di rekomendasi
                      </p>
                    </div>
                    <Switch
                      checked={field.state.value}
                      onCheckedChange={field.handleChange}
                    />
                  </div>
                )}
              </form.Field>
            </CardContent>
          </Card>
        </div>
      </div>
    </form>
  );
};

export default NewsForm;