'use client';

import { useEffect, useState, useCallback } from 'react';
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 AssignedRecruiterRow {
  id: number;
  full_name: string;
  employee_id: string;
  email: string;
  department: string;
  assigned_jds_count: number;
  assigned_jd_names: string;
  open_jds: number;
  closed_jds: number;
  last_assigned_date: string | null;
  status: string;
}

// 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 AssignedRecruitersPage() {
  const { user: me } = useAuth();
  const [recruiters, setRecruiters] = useState<AssignedRecruiterRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [deptFilter, setDeptFilter] = useState('');

  // Stats
  const [totalRecruiters, setTotalRecruiters] = useState(0);
  const [assignedRecruitersCount, setAssignedRecruitersCount] = useState(0);

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

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      // 1. Load Stats for Summary Cards
      const statsRes = await api.get('/dashboard/stats/') as any;
      if (statsRes.data) {
        setTotalRecruiters(statsRes.data.total_recruiters ?? 0);
        setAssignedRecruitersCount(statsRes.data.assigned_recruiters ?? 0);
      }

      // 2. Load Assigned Recruiters Table
      const res = await api.get('/dashboard/assigned-recruiters/') as any;
      const data: AssignedRecruiterRow[] = res.data || [];

      // Filter client-side based on search, status, and department
      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())) ||
          (r.assigned_jd_names && r.assigned_jd_names.toLowerCase().includes(search.toLowerCase()));

        const matchesStatus = !statusFilter || r.status === statusFilter;
        const matchesDept = !deptFilter || r.department === deptFilter;

        return matchesSearch && matchesStatus && matchesDept;
      });

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

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

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

  // Extract unique departments for filtering
  const [departments, setDepartments] = useState<string[]>([]);
  useEffect(() => {
    if (recruiters.length > 0) {
      const depts = new Set<string>();
      recruiters.forEach(r => {
        if (r.department && r.department !== '—') depts.add(r.department);
      });
      setDepartments(Array.from(depts));
    }
  }, [recruiters]);

  const handleExport = () => {
    const headers = [
      'Recruiter Name',
      'Employee ID',
      'Email',
      'Department',
      'Assigned JDs Count',
      'Assigned JD Names',
      'Open JDs',
      'Closed JDs',
      'Last Assigned Date',
      'Status'
    ];
    const rows = recruiters.map(r => [
      r.full_name,
      r.employee_id || '—',
      r.email,
      r.department || '—',
      r.assigned_jds_count,
      r.assigned_jd_names || '—',
      r.open_jds,
      r.closed_jds,
      r.last_assigned_date ? formatDate(r.last_assigned_date) : '—',
      r.status
    ]);
    exportToCsv('Assigned_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: 'full_name',
      header: 'Recruiter Name',
      cell: ({ row }: any) => <span className="font-bold text-slate-900 dark:text-white">{row.original.full_name}</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: 'email',
      header: 'Email',
    },
    {
      accessorKey: 'department',
      header: 'Department',
      cell: ({ row }: any) => <span>{row.original.department || '—'}</span>,
    },
    {
      accessorKey: 'assigned_jds_count',
      header: 'Assigned JDs Count',
      cell: ({ row }: any) => <span className="font-bold text-slate-805 dark:text-white">{row.original.assigned_jds_count}</span>,
    },
    {
      accessorKey: 'assigned_jd_names',
      header: 'Assigned JD Names',
      cell: ({ row }: any) => (
        <span className="text-slate-500 dark:text-slate-400 line-clamp-1 max-w-[200px]" title={row.original.assigned_jd_names}>
          {row.original.assigned_jd_names || '—'}
        </span>
      ),
    },
    {
      accessorKey: 'open_jds',
      header: 'Open JDs',
      cell: ({ row }: any) => <span className="font-bold text-emerald-600 dark:text-emerald-400">{row.original.open_jds}</span>,
    },
    {
      accessorKey: 'closed_jds',
      header: 'Closed JDs',
      cell: ({ row }: any) => <span className="font-bold text-rose-500">{row.original.closed_jds}</span>,
    },
    {
      accessorKey: 'last_assigned_date',
      header: 'Last Assigned Date',
      cell: ({ row }: any) => {
        const d = row.original.last_assigned_date;
        return <span>{formatDate(d)}</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>
        );
      },
    },
    {
      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 animate-fadeIn">
          <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">Assigned Recruiters</h2>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">Analytics and tracking of recruiters assigned to at least one JD description.</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>

          {/* Summary Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white dark:bg-slate-900 border border-slate-205/60 dark:border-slate-800 rounded-none p-6 shadow-sm flex items-center gap-4 relative overflow-hidden">
              <div className="w-12 h-12 rounded-none bg-indigo-500 text-white flex items-center justify-center text-lg">
                <i className="fa-solid fa-user-group"></i>
              </div>
              <div>
                <span className="block text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Total Recruiters</span>
                <span className="text-3xl font-black text-slate-800 dark:text-white mt-0.5 block">{totalRecruiters}</span>
              </div>
              <div className="absolute -right-8 -bottom-8 w-24 h-24 rounded-full bg-slate-100/50 dark:bg-slate-800/10 pointer-events-none" />
            </div>

            <div className="bg-white dark:bg-slate-900 border border-slate-205/60 dark:border-slate-800 rounded-none p-6 shadow-sm flex items-center gap-4 relative overflow-hidden">
              <div className="w-12 h-12 rounded-none bg-purple-500 text-white flex items-center justify-center text-lg">
                <i className="fa-solid fa-headset"></i>
              </div>
              <div>
                <span className="block text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Assigned Recruiters</span>
                <span className="text-3xl font-black text-slate-800 dark:text-white mt-0.5 block">{assignedRecruitersCount}</span>
              </div>
              <div className="absolute -right-8 -bottom-8 w-24 h-24 rounded-full bg-slate-100/50 dark:bg-slate-800/10 pointer-events-none" />
            </div>
          </div>

          <DataTable
            columns={columns}
            data={recruiters}
            loading={loading}
            searchPlaceholder="Search recruiters by name, email, Employee ID or assigned JD title..."
            controlledGlobalFilter={search}
            onGlobalFilterChange={setSearch}
            emptyStateTitle="No Assigned Recruiters Found"
            emptyStateDescription="Try modifying search words or status/department filters."
            renderAdditionalActions={() => (
              <div className="flex items-center gap-2 flex-wrap">
                <SearchableSelect
                  value={statusFilter}
                  onChange={setStatusFilter}
                  className="w-48"
                  placeholder="All status"
                  isClearable={true}
                  options={[
                    { value: 'Active', label: 'Active' },
                    { value: 'Inactive', label: 'Inactive' }
                  ]}
                />
                <SearchableSelect
                  value={deptFilter}
                  onChange={setDeptFilter}
                  className="w-48"
                  placeholder="All departments"
                  isClearable={true}
                  options={departments.map(d => ({ value: d, label: d }))}
                />
              </div>
            )}
          />
        </main>

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