'use client';
import { useId } from 'react';
import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { capitalizeFirst as cap } from '@/lib/format';
import { FloatSelect } from '@/components/float';

/** Dropdown of assignable people: "Name · code · department". */
export function EmployeePicker({ value, onChange, allowNone = true, label }: {
  value: number | null | undefined; onChange: (id: number | null) => void;
  allowNone?: boolean; label?: string;
}) {
  const q = useQuery({ queryKey: ['employees'], queryFn: () => api.get('/api/v1/employees?limit=500'), staleTime: 60000 });
  const list: any[] = q.data ?? [];
  const text = label ?? 'Assignee';
  const id = useId();
  return (
    <FloatSelect label={text} id={id} value={value ?? ''} onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}>
      {allowNone && <option value="">Unassigned</option>}
      {list.map((u: any) => (
        <option key={u.id} value={u.id}>
          {cap(u.name)}{u.employee_code ? ` · ${u.employee_code}` : ''}{u.department_name ? ` · ${cap(u.department_name)}` : ''}
        </option>
      ))}
    </FloatSelect>
  );
}

/** Multi-select checkboxes of employees (for team membership). Optionally limited to one department. */
export function EmployeeMultiPicker({ values, onChange, departmentId }: { values: number[]; onChange: (ids: number[]) => void; departmentId?: number | null }) {
  const q = useQuery({ queryKey: ['employees'], queryFn: () => api.get('/api/v1/employees?limit=500'), staleTime: 60000 });
  const all: any[] = q.data ?? [];
  const list = departmentId ? all.filter((u: any) => Number(u.department_id) === Number(departmentId)) : all;
  const toggle = (id: number) => onChange(values.includes(id) ? values.filter((v) => v !== id) : [...values, id]);
  return (
    <div className="border rounded-lg p-2 max-h-44 overflow-y-auto grid md:grid-cols-2 gap-1">
      {list.map((u: any) => (
        <label key={u.id} className="text-sm flex gap-2 items-center hover:bg-slate-50 px-1 rounded">
          <input type="checkbox" checked={values.includes(u.id)} onChange={() => toggle(u.id)} />
          <span>{cap(u.name)}<span className="text-slate-500 text-xs"> {u.employee_code ?? ''} · {cap(u.department_name ?? '')}</span></span>
        </label>
      ))}
      {!list.length && <p className="text-xs text-slate-500">No employees found.</p>}
    </div>
  );
}

/** Department dropdown (org-scoped). */
export function DepartmentPicker({ value, onChange, allowNone = true, noneLabel }: {
  value: number | null | undefined; onChange: (id: number | null) => void; allowNone?: boolean; noneLabel?: string;
}) {
  const q = useQuery({ queryKey: ['departments'], queryFn: () => api.get('/api/v1/departments'), staleTime: 60000 });
  const list: any[] = q.data ?? [];
  const id = useId();
  return (
    <FloatSelect label="Department" id={id} value={value ?? ''} onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}>
      {allowNone && <option value="">{noneLabel ?? 'No department'}</option>}
      {list.map((d: any) => <option key={d.id} value={d.id}>{cap(d.name)}</option>)}
    </FloatSelect>
  );
}

/** Category dropdown (org-scoped, optionally filtered by type). */
export function CategoryPicker({ value, onChange, type, allowNone = true }: {
  value: number | null | undefined; onChange: (id: number | null) => void;
  type?: string; allowNone?: boolean;
}) {
  const q = useQuery({
    queryKey: ['categories', type ?? 'all'],
    queryFn: () => api.get(`/api/v1/categories${type ? `?type=${type}` : ''}`),
    staleTime: 60000,
  });
  const list: any[] = q.data ?? [];
  const id = useId();
  return (
    <FloatSelect label="Category" id={id} value={value ?? ''} onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}>
      {allowNone && <option value="">Select category</option>}
      {list.map((c: any) => <option key={c.id} value={c.id}>{cap(c.name)}</option>)}
    </FloatSelect>
  );
}

/** Testing-team dropdown (org-scoped). */
export function TeamPicker({ value, onChange, allowNone = true }: {
  value: number | null | undefined; onChange: (id: number | null) => void; allowNone?: boolean;
}) {
  const q = useQuery({ queryKey: ['teams'], queryFn: () => api.get('/api/v1/teams'), staleTime: 30000 });
  const list: any[] = q.data ?? [];
  const id = useId();
  return (
    <FloatSelect label="QC team" id={id} value={value ?? ''} onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}>
      {allowNone && <option value="">No team</option>}
      {list.map((t: any) => <option key={t.id} value={t.id}>{cap(t.name)}</option>)}
    </FloatSelect>
  );
}