'use client';

// CategoryManager. Local state mirrors the server list. After every
// mutation we refresh the route so the list stays in sync without us
// having to merge state by hand. Inline editing is kept simple to
// match the planning doc's "fast and easy for internal use" goal.

import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { Button } from '@/components/ui/Button';

interface Row {
  id: number;
  name: string;
  slug: string;
  isActive: boolean;
  sortOrder: number;
  questionCount: number;
}

export function CategoryManager({ initial }: { initial: Row[] }) {
  const router = useRouter();
  const [rows, setRows] = useState<Row[]>(initial);
  const [newName, setNewName] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editName, setEditName] = useState('');

  async function addCategory() {
    setError(null);
    if (!newName.trim()) return;
    setBusy(true);
    const res = await fetch('/api/categories/admin', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: newName.trim() }),
    });
    const json = await res.json();
    setBusy(false);
    if (!res.ok || !json.ok) { setError(json.error || 'Failed to add'); return; }
    setNewName('');
    router.refresh();
  }

  async function patch(id: number, body: Record<string, unknown>) {
    setError(null);
    setBusy(true);
    const res = await fetch(`/api/categories/admin/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    const json = await res.json();
    setBusy(false);
    if (!res.ok || !json.ok) { setError(json.error || 'Update failed'); return; }
    router.refresh();
  }

  async function deactivate(id: number) {
    if (!confirm('Deactivate this category? Existing questions stay searchable, but employees will not be able to choose this category for new questions.')) return;
    setBusy(true);
    const res = await fetch(`/api/categories/admin/${id}`, { method: 'DELETE' });
    const json = await res.json();
    setBusy(false);
    if (!res.ok || !json.ok) { setError(json.error || 'Failed'); return; }
    router.refresh();
  }

  function startEdit(row: Row) {
    setEditingId(row.id);
    setEditName(row.name);
  }

  async function saveEdit(id: number) {
    if (!editName.trim()) return;
    await patch(id, { name: editName.trim() });
    setEditingId(null);
  }

  return (
    <div className="space-y-6">
      <div className="card p-4">
        <label className="label">Add a new category</label>
        <div className="flex gap-2">
          <input
            className="input flex-1"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            placeholder="e.g. Mobility Aids"
          />
          <Button onClick={addCategory} disabled={busy || !newName.trim()}>
            Add
          </Button>
        </div>
      </div>

      {error ? (
        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700">{error}</div>
      ) : null}

      <div className="card overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 text-left text-xs uppercase tracking-wide text-gray-500">
            <tr>
              <th className="px-4 py-3">Name</th>
              <th className="px-4 py-3">Slug</th>
              <th className="px-4 py-3">Questions</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3 text-right">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {rows.map((row) => (
              <tr key={row.id}>
                <td className="px-4 py-3">
                  {editingId === row.id ? (
                    <input
                      className="input"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      autoFocus
                    />
                  ) : (
                    <span className="font-medium text-gray-900">{row.name}</span>
                  )}
                </td>
                <td className="px-4 py-3 text-gray-500">{row.slug}</td>
                <td className="px-4 py-3 text-gray-700">{row.questionCount}</td>
                <td className="px-4 py-3">
                  {row.isActive ? (
                    <span className="rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
                      Active
                    </span>
                  ) : (
                    <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-200">
                      Inactive
                    </span>
                  )}
                </td>
                <td className="px-4 py-3 text-right">
                  {editingId === row.id ? (
                    <div className="flex justify-end gap-2">
                      <Button size="sm" variant="secondary" onClick={() => setEditingId(null)}>Cancel</Button>
                      <Button size="sm" onClick={() => saveEdit(row.id)} disabled={busy}>Save</Button>
                    </div>
                  ) : (
                    <div className="flex justify-end gap-2">
                      <Button size="sm" variant="secondary" onClick={() => startEdit(row)}>
                        Rename
                      </Button>
                      {row.isActive ? (
                        <Button size="sm" variant="danger" onClick={() => deactivate(row.id)} disabled={busy}>
                          Deactivate
                        </Button>
                      ) : (
                        <Button
                          size="sm"
                          variant="secondary"
                          onClick={() => patch(row.id, { isActive: true })}
                          disabled={busy}
                        >
                          Reactivate
                        </Button>
                      )}
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}