'use client';

import type { CandidateReportListData, CandidateReportRow } from './types';

const TH_CLS =
  'px-3 py-2.5 text-left text-[10px] font-extrabold uppercase tracking-wider text-slate-500 dark:text-slate-400 whitespace-nowrap';
const TD_CLS = 'px-3 py-3 text-xs font-semibold text-slate-600 dark:text-slate-300 whitespace-nowrap';

export const CLASSIFICATION_BADGES: Record<string, string> = {
  'Highly Recommended': 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
  'Recommended': 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
  'Consider': 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
  'Not Recommended': 'bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300',
};

function scoreColor(score: number) {
  if (score >= 75) return 'text-emerald-600 dark:text-emerald-400';
  if (score >= 50) return 'text-amber-600 dark:text-amber-400';
  return 'text-rose-600 dark:text-rose-400';
}

interface SortState {
  sort: string;
  order: 'asc' | 'desc';
}

interface CandidateReportsTableProps {
  data: CandidateReportListData;
  sortState: SortState;
  onSort: (sort: string) => void;
  onPage: (page: number) => void;
  canGenerate: boolean;
  busyId: number | null;
  onView: (row: CandidateReportRow) => void;
  onDownload: (row: CandidateReportRow) => void;
  onGenerate: (row: CandidateReportRow) => void;
}

function SortableHeader({ label, field, sortState, onSort }: {
  label: string;
  field: string;
  sortState: SortState;
  onSort: (sort: string) => void;
}) {
  const active = sortState.sort === field;
  return (
    <th className={TH_CLS}>
      <button
        onClick={() => onSort(field)}
        className="inline-flex items-center gap-1.5 uppercase tracking-wider font-extrabold hover:text-indigo-600 dark:hover:text-indigo-400 transition cursor-pointer"
      >
        {label}
        <i className={`fa-solid text-[9px] ${
          active ? (sortState.order === 'asc' ? 'fa-arrow-up-short-wide text-indigo-500' : 'fa-arrow-down-wide-short text-indigo-500') : 'fa-sort text-slate-300 dark:text-slate-600'
        }`} />
      </button>
    </th>
  );
}

