'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { DataTable } from '@/components/data-table/DataTable';
import SearchableSelect from '@/components/SearchableSelect';
import RecruiterDetailsModal from '@/components/RecruiterDetailsModal';
import BackToDashboard from '@/components/BackToDashboard';
import { formatDate } from '@/lib/dates';

interface RecruiterRow {
  id: number;
  employee_id: string;
  full_name: string;
  email: string;
  phone: string;
  department: string;
  total_assigned_jds: number;
  total_active_jds: number;
  total_candidates_submitted: number;
  status: string;
  created_date: string | null;
}

// Utility function to export to CSV
function exportToCsv(filename: string, headers: string[], rows: (string | number)[][]) {
  const content = [
    headers.map(h => `"${String(h).replace(/"/g, '""')}"`).join(','),
    ...rows.map(row => row.map(cell => `"${String(cell ?? '').replace(/"/g, '""')}"`).join(','))
  ].join('\n');

  const blob = new Blob(['\ufeff' + content], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', filename);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

export default function RecruitersPage() {
  const router = useRouter();
  const { user: me } = useAuth();
  const [recruiters, setRecruiters] = useState<RecruiterRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  // Dashboard drill-down: `?owner=me` (the PM dashboard's "Assigned
  // Recruiters" card) narrows the list server-side to recruiters assigned to
  // a JD created by the current user — same filter the card's count uses,
  // resolved fresh on every fetch.
  const [ownerMe, setOwnerMe] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return new URLSearchParams(window.location.search).get('owner') === 'me';
  });
  const [focusLabel, setFocusLabel] = useState<string>(() => {
    if (typeof window === 'undefined') return '';
    return new URLSearchParams(window.location.search).get('label') || '';
  });

  // Details Modal
  const [detailRecruiterId, setDetailRecruiterId] = useState<number | null>(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);

  const loadRecruiters = useCallback(async () => {
    setLoading(true);
    try {
      const res = await api.get(`/dashboard/total-recruiters/${ownerMe ? '?owner=me' : ''}`) as any;
      const data: RecruiterRow[] = res.data || [];

      // Filter client-side based on search and statusFilter for speed & accuracy
      const filtered = data.filter(r => {
        const matchesSearch = !search.trim() ||
          r.full_name.toLowerCase().includes(search.toLowerCase()) ||
          r.email.toLowerCase().includes(search.toLowerCase()) ||
          (r.employee_id && r.employee_id.toLowerCase().includes(search.toLowerCase()));

        const matchesStatus = !statusFilter ||
          (statusFilter === 'Active' && r.status === 'Active') ||
          (statusFilter === 'Inactive' && r.status === 'Inactive');

        return matchesSearch && matchesStatus;
      });

      setRecruiters(filtered);
    } catch (err) {
      console.error("Failed to load recruiters:", err);
    } finally {
      setLoading(false);
    }
  }, [search, statusFilter, ownerMe]);

  useEffect(() => {
    if (!me) return;
    loadRecruiters().catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [me]);

  useEffect(() => {
    loadRecruiters().catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search, statusFilter, ownerMe]);

  const handleExport = () => {
    const headers = [
      'Employee ID',
      'Recruiter Name',
      'Email',
      'Mobile Number',
      'Department',
      'Total Assigned JDs',
      'Total Active JDs',
      'Total Candidates Submitted',
      'Status',
      'Created Date'
    ];
    const rows = recruiters.map(r => [
      r.employee_id || '—',
      r.full_name || '—',
      r.email,
      r.phone || '—',
      r.department || '—',
      r.total_assigned_jds,
      r.total_active_jds,
      r.total_candidates_submitted,
      r.status,
      r.created_date ? formatDate(r.created_date) : '—'
    ]);
    exportToCsv('Recruiters_List.csv', headers, rows);
  };

  const columns = [
    {
      id: 'srNo',
      header: 'S.No.',
      cell: ({ row, table }: any) => {
        const pageIndex = table.getState().pagination.pageIndex;
        const pageSize = table.getState().pagination.pageSize;
        return <span className="font-semibold text-slate-500 dark:text-slate-400">{pageIndex * pageSize + row.index + 1}</span>;
      },
    },
    {
      accessorKey: 'employee_id',
      header: 'Employee ID',
      cell: ({ row }: any) => <span className="font-semibold text-slate-700 dark:text-slate-350">{row.original.employee_id || '—'}</span>,
    },
    {
      accessorKey: 'full_name',
      header: 'Recruiter Name',
      cell: ({ row }: any) => <span className="font-bold text-slate-900 dark:text-white">{row.original.full_name}</span>,
    },
    {
      accessorKey: 'email',
      header: 'Email',
    },
    {
      accessorKey: 'phone',
      header: 'Mobile Number',
      cell: ({ row }: any) => <span>{row.original.phone || '—'}</span>,
    },
    {
      accessorKey: 'department',
      header: 'Department',
      cell: ({ row }: any) => <span>{row.original.department || '—'}</span>,
    },
    {
      accessorKey: 'total_assigned_jds',
      header: 'Total Assigned JDs',
      cell: ({ row }: any) => <span className="font-bold text-slate-800 dark:text-white">{row.original.total_assigned_jds}</span>,
    },
    {
      accessorKey: 'total_active_jds',
      header: 'Total Active JDs',
      cell: ({ row }: any) => <span className="font-bold text-emerald-600 dark:text-emerald-400">{row.original.total_active_jds}</span>,
    },
    {
      accessorKey: 'total_candidates_submitted',
      header: 'Total Candidates Submitted',
      cell: ({ row }: any) => <span className="font-bold text-slate-800 dark:text-white">{row.original.total_candidates_submitted}</span>,
    },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }: any) => {
        const status = row.original.status;
        return status === 'Active' ? (
          <span className="inline-flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400 font-semibold bg-emerald-50 dark:bg-emerald-950/30 px-2.5 py-0.5 rounded-full">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> Active
          </span>
        ) : (
          <span className="inline-flex items-center gap-1.5 text-xs text-slate-400 font-semibold bg-slate-100 dark:bg-slate-800/50 px-2.5 py-0.5 rounded-full">
            <span className="w-1.5 h-1.5 rounded-full bg-slate-400" /> Inactive
          </span>
        );
      },
    },
    {
      accessorKey: 'created_date',
      header: 'Created Date',
      cell: ({ row }: any) => {
        const d = row.original.created_date;
        return <span>{formatDate(d)}</span>;
      },
    },
    {
      id: 'actions',
      header: () => <div className="text-right">Actions</div>,
      cell: ({ row }: any) => (
        <div className="text-right">
          <button
            onClick={() => {
              setDetailRecruiterId(row.original.id);
              setIsDetailOpen(true);
            }}
            className="bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/40 dark:hover:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 text-xs font-bold px-3 py-1.5 rounded-none transition border border-indigo-200/50 dark:border-indigo-900/40 cursor-pointer"
          >
            View Details
          </button>
        </div>
      ),
    },
  ];

  if (!me) return null;

  return (
    <>
        <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-7xl mx-auto">
          <BackToDashboard />
          
          <div className="flex flex-wrap justify-between items-center gap-3">
            <div>
              <h2 className="text-2xl font-black text-slate-850 dark:text-white">Total Recruiters</h2>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">Overview of all active and inactive recruiters in the ATS system.</p>
            </div>
            <button
              type="button"
              onClick={handleExport}
              className="bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg hover:shadow-emerald-500/20 transition flex items-center gap-2 cursor-pointer"
            >
              <i className="fa-solid fa-file-excel text-xs"></i> Export
            </button>
          </div>

          {/* Dashboard drill-down banner — list pinned to exactly the
              recruiters behind the card that was clicked. */}
          {ownerMe && (
            <div className="flex items-center flex-wrap gap-2 bg-[#405189]/5 border border-[#405189]/25 rounded-none px-4 py-2.5 text-xs">
              <span className="font-bold text-[#405189] dark:text-indigo-300 flex items-center gap-1.5">
                <i className="fa-solid fa-crosshairs"></i>
                {focusLabel ? `${focusLabel}:` : 'Showing:'}
              </span>
              <span className="text-slate-600 dark:text-slate-300 font-semibold">
                {recruiters.length} record{recruiters.length === 1 ? '' : 's'} from your dashboard
              </span>
              <button
                onClick={() => { setOwnerMe(false); setFocusLabel(''); router.replace('/admins/recruiters'); }}
                className="ml-auto inline-flex items-center gap-1.5 px-2.5 py-1 bg-white dark:bg-slate-900 border border-[#405189]/30 text-[#405189] dark:text-indigo-300 font-bold hover:bg-[#405189] hover:text-white transition cursor-pointer"
              >
                <i className="fa-solid fa-xmark"></i> View All Records
              </button>
            </div>
          )}

          <DataTable
            columns={columns}
            data={recruiters}
            loading={loading}
            searchPlaceholder="Search recruiters by name, email or ID..."
            controlledGlobalFilter={search}
            onGlobalFilterChange={setSearch}
            emptyStateTitle="No Recruiters Found"
            emptyStateDescription="Adjust filters or search parameters to view list of recruiters."
            renderAdditionalActions={() => (
              <SearchableSelect
                value={statusFilter}
                onChange={setStatusFilter}
                className="w-48"
                placeholder="All status"
                isClearable={true}
                options={[
                  { value: 'Active', label: 'Active' },
                  { value: 'Inactive', label: 'Inactive' }
                ]}
              />
            )}
          />
        </main>

      {detailRecruiterId && (
        <RecruiterDetailsModal
          isOpen={isDetailOpen}
          recruiterId={detailRecruiterId}
          onClose={() => {
            setIsDetailOpen(false);
            setDetailRecruiterId(null);
          }}
        />
      )}
    </>
  );
}