import React, { useMemo } from 'react';
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell } from 'recharts';

const TIERS = [
  { label: '0-39', range: [0, 39], color: '#333F48' },
  { label: '40-59', range: [40, 59], color: '#D1E0D7' },
  { label: '60-79', range: [60, 79], color: '#F8E08E' },
  { label: '80-100', range: [80, 100], color: '#0838E0' },
];

export default function ScoreDistribution({ applications }) {
  const data = useMemo(() => {
    const scored = applications.filter(a => a.ai_score > 0);
    return TIERS.map((tier) => ({
      label: tier.label,
      count: scored.filter(a => a.ai_score >= tier.range[0] && a.ai_score <= tier.range[1]).length,
      color: tier.color,
    }));
  }, [applications]);

  const avgScore = useMemo(() => {
    const scored = applications.filter(a => a.ai_score > 0);
    return scored.length ? Math.round(scored.reduce((s, a) => s + a.ai_score, 0) / scored.length) : 0;
  }, [applications]);

  const screened = applications.filter(a => a.ai_score > 0).length;

  return (
    <div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
      <div className="flex items-center justify-between mb-1">
        <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Candidate Scores</h3>
        <div className="text-right">
          <div className="text-[22px] font-heading font-bold gradient-text">{avgScore}</div>
          <div className="text-[10px] text-[#9CA3AF] tracking-wide">AVG SCORE</div>
        </div>
      </div>
      <p className="text-[12px] text-[#6B7280] mb-5">{screened} candidates screened</p>

      <ResponsiveContainer width="100%" height={220}>
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
          <XAxis dataKey="label" tick={{ fontSize: 11 }} stroke="#9CA3AF" />
          <YAxis tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
          <Tooltip
            cursor={{ fill: '#F9FAFB' }}
            contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }}
          />
          <Bar dataKey="count" radius={[6, 6, 0, 0]}>
            {data.map((entry, i) => (
              <Cell key={i} fill={entry.color} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>

      <div className="grid grid-cols-4 gap-2 mt-4">
        {TIERS.map((t, i) => (
          <div key={t.label} className="text-center">
            <div className="w-full h-1.5 rounded-full mb-1" style={{ background: t.color }} />
            <div className="text-[11px] text-[#6B7280]">{t.label}</div>
            <div className="text-[14px] font-bold text-[#111827]">{data[i].count}</div>
          </div>
        ))}
      </div>
    </div>
  );
}