import Link from 'next/link';
import { IncidentRow, TYPE_LABEL } from '@/components/incidents/IncidentRow';
import { Empty, PNum, Section } from '@/components/ui/primitives';
import { MONTH_NAMES, fmt, fmtInt } from '@/lib/format';
import { pressureColor } from '@/lib/pressure';
import type { HistoryDay, HistoryMonthRow, HistorySummary, Incident } from '@/lib/types';

/** Calendar heat strip: one cell per day coloured by max pressure. */
export function DayStrip({ days, year, month }: { days: HistoryDay[]; year: number; month: number }) {
  const dim = new Date(Date.UTC(year, month, 0)).getUTCDate();
  const byDate = new Map(days.map((d) => [d.date, d]));
  const firstDow = (new Date(Date.UTC(year, month - 1, 1)).getUTCDay() + 6) % 7; // Monday first
  return (
    <div>
      <div className="grid grid-cols-7 gap-1 text-center text-[10px] text-ink-3">
        {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => (
          <span key={i}>{d}</span>
        ))}
      </div>
      <div className="mt-1 grid grid-cols-7 gap-0.5 sm:gap-1">
        {Array.from({ length: firstDow }).map((_, i) => (
          <span key={`e${i}`} />
        ))}
        {Array.from({ length: dim }, (_, i) => i + 1).map((n) => {
          const date = `${year}-${String(month).padStart(2, '0')}-${String(n).padStart(2, '0')}`;
          const d = byDate.get(date);
          return (
            <div key={date} className="min-h-[44px] min-w-0 overflow-hidden rounded-[3px] border border-line p-1 sm:p-1.5" style={{ background: d ? pressureColor(d.max) + '33' : 'var(--neutral)' }} title={d ? `${date}: min ${fmt(d.min)} · avg ${fmt(d.avg)} · max ${fmt(d.max)} · ${d.events} events` : `${date}: not observed`}>
              <div className="flex items-baseline justify-between">
                <span className="num text-[10.5px] text-ink-2">{n}</span>
                {d && d.events > 0 && <span className="num text-[9.5px] text-high">{d.events}</span>}
              </div>
              {d && (
                <div className="num text-[13px] leading-tight" style={{ color: pressureColor(d.max) }}>
                  {fmt(d.max, 0)}
                </div>
              )}
            </div>
          );
        })}
      </div>
      <p className="mt-2 text-[10.5px] text-ink-3">Cell number = daily max pressure · red count = events opened that day · grey = not observed (observatory started 2026-09)</p>
    </div>
  );
}

export function MonthStrip({ months }: { months: HistoryMonthRow[] }) {
  if (!months.length) return <Empty>No month observed yet.</Empty>;
  return (
    <ul className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6">
      {months.map((m) => {
        const [y, mo] = m.month.split('-');
        return (
          <li key={m.month}>
            <Link href={`/history/${y}/${Number(mo)}`} className="block rounded-[3px] border border-line p-3 hover:border-line-2" style={{ background: pressureColor(m.max) + '22' }}>
              <div className="text-[12px] text-ink">
                {MONTH_NAMES[Number(mo) - 1]} {y}
              </div>
              <div className="num mt-1 text-[22px] leading-none" style={{ color: pressureColor(m.max) }}>
                {fmt(m.max)}
              </div>
              <div className="num mt-1 text-[10.5px] text-ink-2">
                avg {fmt(m.avg)} · min {fmt(m.min)} · {fmtInt(m.events)} events
              </div>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

export function LargestGrid({ largest }: { largest: HistorySummary['largest'] }) {
  const cats: [keyof HistorySummary['largest'], string][] = [
    ['pressure', 'Largest by pressure'],
    ['routing', 'Largest routing event'],
    ['dns', 'Largest DNS event'],
    ['latency', 'Largest latency event'],
  ];
  return (
    <ul className="grid grid-cols-[minmax(0,1fr)] gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2 lg:grid-cols-4">
      {cats.map(([k, label]) => {
        const inc = largest[k];
        return (
          <li key={k} className="bg-panel p-3">
            <div className="label">{label}</div>
            {inc ? (
              <>
                <Link href={`/event/${inc.slug}`} className="mt-1 block text-[13px] text-ink hover:text-accent">
                  {inc.title}
                </Link>
                <div className="num mt-1 flex items-baseline gap-2 text-[11px] text-ink-2">
                  <PNum value={inc.peak_pressure} className="text-[18px]" />
                  <span>{TYPE_LABEL[inc.type]}</span>
                </div>
              </>
            ) : (
              <p className="mt-1 text-[12px] text-ink-3">none in range</p>
            )}
          </li>
        );
      })}
    </ul>
  );
}

export function TopLists({ s }: { s: HistorySummary }) {
  return (
    <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-2">
      <Section label="Most affected ASNs" className="min-w-0">
        {s.top_asns.length ? (
          <table className="tbl">
            <thead>
              <tr>
                <th>ASN</th>
                <th className="r">Events</th>
                <th className="r">Max pressure</th>
              </tr>
            </thead>
            <tbody>
              {s.top_asns.map((a) => (
                <tr key={a.asn}>
                  <td>
                    <Link href={`/asn/${a.asn}`} className="text-ink hover:text-accent">
                      <span className="num">AS{a.asn}</span> {a.name}
                    </Link>
                  </td>
                  <td className="num r">{fmtInt(a.events)}</td>
                  <td className="r">
                    <PNum value={a.max_pressure} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <Empty />
        )}
      </Section>
      <Section label="Most affected regions" className="min-w-0">
        {s.top_regions.length ? (
          <table className="tbl">
            <thead>
              <tr>
                <th>Region</th>
                <th className="r">Events</th>
                <th className="r">Max</th>
                <th className="r">Hours elevated</th>
              </tr>
            </thead>
            <tbody>
              {s.top_regions.map((r) => (
                <tr key={r.id}>
                  <td>
                    <Link href={`/internet/${r.id}`} className="text-ink hover:text-accent">
                      {r.name}
                    </Link>
                  </td>
                  <td className="num r">{fmtInt(r.events)}</td>
                  <td className="r">
                    <PNum value={r.max_pressure} />
                  </td>
                  <td className="num r text-ink-2">{fmt(r.hours_elevated)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <Empty />
        )}
      </Section>
    </div>
  );
}

export function TopEvents({ events }: { events: Incident[] }) {
  if (!events.length) return <Empty>No event in this range.</Empty>;
  return (
    <ul className="divide-y divide-line">
      {events.map((e) => (
        <IncidentRow key={e.event_id} inc={e} compact />
      ))}
    </ul>
  );
}