import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';

const SEVERITY_CONFIG = [
  { key: 'critical', label: 'Critical', color: '#D72638' },
  { key: 'high',     label: 'High',     color: '#FF6D00' },
  { key: 'medium',   label: 'Medium',   color: '#FFD600' },
  { key: 'low',      label: 'Low',      color: '#0056B3' },
  { key: 'info',     label: 'Info',     color: '#E0E0E244' },
];

function CustomTooltip({ active, payload }) {
  if (!active || !payload?.length) return null;
  const { name, value } = payload[0];

  return (
    <div
      style={{
        background: '#1B1B1E',
        border: '1px solid #E0E0E220',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: '0.75rem',
        padding: '6px 10px',
      }}
    >
      <span style={{ color: payload[0].payload.fill }}>{name}</span>
      <span style={{ color: '#E0E0E2', marginLeft: 8 }}>{value}</span>
    </div>
  );
}

export default function VulnSummary({ data = {} }) {
  const {
    critical = 0,
    high = 0,
    medium = 0,
    low = 0,
    info = 0,
  } = data;

  const total = critical + high + medium + low + info;

  const chartData = SEVERITY_CONFIG.map(({ key, label, color }) => ({
    name: label,
    value: data[key] || 0,
    fill: color,
  }));

  return (
    <div className="panel h-full flex flex-col">
      {/* Panel header */}
      <div className="panel-header">
        <span className="dot" />
        <span>Vulnerability Summary</span>
      </div>

      {/* Chart area */}
      <div className="relative flex-shrink-0" style={{ height: 180 }}>
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={chartData}
              cx="50%"
              cy="50%"
              innerRadius={50}
              outerRadius={75}
              dataKey="value"
              stroke="none"
              paddingAngle={1}
            >
              {chartData.map((entry, index) => (
                <Cell key={SEVERITY_CONFIG[index].key} fill={entry.fill} />
              ))}
            </Pie>
            <Tooltip content={<CustomTooltip />} />
          </PieChart>
        </ResponsiveContainer>

        {/* Center label */}
        <div
          className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none"
        >
          <span className="font-mono text-2xl font-bold text-ap-silver tabular-nums leading-none">
            {total}
          </span>
          <span className="font-mono text-[10px] text-ap-silver-dim uppercase tracking-widest mt-1">
            Total
          </span>
        </div>
      </div>

      {/* Legend */}
      <div className="grid grid-cols-2 gap-x-4 gap-y-2 px-4 pb-4 pt-2">
        {SEVERITY_CONFIG.map(({ key, label, color }) => (
          <div key={key} className="flex items-center gap-2">
            <span
              className="inline-block w-2 h-2 shrink-0"
              style={{ backgroundColor: color }}
            />
            <span className="font-mono text-xs text-ap-silver-dim">
              {label}
            </span>
            <span className="ml-auto font-mono text-xs font-bold text-ap-silver tabular-nums">
              {data[key] || 0}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
