'use client';

import { motion } from 'framer-motion';
import type { FunnelData } from './types';

// Deep-to-light gradient down the funnel; hired stage is always green.
const FUNNEL_COLORS = ['#405189', '#5156be', '#6560a3', '#299cdb', '#0ab39c', '#f7b84b', '#f06548'];

export default function ConversionFunnel({ data }: { data: FunnelData }) {
  const funnel = data.funnel;
  const max = funnel[0]?.count || 0;

  if (!funnel.length || max === 0) {
    return (
      <div className="text-center py-10">
        <i className="fa-solid fa-filter-circle-dollar text-3xl text-slate-300 dark:text-slate-700 mb-3" />
        <p className="text-sm text-slate-500 dark:text-slate-400">No recruitment activity to build a funnel from.</p>
        <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">The funnel fills in as candidates move through pipeline stages.</p>
      </div>
    );
  }

  return (
    <div className="space-y-2.5">
      {funnel.map((stage, i) => {
        const widthPct = Math.round((stage.count / max) * 100);
        const color = stage.outcome === 'WON' ? '#0ab39c' : FUNNEL_COLORS[i % FUNNEL_COLORS.length];

        return (
          <motion.div
            key={stage.stage_id}
            initial={{ opacity: 0, x: -16 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.07 }}
          >
            <div className="flex items-center justify-between mb-1 gap-2">
              <span className="text-xs font-semibold text-slate-600 dark:text-slate-400 truncate" title={stage.stage}>
                {stage.stage}
              </span>
              <div className="flex items-center gap-2.5 shrink-0">
                <span className="text-xs font-bold text-slate-800 dark:text-slate-200">{stage.count.toLocaleString()}</span>
                {i > 0 && (
                  <>
                    <span className="text-[10px] font-semibold text-emerald-600 dark:text-emerald-400" title="Conversion from previous stage">
                      <i className="fa-solid fa-arrow-right text-[8px] mr-0.5" />{stage.conversion_rate}%
                    </span>
                    {stage.drop_off_rate > 0 && (
                      <span className="text-[10px] font-semibold text-rose-500 dark:text-rose-400" title="Drop-off from previous stage">
                        <i className="fa-solid fa-arrow-trend-down text-[8px] mr-0.5" />{stage.drop_off_rate}%
                      </span>
                    )}
                  </>
                )}
              </div>
            </div>
            <div className="h-5 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${widthPct}%` }}
                transition={{ duration: 0.7, delay: i * 0.07 }}
                className="h-full rounded-full flex items-center justify-end pr-2"
                style={{ backgroundColor: color }}
              >
                {widthPct >= 12 && (
                  <span className="text-[9px] font-bold text-white">{widthPct}%</span>
                )}
              </motion.div>
            </div>
          </motion.div>
        );
      })}
      <p className="text-[11px] text-slate-400 dark:text-slate-500 pt-1.5">
        Each bar counts candidates who reached that stage or progressed beyond it. Percentages show conversion and drop-off versus the previous stage.
      </p>
    </div>
  );
}