'use client';

import { useCallback, useEffect, useState } from 'react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { api } from '@/lib/api';
import {
  AdminEmpty,
  AdminError,
  AdminLoading,
  AdminTable,
  AdminTd,
  AdminTh,
} from '@/components/admin/admin-ui';

interface CategoryRow {
  id: string;
  name: string;
  slug: string;
  description: string | null;
  icon: string | null;
  isActive: boolean;
  sortOrder: number;
  _count?: { workerSkills: number; jobs: number };
}

export default function AdminCategoriesPage() {
  const [categories, setCategories] = useState<CategoryRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [updating, setUpdating] = useState<string | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [newName, setNewName] = useState('');
  const [newDescription, setNewDescription] = useState('');
  const [creating, setCreating] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const res = await api<{ data: CategoryRow[] }>('/categories?isActive=false&limit=100');
      setCategories(res.data);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load categories');
    } finally {
      setLoading(false);
    }
  }, []);

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

  async function toggleActive(cat: CategoryRow) {
    setUpdating(cat.id);
    try {
      const res = await api<{ data: CategoryRow }>(`/categories/${cat.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ isActive: !cat.isActive }),
      });
      setCategories((prev) => prev.map((c) => (c.id === cat.id ? res.data : c)));
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Update failed');
    } finally {
      setUpdating(null);
    }
  }

  async function createCategory(e: React.FormEvent) {
    e.preventDefault();
    if (!newName.trim()) return;
    setCreating(true);
    try {
      const res = await api<{ data: CategoryRow }>('/categories', {
        method: 'POST',
        body: JSON.stringify({ name: newName.trim(), description: newDescription.trim() || undefined }),
      });
      setCategories((prev) => [...prev, res.data].sort((a, b) => a.sortOrder - b.sortOrder));
      setNewName('');
      setNewDescription('');
      setShowForm(false);
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Create failed');
    } finally {
      setCreating(false);
    }
  }

  return (
    <DashboardLayout role="admin" title="Categories">
      <div className="flex justify-end mb-4">
        <Button onClick={() => setShowForm((v) => !v)}>
          {showForm ? 'Cancel' : '+ Add Category'}
        </Button>
      </div>

      {showForm && (
        <Card className="mb-6">
          <CardContent className="p-4">
            <form onSubmit={createCategory} className="flex flex-col sm:flex-row gap-3">
              <Input
                placeholder="Category name"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                className="flex-1"
                required
              />
              <Input
                placeholder="Description (optional)"
                value={newDescription}
                onChange={(e) => setNewDescription(e.target.value)}
                className="flex-1"
              />
              <Button type="submit" disabled={creating}>
                {creating ? 'Creating…' : 'Create'}
              </Button>
            </form>
          </CardContent>
        </Card>
      )}

      {loading && <AdminLoading />}
      {!loading && error && <AdminError message={error} />}
      {!loading && !error && categories.length === 0 && (
        <AdminEmpty message="No categories found." />
      )}
      {!loading && !error && categories.length > 0 && (
        <AdminTable>
          <thead>
            <tr>
              <AdminTh>Name</AdminTh>
              <AdminTh>Slug</AdminTh>
              <AdminTh>Workers / Jobs</AdminTh>
              <AdminTh>Status</AdminTh>
              <AdminTh>Actions</AdminTh>
            </tr>
          </thead>
          <tbody>
            {categories.map((cat) => (
              <tr key={cat.id} className="hover:bg-slate-50/50">
                <AdminTd>
                  <p className="font-medium text-slate-900">{cat.name}</p>
                  {cat.description && (
                    <p className="text-xs text-muted line-clamp-1">{cat.description}</p>
                  )}
                </AdminTd>
                <AdminTd>
                  <code className="text-xs bg-slate-100 px-1.5 py-0.5 rounded">{cat.slug}</code>
                </AdminTd>
                <AdminTd>
                  {cat._count?.workerSkills ?? 0} workers · {cat._count?.jobs ?? 0} jobs
                </AdminTd>
                <AdminTd>
                  {cat.isActive ? (
                    <Badge variant="success">Active</Badge>
                  ) : (
                    <Badge variant="secondary">Inactive</Badge>
                  )}
                </AdminTd>
                <AdminTd>
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={updating === cat.id}
                    onClick={() => toggleActive(cat)}
                  >
                    {cat.isActive ? 'Deactivate' : 'Activate'}
                  </Button>
                </AdminTd>
              </tr>
            ))}
          </tbody>
        </AdminTable>
      )}
    </DashboardLayout>
  );
}