'use client';

import { useCallback, useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import type { ColumnDef } from '@tanstack/react-table';
import { api } from '@/lib/api';
import StatsCard from './StatsCard';
import { DataTable } from '@/components/data-table/DataTable';

// Live TA analytics — additive section driven by /dashboard/ta/* endpoints.
// The existing (static) TA dashboard sections above are untouched.

type Period = 'monthly' | 'quarterly' | 'half_yearly' | 'annually';

const PERIOD_LABELS: Record<Period, string> = {
  monthly: 'Monthly',
  quarterly: 'Quarterly',
  half_yearly: 'Half-Yearly',
  annually: 'Annually',
};

interface RequirementsSummary {
  period: string;
  total: number;
  previous_period_total: number;
  change_pct: number;
  pending: number;
}

interface PendingRow {
  jd_id: number;
  jd_title: string;
  client_name: string;
  department: string;
  created_date: string;
  recruiters: string[];
  pending_status: string;
}

interface AssignmentRow {
  jd_id: number;
  jd_title: string;
  client_name: string;
  department: string;
  positions: number | null;
  recruiters: string[];
  assigned_by: string;
  assigned_date: string;
  submitted: number;
  shortlisted: number;
  offered: number;
  joined: number;
  status: string;
}

interface PipelineSummary {
  submitted: number;
  shortlisted: number;
  offered: number;
  joined: number;
  offer_rejected: number;
  rejected: number;
  hold: number;
}

interface DetailRecord {
  candidate_id: number;
  candidate: string;
  jd_id: number;
  jd_title: string;
  stage: string;
  score: number | null;
  added_on: string;
}

const PIPELINE_CARDS: Array<{ key: keyof PipelineSummary; title: string; icon: string; color: any }> = [
  { key: 'submitted', title: 'Total Submitted', icon: 'fa-solid fa-paper-plane', color: 'blue' },
  { key: 'shortlisted', title: 'Total Shortlisted', icon: 'fa-solid fa-list-check', color: 'indigo' },
  { key: 'offered', title: 'Total Offered', icon: 'fa-solid fa-envelope-open-text', color: 'purple' },
  { key: 'joined', title: 'Total Joined', icon: 'fa-solid fa-user-check', color: 'emerald' },
  { key: 'offer_rejected', title: 'Total Offered Rejected', icon: 'fa-solid fa-hand-point-down', color: 'orange' },
  { key: 'rejected', title: 'Total Rejected', icon: 'fa-solid fa-user-xmark', color: 'rose' },
  { key: 'hold', title: 'Total Hold', icon: 'fa-solid fa-circle-pause', color: 'amber' },
];

const PENDING_BADGE: Record<string, string> = {
  'Open': 'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
  'Pending Assignment': 'bg-rose-100 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300',
  'In Progress': 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300',
};

// ── Reusable DataTable column definitions (static — no component state) ──────

const ASSIGNMENT_COLUMNS: ColumnDef<AssignmentRow>[] = [
  { accessorKey: 'jd_id', header: 'JD ID', cell: ({ getValue }) => <span className="text-slate-400 font-semibold">#{getValue() as number}</span> },
  {
    accessorKey: 'jd_title', header: 'Job Title',
    cell: ({ getValue }) => <span className="block font-semibold text-slate-800 dark:text-slate-200 max-w-[160px] truncate" title={String(getValue())}>{getValue() as string}</span>,
  },
  { accessorKey: 'client_name', header: 'Client', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'department', header: 'Department', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'positions', header: 'Positions', cell: ({ getValue }) => getValue() ?? '—' },
  {
    id: 'recruiters',
    accessorFn: (r) => r.recruiters.join(', '),
    header: 'Recruiters Assigned',
    cell: ({ row }) => {
      const list = row.original.recruiters;
      return list.length
        ? <span className="block max-w-[180px] truncate text-slate-600 dark:text-slate-300" title={list.join(', ')}>{list.join(', ')}</span>
        : <span className="text-rose-500 font-semibold">Unassigned</span>;
    },
  },
  { accessorKey: 'assigned_by', header: 'Assigned By', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'assigned_date', header: 'Assigned Date', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'submitted', header: 'Submitted', cell: ({ getValue }) => <span className="font-semibold text-slate-600 dark:text-slate-300">{getValue() as number}</span> },
  { accessorKey: 'shortlisted', header: 'Shortlisted', cell: ({ getValue }) => <span className="font-semibold text-indigo-600 dark:text-indigo-400">{getValue() as number}</span> },
  { accessorKey: 'offered', header: 'Offered', cell: ({ getValue }) => <span className="font-semibold text-purple-600 dark:text-purple-400">{getValue() as number}</span> },
  { accessorKey: 'joined', header: 'Joined', cell: ({ getValue }) => <span className="font-bold text-emerald-600 dark:text-emerald-400">{getValue() as number}</span> },
  {
    accessorKey: 'status', header: 'Status',
    cell: ({ getValue }) => {
      const s = getValue() as string;
      return (
        <span className={`px-1.5 py-0.5 rounded-none text-[9px] font-bold ${
          s === 'Published' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
          : s === 'Draft' ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
          : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
        }`}>{s}</span>
      );
    },
  },
];

const PENDING_COLUMNS: ColumnDef<PendingRow>[] = [
  {
    id: 'jd',
    accessorFn: (r) => `#${r.jd_id} ${r.jd_title}`,
    header: 'JD',
    cell: ({ getValue }) => <span className="font-semibold text-slate-800 dark:text-slate-200">{getValue() as string}</span>,
  },
  { accessorKey: 'client_name', header: 'Client', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'department', header: 'Department', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'created_date', header: 'Created', cell: ({ getValue }) => <span className="whitespace-nowrap">{getValue() as string}</span> },
  {
    id: 'recruiters',
    accessorFn: (r) => r.recruiters.join(', '),
    header: 'Recruiters',
    cell: ({ getValue }) => <span className="block max-w-[140px] truncate">{(getValue() as string) || '—'}</span>,
  },
  {
    accessorKey: 'pending_status', header: 'Status',
    cell: ({ getValue }) => (
      <span className={`px-1.5 py-0.5 rounded-none text-[9px] font-bold ${PENDING_BADGE[getValue() as string] || ''}`}>
        {getValue() as string}
      </span>
    ),
  },
];

const DETAIL_COLUMNS: ColumnDef<DetailRecord>[] = [
  { accessorKey: 'candidate', header: 'Candidate', cell: ({ getValue }) => <span className="font-semibold text-slate-800 dark:text-slate-200">{getValue() as string}</span> },
  {
    accessorKey: 'jd_title', header: 'JD',
    cell: ({ getValue }) => <span className="block max-w-[180px] truncate" title={String(getValue())}>{getValue() as string}</span>,
  },
  {
    accessorKey: 'stage', header: 'Current Stage',
    cell: ({ getValue }) => (
      <span className="px-1.5 py-0.5 rounded-none text-[9px] font-bold bg-indigo-100 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300">
        {(getValue() as string) || '—'}
      </span>
    ),
  },
  { accessorKey: 'score', header: 'Score', cell: ({ getValue }) => (getValue() !== null ? `${getValue()}%` : '—') },
  { accessorKey: 'added_on', header: 'Added On', cell: ({ getValue }) => <span className="whitespace-nowrap">{getValue() as string}</span> },
];

function PeriodSelect({ value, onChange }: { value: Period; onChange: (p: Period) => void }) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value as Period)}
      className="px-2.5 py-1.5 rounded-none text-xs font-bold bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 transition cursor-pointer"
    >
      {(Object.keys(PERIOD_LABELS) as Period[]).map((p) => (
        <option key={p} value={p}>{PERIOD_LABELS[p]}</option>
      ))}
    </select>
  );
}

