'use client';

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

function scoreColor(score: number): string {
  if (score >= 75) return '#0ab39c';
  if (score >= 50) return '#f7b84b';
  return '#f06548';
}

/** SVG donut showing the overall average score out of 100. */
function ScoreDonut({ value }: { value: number }) {
  const radius = 52;
  const circumference = 2 * Math.PI * radius;
  const pct = Math.max(0, Math.min(100, value));
  const color = scoreColor(pct);

  return (
    <svg viewBox="0 0 140 140" className="w-36 h-36">
      <circle cx="70" cy="70" r={radius} fill="none" strokeWidth="14" className="stroke-slate-100 dark:stroke-slate-800" />
      <motion.circle
        cx="70" cy="70" r={radius} fill="none" strokeWidth="14" strokeLinecap="round"
        stroke={color}
        strokeDasharray={circumference}
        initial={{ strokeDashoffset: circumference }}
        animate={{ strokeDashoffset: circumference * (1 - pct / 100) }}
        transition={{ duration: 0.9, ease: 'easeOut' }}
        transform="rotate(-90 70 70)"
      />
      <text x="70" y="66" textAnchor="middle" className="fill-slate-900 dark:fill-white text-2xl font-bold">{pct}%</text>
      <text x="70" y="86" textAnchor="middle" className="fill-slate-400 dark:fill-slate-500 text-[10px] font-semibold uppercase tracking-wide">Average</text>
    </svg>
  );
}

export default function ScoreAnalytics({ data }: { data: ScoreAnalyticsData }) {
  if (data.scored_candidates === 0) {
    return (
      <div className="text-center py-10">
        <i className="fa-solid fa-gauge-high text-3xl text-slate-300 dark:text-slate-700 mb-3" />
        <p className="text-sm text-slate-500 dark:text-slate-400">No candidate scores recorded yet.</p>
        <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">Scores appear once candidates are evaluated against job descriptions.</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Overall stats + donut */}
      <div className="flex items-center gap-6">
        <ScoreDonut value={data.overall_average} />
        <div className="space-y-3 flex-1">
          <div className="flex items-center justify-between border border-slate-200 dark:border-slate-800 rounded-none px-4 py-2.5">
            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400">Highest Score</span>
            <span className="text-sm font-bold text-emerald-600 dark:text-emerald-400">
              <i className="fa-solid fa-arrow-up text-[10px] mr-1" />{data.highest_score}%
            </span>
          </div>
          <div className="flex items-center justify-between border border-slate-200 dark:border-slate-800 rounded-none px-4 py-2.5">
            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400">Lowest Score</span>
            <span className="text-sm font-bold text-rose-600 dark:text-rose-400">
              <i className="fa-solid fa-arrow-down text-[10px] mr-1" />{data.lowest_score}%
            </span>
          </div>
          <div className="flex items-center justify-between border border-slate-200 dark:border-slate-800 rounded-none px-4 py-2.5">
            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400">Scored Candidates</span>
            <span className="text-sm font-bold text-slate-900 dark:text-white">{data.scored_candidates}</span>
          </div>
        </div>
      </div>

      {/* Per-JD average score bars */}
      <div>
        <p className="text-[11px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">
          Average Score per Job Description
        </p>
        {data.job_scores.length === 0 ? (
          <p className="text-sm text-slate-400 dark:text-slate-500 py-4">No scored candidates for any JD.</p>
        ) : (
          <div className="space-y-3 max-h-56 overflow-y-auto custom-scrollbar pr-1">
            {data.job_scores.map((job, i) => (
              <div key={job.job_id}>
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs font-semibold text-slate-600 dark:text-slate-400 truncate pr-2" title={job.job_title}>
                    {job.job_title}
                  </span>
                  <span className="text-xs font-bold text-slate-800 dark:text-slate-200 shrink-0">
                    {job.average_score}%
                    <span className="text-[10px] font-semibold text-slate-400 dark:text-slate-500 ml-1.5">
                      ({job.candidates} candidate{job.candidates === 1 ? '' : 's'})
                    </span>
                  </span>
                </div>
                <div className="h-2.5 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${Math.min(100, job.average_score)}%` }}
                    transition={{ duration: 0.6, delay: i * 0.06 }}
                    className="h-full rounded-full"
                    style={{ backgroundColor: scoreColor(job.average_score) }}
                  />
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}