"use client";

import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import Link from "next/link";

import { Card, SectionHeader } from "@/components/ui";

import { SourceLink } from "@/components/source-link";

import type {

  CalendarEvent,

  CalendarKind,

  CalendarDayKind,

} from "@/lib/feed";

import { clsx } from "@/lib/cx";

type KindMeta = { value: CalendarKind; plain: string; mark: string; color: string };

const KINDS: KindMeta[] = [

  { value: "effective", plain: "Takes effect", mark: "Effective", color: "var(--dk-hold)" },

  { value: "effective_parsed", plain: "Takes effect", mark: "Effective", color: "var(--dk-hold)" },

  { value: "enacted", plain: "Became law", mark: "Law", color: "var(--dk-yea)" },

  { value: "vote", plain: "Vote", mark: "Vote", color: "var(--dk-party-d)" },

  { value: "floor", plain: "Floor action", mark: "Floor", color: "var(--dk-party-r)" },

  { value: "committee", plain: "Committee", mark: "Committee", color: "var(--dk-party-i)" },

  { value: "introduced", plain: "Introduced", mark: "Introduced", color: "var(--dk-ash)" },

  { value: "apportionment", plain: "Apportionment", mark: "Appr.", color: "var(--dk-hold)" },

];

const KIND_BY_VALUE = new Map<CalendarKind, KindMeta>(KINDS.map((k) => [k.value, k]));

const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

const MONTH_NAMES = [

  "January", "February", "March", "April", "May", "June",

  "July", "August", "September", "October", "November", "December",

];

function pad(n: number): string {

  return n < 10 ? `0${n}` : String(n);

}

function isoToday(): string {

  const d = new Date();

  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;

}

function parseMonth(raw: string | undefined): { year: number; month: number } {

  const m = /^(\d{4})-(\d{1,2})$/.exec(raw ?? "");

  if (m) {

    const year = parseInt(m[1], 10);

    const month = parseInt(m[2], 10);

    if (year >= 1900 && year <= 9999 && month >= 1 && month <= 12) {

      return { year, month };

    }

  }

  const d = new Date();

  return { year: d.getUTCFullYear(), month: d.getUTCMonth() + 1 };

}

function shiftMonth(year: number, month: number, delta: number): { year: number; month: number } {

  const zero = month - 1 + delta;

  const d = new Date(Date.UTC(year, zero, 1));

  return { year: d.getUTCFullYear(), month: d.getUTCMonth() + 1 };

}

