'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import type { JobPerformanceRow, TopJobsData } from './types';

const TABS = [
  { key: 'by_candidates', label: 'Most Candidates', icon: 'fa-solid fa-users', metric: (j: JobPerformanceRow) => `${j.total_candidates} candidates`, value: (j: JobPerformanceRow) => j.total_candidates },
  { key: 'by_hires', label: 'Highest Hires', icon: 'fa-solid fa-user-check', metric: (j: JobPerformanceRow) => `${j.hired_count} hired`, value: (j: JobPerformanceRow) => j.hired_count },
  { key: 'by_conversion', label: 'Best Conversion', icon: 'fa-solid fa-arrow-trend-up', metric: (j: JobPerformanceRow) => `${j.conversion_rate}% conversion`, value: (j: JobPerformanceRow) => j.conversion_rate },
] as const;

const RANK_COLORS = ['bg-amber-400', 'bg-slate-300 dark:bg-slate-600', 'bg-orange-400', 'bg-slate-200 dark:bg-slate-700', 'bg-slate-200 dark:bg-slate-700'];

export default function TopPerformingJobsWidget({ data }: { data: TopJobsData }) {
  const [tab, setTab] = useState<(typeof TABS)[number]['key']>('by_candidates');

  const active = TABS.find((t) => t.key === tab)!;
  const jobs = (data[tab] ?? []).filter((j) => active.value(j) > 0);
  const max = jobs.length ? active.value(jobs[0]) : 0;

  return (
    <div>
      {/* Tab switch */}
      <div className="flex gap-1.5 mb-4 flex-wrap">
        {TABS.map((t) => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={`px-3 py-1.5 rounded-none text-[11px] font-bold transition cursor-pointer border ${
              tab === t.key
                ? 'bg-[#405189] text-white border-[#405189]'
                : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-indigo-400'
            }`}
          >
            <i className={`${t.icon} mr-1.5 text-[10px]`} />
            {t.label}
          </button>
        ))}
      </div>

      {jobs.length === 0 ? (
        <div className="text-center py-8">
          <i className="fa-solid fa-trophy text-3xl text-slate-300 dark:text-slate-700 mb-3" />
          <p className="text-sm text-slate-500 dark:text-slate-400">No jobs to rank yet for this metric.</p>
        </div>
      ) : (
        <div className="space-y-2">
          {jobs.map((job, i) => (
            <motion.div
              key={`${tab}-${job.jd_id}`}
              initial={{ opacity: 0, x: -12 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.06 }}
              className="flex items-center gap-3 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5"
            >
              <span className={`w-6 h-6 rounded-full ${RANK_COLORS[i]} text-white dark:text-slate-900 flex items-center justify-center text-[10px] font-extrabold shrink-0`}>
                {i + 1}
              </span>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2 mb-1">
                  <span className="text-xs font-bold text-slate-800 dark:text-white truncate" title={job.job_title}>
                    {job.job_title}
                  </span>
                  <span className="text-[10px] font-bold text-slate-500 dark:text-slate-400 shrink-0">
                    {active.metric(job)}
                  </span>
                </div>
                <div className="h-1.5 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${max ? Math.round((active.value(job) / max) * 100) : 0}%` }}
                    transition={{ duration: 0.5, delay: i * 0.06 }}
                    className="h-full rounded-full bg-indigo-500"
                  />
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      )}
    </div>
  );
}