'use client';

import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { DataTable } from '@/components/data-table/DataTable';
import type { ToolbarFilterConfig } from '@/components/data-table/DataTableToolbar';
import type { RecruiterPerformanceRow } from './types';

function conversionBadge(rate: number) {
  const cls =
    rate >= 50
      ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
      : rate > 0
        ? 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
        : 'bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400';
  return <span className={`inline-flex px-2 py-0.5 rounded-full text-[10px] font-extrabold ${cls}`}>{rate}%</span>;
}

function uniqueDepartments(rows: RecruiterPerformanceRow[]) {
  const set = new Set<string>();
  rows.forEach((r) => { if (r.department) set.add(r.department); });
  return [...set].sort().map((v) => ({ label: v, value: v }));
}

export default function OverallRecruiterPerformanceTable({ rows }: { rows: RecruiterPerformanceRow[] }) {
  const columns = useMemo<ColumnDef<RecruiterPerformanceRow>[]>(() => [
    {
      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: 'assigned_active_jds', header: 'Active JDs' },
    { accessorKey: 'total_candidates', header: 'Candidates' },
    { accessorKey: 'candidates_in_interview', header: 'In Interview' },
    {
      accessorKey: 'total_hires',
      header: 'Hires',
      cell: ({ getValue }) => {
        const n = getValue() as number;
        return <span className={n > 0 ? 'text-emerald-600 dark:text-emerald-400 font-bold' : ''}>{n}</span>;
      },
    },
    { accessorKey: 'average_score', header: 'Avg Score', cell: ({ getValue }) => (getValue() ? `${getValue()}%` : '—') },
    { accessorKey: 'conversion_rate', header: 'Conversion', cell: ({ getValue }) => conversionBadge(getValue() as number) },
    // 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: uniqueDepartments(rows) },
  ], [rows]);

  return (
    <DataTable
      columns={columns}
      data={rows}
      compact
      collapsibleFilters
      enableColumnVisibility
      filters={filters}
      exportConfig={{ fileName: 'recruiter_performance' }}
      initialColumnVisibility={{ email: false }}
      searchPlaceholder="Search recruiters…"
      emptyStateTitle="No recruiter activity on active jobs yet"
      emptyStateDescription="Assign recruiters to active JDs to see performance here."
    />
  );
}