export function CalendarBrowser() {

  const sp = useSearchParams();

  const monthParam = sp.get("month") || undefined;

  const dayParam = sp.get("day") || undefined;

  const kindFilter = sp.get("kind") || undefined;

  const { year, month } = parseMonth(monthParam);

  const todayIso = isoToday();

  const selectedDay =

    dayParam && /^\d{4}-\d{2}-\d{2}$/.test(dayParam) ? dayParam : undefined;

  const daysInMonth = new Date(Date.UTC(year, month, 0)).getUTCDate();

  const firstWeekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay();

  const from = `${year}-${pad(month)}-01`;

  const to = `${year}-${pad(month)}-${pad(daysInMonth)}`;

  const [daySummary, setDaySummary] = useState<CalendarDayKind[]>([]);

  const [dayEvents, setDayEvents] = useState<CalendarEvent[]>([]);

  const [loading, setLoading] = useState(true);

  useEffect(() => {

    setLoading(true);

    fetch(`/api/calendar?from=${from}&to=${to}&summary=1`)

      .then((r) => r.json())

      .then((data) => setDaySummary(data.items ?? []))

      .catch(() => setDaySummary([]))

      .finally(() => setLoading(false));

  }, [from, to]);

  useEffect(() => {

    if (!selectedDay) {

      setDayEvents([]);

      return;

    }

    const params = new URLSearchParams();

    params.set("from", selectedDay);

    params.set("to", selectedDay);

    if (kindFilter) params.set("kind", kindFilter);

    params.set("limit", "200");

    fetch(`/api/calendar?${params.toString()}`)

      .then((r) => r.json())

      .then((data) => setDayEvents(data.items ?? []))

      .catch(() => setDayEvents([]));

  }, [selectedDay, kindFilter]);

  const filteredSummary = kindFilter

    ? daySummary.filter((s) => s.kind === kindFilter)

    : daySummary;

  const byDate = new Map<string, CalendarDayKind[]>();

  for (const s of filteredSummary) {

    const arr = byDate.get(s.date) ?? [];

    arr.push(s);

    byDate.set(s.date, arr);

  }

  const kindCounts = countKindsFromSummary(filteredSummary);

  const prev = shiftMonth(year, month, -1);

  const next = shiftMonth(year, month, +1);

  const prevHref = hrefFor(prev, selectedDay, kindFilter);

  const nextHref = hrefFor(next, selectedDay, kindFilter);

  const todayHref = hrefFor({ year: todayYear(), month: todayMonth() }, todayIso, kindFilter);

  const cells: Array<number | null> = [];

  for (let i = 0; i < firstWeekday; i++) cells.push(null);

  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  while (cells.length % 7 !== 0) cells.push(null);

  return (

    <>

      {}

      <div className="mt-8 flex flex-wrap items-center justify-between gap-3">

        <div className="flex items-center gap-1">

          <Link

            href={prevHref}

            className="focus-ring label inline-flex min-h-[44px] items-center rounded-[3px] border border-line px-3 text-ash hover:text-paper"

            aria-label={`Previous month, ${MONTH_NAMES[prev.month - 1]} ${prev.year}`}

          >

            ← {MONTH_NAMES[prev.month - 1].slice(0, 3)}

          </Link>

          <p

            className="display px-2 text-paper"

            aria-live="polite"

            style={{ fontSize: "clamp(1.25rem, 5vw, 1.875rem)" }}

          >

            {MONTH_NAMES[month - 1]} {year}

          </p>

          <Link

            href={nextHref}

            className="focus-ring label inline-flex min-h-[44px] items-center rounded-[3px] border border-line px-3 text-ash hover:text-paper"

            aria-label={`Next month, ${MONTH_NAMES[next.month - 1]} ${next.year}`}

          >

            {MONTH_NAMES[next.month - 1].slice(0, 3)} →

          </Link>

        </div>

        <Link

          href={todayHref}

          className="focus-ring label inline-flex min-h-[44px] items-center rounded-[3px] border border-line px-3 text-ash underline underline-offset-4 hover:text-paper"

        >

          Today

        </Link>

      </div>

      {}

      <div className="mt-5 flex flex-wrap items-center gap-1.5" role="group" aria-label="Filter by kind">

        <Link

          href={hrefFor({ year, month }, selectedDay, undefined)}

          className={clsx(

            "focus-ring label inline-flex min-h-[44px] items-center rounded-[3px] border px-2.5",

            !kindFilter ? "border-paper text-paper" : "border-line text-ash hover:text-paper"

          )}

          aria-pressed={!kindFilter}

        >

          All

        </Link>

        {KINDS.filter((k, i) => KINDS.findIndex((x) => x.mark === k.mark) === i).map((k) => {

          const active = kindFilter === k.value;

          return (

            <Link

              key={k.value}

              href={hrefFor({ year, month }, selectedDay, active ? undefined : k.value)}

              className={clsx(

                "focus-ring label inline-flex min-h-[44px] items-center gap-1.5 rounded-[3px] border px-2.5",

                active ? "border-paper text-paper" : "border-line text-ash hover:text-paper"

              )}

              aria-pressed={active}

            >

              <span

                aria-hidden="true"

                className="inline-block h-2 w-2 rounded-full"

                style={{ backgroundColor: k.color }}

              />

              {k.plain}

            </Link>

          );

        })}

      </div>

      <div className="mt-6 grid gap-6 lg:grid-cols-[1.5fr_1fr]">

        {}

        <div>

          {}

          <Card className="hidden overflow-hidden md:block">

            <table className="w-full table-fixed border-collapse text-left">

              <caption className="sr-only">

                Calendar grid for {MONTH_NAMES[month - 1]} {year}. Each cell is a

                day; select a day to read its events. Rows are weeks, columns

                are weekdays starting Sunday.

              </caption>

              <thead>

                <tr className="border-b border-line">

                  {WEEKDAYS.map((w) => (

                    <th key={w} scope="col" className="label px-2 py-2.5 font-normal">

                      {w}

                    </th>

                  ))}

                </tr>

              </thead>

              <tbody>

                {chunk(cells, 7).map((row, ri) => (

                  <tr key={ri} className="border-b border-line last:border-0">

                    {row.map((day, ci) => {

                      if (day == null) {

                        return (

                          <td key={ci} aria-hidden="true" className="bg-ink/40 p-0">

                            <div className="min-h-[5.5rem]" />

                          </td>

                        );

                      }

                      const dateStr = `${year}-${pad(month)}-${pad(day)}`;

                      const evs = byDate.get(dateStr) ?? [];

                      const evCount = dayEventCount(evs);

                      const isToday = dateStr === todayIso;

                      const isSelected = dateStr === selectedDay;

                      const marks = distinctMarks(evs);

                      const marksLabel = marks.map((m) => m.plain).join(", ");

                      return (

                        <td key={ci} className="border-r border-line p-0 align-top last:border-r-0">

                          <Link

                            href={hrefFor({ year, month }, dateStr, kindFilter)}

                            aria-label={`${day} ${MONTH_NAMES[month - 1]} ${year}${evCount ? `, ${evCount} event${evCount === 1 ? "" : "s"}${marksLabel ? `: ${marksLabel}` : ""}` : ", no events"}`}

                            aria-current={isSelected ? "true" : undefined}

                            className={clsx(

                              "focus-ring flex h-full min-h-[5.5rem] flex-col justify-between p-2 no-underline",

                              isSelected ? "bg-graphite" : "hover:bg-graphite/50"

                            )}

                          >

                            <span

                              className={clsx(

                                "flex h-7 w-7 items-center justify-center rounded-full font-mono text-[13px] tabular-nums",

                                isToday

                                  ? "bg-signal text-ink"

                                  : evCount

                                    ? "text-paper"

                                    : "text-ash-2"

                              )}

                            >

                              {day}

                            </span>

                            {evCount > 0 ? (

                              <span className="mt-1.5 flex items-center gap-1.5" aria-hidden="true">

                                <span className="flex flex-wrap gap-1">

                                  {marks.slice(0, 4).map((m, i) => (

                                    <span

                                      key={i}

                                      className="inline-block h-2 w-2 shrink-0 rounded-full"

                                      style={{ backgroundColor: m.color }}

                                      title={m.plain}

                                    />

                                  ))}

                                </span>

                                <span className="label !text-[10px] tabular-nums text-ash-2">

                                  {evCount}

                                </span>

                              </span>

                            ) : null}

                          </Link>

                        </td>

                      );

                    })}

                  </tr>

                ))}

              </tbody>

            </table>

            <p className="label border-t border-line px-3 py-2 text-ash-2">

              {loading

                ? "Loading events…"

                : `${filteredSummary.reduce((s, e) => s + e.count, 0)} event${filteredSummary.reduce((s, e) => s + e.count, 0) === 1 ? "" : "s"} this month. Select a day to read them.`}

            </p>

          </Card>

          {}

          <div className="md:hidden">

            <MobileAgenda

              daySummary={filteredSummary}

              kindByValue={KIND_BY_VALUE}

              selectedDay={selectedDay}

              dayEvents={dayEvents}

              year={year}

              month={month}

              kindFilter={kindFilter}

              loading={loading}

            />

          </div>

        </div>

        {}

        <div className="space-y-6">

          <Card className="p-5">

            <p className="label mb-3">Legend</p>

            <ul className="space-y-2">

              {KINDS.filter((k, i) => KINDS.findIndex((x) => x.mark === k.mark) === i).map((k) => (

                <li key={k.value} className="flex items-center gap-2.5">

                  <span

                    aria-hidden="true"

                    className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"

                    style={{ backgroundColor: k.color }}

                  />

                  <span className="font-mono text-[12px] text-paper">{k.plain}</span>

                  <span className="label text-ash-2">{kindCounts.get(k.value) ?? 0}</span>

                </li>

              ))}

            </ul>

            <p className="label mt-4 text-ash-2">

              Colors are a cue only. Each mark carries its name, so the grid

              reads clearly in Plain mode too.

            </p>

          </Card>

          <div>

            <SectionHeader

              eyebrow={selectedDay ? "Selected day" : "Pick a day"}

              title={selectedDay ? formatLong(selectedDay) : "Day events"}

            />

            {!selectedDay ? (

              <Card className="p-5">

                <p className="font-mono text-[13px] text-ash-2">

                  Select a day in the grid to read its events. Each event links

                  to its official source.

                </p>

              </Card>

            ) : dayEvents.length === 0 ? (

              <Card className="p-5">

                <p className="font-mono text-[13px] text-ash-2">

                  No events on record for {formatLong(selectedDay)}

                  {kindFilter ? " for this filter" : ""}.

                </p>

              </Card>

            ) : (

              <Card className="divide-y divide-[color:var(--dk-line)]">

                {dayEvents.map((e) => {

                  const k = KIND_BY_VALUE.get(e.kind);

                  return (

                    <div key={e.id} className="p-4">

                      <div className="flex flex-wrap items-center gap-2">

                        {k ? (

                          <span

                            className="pill"

                            style={{

                              color: k.color,

                              borderColor: `color-mix(in srgb, ${k.color} 45%, transparent)`,

                            }}

                          >

                            {k.plain}

                          </span>

                        ) : (

                          <span className="pill text-ash">{e.kind}</span>

                        )}

                        <span className="label text-ash-2">{e.refType}</span>

                      </div>

                      <p className="mt-2 font-mono text-[12px] leading-relaxed text-paper">

                        {e.href ? (

                          <Link

                            href={e.href}

                            className="focus-ring rounded-sm underline underline-offset-4 hover:text-paper"

                          >

                            {e.title}

                          </Link>

                        ) : (

                          e.title

                        )}

                      </p>

                      <div className="mt-2">

                        <SourceLink url={e.sourceUrl} />

                      </div>

                    </div>

                  );

                })}

              </Card>

            )}

          </div>

        </div>

      </div>

    </>

  );

}

