"use client";

import { useEffect, useState, useCallback } from "react";
import AdminLayout from "@/components/admin/AdminLayout";
import {
  PlusIcon,
  EditIcon,
  TrashIcon,
  CheckIcon,
  XIcon,
  SpinnerIcon,
  FolderIcon,
} from "@/components/Icons";
import { slugify } from "@/lib/utils";

interface Category {
  id: number;
  name: string;
  slug: string;
  icon: string | null;
  color: string | null;
  sortOrder: number | null;
}

const iconOptions = [
  { value: "globe", label: "🌐 Globe (Website)" },
  { value: "layout", label: "📱 Layout (Web App)" },
  { value: "palette", label: "🎨 Palette (Design)" },
  { value: "cpu", label: "🤖 CPU (AI)" },
  { value: "smartphone", label: "📲 Smartphone (Mobile)" },
  { value: "zap", label: "⚡ Zap (Automation)" },
  { value: "video", label: "🎬 Video" },
  { value: "music", label: "🎵 Music" },
  { value: "code", label: "💻 Code" },
  { value: "database", label: "🗄️ Database" },
];

const colorOptions = [
  { value: "#3b82f6", label: "Blue" },
  { value: "#8b5cf6", label: "Purple" },
  { value: "#ec4899", label: "Pink" },
  { value: "#06b6d4", label: "Cyan" },
  { value: "#10b981", label: "Green" },
  { value: "#f59e0b", label: "Amber" },
  { value: "#ef4444", label: "Red" },
  { value: "#a855f7", label: "Violet" },
];

