'use client';

import type { ThemeScore } from '../types';

interface IntensityHeatmapProps {
  themes: ThemeScore[];
}

function getCellColor(value: number, max: number): string {
  if (max === 0) return '#f3f4f6';
  const ratio = value / max;
  if (ratio > 0.7) return '#ef4444';
  if (ratio > 0.4) return '#f97316';
  if (ratio > 0.15) return '#f59e0b';
  if (ratio > 0) return '#fef3c7';
  return '#f3f4f6';
}

function getCellTextColor(value: number, max: number): string {
  if (max === 0) return '#9ca3af';
  const ratio = value / max;
  return ratio > 0.4 ? '#ffffff' : '#374151';
}

export default function IntensityHeatmap({ themes }: IntensityHeatmapProps) {
  if (themes.length === 0) {
    return (
      <div className="flex items-center justify-center h-48 text-gray-400">
        No intensity data
      </div>
    );
  }

  const displayed = themes.slice(0, 12);
  const allValues = displayed.flatMap(t => [t.intensity.i1, t.intensity.i2, t.intensity.i3]);
  const maxValue = Math.max(...allValues, 1);

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="text-gray-500">
            <th className="text-left py-2 pr-4 font-medium">Primitive</th>
            <th className="text-center py-2 px-3 font-medium">I1 (Low)</th>
            <th className="text-center py-2 px-3 font-medium">I2 (Med)</th>
            <th className="text-center py-2 px-3 font-medium">I3 (High)</th>
            <th className="text-right py-2 pl-3 font-medium">Total</th>
          </tr>
        </thead>
        <tbody>
          {displayed.map((t) => (
            <tr key={t.primitive} className="border-t border-gray-100">
              <td className="py-2 pr-4 text-gray-700 font-medium truncate max-w-[160px]" title={t.label}>
                {t.label}
              </td>
              {[t.intensity.i1, t.intensity.i2, t.intensity.i3].map((val, i) => (
                <td key={i} className="text-center py-2 px-3">
                  <span
                    className="inline-block rounded-md px-3 py-1 text-xs font-semibold min-w-[40px]"
                    style={{
                      backgroundColor: getCellColor(val, maxValue),
                      color: getCellTextColor(val, maxValue),
                    }}
                  >
                    {val}
                  </span>
                </td>
              ))}
              <td className="text-right py-2 pl-3 text-gray-600 font-semibold">
                {t.count}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex items-center justify-end gap-2 mt-3">
        <span className="text-xs text-gray-400">Low</span>
        <div className="flex gap-0.5">
          {['#fef3c7', '#f59e0b', '#f97316', '#ef4444'].map((c, i) => (
            <div key={i} className="w-4 h-3 rounded-sm" style={{ backgroundColor: c }} />
          ))}
        </div>
        <span className="text-xs text-gray-400">High</span>
      </div>
    </div>
  );
}
