"use client";

import { useState, useEffect } from "react";
import { GripVertical, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FormSheet } from "@/components/admin/FormSheet";
import { PageHeader } from "@/components/admin/PageHeader";
import { useDragReorder } from "@/hooks/use-drag-reorder";
import {
  type NewsCategory,
  type NewsCategoryFormData,
  getNewsCategories,
  createNewsCategory,
  updateNewsCategory,
  deleteNewsCategory,
  reorderNewsCategories,
} from "@/services/news-categories";
import { toast } from "sonner";
import { useAdminLocale } from "@/hooks/use-admin-locale";

const emptyForm: NewsCategoryFormData = { name: "" };

export default function AdminNewsCategoriesPage() {
  const locale = useAdminLocale();
  const [categories, setCategories] = useState<NewsCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);
  const [editing, setEditing] = useState<NewsCategory | null>(null);
  const [form, setForm] = useState<NewsCategoryFormData>(emptyForm);

  const { onDragStart, onDragEnter, onDragEnd } = useDragReorder(
    categories,
    setCategories,
    (reordered) => {
      const positions = reordered.map((c, i) => ({ id: c.id, sort_order: i }));
      reorderNewsCategories(positions)
        .then(() => toast.success("Order saved."))
        .catch(() => {});
    },
  );

  useEffect(() => {
    getNewsCategories()
      .then(setCategories)
      .catch(() => toast.error("Failed to load categories."))
      .finally(() => setLoading(false));
  }, []);

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setSheetOpen(true);
  };

  const openEdit = (item: NewsCategory) => {
    setEditing(item);
    setForm({ name: item.name });
    setSheetOpen(true);
  };

  const handleSave = async () => {
    if (!form.name.trim()) {
      toast.error("Category name is required.");
      return;
    }
    setSaving(true);
    try {
      if (editing) {
        const updated = await updateNewsCategory(editing.id, { name: { [locale]: form.name } });
        setCategories((prev) => prev.map((c) => (c.id === editing.id ? updated : c)));
        toast.success("Category updated.");
      } else {
        const created = await createNewsCategory(form);
        setCategories((prev) => [...prev, created]);
        toast.success("Category created.");
      }
      setSheetOpen(false);
    } catch {
      // interceptor shows error toast
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (item: NewsCategory) => {
    if (deletingId) return;
    setDeletingId(item.id);
    try {
      await deleteNewsCategory(item.id);
      setCategories((prev) => prev.filter((c) => c.id !== item.id));
      toast.success("Category deleted.");
    } catch {
      // interceptor shows error toast
    } finally {
      setDeletingId(null);
    }
  };

  return (
    <div className="p-6 lg:p-8 max-w-7xl mx-auto">
      <PageHeader
        title="News Categories"
        description="Manage categories used to organise news articles."
        onAdd={openCreate}
        addLabel="New Category"
      />

      {loading ? (
        <div className="space-y-2">
          {Array.from({ length: 5 }).map((_, i) => (
            <Skeleton key={i} className="h-14 w-full rounded-md" />
          ))}
        </div>
      ) : categories.length === 0 ? (
        <div className="text-center py-12 text-sm text-muted-foreground bg-card rounded-lg border">
          No categories yet. Click &quot;New Category&quot; to get started.
        </div>
      ) : (
        <div className="bg-card rounded-lg border overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50">
                <TableHead className="w-8" />
                <TableHead className="text-xs font-semibold uppercase tracking-wider">Name</TableHead>
                <TableHead className="text-xs font-semibold uppercase tracking-wider">Slug</TableHead>
                <TableHead className="text-xs font-semibold uppercase tracking-wider">Created</TableHead>
                <TableHead className="w-12" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {categories.map((cat, index) => (
                <TableRow
                  key={cat.id}
                  draggable
                  onDragStart={() => onDragStart(index)}
                  onDragEnter={() => onDragEnter(index)}
                  onDragOver={(e) => e.preventDefault()}
                  onDragEnd={onDragEnd}
                  className="group cursor-default"
                >
                  <TableCell className="w-8 pr-0">
                    <GripVertical className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-grab" />
                  </TableCell>
                  <TableCell>
                    <span className="font-medium text-sm">{cat.name}</span>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary" className="font-mono text-xs">{cat.slug}</Badge>
                  </TableCell>
                  <TableCell>
                    <span className="text-sm text-muted-foreground">
                      {new Date(cat.created_at).toLocaleDateString("en-GB", {
                        day: "numeric",
                        month: "short",
                        year: "numeric",
                      })}
                    </span>
                  </TableCell>
                  <TableCell className="w-12">
                    <DropdownMenu>
                      <DropdownMenuTrigger className="inline-flex h-8 w-8 items-center justify-center rounded-md opacity-0 transition-opacity group-hover:opacity-100 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none">
                        <MoreHorizontal className="h-4 w-4" />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => openEdit(cat)}>
                          <Pencil className="mr-2 h-3.5 w-3.5" /> Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-destructive"
                          onClick={() => handleDelete(cat)}
                          disabled={deletingId === cat.id}
                        >
                          <Trash2 className="mr-2 h-3.5 w-3.5" /> Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      <FormSheet
        open={sheetOpen}
        onOpenChange={setSheetOpen}
        title={editing ? "Edit Category" : "New Category"}
        description={
          editing
            ? "Update the category name below."
            : "Enter a name for the new news category."
        }
        onSave={handleSave}
        saveLabel={editing ? "Save Changes" : "Create Category"}
        loading={saving}
      >
        <div className="space-y-4">
          <div className="space-y-1.5">
            <Label htmlFor="name">Name *</Label>
            <Input
              id="name"
              value={form.name}
              onChange={(e) => setForm({ name: e.target.value })}
              placeholder="e.g. Company News"
              autoFocus
            />
          </div>
        </div>
      </FormSheet>
    </div>
  );
}