'use client';

import { motion } from 'framer-motion';
import type { StageBreakdown, StageCount } from './types';

// Rotating palette for in-progress stages; won/lost keep fixed semantic colors.
const IN_PROGRESS_STYLES = [
  { badge: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300', bar: 'bg-blue-500' },
  { badge: 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300', bar: 'bg-indigo-500' },
  { badge: 'bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300', bar: 'bg-violet-500' },
  { badge: 'bg-purple-50 text-purple-700 dark:bg-purple-950/40 dark:text-purple-300', bar: 'bg-purple-500' },
  { badge: 'bg-cyan-50 text-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-300', bar: 'bg-cyan-500' },
  { badge: 'bg-teal-50 text-teal-700 dark:bg-teal-950/40 dark:text-teal-300', bar: 'bg-teal-500' },
  { badge: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300', bar: 'bg-amber-500' },
];
const WON_STYLE = { badge: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300', bar: 'bg-emerald-500' };
const LOST_STYLE = { badge: 'bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300', bar: 'bg-rose-500' };

function styleFor(stage: StageCount, index: number) {
  if (stage.outcome === 'WON') return WON_STYLE;
  if (stage.outcome === 'LOST') return LOST_STYLE;
  return IN_PROGRESS_STYLES[index % IN_PROGRESS_STYLES.length];
}

export default function StageAnalytics({ data }: { data: StageBreakdown }) {
  if (!data.stages.length || data.total === 0) {
    return (
      <div className="text-center py-10">
        <i className="fa-solid fa-layer-group text-3xl text-slate-300 dark:text-slate-700 mb-3" />
        <p className="text-sm text-slate-500 dark:text-slate-400">No candidates in the pipeline yet.</p>
        <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">Assign candidates to job descriptions to see the stage breakdown.</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
      {data.stages.map((stage, i) => {
        const style = styleFor(stage, i);
        return (
          <motion.div
            key={stage.stage_id}
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: i * 0.04 }}
            className="border border-slate-200 dark:border-slate-800 rounded-none p-4 hover:shadow-sm transition-shadow"
          >
            <div className="flex items-center justify-between gap-2 mb-2">
              <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wide truncate ${style.badge}`} title={stage.stage}>
                {stage.stage}
              </span>
            </div>
            <div className="flex items-baseline gap-2">
              <p className="text-xl font-bold text-slate-900 dark:text-white">{stage.count.toLocaleString()}</p>
              <p className="text-[11px] font-semibold text-slate-400 dark:text-slate-500">{stage.percentage}%</p>
            </div>
            <div className="mt-2 h-1.5 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${stage.percentage}%` }}
                transition={{ duration: 0.6, delay: i * 0.04 }}
                className={`h-full rounded-full ${style.bar}`}
              />
            </div>
          </motion.div>
        );
      })}
    </div>
  );
}