'use client';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { useAuth } from '@/lib/auth-context';
import { IconTrash } from '@/components/ui';
import { FloatInput } from '@/components/float';
import { validate, v } from '@/lib/validation';
import { useDialog } from '@/components/dialog';

function useNameForm() {
  const [name, setName] = useState('');
  const [err, setErr] = useState('');
  const check = (min = 2) => {
    const e = v.minLen(name, min, 'Name');
    setErr(e ?? '');
    return !e;
  };
  const reset = () => { setName(''); setErr(''); };
  return { name, setName, err, check, reset };
}

export function DeptSection() {
  const { confirmDialog, notify } = useDialog();
  const q = useQuery({ queryKey: ['departments'], queryFn: () => api.get('/api/v1/departments') });
  const f = useNameForm();
  const [search, setSearch] = useState('');
  const { user } = useAuth();
  const canWrite = user?.role === 'admin' || user?.role === 'super_admin';
  const needle = search.trim().toLowerCase();
  const rows: any[] = (q.data ?? []).filter((d: any) => !needle || String(d.name ?? '').toLowerCase().includes(needle));
  return (
    <div className="card space-y-2">
      <div className="flex flex-wrap gap-2 items-center">
        <h2 className="font-medium mr-auto">Departments (this organisation)</h2>
        <input className="input max-w-52 text-sm" type="search" placeholder="Search departments" aria-label="Search departments" value={search} onChange={(e) => setSearch(e.target.value)} />
      </div>
      {canWrite && (
        <form className="space-y-1" noValidate onSubmit={async (e) => {
          e.preventDefault();
          if (!f.check()) return;
          await api.post('/api/v1/departments', { name: f.name.trim() });
          f.reset(); q.refetch();
        }}>
          <div className="flex gap-2">
            <div className="flex-1"><FloatInput label="New department" id="dept-name" error={f.err} value={f.name} onChange={(e) => f.setName(e.target.value)} /></div>
            <button className="btn-primary text-sm btn-tall">Add</button>
          </div>
        </form>
      )}
      {rows.map((d: any) => (
        <div key={d.id} className="flex items-center text-sm border-t py-1">
          <span>{d.name}</span>
          {canWrite && <button type="button" className="btn-plain ml-auto" aria-label={`Delete ${d.name}`} title="Delete" onClick={async () => {
            if (!await confirmDialog(`Delete ${d.name}?`, { title: 'Delete department' })) return;
            try { await api.del(`/api/v1/departments/${d.id}`); q.refetch(); }
            catch (e: any) { notify(e.message, { tone: 'error' }); }
          }}><IconTrash /></button>}
        </div>
      ))}
      {!rows.length && <p className="text-sm text-slate-500">{q.isLoading ? 'Loading…' : 'No departments found.'}</p>}
    </div>
  );
}

export function CatSection() {
  const { confirmDialog, notify } = useDialog();
  const [type, setType] = useState('action');
  const q = useQuery({ queryKey: ['categories', type], queryFn: () => api.get(`/api/v1/categories?type=${type}`) });
  const f = useNameForm();
  const [search, setSearch] = useState('');
  const { user } = useAuth();
  const canWrite = user?.role !== 'employee';
  const canDelete = user?.role === 'admin' || user?.role === 'super_admin';
  const needle = search.trim().toLowerCase();
  const rows: any[] = (q.data ?? []).filter((c: any) => !needle || String(c.name ?? '').toLowerCase().includes(needle));
  return (
    <div className="card space-y-2">
      <div className="flex flex-wrap items-center gap-2">
        <h2 className="font-medium mr-auto">Categories (this organisation)</h2>
        <input className="input max-w-52 text-sm" type="search" placeholder="Search categories" aria-label="Search categories" value={search} onChange={(e) => setSearch(e.target.value)} />
        <select className="input max-w-40 text-sm" aria-label="Category type" value={type} onChange={(e) => setType(e.target.value)}>
          <option value="action">Action</option><option value="sample">Sample</option>
        </select>
      </div>
      {canWrite && (
        <form className="space-y-1" noValidate onSubmit={async (e) => {
          e.preventDefault();
          if (!f.check()) return;
          await api.post('/api/v1/categories', { name: f.name.trim(), type });
          f.reset(); q.refetch();
        }}>
          <div className="flex gap-2">
            <div className="flex-1"><FloatInput label="New category" id="cat-name" error={f.err} value={f.name} onChange={(e) => f.setName(e.target.value)} /></div>
            <button className="btn-primary text-sm btn-tall">Add</button>
          </div>
        </form>
      )}
      {rows.map((c: any) => (
        <div key={c.id} className="flex items-center text-sm border-t py-1">
          <span>{c.name}</span>
          {canDelete && <button type="button" className="btn-plain ml-auto" aria-label={`Delete ${c.name}`} title="Delete" onClick={async () => {
            if (!await confirmDialog(`Delete ${c.name}?`, { title: 'Delete category' })) return;
            try { await api.del(`/api/v1/categories/${c.id}`); q.refetch(); }
            catch (e: any) { notify(e.message, { tone: 'error' }); }
          }}><IconTrash /></button>}
        </div>
      ))}
      {!rows.length && <p className="text-sm text-slate-500">{q.isLoading ? 'Loading…' : 'No categories found.'}</p>}
    </div>
  );
}