'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { api } from '@/lib/api';
import { toast } from 'react-toastify';
import { DataTable } from '@/components/data-table/DataTable';
import type { ToolbarFilterConfig } from '@/components/data-table/DataTableToolbar';
import { formatDateTime } from '@/lib/dates';

/** One recruiter's work row — matches the /dashboard/recruiter-work/ payload. */
export interface RecruiterWorkRow {
  recruiter_id: number;
  recruiter_name: string;
  email: string;
  employee_id: string;
  department: string;
  total_assigned_jds: number;
  active_jds: number;
  closed_jds: number;
  total_candidates: number;
  candidates_screened: number;
  candidates_shortlisted: number;
  candidates_rejected: number;
  candidates_offered: number;
  candidates_joined: number;
  pending_tasks: number;
  current_workload: number;
  last_activity: string | null;
  status: string;
}

function num(v: unknown) {
  const n = v as number;
  return <span className={n > 0 ? 'font-semibold text-slate-800 dark:text-slate-100' : 'text-slate-400 dark:text-slate-500'}>{n}</span>;
}

function uniqueValues(rows: RecruiterWorkRow[], key: 'department' | 'status') {
  const set = new Set<string>();
  rows.forEach((r) => { if (r[key]) set.add(r[key]); });
  return [...set].sort().map((v) => ({ label: v, value: v }));
}

export default function RecruiterWorkTable({ title = 'Recruiter-wise Work' }: { title?: string }) {
  const [rows, setRows] = useState<RecruiterWorkRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');

  const load = useCallback(() => {
    setLoading(true);
    const params = new URLSearchParams();
    if (dateFrom) params.set('date_from', dateFrom);
    if (dateTo) params.set('date_to', dateTo);
    const qs = params.toString();
    api.get(`/dashboard/recruiter-work/${qs ? `?${qs}` : ''}`)
      .then((res: any) => {
        const list = ((res?.data ?? res)?.recruiters ?? []) as RecruiterWorkRow[];
        setRows(list);
      })
      .catch((err: any) => {
        // 403 → the caller isn't permitted; keep the table empty and quiet.
        if (err?.status !== 403 && err?.response?.status !== 403) {
          toast.error(err?.message || 'Failed to load recruiter work.');
        }
        setRows([]);
      })
      .finally(() => setLoading(false));
  }, [dateFrom, dateTo]);

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

  const columns = useMemo<ColumnDef<RecruiterWorkRow>[]>(() => [
    {
      accessorKey: 'recruiter_name',
      header: 'Recruiter',
      cell: ({ row }) => (
        <span className="flex items-center gap-2.5">
          <span className="w-7 h-7 rounded-full bg-indigo-100 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300 flex items-center justify-center text-[9px] font-extrabold uppercase shrink-0">
            {row.original.recruiter_name.slice(0, 2)}
          </span>
          <span>
            <span className="block font-bold text-slate-800 dark:text-white">{row.original.recruiter_name}</span>
            <span className="block text-[10px] text-slate-400 dark:text-slate-500 font-medium">{row.original.email}</span>
          </span>
        </span>
      ),
    },
    { accessorKey: 'employee_id', header: 'Employee ID', cell: ({ getValue }) => (getValue() as string) || '—' },
    { accessorKey: 'department', header: 'Department', filterFn: 'equalsString', cell: ({ getValue }) => (getValue() as string) || '—' },
    { accessorKey: 'total_assigned_jds', header: 'Assigned JDs', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'active_jds', header: 'Active JDs', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'closed_jds', header: 'Closed JDs', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'total_candidates', header: 'Candidates Added', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'candidates_screened', header: 'Screened', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'candidates_shortlisted', header: 'Shortlisted', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'candidates_rejected', header: 'Rejected', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'candidates_offered', header: 'Offered', cell: ({ getValue }) => num(getValue()) },
    {
      accessorKey: 'candidates_joined',
      header: 'Joined',
      cell: ({ getValue }) => {
        const n = getValue() as number;
        return <span className={n > 0 ? 'text-emerald-600 dark:text-emerald-400 font-bold' : 'text-slate-400 dark:text-slate-500'}>{n}</span>;
      },
    },
    { accessorKey: 'pending_tasks', header: 'Pending Tasks', cell: ({ getValue }) => num(getValue()) },
    { accessorKey: 'current_workload', header: 'Workload', cell: ({ getValue }) => num(getValue()) },
    {
      accessorKey: 'last_activity',
      header: 'Last Activity',
      cell: ({ getValue }) => {
        const v = getValue() as string | null;
        return <span className="text-slate-500 dark:text-slate-400">{v ? formatDateTime(v) : '—'}</span>;
      },
    },
    {
      accessorKey: 'status',
      header: 'Status',
      filterFn: 'equalsString',
      cell: ({ getValue }) => {
        const s = getValue() as string;
        const active = s === 'Active';
        return (
          <span className={`inline-flex px-2 py-0.5 rounded-full text-[10px] font-bold ${active
            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
            : 'bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400'}`}>{s}</span>
        );
      },
    },
    // Hidden — enables global search by email without a dedicated column.
    { accessorKey: 'email', header: 'Email', cell: ({ getValue }) => (getValue() as string) || '—' },
  ], []);

  const filters = useMemo<ToolbarFilterConfig[]>(() => [
    { columnId: 'department', title: 'Department', options: uniqueValues(rows, 'department') },
    { columnId: 'status', title: 'Status', options: uniqueValues(rows, 'status') },
  ], [rows]);

  return (
    <div id="recruiter-work-section" className="space-y-2">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <h4 className="text-xs font-bold text-[#495057] dark:text-white uppercase tracking-wider">{title}</h4>
        {/* Date-range filter — narrows the candidate metrics (server-side). */}
        <div className="flex items-end gap-2">
          <label className="flex flex-col text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
            From
            <input
              type="date"
              value={dateFrom}
              max={dateTo || undefined}
              onChange={(e) => setDateFrom(e.target.value)}
              className="mt-1 text-xs px-2 py-1.5 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-800 dark:text-white focus:outline-none focus:border-indigo-500"
            />
          </label>
          <label className="flex flex-col text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
            To
            <input
              type="date"
              value={dateTo}
              min={dateFrom || undefined}
              onChange={(e) => setDateTo(e.target.value)}
              className="mt-1 text-xs px-2 py-1.5 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-800 dark:text-white focus:outline-none focus:border-indigo-500"
            />
          </label>
          {(dateFrom || dateTo) && (
            <button
              type="button"
              onClick={() => { setDateFrom(''); setDateTo(''); }}
              className="text-xs px-2.5 py-1.5 border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition"
            >
              Clear
            </button>
          )}
        </div>
      </div>
      <DataTable
        columns={columns}
        data={rows}
        loading={loading}
        compact
        collapsibleFilters
        enableColumnVisibility
        filters={filters}
        exportConfig={{ fileName: 'recruiter_work' }}
        initialColumnVisibility={{ email: false }}
        searchPlaceholder="Search recruiters…"
        emptyStateTitle="No recruiter work to show"
        emptyStateDescription="Recruiters assigned to your job descriptions will appear here."
      />
    </div>
  );
}