'use client';

import { useCallback, useEffect, useState } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { useAuth } from '@/components/auth-context';
import { hasAnyDjangoPermission } from '@/lib/permissions';
import { api } from '@/lib/api';
import StatsCard from './StatsCard';
import { DataTable } from '@/components/data-table/DataTable';

// Live, PM-scoped analytics from GET /dashboard/project-manager/.
// Additive component — the existing (static) dashboard sections stay untouched.

const POLL_MS = 15000;

interface RequirementRow {
  jd_id: number;
  jd_code: string;
  jd_title: string;
  client_name: string;
  created_date: string;
  assigned_recruiters_count: number;
  submitted: number;
  shortlisted: number;
  offered: number;
  joined: number;
  offer_rejected: number;
  rejected: number;
  status: string;
}

export interface PMDashboardData {
  total_requirements: number;
  assigned_recruiters: number;
  submitted: number;
  shortlisted: number;
  offered: number;
  joined: number;
  offer_rejected: number;
  rejected: number;
  requirements: RequirementRow[];
}

const STATUS_BADGE: Record<string, string> = {
  Open: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
  Draft: 'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
  Closed: 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400',
};

// Reusable DataTable columns for the requirement-wise analytics table
const REQUIREMENT_COLUMNS: ColumnDef<RequirementRow>[] = [
  { accessorKey: 'jd_id', header: 'ID', cell: ({ getValue }) => <span className="text-slate-400 dark:text-slate-500 font-semibold">#{getValue() as number}</span> },
  { accessorKey: 'jd_code', header: 'JD Code', cell: ({ getValue }) => <span className="font-bold text-indigo-600 dark:text-indigo-400 whitespace-nowrap">{getValue() as string}</span> },
  {
    accessorKey: 'jd_title', header: 'JD Title',
    cell: ({ getValue }) => <span className="block font-semibold text-slate-800 dark:text-slate-200 max-w-[180px] truncate" title={String(getValue())}>{getValue() as string}</span>,
  },
  { accessorKey: 'client_name', header: 'Client', cell: ({ getValue }) => (getValue() as string) || '—' },
  { accessorKey: 'created_date', header: 'Created', cell: ({ getValue }) => <span className="whitespace-nowrap">{getValue() as string}</span> },
  { accessorKey: 'assigned_recruiters_count', header: 'Recruiters', cell: ({ getValue }) => <span className="font-bold text-slate-700 dark:text-slate-300">{getValue() as number}</span> },
  { 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: 'offer_rejected', header: 'Offer Rej.', cell: ({ getValue }) => <span className="text-orange-500 dark:text-orange-400">{getValue() as number}</span> },
  { accessorKey: 'rejected', header: 'Rejected', cell: ({ getValue }) => <span className="text-rose-500 dark:text-rose-400">{getValue() as number}</span> },
  {
    accessorKey: 'status', header: 'Status',
    cell: ({ getValue }) => (
      <span className={`px-1.5 py-0.5 rounded-none text-[9px] font-bold ${STATUS_BADGE[getValue() as string] || STATUS_BADGE.Closed}`}>
        {getValue() as string}
      </span>
    ),
  },
];

interface PMLiveAnalyticsProps {
  /** Hide the KPI card grid (when the parent renders its own live cards). */
  showCards?: boolean;
  /** Receives every fresh payload — lets the parent drive charts off the same fetch. */
  onData?: (data: PMDashboardData) => void;
}

export default function PMLiveAnalytics({ showCards = true, onData }: PMLiveAnalyticsProps) {
  const { user } = useAuth();
  const [data, setData] = useState<PMDashboardData | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [updatedAt, setUpdatedAt] = useState<string>('');

  // A PROJECT_MANAGER/TA_MANAGER/HIRING_MANAGER/etc. role — mirrors the
  // backend's `_is_manager` (apps.jobs.views), which several admin-ish pages
  // already gate on by role rather than by a specific Django permission.
  const isManagerRole = (user?.role ?? '').toUpperCase().includes('MANAGER');

  // Dashboard-card drill-down: open the existing module in a NEW TAB, scoped
  // to exactly the records behind that card's count. The destination page
  // resolves the filter itself (server-side, on load) so the numbers are
  // always fresh — nothing here is a stale snapshot of ids.
  //   - Jobs/Recruiters: `owner=me`   → created_by = this PM (apps.jobs.views /
  //     apps.users.dashboard_views, same filter the card's count uses).
  //   - Candidates: `pm_metric=<key>` → the same submitted/shortlisted/offered/
  //     joined/offer_rejected/rejected classification the card's count uses
  //     (apps.pipeline.pm_metrics).
  const openInNewTab = (
    route: string,
    perms: string[] | undefined,
    params: Record<string, string>,
    opts?: { allowManagerRole?: boolean },
  ) => {
    const allowed = hasAnyDjangoPermission(user, perms) || (opts?.allowManagerRole && isManagerRole);
    if (!allowed) return;
    const qs = new URLSearchParams(params).toString();
    window.open(`${route}${qs ? `?${qs}` : ''}`, '_blank', 'noopener,noreferrer');
  };

  const load = useCallback(() => {
    (api.get('/dashboard/project-manager/') as Promise<{ data: PMDashboardData }>)
      .then((res) => {
        setData(res.data);
        onData?.(res.data);
        setError(null);
        setUpdatedAt(new Date().toLocaleTimeString());
      })
      .catch((e: unknown) => setError(e instanceof Error ? e.message : 'Failed to load analytics'));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Live refresh: interval polling + refetch whenever the tab regains focus
  useEffect(() => {
    load();
    const timer = setInterval(load, POLL_MS);
    const onFocus = () => load();
    window.addEventListener('focus', onFocus);
    return () => {
      clearInterval(timer);
      window.removeEventListener('focus', onFocus);
    };
  }, [load]);

  if (error && !data) {
    return (
      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-6 shadow-sm text-center">
        <p className="text-sm font-semibold text-slate-600 dark:text-slate-300">Could not load live requirement analytics</p>
        <p className="text-xs text-slate-400 mt-1">{error}</p>
        <button
          onClick={load}
          className="mt-3 bg-[#405189] hover:bg-[#364574] text-white px-4 py-2 rounded-none text-sm font-medium transition cursor-pointer"
        >
          Retry
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Section header */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-sm font-bold text-slate-800 dark:text-white">My Requirements — Live</h3>
          <p className="text-xs text-slate-400 dark:text-slate-500">
            Scoped to requirements you own · auto-refreshes every {POLL_MS / 1000}s
          </p>
        </div>
        {updatedAt && (
          <span className="text-[10px] font-semibold text-slate-400 dark:text-slate-500">
            <i className="fa-solid fa-rotate mr-1" />
            Updated {updatedAt}
          </span>
        )}
      </div>

      {/* Live KPI cards */}
      {!showCards ? null : data ? (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatsCard title="Total Requirements" value={data.total_requirements} icon="fa-solid fa-clipboard-list" color="indigo" delay={0}
            onClick={() => openInNewTab('/jobs', ['jobs.view_jobdescription'], { owner: 'me', label: 'Total Requirements' })}
          />
          <StatsCard title="Assigned Recruiters" value={data.assigned_recruiters} icon="fa-solid fa-user-tie" color="purple" delay={1}
            onClick={() => openInNewTab('/admins/recruiters', ['authentication.view_recruiter'], { owner: 'me', label: 'Assigned Recruiters' }, { allowManagerRole: true })}
          />
          <StatsCard title="Total Submitted" value={data.submitted} icon="fa-solid fa-paper-plane" color="blue" delay={2}
            onClick={() => openInNewTab('/candidates', ['candidates.view_candidate'], { owner: 'me', pm_metric: 'submitted', label: 'Total Submitted' })}
          />
          <StatsCard title="Total Shortlisted" value={data.shortlisted} icon="fa-solid fa-list-check" color="cyan" delay={3}
            onClick={() => openInNewTab('/candidates', ['candidates.view_candidate'], { owner: 'me', pm_metric: 'shortlisted', label: 'Total Shortlisted' })}
          />
          <StatsCard title="Total Offered" value={data.offered} icon="fa-solid fa-envelope-open-text" color="amber" delay={4}
            onClick={() => openInNewTab('/candidates', ['candidates.view_candidate'], { owner: 'me', pm_metric: 'offered', label: 'Total Offered' })}
          />
          <StatsCard title="Total Joined" value={data.joined} icon="fa-solid fa-user-check" color="emerald" delay={5}
            onClick={() => openInNewTab('/candidates', ['candidates.view_candidate'], { owner: 'me', pm_metric: 'joined', label: 'Total Joined' })}
          />
          <StatsCard title="Total Offered Rejected" value={data.offer_rejected} icon="fa-solid fa-hand-point-down" color="orange" delay={6}
            onClick={() => openInNewTab('/candidates', ['candidates.view_candidate'], { owner: 'me', pm_metric: 'offer_rejected', label: 'Total Offered Rejected' })}
          />
          <StatsCard title="Total Rejected" value={data.rejected} icon="fa-solid fa-user-xmark" color="rose" delay={7}
            onClick={() => openInNewTab('/candidates', ['candidates.view_candidate'], { owner: 'me', pm_metric: 'rejected', label: 'Total Rejected' })}
          />
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="h-32 bg-slate-100 dark:bg-slate-800 rounded-none animate-pulse" />
          ))}
        </div>
      )}

      {/* Requirement-wise analytics — reusable DataTable */}
      <div className="space-y-2">
        <h3 className="text-sm font-bold text-slate-800 dark:text-white">Requirement-wise Analytics</h3>
        <DataTable
          columns={REQUIREMENT_COLUMNS}
          data={data?.requirements ?? []}
          loading={!data}
          compact
          searchPlaceholder="Search requirements…"
          emptyStateTitle="No requirements owned by you yet"
          emptyStateDescription="Create a JD to see live analytics here."
        />
      </div>
    </div>
  );
}