export default function CategoriesPage() {
  const [categoriesList, setCategoriesList] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<Category | null>(null);
  const [saving, setSaving] = useState(false);

  const [formData, setFormData] = useState({
    name: "",
    slug: "",
    icon: "globe",
    color: "#3b82f6",
  });

  const fetchCategories = useCallback(async () => {
    try {
      const res = await fetch("/api/admin/categories");
      if (res.ok) {
        const data = await res.json();
        setCategoriesList(data.categories);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const openForm = (category?: Category) => {
    if (category) {
      setEditing(category);
      setFormData({
        name: category.name,
        slug: category.slug,
        icon: category.icon || "globe",
        color: category.color || "#3b82f6",
      });
    } else {
      setEditing(null);
      setFormData({
        name: "",
        slug: "",
        icon: "globe",
        color: "#3b82f6",
      });
    }
    setShowForm(true);
  };

  const handleNameChange = (name: string) => {
    setFormData({
      ...formData,
      name,
      slug: editing ? formData.slug : slugify(name),
    });
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);

    try {
      const url = editing
        ? `/api/admin/categories/${editing.id}`
        : "/api/admin/categories";
      const method = editing ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (res.ok) {
        setShowForm(false);
        fetchCategories();
      }
    } catch (e) {
      console.error(e);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Delete this category? Projects in this category will become uncategorized.")) return;

    try {
      await fetch(`/api/admin/categories/${id}`, { method: "DELETE" });
      setCategoriesList(categoriesList.filter((c) => c.id !== id));
    } catch (e) {
      console.error(e);
    }
  };

  const getIconEmoji = (icon: string) => {
    const opt = iconOptions.find((o) => o.value === icon);
    return opt?.label.split(" ")[0] || "📁";
  };

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-text-primary">Categories</h1>
            <p className="text-text-muted mt-1">
              Manage project categories
            </p>
          </div>
          <button
            onClick={() => openForm()}
            className="px-4 py-2.5 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2 text-sm"
          >
            <PlusIcon size={16} />
            Add Category
          </button>
        </div>

        {/* Categories grid */}
        {loading ? (
          <div className="py-20 text-center">
            <SpinnerIcon size={40} className="text-primary mx-auto" />
          </div>
        ) : categoriesList.length === 0 ? (
          <div className="glass rounded-xl p-12 text-center">
            <FolderIcon size={48} className="text-text-muted mx-auto mb-4" />
            <p className="text-text-muted text-lg mb-4">No categories yet</p>
            <button
              onClick={() => openForm()}
              className="inline-flex items-center gap-1 text-primary-light hover:text-accent"
            >
              <PlusIcon size={14} /> Add your first category
            </button>
          </div>
        ) : (
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {categoriesList.map((cat) => (
              <div
                key={cat.id}
                className="glass rounded-xl p-5 group relative overflow-hidden"
              >
                {/* Color bar */}
                <div
                  className="absolute top-0 left-0 right-0 h-1"
                  style={{ backgroundColor: cat.color || "#6366f1" }}
                />

                <div className="flex items-center gap-3 mb-3">
                  <div
                    className="w-10 h-10 rounded-lg flex items-center justify-center text-xl"
                    style={{ backgroundColor: `${cat.color}20` }}
                  >
                    {getIconEmoji(cat.icon || "globe")}
                  </div>
                  <div>
                    <h3 className="font-bold text-text-primary">{cat.name}</h3>
                    <p className="text-xs text-text-muted">/{cat.slug}</p>
                  </div>
                </div>

                {/* Actions */}
                <div className="flex items-center gap-2 pt-3 border-t border-border opacity-0 group-hover:opacity-100 transition-opacity">
                  <button
                    onClick={() => openForm(cat)}
                    className="flex-1 py-1.5 text-xs font-medium text-text-secondary hover:text-primary-light rounded-lg hover:bg-white/5 transition-colors flex items-center justify-center gap-1"
                  >
                    <EditIcon size={12} /> Edit
                  </button>
                  <button
                    onClick={() => handleDelete(cat.id)}
                    className="flex-1 py-1.5 text-xs font-medium text-text-secondary hover:text-danger rounded-lg hover:bg-danger/10 transition-colors flex items-center justify-center gap-1"
                  >
                    <TrashIcon size={12} /> Delete
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Form Modal */}
        {showForm && (
          <div
            className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
            onClick={(e) => {
              if (e.target === e.currentTarget) setShowForm(false);
            }}
          >
            <div className="bg-surface-card rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto border border-border">
              <div className="sticky top-0 bg-surface-card border-b border-border p-6 flex items-center justify-between">
                <h2 className="text-lg font-bold text-text-primary">
                  {editing ? "Edit Category" : "Add Category"}
                </h2>
                <button
                  onClick={() => setShowForm(false)}
                  className="p-2 text-text-muted hover:text-text-primary rounded-lg"
                >
                  <XIcon size={18} />
                </button>
              </div>

              <form onSubmit={handleSave} className="p-6 space-y-5">
                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Category Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.name}
                    onChange={(e) => handleNameChange(e.target.value)}
                    placeholder="e.g., Website, Web App, Design"
                    className="w-full"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Slug
                  </label>
                  <input
                    type="text"
                    value={formData.slug}
                    onChange={(e) =>
                      setFormData({ ...formData, slug: e.target.value })
                    }
                    placeholder="category-slug"
                    className="w-full font-mono text-sm"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Icon
                  </label>
                  <select
                    value={formData.icon}
                    onChange={(e) =>
                      setFormData({ ...formData, icon: e.target.value })
                    }
                    className="w-full"
                  >
                    {iconOptions.map((opt) => (
                      <option key={opt.value} value={opt.value}>
                        {opt.label}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Color
                  </label>
                  <div className="flex items-center gap-2">
                    <input
                      type="color"
                      value={formData.color}
                      onChange={(e) =>
                        setFormData({ ...formData, color: e.target.value })
                      }
                      className="w-10 h-10 rounded-lg cursor-pointer"
                    />
                    <div className="flex flex-wrap gap-1 flex-1">
                      {colorOptions.map((opt) => (
                        <button
                          key={opt.value}
                          type="button"
                          onClick={() =>
                            setFormData({ ...formData, color: opt.value })
                          }
                          className={`w-7 h-7 rounded-lg transition-transform ${
                            formData.color === opt.value
                              ? "scale-110 ring-2 ring-white"
                              : "hover:scale-105"
                          }`}
                          style={{ backgroundColor: opt.value }}
                          title={opt.label}
                        />
                      ))}
                    </div>
                  </div>
                </div>

                <div className="flex justify-end gap-3 pt-4 border-t border-border">
                  <button
                    type="button"
                    onClick={() => setShowForm(false)}
                    className="px-5 py-2.5 border border-border text-text-secondary rounded-xl hover:bg-white/5 transition-colors text-sm"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={saving}
                    className="px-5 py-2.5 bg-primary text-white font-semibold rounded-xl hover:bg-primary-dark transition-colors flex items-center gap-2 text-sm disabled:opacity-50"
                  >
                    {saving ? (
                      <>
                        <SpinnerIcon size={16} />
                        Saving...
                      </>
                    ) : (
                      <>
                        <CheckIcon size={16} />
                        {editing ? "Update" : "Create"}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </AdminLayout>
  );
}