function hrefFor(

  ym: { year: number; month: number },

  day: string | undefined,

  kind: string | undefined

): string {

  const params = new URLSearchParams();

  params.set("month", `${ym.year}-${pad(ym.month)}`);

  if (day) params.set("day", day);

  if (kind) params.set("kind", kind);

  return `/calendar?${params.toString()}`;

}

function todayYear(): number {

  return new Date().getUTCFullYear();

}

function todayMonth(): number {

  return new Date().getUTCMonth() + 1;

}

function chunk<T>(arr: T[], size: number): T[][] {

  const out: T[][] = [];

  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));

  return out;

}

function distinctMarks(evs: CalendarDayKind[]): KindMeta[] {

  const seen = new Set<string>();

  const out: KindMeta[] = [];

  for (const e of evs) {

    const m = KIND_BY_VALUE.get(e.kind);

    if (m && !seen.has(m.mark)) {

      seen.add(m.mark);

      out.push(m);

    }

  }

  return out;

}

function dayEventCount(evs: CalendarDayKind[]): number {

  return evs.reduce((s, e) => s + e.count, 0);

}

function countKindsFromSummary(summary: CalendarDayKind[]): Map<CalendarKind, number> {

  const m = new Map<CalendarKind, number>();

  for (const s of summary) m.set(s.kind, (m.get(s.kind) ?? 0) + s.count);

  return m;

}

