'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Pencil, Trash2, Plus } from 'lucide-react';
import { toast } from 'sonner';
import { saveCategory, removeCategory } from '@/app/admin/categories/actions';
import type { Category } from '@/types';

export function CategoriesClient({ initialCategories }: { initialCategories: Category[] }) {
  const router = useRouter();
  const categories = initialCategories;
  const [editing, setEditing] = useState<Category | null>(null);
  const [status, setStatus] = useState<{ error?: string; success?: boolean } | null>(null);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const result = await saveCategory(formData);
    setStatus(result);
    if (result?.success) {
      setEditing(null);
      router.refresh();
    }
  }

  async function handleDelete(id: string) {
    if (!confirm('Delete this category?')) return;
    const formData = new FormData();
    formData.set('id', id);
    const result = await removeCategory(formData);
    if (result?.error) {
      toast.error(result.error);
    } else {
      toast.success('Category deleted');
      router.refresh();
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Categories</h1>
      </div>

      <form
        key={editing?.id || 'new'}
        onSubmit={handleSubmit}
        className="rounded-xl border bg-card p-4"
      >
        {status?.error && (
          <p className="mb-4 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
            {status.error}
          </p>
        )}
        {status?.success && (
          <p className="mb-4 rounded-lg bg-green-500/10 p-3 text-sm text-green-600">
            Saved
          </p>
        )}

        <input type="hidden" name="id" value={editing?.id || ''} />

        <div className="grid gap-4 md:grid-cols-3">
          <div>
            <label className="text-sm font-medium">Name</label>
            <input
              name="name"
              required
              defaultValue={editing?.name || ''}
              className="mt-1 w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring"
            />
          </div>
          <div>
            <label className="text-sm font-medium">Description</label>
            <input
              name="description"
              defaultValue={editing?.description || ''}
              className="mt-1 w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring"
            />
          </div>
          <div className="flex items-end gap-2">
            <button
              type="submit"
              className="inline-flex items-center gap-1 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
            >
              <Plus className="h-4 w-4" />
              {editing ? 'Update' : 'Add'} category
            </button>
            {editing && (
              <button
                type="button"
                onClick={() => setEditing(null)}
                className="rounded-lg border px-4 py-2 text-sm"
              >
                Cancel
              </button>
            )}
          </div>
        </div>
      </form>

      <div className="overflow-hidden rounded-xl border bg-card">
        <table className="w-full text-left text-sm">
          <thead className="border-b bg-muted/50 text-muted-foreground">
            <tr>
              <th className="px-4 py-3 font-medium">Name</th>
              <th className="px-4 py-3 font-medium">Slug</th>
              <th className="px-4 py-3 font-medium">Description</th>
              <th className="px-4 py-3 font-medium">Products</th>
              <th className="px-4 py-3 font-medium"></th>
            </tr>
          </thead>
          <tbody>
            {categories.map((c) => (
              <tr key={c.id} className="border-b last:border-0">
                <td className="px-4 py-3">{c.name}</td>
                <td className="px-4 py-3 font-mono text-muted-foreground">
                  {c.slug}
                </td>
                <td className="px-4 py-3 text-muted-foreground">
                  {c.description || '-'}
                </td>
                <td className="px-4 py-3">{c.productCount ?? 0}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => setEditing(c)}
                      className="rounded-md p-2 hover:bg-muted"
                    >
                      <Pencil className="h-4 w-4" />
                    </button>
                    <button
                      onClick={() => handleDelete(c.id)}
                      className="rounded-md p-2 text-destructive hover:bg-destructive/10"
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}