export default function CandidateReportsTable({
  data, sortState, onSort, onPage, canGenerate, busyId, onView, onDownload, onGenerate,
}: CandidateReportsTableProps) {
  const { results, total, page, page_size } = data;
  const totalPages = Math.max(1, Math.ceil(total / page_size));

  if (!results.length) {
    return (
      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-10 text-center shadow-sm">
        <i className="fa-solid fa-file-circle-question text-3xl text-slate-300 dark:text-slate-700 mb-3" />
        <p className="text-sm text-slate-500 dark:text-slate-400">No candidates match the current filters.</p>
        <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">Adjust or reset the filters to see more candidates.</p>
      </div>
    );
  }

  return (
    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none shadow-sm">
      <div className="overflow-x-auto">
        <table className="w-full min-w-[1080px]">
          <thead className="bg-slate-50 dark:bg-slate-950 border-b border-slate-200 dark:border-slate-800">
            <tr>
              <th className={TH_CLS}>ID</th>
              <SortableHeader label="Candidate" field="name" sortState={sortState} onSort={onSort} />
              <th className={TH_CLS}>Contact</th>
              <th className={TH_CLS}>Job Title</th>
              <th className={TH_CLS}>Client</th>
              <th className={TH_CLS}>Recruiter</th>
              <th className={TH_CLS}>Stage</th>
              <th className={TH_CLS}>Classification</th>
              <SortableHeader label="Score" field="score" sortState={sortState} onSort={onSort} />
              <SortableHeader label="Generated" field="generated" sortState={sortState} onSort={onSort} />
              <th className={`${TH_CLS} text-right`}>Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
            {results.map((r) => (
              <tr key={r.candidate_id} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
                <td className={TD_CLS}>
                  <span className="text-[10px] font-extrabold text-slate-400 dark:text-slate-500">{r.candidate_code}</span>
                </td>
                <td className={TD_CLS}>
                  <span className="font-bold text-slate-800 dark:text-white">{r.name}</span>
                  <span className="block text-[10px] text-slate-400 dark:text-slate-500 font-medium">{r.candidate_status}</span>
                </td>
                <td className={TD_CLS}>
                  <span className="block">{r.email || '—'}</span>
                  <span className="block text-[10px] text-slate-400 dark:text-slate-500">{r.phone || ''}</span>
                </td>
                <td className={`${TD_CLS} max-w-[140px] truncate`} title={r.job_title}>{r.job_title || '—'}</td>
                <td className={TD_CLS}>{r.client || '—'}</td>
                <td className={TD_CLS}>{r.recruiter || '—'}</td>
                <td className={TD_CLS}>
                  {r.stage ? (
                    <span className="inline-flex px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-indigo-50 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300">
                      {r.stage}
                    </span>
                  ) : '—'}
                </td>
                <td className={TD_CLS}>
                  {r.classification ? (
                    <span className={`inline-flex px-2 py-0.5 rounded-full text-[10px] font-extrabold ${CLASSIFICATION_BADGES[r.classification] || ''}`}>
                      {r.classification}
                    </span>
                  ) : (
                    <span className="text-slate-400 dark:text-slate-600">No report</span>
                  )}
                </td>
                <td className={TD_CLS}>
                  {r.overall_score !== null ? (
                    <span className={`font-bold ${scoreColor(r.overall_score)}`}>{r.overall_score}%</span>
                  ) : '—'}
                </td>
                <td className={TD_CLS}>
                  {r.report_generated_at || '—'}
                  {r.report_version ? (
                    <span className="ml-1.5 text-[9px] font-extrabold text-slate-400 dark:text-slate-500">v{r.report_version}</span>
                  ) : null}
                </td>
                <td className={`${TD_CLS} text-right`}>
                  <span className="inline-flex gap-1.5">
                    <button
                      onClick={() => onView(r)}
                      className="px-2 py-1 rounded-none text-[10px] font-bold text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-900/50 hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-600 transition cursor-pointer"
                      title="View report"
                    >
                      <i className="fa-solid fa-eye" />
                    </button>
                    <button
                      onClick={() => onDownload(r)}
                      disabled={!r.has_report || busyId === r.candidate_id}
                      className="px-2 py-1 rounded-none text-[10px] font-bold text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700 hover:bg-slate-600 hover:text-white dark:hover:bg-slate-600 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                      title={r.has_report ? 'Download PDF' : 'No report generated yet'}
                    >
                      <i className="fa-solid fa-download" />
                    </button>
                    {canGenerate && (
                      <button
                        onClick={() => onGenerate(r)}
                        disabled={busyId === r.candidate_id}
                        className="px-2 py-1 rounded-none text-[10px] font-bold text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-900/50 hover:bg-emerald-600 hover:text-white dark:hover:bg-emerald-600 transition cursor-pointer disabled:opacity-40"
                        title={r.has_report ? 'Regenerate report (new version)' : 'Generate report'}
                      >
                        <i className={`fa-solid ${busyId === r.candidate_id ? 'fa-spinner fa-spin' : r.has_report ? 'fa-rotate' : 'fa-wand-magic-sparkles'}`} />
                      </button>
                    )}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      <div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 dark:border-slate-800">
        <p className="text-[11px] font-semibold text-slate-500 dark:text-slate-400">
          Showing {(page - 1) * page_size + 1}–{Math.min(page * page_size, total)} of {total}
        </p>
        <div className="flex items-center gap-1.5">
          <button
            onClick={() => onPage(page - 1)}
            disabled={page <= 1}
            className="px-2.5 py-1.5 rounded-none text-xs font-bold border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-indigo-400 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
          >
            <i className="fa-solid fa-chevron-left" />
          </button>
          <span className="text-xs font-bold text-slate-700 dark:text-slate-200 px-2">
            {page} / {totalPages}
          </span>
          <button
            onClick={() => onPage(page + 1)}
            disabled={page >= totalPages}
            className="px-2.5 py-1.5 rounded-none text-xs font-bold border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-indigo-400 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
          >
            <i className="fa-solid fa-chevron-right" />
          </button>
        </div>
      </div>
    </div>
  );
}