"use client";

import { useMemo, useState } from "react";

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

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

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

import type { Meeting } from "@/lib/feed";

type Scope = "upcoming" | "past" | "all";

type DayGroup = { date: string; items: Meeting[] };

type TypeMeta = { plain: string; color: string };

const TYPE_META: Record<string, TypeMeta> = {

  hearing: { plain: "Hearing", color: "var(--dk-hold)" },

  markup: { plain: "Markup", color: "var(--dk-party-d)" },

  business_meeting: { plain: "Business meeting", color: "var(--dk-party-i)" },

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

};

function typeMeta(t: string): TypeMeta {

  return (

    TYPE_META[(t || "").toLowerCase()] ?? {

      plain: (t || "Meeting").replace(/_/g, " "),

      color: "var(--dk-ash)",

    }

  );

}

const MONTHS = [

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

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

];

const WEEKDAYS = [

  "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",

];

function formatDayHeader(iso: string): string {

  const d = new Date(iso.length === 10 ? iso + "T00:00:00Z" : iso);

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

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

    timeZone: "UTC",

    weekday: "long",

    month: "long",

    day: "numeric",

    year: "numeric",

  });

}

function formatTime(m: Meeting): string {

  const t = (m.time || "").trim();

  if (!t) return "";

  const ampm = t.match(/^(\d{1,2}):(\d{2})\s*([AaPp])\.?[Mm]\.?$/);

  if (ampm) {

    const h = parseInt(ampm[1], 10);

    const h12 = h === 0 ? 12 : h;

    return `${h12}:${ampm[2]} ${ampm[3].toUpperCase()}M`;

  }

  const parts = t.split(":");

  const hh = parseInt(parts[0], 10);

  const mm = parseInt(parts[1], 10);

  if (!Number.isFinite(hh) || !Number.isFinite(mm)) return "";

  const period = hh < 12 ? "AM" : "PM";

  const h12 = ((hh + 11) % 12) + 1;

  return `${h12}:${String(mm).padStart(2, "0")} ${period}`;

}

function dedash(s: string): string {

  return s ? s.replace(/--/g, "-") : s;

}

export function MeetingsBrowser({

  seed,

  committees,

  todayIso,

}: {

  seed: Meeting[];

  committees: string[];

  todayIso: string;

}) {

  const [q, setQ] = useState("");

  const [chamber, setChamber] = useState("");

  const [type, setType] = useState("");

  const [committee, setCommittee] = useState("");

  const [scope, setScope] = useState<Scope>("upcoming");

  const filtered = useMemo(() => {

    const query = q.trim().toLowerCase();

    return seed.filter((m) => {

      if (

        query &&

        !m.committee.toLowerCase().includes(query) &&

        !m.subject.toLowerCase().includes(query) &&

        !m.title.toLowerCase().includes(query)

      ) {

        return false;

      }

      if (chamber && m.chamber.toLowerCase() !== chamber.toLowerCase()) return false;

      if (type && m.type.toLowerCase() !== type.toLowerCase()) return false;

      if (committee && m.committee !== committee) return false;

      if (scope === "upcoming" && m.date && m.date < todayIso) return false;

      if (scope === "past" && (!m.date || m.date >= todayIso)) return false;

      return true;

    });

  }, [seed, q, chamber, type, committee, scope, todayIso]);

  const groups = useMemo(() => groupByDay(filtered, scope === "past"), [filtered, scope]);

  const upcomingCount = useMemo(

    () => seed.filter((m) => !m.date || m.date >= todayIso).length,

    [seed, todayIso]

  );

  const pastCount = seed.length - upcomingCount;

  const hasAny = seed.length > 0;

  function clearAll() {

    setQ("");

    setChamber("");

    setType("");

    setCommittee("");

  }

  const filtering = q || chamber || type || committee;

  return (

    <>

      {}

      <Card className="p-4 sm:p-5">

        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">

          <Field label="Search">

            <input

              type="search"

              value={q}

              onChange={(e) => setQ(e.target.value)}

              placeholder="Committee or subject"

              aria-label="Search meetings by committee or subject"

              className="focus-ring w-full rounded-[2px] border border-line bg-ink px-3 py-2 font-mono text-[13px] text-paper placeholder:text-ash-2"

            />

          </Field>

          <Field label="Chamber">

            <Select

              ariaLabel="Filter by chamber"

              value={chamber}

              onChange={setChamber}

              options={[

                { value: "", label: "Both chambers" },

                { value: "senate", label: "Senate" },

                { value: "house", label: "House" },

              ]}

            />

          </Field>

          <Field label="Type">

            <Select

              ariaLabel="Filter by meeting type"

              value={type}

              onChange={setType}

              options={[

                { value: "", label: "All types" },

                { value: "hearing", label: "Hearing" },

                { value: "markup", label: "Markup" },

                { value: "business_meeting", label: "Business meeting" },

                { value: "floor", label: "Floor" },

              ]}

            />

          </Field>

          <Field label="Committee">

            <Select

              ariaLabel="Filter by committee"

              value={committee}

              onChange={setCommittee}

              options={[

                { value: "", label: "All committees" },

                ...committees.map((c) => ({ value: c, label: c })),

              ]}

            />

          </Field>

        </div>

        {}

        <div

          role="group"

          aria-label="Show upcoming or past meetings"

          className="mt-4 flex flex-wrap items-center gap-1"

        >

          {(

            [

              { value: "upcoming", label: `Upcoming · ${upcomingCount}` },

              { value: "past", label: `Past · ${pastCount}` },

              { value: "all", label: `All · ${seed.length}` },

            ] as Array<{ value: Scope; label: string }>

          ).map((opt) => {

            const active = scope === opt.value;

            return (

              <button

                key={opt.value}

                type="button"

                onClick={() => setScope(opt.value)}

                aria-pressed={active}

                className={clsx(

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

                  active

                    ? "border-paper text-paper"

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

                )}

              >

                {opt.label}

              </button>

            );

          })}

          {filtering ? (

            <button

              type="button"

              onClick={clearAll}

              className="focus-ring label ml-auto inline-flex min-h-[44px] items-center rounded-sm px-2 text-ash underline underline-offset-4 hover:text-paper"

            >

              Clear filters

            </button>

          ) : null}

        </div>

      </Card>

      {}

      <div className="mt-6">

        {!hasAny ? (

          <Card className="p-8 text-center">

            <p className="display text-2xl text-paper">No meetings on record yet.</p>

            <p className="prose-lead mx-auto mt-3 max-w-md text-ash">

              Congressional committee and floor meetings will appear here - when

              committees hold them, each sealed to its official schedule.

            </p>

          </Card>

        ) : groups.length === 0 ? (

          <Card className="p-8 text-center">

            <p className="display text-2xl text-paper">No meetings match.</p>

            <p className="prose-lead mx-auto mt-3 max-w-md text-ash">

              {scope === "upcoming"

                ? "No upcoming meetings match the filters. Try Past, or clear a filter."

                : "Adjust the filters above."}

            </p>

          </Card>

        ) : (

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

            {groups.map((g) => (

              <section key={g.date || "undated"} aria-label={formatDayHeader(g.date)}>

                <div className="mb-3 flex items-baseline justify-between gap-3 border-b border-line pb-2">

                  <h3 className="font-mono text-[14px] text-paper">

                    {g.date ? formatDayHeader(g.date) : "Date not on record"}

                  </h3>

                  <span className="label text-ash-2">

                    {g.items.length} meeting{g.items.length === 1 ? "" : "s"}

                  </span>

                </div>

                <div className="grid gap-3 lg:grid-cols-2">

                  {g.items.map((m) => (

                    <MeetingCard key={m.id} m={m} />

                  ))}

                </div>

              </section>

            ))}

          </div>

        )}

      </div>

    </>

  );

}