function formatLong(iso: string): string {

  const d = new Date(iso + "T00:00:00Z");

  if (Number.isNaN(d.getTime())) return iso;

  return d.toLocaleDateString("en-US", {

    timeZone: "UTC",

    weekday: "long",

    year: "numeric",

    month: "long",

    day: "numeric",

  });

}

function MobileAgenda({

  daySummary,

  kindByValue,

  selectedDay,

  dayEvents,

  year,

  month,

  kindFilter,

  loading,

}: {

  daySummary: CalendarDayKind[];

  kindByValue: Map<CalendarKind, KindMeta>;

  selectedDay: string | undefined;

  dayEvents: CalendarEvent[];

  year: number;

  month: number;

  kindFilter: string | undefined;

  loading: boolean;

}) {

  const byDate = new Map<string, CalendarDayKind[]>();

  for (const s of daySummary) {

    const arr = byDate.get(s.date) ?? [];

    arr.push(s);

    byDate.set(s.date, arr);

  }

  const days = Array.from(byDate.keys()).sort();

  if (loading) {

    return (

      <Card className="p-5">

        <p className="font-mono text-[13px] text-ash-2">Loading events…</p>

      </Card>

    );

  }

  if (days.length === 0) {

    return (

      <Card className="p-5">

        <p className="font-mono text-[13px] text-ash-2">

          No events on record for this month. Month navigation above moves to

          other months; each event will link to its official source.

        </p>

      </Card>

    );

  }

  return (

    <div className="space-y-2">

      {days.map((d) => {

        const evs = byDate.get(d)!;

        const count = dayEventCount(evs);

        const marks = distinctMarks(evs);

        const isSelected = d === selectedDay;

        return (

          <section key={d}>

            <Link

              href={hrefFor({ year, month }, d, kindFilter)}

              className={`focus-ring block rounded-[3px] border p-3 no-underline hover:bg-graphite/50 ${isSelected ? "border-paper bg-graphite" : "border-line"}`}

              aria-current={isSelected ? "true" : undefined}

            >

              <div className="flex items-center justify-between gap-3">

                <span className="font-mono text-[13px] text-paper">{formatLong(d)}</span>

                <span className="label text-ash-2 shrink-0">{count} event{count === 1 ? "" : "s"}</span>

              </div>

              <div className="mt-1.5 flex flex-wrap gap-1">

                {marks.map((m, i) => (

                  <span

                    key={i}

                    className="pill !px-1.5 !py-0"

                    style={{

                      color: m.color,

                      borderColor: `color-mix(in srgb, ${m.color} 45%, transparent)`,

                    }}

                  >

                    {m.plain}

                  </span>

                ))}

              </div>

            </Link>

            {isSelected && dayEvents.length > 0 && (

              <div className="mt-2 space-y-2 pl-3">

                {dayEvents.map((e) => {

                  const k = kindByValue.get(e.kind);

                  return (

                    <article

                      key={e.id}

                      className="rounded-[3px] border border-line bg-surface p-3"

                    >

                      <div className="flex flex-wrap items-center gap-2">

                        {k ? (

                          <span

                            className="pill !py-0.5"

                            style={{

                              color: k.color,

                              borderColor: `color-mix(in srgb, ${k.color} 45%, transparent)`,

                            }}

                          >

                            {k.plain}

                          </span>

                        ) : (

                          <span className="pill !py-0.5 text-ash">{e.kind}</span>

                        )}

                        <span className="label text-ash-2">{e.refType}</span>

                      </div>

                      <p className="mt-2 break-words font-mono text-[12px] leading-relaxed text-paper">

                        {e.href ? (

                          <Link

                            href={e.href}

                            className="focus-ring rounded-sm underline underline-offset-4 hover:text-paper"

                          >

                            {e.title}

                          </Link>

                        ) : (

                          e.title

                        )}

                      </p>

                      <div className="mt-2">

                        <SourceLink url={e.sourceUrl} />

                      </div>

                    </article>

                  );

                })}

              </div>

            )}

          </section>

        );

      })}

    </div>

  );

}