"use client"

import { useEffect, useState } from "react"
import { useForm } from "react-hook-form"
import {
  Plus,
  Trash2,
  FolderTree,
  Loader2,
  Pencil,
  X,
  Check,
  Tag,
  CornerDownRight
} from "lucide-react"
import api from "@/lib/axios"
import Swal from "sweetalert2";

type Category = {
  id: string
  name: string
  slug: string
  image?: string
  parentId?: string | null
  children?: Category[]
}

type FormValues = {
  name: string
  slug: string
  image: string
  parentId: string
}

function slugify(str: string) {
  return str
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, "")
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "")
}

export default function CategoriesPage() {
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
  const [editSubmitting, setEditSubmitting] = useState(false)
  const [deletingId, setDeletingId] = useState<string | null>(null)

  const { register, handleSubmit, reset, setValue } = useForm<FormValues>()
  const editForm = useForm<FormValues>()

  async function fetchCategories() {
    try {
      setLoading(true)
      const res = await api.get("/admin/categories")
      setCategories(res.data)
    } catch (error) {
      console.log(error)
    } finally {
      setLoading(false)
    }
  }

  async function onSubmit(data: FormValues) {
    try {
      setSubmitting(true)
      const payload = { ...data, parentId: data.parentId || null }
      await api.post("/admin/categories", payload)
      reset()
      fetchCategories()
    } catch (error: any) {
      Swal.fire({ text: error.response?.data?.message || "Failed to create category.", confirmButtonColor: "#18181b", icon: "error" })
    } finally {
      setSubmitting(false)
    }
  }

  async function onEditSubmit(data: FormValues) {
    if (!editingCategory) return
    try {
      setEditSubmitting(true)
      const payload = { ...data, parentId: data.parentId || null }
      await api.patch(`/admin/categories/${editingCategory.id}`, payload)
      setEditingCategory(null)
      fetchCategories()
    } catch (error: any) {
      Swal.fire({ text: error.response?.data?.message || "Failed to update category.", confirmButtonColor: "#18181b", icon: "error" })
    } finally {
      setEditSubmitting(false)
    }
  }

  function openEdit(cat: Category) {
    setEditingCategory(cat)
    editForm.reset({ 
      name: cat.name, 
      slug: cat.slug, 
      image: cat.image || "",
      parentId: cat.parentId || ""
    })
  }

  async function handleDelete(id: string) {
    if (!(await Swal.fire({ title: "Are you sure?", text: "Are you sure you want to delete this category?", icon: "warning", showCancelButton: true, confirmButtonColor: "#18181b", cancelButtonColor: "#ef4444", confirmButtonText: "Yes" })).isConfirmed) return
    try {
      setDeletingId(id)
      await api.delete(`/admin/categories/${id}`)
      fetchCategories()
    } catch (error: any) {
      Swal.fire({ text: error.response?.data?.message || "Failed to delete category.", confirmButtonColor: "#18181b", icon: "error" })
    } finally {
      setDeletingId(null)
    }
  }

  useEffect(() => {
    fetchCategories()
  }, [])

  // Flatten categories for display and parent selection
  const flatCategories = categories.flatMap(cat => [cat, ...(cat.children || [])]);

  return (
    <>
      {/* EDIT MODAL */}
      {editingCategory && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm px-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 relative">
            <button
              onClick={() => setEditingCategory(null)}
              className="absolute top-4 right-4 p-1.5 rounded-lg text-zinc-400 hover:text-zinc-700 hover:bg-zinc-100 transition cursor-pointer"
            >
              <X size={18} />
            </button>

            <div className="flex items-center gap-2.5 mb-5">
              <div className="p-2 bg-indigo-50 rounded-xl">
                <Pencil className="w-4 h-4 text-indigo-600" />
              </div>
              <div>
                <h2 className="text-base font-bold text-zinc-900">Edit Category</h2>
                <p className="text-xs text-zinc-400">Update details for this category</p>
              </div>
            </div>

            <form onSubmit={editForm.handleSubmit(onEditSubmit)} className="space-y-4">
              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Category Name
                </label>
                <input
                  {...editForm.register("name", {
                    required: true,
                    onChange: (e) =>
                      editForm.setValue("slug", slugify(e.target.value)),
                  })}
                  placeholder="e.g. Summer Outfits"
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-zinc-50"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Slug
                </label>
                <input
                  {...editForm.register("slug", { required: true })}
                  placeholder="e.g. summer-outfits"
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-zinc-50 font-mono text-zinc-500"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Parent Category (Optional)
                </label>
                <select
                  {...editForm.register("parentId")}
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-zinc-50 appearance-none"
                >
                  <option value="">None (Top Level)</option>
                  {categories.map((c) => (
                    <option key={c.id} value={c.id} disabled={c.id === editingCategory.id || (editingCategory.children?.length ?? 0) > 0}>
                      {c.name} {c.id === editingCategory.id ? '(Current)' : ''} {(editingCategory.children?.length ?? 0) > 0 ? '(Has Subcategories)' : ''}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Image URL
                </label>
                <input
                  {...editForm.register("image")}
                  placeholder="https://..."
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-zinc-50"
                />
              </div>

              <div className="flex gap-3 pt-1">
                <button
                  type="button"
                  onClick={() => setEditingCategory(null)}
                  className="flex-1 py-2.5 rounded-xl border border-zinc-200 text-sm font-medium text-zinc-600 hover:bg-zinc-50 transition cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={editSubmitting}
                  className="flex-1 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition flex items-center justify-center gap-2 disabled:opacity-50 cursor-pointer"
                >
                  {editSubmitting ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : (
                    <Check className="w-4 h-4" />
                  )}
                  Save Changes
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      <div className="space-y-6 max-w-7xl mx-auto p-2">
        {/* HEADER */}
        <div className="flex items-center gap-3">
          <div className="p-2.5 bg-zinc-900 text-white rounded-xl shadow-lg">
            <FolderTree size={20} />
          </div>
          <div>
            <h1 className="text-2xl font-extrabold tracking-tight text-zinc-900">
              Categories
            </h1>
            <p className="text-zinc-400 text-xs mt-0.5">
              Organize and classify your fashion collections
            </p>
          </div>
        </div>

        {/* MAIN GRID */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
          {/* ADD FORM */}
          <div className="lg:col-span-1 bg-white rounded-2xl border border-zinc-100 p-5 shadow-sm sticky top-6">
            <div className="flex items-center gap-2 mb-4">
              <div className="p-1.5 bg-zinc-100 rounded-lg">
                <Plus className="w-4 h-4 text-zinc-700" />
              </div>
              <h2 className="text-sm font-bold text-zinc-900">Add Category</h2>
            </div>

            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Name
                </label>
                <input
                  {...register("name", {
                    required: true,
                    onChange: (e) => setValue("slug", slugify(e.target.value)),
                  })}
                  placeholder="e.g. Summer Outfits"
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:border-transparent transition bg-zinc-50"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Slug
                </label>
                <input
                  {...register("slug", { required: true })}
                  placeholder="auto-generated"
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:border-transparent transition bg-zinc-50 font-mono text-zinc-500"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Parent Category (Optional)
                </label>
                <select
                  {...register("parentId")}
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:border-transparent transition bg-zinc-50 appearance-none"
                >
                  <option value="">None (Top Level)</option>
                  {categories.map((c) => (
                    <option key={c.id} value={c.id}>{c.name}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1.5">
                  Image URL
                </label>
                <input
                  {...register("image")}
                  placeholder="https://..."
                  className="w-full border border-zinc-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:border-transparent transition bg-zinc-50"
                />
              </div>

              <button
                type="submit"
                disabled={submitting}
                className="w-full bg-zinc-900 text-white text-sm font-semibold py-2.5 rounded-xl hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-900 transition flex items-center justify-center gap-2 cursor-pointer shadow-sm disabled:opacity-50"
              >
                {submitting ? (
                  <Loader2 className="w-4 h-4 animate-spin" />
                ) : (
                  <Plus className="w-4 h-4" />
                )}
                {submitting ? "Creating..." : "Create Category"}
              </button>
            </form>
          </div>

          {/* CATEGORY LIST */}
          <div className="lg:col-span-2">
            {loading ? (
              <div className="flex flex-col items-center justify-center py-16 bg-white rounded-2xl border border-zinc-100">
                <Loader2 className="w-7 h-7 animate-spin text-zinc-400 mb-3" />
                <span className="text-zinc-400 text-sm">Loading categories...</span>
              </div>
            ) : categories.length === 0 ? (
              <div className="text-center py-16 bg-white rounded-2xl border border-zinc-100 flex flex-col items-center">
                <FolderTree className="text-zinc-200 w-12 h-12 mb-3" />
                <h3 className="text-sm font-bold text-zinc-700">No categories yet</h3>
                <p className="text-zinc-400 mt-1 text-xs max-w-xs">
                  Create your first category using the form on the left.
                </p>
              </div>
            ) : (
              <div className="space-y-4">
                {categories.map((cat) => (
                  <div key={cat.id} className="space-y-2">
                    {/* Parent Category Card */}
                    <div className="group bg-white rounded-xl border border-zinc-200 hover:border-zinc-300 shadow-sm hover:shadow-md transition-all duration-200 flex items-center gap-3 p-3 pr-4">
                      {/* Avatar */}
                      <div className="w-11 h-11 rounded-lg bg-zinc-100 border border-zinc-100 overflow-hidden shrink-0">
                        {cat.image ? (
                          <img
                            src={cat.image}
                            alt={cat.name}
                            className="w-full h-full object-cover group-hover:scale-105 transition duration-300"
                          />
                        ) : (
                          <div className="w-full h-full flex items-center justify-center">
                            <Tag className="w-4 h-4 text-zinc-400" />
                          </div>
                        )}
                      </div>

                      {/* Info */}
                      <div className="min-w-0 flex-1">
                        <p className="text-sm font-semibold text-zinc-900 truncate group-hover:text-indigo-600 transition flex items-center gap-2">
                          {cat.name}
                        </p>
                        <p className="text-xs font-mono text-zinc-400 truncate">
                          /{cat.slug}
                        </p>
                      </div>

                      {/* Actions */}
                      <div className="flex items-center gap-1 shrink-0">
                        <button
                          onClick={() => openEdit(cat)}
                          className="p-1.5 rounded-lg text-zinc-400 hover:text-indigo-600 hover:bg-indigo-50 transition cursor-pointer"
                          title="Edit"
                        >
                          <Pencil size={14} />
                        </button>
                        <button
                          onClick={() => handleDelete(cat.id)}
                          disabled={deletingId === cat.id}
                          className="p-1.5 rounded-lg text-zinc-400 hover:text-red-500 hover:bg-red-50 transition cursor-pointer disabled:opacity-40"
                          title="Delete"
                        >
                          {deletingId === cat.id ? (
                            <Loader2 size={14} className="animate-spin" />
                          ) : (
                            <Trash2 size={14} />
                          )}
                        </button>
                      </div>
                    </div>

                    {/* Subcategories (if any) */}
                    {cat.children && cat.children.length > 0 && (
                      <div className="pl-6 space-y-2 border-l-2 border-indigo-100 ml-5">
                        {cat.children.map(subCat => (
                          <div key={subCat.id} className="group bg-zinc-50 rounded-lg border border-zinc-200 hover:border-indigo-300 transition-all duration-200 flex items-center gap-3 p-2 pr-3">
                            <div className="text-zinc-300 shrink-0">
                               <CornerDownRight size={16} />
                            </div>
                            
                             {/* Avatar */}
                            <div className="w-8 h-8 rounded-md bg-white border border-zinc-100 overflow-hidden shrink-0">
                              {subCat.image ? (
                                <img
                                  src={subCat.image}
                                  alt={subCat.name}
                                  className="w-full h-full object-cover"
                                />
                              ) : (
                                <div className="w-full h-full flex items-center justify-center">
                                  <Tag className="w-3 h-3 text-zinc-300" />
                                </div>
                              )}
                            </div>

                            {/* Info */}
                            <div className="min-w-0 flex-1">
                              <p className="text-sm font-medium text-zinc-800 truncate group-hover:text-indigo-600 transition">
                                {subCat.name}
                              </p>
                              <p className="text-[10px] font-mono text-zinc-400 truncate">
                                /{subCat.slug}
                              </p>
                            </div>

                             {/* Actions */}
                            <div className="flex items-center gap-1 shrink-0">
                              <button
                                onClick={() => openEdit(subCat)}
                                className="p-1 rounded text-zinc-400 hover:text-indigo-600 hover:bg-indigo-50 transition cursor-pointer"
                                title="Edit"
                              >
                                <Pencil size={12} />
                              </button>
                              <button
                                onClick={() => handleDelete(subCat.id)}
                                disabled={deletingId === subCat.id}
                                className="p-1 rounded text-zinc-400 hover:text-red-500 hover:bg-red-50 transition cursor-pointer disabled:opacity-40"
                                title="Delete"
                              >
                                {deletingId === subCat.id ? (
                                  <Loader2 size={12} className="animate-spin" />
                                ) : (
                                  <Trash2 size={12} />
                                )}
                              </button>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  )
}