function MeetingCard({ m }: { m: Meeting }) {

  const tm = typeMeta(m.type);

  const time = formatTime(m);

  const cancelled = /cancel/i.test(m.status);

  return (

    <article className="flex flex-col gap-2 rounded-[3px] border border-line bg-surface p-4">

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

        <span

          className="pill"

          style={{

            color: tm.color,

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

          }}

        >

          {tm.plain}

        </span>

        <span className="label text-ash-2">

          {m.chamber ? cap(m.chamber) : "Congress"}

        </span>

        {time ? (

          <span className="label text-paper">{time}</span>

        ) : null}

        {m.status ? (

          <span

            className={clsx("pill", cancelled ? "text-nay" : "text-ash")}

            style={

              cancelled

                ? { borderColor: "color-mix(in srgb, var(--dk-nay) 45%, transparent)" }

                : undefined

            }

          >

            {cap(m.status)}

          </span>

        ) : null}

      </div>

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

        {m.committee ? dedash(m.committee) : "Committee not on record"}

      </p>

      {m.subject ? (

        <p className="font-mono text-[13px] leading-relaxed text-ash">{dedash(m.subject)}</p>

      ) : null}

      {}

      {m.title && m.title.trim() !== m.subject.trim() ? (

        <p className="font-mono text-[13px] leading-relaxed text-ash-2">{dedash(m.title)}</p>

      ) : null}

      {m.location ? (

        <p className="label text-ash-2">Location · {m.location}</p>

      ) : null}

      <div className="mt-1">

        <SourceLink url={m.sourceUrl} label="Schedule" />

      </div>

    </article>

  );

}

function Field({ label, children }: { label: string; children: React.ReactNode }) {

  return (

    <label className="block">

      <span className="label mb-1.5 block">{label}</span>

      {children}

    </label>

  );

}

function Select({

  value,

  onChange,

  ariaLabel,

  options,

}: {

  value: string;

  onChange: (v: string) => void;

  ariaLabel: string;

  options: Array<{ value: string; label: string }>;

}) {

  return (

    <select

      value={value}

      onChange={(e) => onChange(e.target.value)}

      aria-label={ariaLabel}

      className={clsx(

        "focus-ring w-full rounded-[2px] border border-line bg-ink px-3 py-2",

        "font-mono text-[13px] text-paper"

      )}

    >

      {options.map((o) => (

        <option key={o.value} value={o.value} className="bg-surface text-paper">

          {o.label}

        </option>

      ))}

    </select>

  );

}

function groupByDay(list: Meeting[], desc: boolean): DayGroup[] {

  const map = new Map<string, Meeting[]>();

  for (const m of list) {

    const key = m.date || "";

    const arr = map.get(key) ?? [];

    arr.push(m);

    map.set(key, arr);

  }

  for (const arr of map.values()) {

    arr.sort((a, b) => {

      const ta = a.datetimeIso || `${a.date} ${a.time}`;

      const tb = b.datetimeIso || `${b.date} ${b.time}`;

      return desc ? tb.localeCompare(ta) : ta.localeCompare(tb);

    });

  }

  const keys = Array.from(map.keys());

  keys.sort((a, b) => (desc ? b.localeCompare(a) : a.localeCompare(b)));

  keys.sort((a, b) => {

    if (!a && b) return 1;

    if (a && !b) return -1;

    return 0;

  });

  return keys.map((date) => ({ date, items: map.get(date)! }));

}

function cap(s: string): string {

  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;

}