function Modal({ title, subtitle, onClose, children }: {
  title: string; subtitle?: string; onClose: () => void; children: React.ReactNode;
}) {
  return (
    <div className="fixed inset-0 z-[100] flex items-start justify-center bg-slate-950/60 backdrop-blur-sm p-4 overflow-y-auto" onClick={onClose}>
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
        onClick={(e) => e.stopPropagation()}
        className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none shadow-2xl w-full max-w-3xl my-8"
      >
        <div className="flex items-center justify-between gap-3 px-5 py-4 bg-[#405189]">
          <div>
            {subtitle && <p className="text-[10px] font-extrabold uppercase tracking-widest text-indigo-200">{subtitle}</p>}
            <h2 className="text-base font-bold text-white">{title}</h2>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition cursor-pointer">
            <i className="fa-solid fa-xmark" />
          </button>
        </div>
        <div className="p-5 max-h-[70vh] overflow-y-auto custom-scrollbar">{children}</div>
      </motion.div>
    </div>
  );
}

export default function TALiveAnalytics() {
  const [reqPeriod, setReqPeriod] = useState<Period>('monthly');
  const [pipePeriod, setPipePeriod] = useState<Period>('monthly');
  const [summary, setSummary] = useState<RequirementsSummary | null>(null);
  const [pipeline, setPipeline] = useState<PipelineSummary | null>(null);
  const [assignments, setAssignments] = useState<AssignmentRow[] | null>(null);

  const [pendingOpen, setPendingOpen] = useState(false);
  const [pendingRows, setPendingRows] = useState<PendingRow[] | null>(null);
  const [detailMetric, setDetailMetric] = useState<keyof PipelineSummary | null>(null);
  const [detailRows, setDetailRows] = useState<DetailRecord[] | null>(null);

  useEffect(() => {
    (api.get(`/dashboard/ta/requirements-summary/?period=${reqPeriod}`) as Promise<{ data: RequirementsSummary }>)
      .then((r) => setSummary(r.data)).catch(() => {});
  }, [reqPeriod]);

  useEffect(() => {
    (api.get(`/dashboard/ta/pipeline-summary/?period=${pipePeriod}`) as Promise<{ data: PipelineSummary }>)
      .then((r) => setPipeline(r.data)).catch(() => {});
  }, [pipePeriod]);

  useEffect(() => {
    (api.get('/dashboard/ta/recruiter-jd-assignment/') as Promise<{ data: { rows: AssignmentRow[] } }>)
      .then((r) => setAssignments(r.data.rows)).catch(() => {});
  }, []);

  const openPending = useCallback(() => {
    setPendingOpen(true);
    setPendingRows(null);
    (api.get('/dashboard/ta/pending-requirements/') as Promise<{ data: { requirements: PendingRow[] } }>)
      .then((r) => setPendingRows(r.data.requirements)).catch(() => setPendingRows([]));
  }, []);

  const openDetail = useCallback((metric: keyof PipelineSummary) => {
    setDetailMetric(metric);
    setDetailRows(null);
    (api.get(`/dashboard/ta/pipeline-summary/?period=${pipePeriod}&detail=${metric}`) as Promise<{ data: { records: DetailRecord[] } }>)
      .then((r) => setDetailRows(r.data.records)).catch(() => setDetailRows([]));
  }, [pipePeriod]);

  return (
    <div className="space-y-5">
      {/* ── Requirements summary ── */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-sm font-bold text-slate-800 dark:text-white">Requirements Summary — Live</h3>
          <p className="text-xs text-slate-400 dark:text-slate-500">JDs added this period vs the previous one</p>
        </div>
        <PeriodSelect value={reqPeriod} onChange={setReqPeriod} />
      </div>
      {summary ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <StatsCard
            title={`Total Requirements (${PERIOD_LABELS[reqPeriod]})`}
            value={summary.total}
            icon="fa-solid fa-clipboard-list"
            color="indigo"
            change={summary.change_pct}
            delay={0}
          />
          <StatsCard
            title="Total Pending Requirements"
            value={summary.pending}
            icon="fa-solid fa-hourglass-half"
            color="amber"
            delay={1}
            onClick={openPending}
          />
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {[0, 1].map((i) => <div key={i} className="h-32 bg-slate-100 dark:bg-slate-800 rounded-none animate-pulse" />)}
        </div>
      )}

      {/* ── Pipeline summary ── */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-sm font-bold text-slate-800 dark:text-white">Recruitment Pipeline — Live</h3>
          <p className="text-xs text-slate-400 dark:text-slate-500">Click a card to see the matching candidates</p>
        </div>
        <PeriodSelect value={pipePeriod} onChange={setPipePeriod} />
      </div>
      {pipeline ? (
        <div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-4">
          {PIPELINE_CARDS.map((card, i) => (
            <StatsCard
              key={card.key}
              title={card.title}
              value={pipeline[card.key] ?? 0}
              icon={card.icon}
              color={card.color}
              delay={i}
              onClick={() => openDetail(card.key)}
            />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-4">
          {[...Array(7)].map((_, i) => <div key={i} className="h-32 bg-slate-100 dark:bg-slate-800 rounded-none animate-pulse" />)}
        </div>
      )}

      {/* ── Recruiters assigned per JD — reusable DataTable ── */}
      <div className="space-y-2">
        <h3 className="text-sm font-bold text-slate-800 dark:text-white">Recruiters Assigned per JD</h3>
        <DataTable
          columns={ASSIGNMENT_COLUMNS}
          data={assignments ?? []}
          loading={!assignments}
          compact
          searchPlaceholder="Search JDs, clients, recruiters…"
          emptyStateTitle="No job descriptions yet"
          emptyStateDescription="JD recruiter assignments will appear here."
        />
      </div>

      {/* ── Pending requirements modal ── */}
      {pendingOpen && (
        <Modal title="Pending Requirements" subtitle="Open · Pending Assignment · In Progress" onClose={() => setPendingOpen(false)}>
          <DataTable
            columns={PENDING_COLUMNS}
            data={pendingRows ?? []}
            loading={!pendingRows}
            compact
            searchPlaceholder="Search pending requirements…"
            emptyStateTitle="Nothing pending"
            emptyStateDescription="Every requirement has a joined candidate or is closed."
          />
        </Modal>
      )}

      {/* ── Pipeline detail modal ── */}
      {detailMetric && (
        <Modal
          title={PIPELINE_CARDS.find((c) => c.key === detailMetric)?.title || 'Records'}
          subtitle={`${PERIOD_LABELS[pipePeriod]} · first 100 records`}
          onClose={() => setDetailMetric(null)}
        >
          <DataTable
            columns={DETAIL_COLUMNS}
            data={detailRows ?? []}
            loading={!detailRows}
            compact
            searchPlaceholder="Search candidates…"
            emptyStateTitle="No matching candidates"
            emptyStateDescription="No candidates match this metric in the selected period."
          />
        </Modal>
      )}
    </div>
  );
}