import { createFileRoute } from "@tanstack/react-router";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { useState } from "react";
import { Plus, Pencil, Trash2, X } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/categories")({ component: CategoriesAdmin });

type Cat = { id?: string; slug: string; name: string; description: string | null; sort_order: number };
const empty: Cat = { slug: "", name: "", description: "", sort_order: 0 };

function CategoriesAdmin() {
  const qc = useQueryClient();
  const [editing, setEditing] = useState<Cat | null>(null);
  const { data } = useQuery({
    queryKey: ["admin-categories"],
    queryFn: async () => (await supabase.from("service_categories").select("*").order("sort_order")).data as Cat[],
  });
  const save = useMutation({
    mutationFn: async (c: Cat) => {
      const payload = { ...c, description: c.description || null };
      const { error } = c.id
        ? await supabase.from("service_categories").update(payload).eq("id", c.id)
        : await supabase.from("service_categories").insert(payload);
      if (error) throw error;
    },
    onSuccess: () => { qc.invalidateQueries({ queryKey: ["admin-categories"] }); qc.invalidateQueries({ queryKey: ["catalog"] }); setEditing(null); toast.success("Enregistré"); },
    onError: (e: any) => toast.error(e.message),
  });
  const del = useMutation({
    mutationFn: async (id: string) => { const { error } = await supabase.from("service_categories").delete().eq("id", id); if (error) throw error; },
    onSuccess: () => { qc.invalidateQueries({ queryKey: ["admin-categories"] }); toast.success("Supprimé"); },
  });

  return (
    <div className="p-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-display text-3xl font-bold">Catégories</h1>
          <p className="text-sm text-muted-foreground mt-1">Organisez vos prestations.</p>
        </div>
        <button onClick={() => setEditing({ ...empty })} className="inline-flex items-center gap-2 rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-glow">
          <Plus className="size-4" /> Nouvelle catégorie
        </button>
      </div>
      <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {data?.map((c) => (
          <div key={c.id} className="rounded-2xl border border-border bg-card/40 p-6">
            <div className="flex items-start justify-between">
              <div>
                <h3 className="font-display text-lg font-bold">{c.name}</h3>
                <code className="text-xs text-primary">{c.slug}</code>
              </div>
              <div className="flex gap-1">
                <button onClick={() => setEditing(c)} className="p-2 rounded hover:bg-secondary"><Pencil className="size-4" /></button>
                <button onClick={() => confirm(`Supprimer "${c.name}" ?`) && del.mutate(c.id!)} className="p-2 rounded hover:bg-destructive/20 text-destructive"><Trash2 className="size-4" /></button>
              </div>
            </div>
            {c.description && <p className="mt-3 text-sm text-muted-foreground">{c.description}</p>}
          </div>
        ))}
      </div>
      {editing && <Modal cat={editing} onCancel={() => setEditing(null)} onSave={(c) => save.mutate(c)} saving={save.isPending} />}
    </div>
  );
}

function Modal({ cat, onCancel, onSave, saving }: { cat: Cat; onCancel: () => void; onSave: (c: Cat) => void; saving: boolean }) {
  const [form, setForm] = useState<Cat>(cat);
  const inp = "mt-1.5 w-full rounded-lg bg-input/60 border border-border px-3 py-2 text-sm focus:outline-none focus:border-primary";
  return (
    <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur grid place-items-center p-4">
      <form onSubmit={(e) => { e.preventDefault(); onSave(form); }} className="w-full max-w-md bg-card border border-border rounded-2xl p-8 shadow-elegant">
        <div className="flex items-center justify-between mb-6">
          <h2 className="font-display text-2xl font-bold">{form.id ? "Modifier" : "Nouvelle"} catégorie</h2>
          <button type="button" onClick={onCancel} className="p-2 rounded hover:bg-secondary"><X className="size-4" /></button>
        </div>
        <div className="space-y-4">
          <label className="block"><span className="text-xs font-medium text-muted-foreground">Nom</span><input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className={inp} /></label>
          <label className="block"><span className="text-xs font-medium text-muted-foreground">Slug</span><input required pattern="[a-z0-9\-]+" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inp} /></label>
          <label className="block"><span className="text-xs font-medium text-muted-foreground">Description</span><textarea rows={3} value={form.description ?? ""} onChange={(e) => setForm({ ...form, description: e.target.value })} className={inp} /></label>
          <label className="block"><span className="text-xs font-medium text-muted-foreground">Ordre</span><input type="number" value={form.sort_order} onChange={(e) => setForm({ ...form, sort_order: parseInt(e.target.value) || 0 })} className={inp} /></label>
        </div>
        <div className="mt-8 flex justify-end gap-3">
          <button type="button" onClick={onCancel} className="px-5 py-2 rounded-full text-sm border border-border">Annuler</button>
          <button disabled={saving} type="submit" className="px-5 py-2 rounded-full text-sm bg-primary text-primary-foreground shadow-glow disabled:opacity-50">Enregistrer</button>
        </div>
      </form>
    </div>
  );
}