const MONTH_LABELS = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];

// Auslastung nach Monat über alle Jahre hinweg — bei einem saisonabhängigen
// Geschäft wie Cosplay-Fotografie mit Convention-Spitzen (z. B. Sommer)
// aussagekräftiger als eine reine Liste.
export function MonthHeatmap({ data }: { data: { month: string; count: number }[] }) {
  if (data.length === 0) return null;
  const byMonth = new Map(data.map((d) => [d.month, d.count]));
  const years = [...new Set(data.map((d) => d.month.slice(0, 4)))].sort();
  const max = Math.max(1, ...data.map((d) => d.count));

  return (
    <div className="overflow-x-auto">
      <table className="text-xs border-separate" style={{ borderSpacing: "3px" }}>
        <thead>
          <tr>
            <th className="w-10" />
            {MONTH_LABELS.map((m) => (
              <th key={m} className="font-normal text-[0.6rem] text-[var(--rk-ink-muted)] pb-1">
                {m}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {years.map((year) => (
            <tr key={year}>
              <td className="text-[0.65rem] text-[var(--rk-ink-muted)] pr-2">{year}</td>
              {MONTH_LABELS.map((_, i) => {
                const key = `${year}-${String(i + 1).padStart(2, "0")}`;
                const count = byMonth.get(key) ?? 0;
                const intensity = count / max;
                return (
                  <td key={key} title={`${key}: ${count} Shooting${count === 1 ? "" : "s"}`}>
                    <div
                      className="w-7 h-7 rounded flex items-center justify-center text-[0.6rem]"
                      style={{
                        backgroundColor: count > 0 ? `rgba(52, 211, 153, ${0.15 + intensity * 0.65})` : "rgba(255,255,255,0.04)",
                        color: intensity > 0.5 ? "#0a0a0a" : "var(--rk-ink-muted)",
                      }}
                    >
                      {count > 0 ? count : ""}
                    </div>
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}