import type { Metadata } from "next";

import Link from "next/link";

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

import { getMeetings, getMeetingCommittees } from "@/lib/feed";

import { MeetingsBrowser } from "@/components/meetings-browser";

export const revalidate = 300;

export const metadata: Metadata = {

  title: "Congressional Schedule",

  description:

    "When Congress meets: committee hearings, markups, business meetings, and floor action. Each meeting links to its official schedule.",

};

function isoTodayUtc(): string {

  const d = new Date();

  const pad = (n: number) => (n < 10 ? `0${n}` : String(n));

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

}

export default function SchedulePage() {

  const all = getMeetings();

  const committees = getMeetingCommittees();

  const todayIso = isoTodayUtc();

  const upcoming = all.filter((m) => !m.date || m.date >= todayIso).length;

  const past = all.length - upcoming;

  const hearings = all.filter((m) => (m.type || "").toLowerCase() === "hearing").length;

  const floor = all.filter((m) => (m.type || "").toLowerCase() === "floor").length;

  return (

    <div className="mx-auto w-full max-w-register px-4 py-10 sm:px-6">

      <Link

        href="/register"

        className="focus-ring tap label mb-6 gap-1 text-ash hover:text-paper"

      >

        ← Register

      </Link>

      <PageHeader

        eyebrow={"Schedule · what Congress is meeting about"}

        title="Congressional meetings"

        lead="Committee hearings, markups, business meetings, and floor action. Browse upcoming sessions or look back at past meetings. Each entry links to its official schedule."

      />

      {}

      <div className="mt-8 grid gap-4 sm:grid-cols-4">

        <SummaryCard label="Total on record" count={all.length} />

        <SummaryCard label="Upcoming" count={upcoming} />

        <SummaryCard label="Past" count={past} />

        <SummaryCard label="Hearings" count={hearings} />

      </div>

      {floor > 0 ? (

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

          {floor} floor action{floor === 1 ? "" : "s"} in the record.

        </p>

      ) : null}

      <div className="mt-10">

        <MeetingsBrowser seed={all} committees={committees} todayIso={todayIso} />

      </div>

      <div className="mt-12 border-t border-line pt-6">

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

          Meeting schedules from clerk.house.gov, senate.gov, and committee .gov

          sites. Each meeting links to its source. No commentary appears here.

        </p>

      </div>

    </div>

  );

}

function SummaryCard({ label, count }: { label: string; count: number }) {

  return (

    <div className="rounded-[3px] border border-line bg-surface p-5">

      <p className="label mb-2">{label}</p>

      <div className="flex items-baseline gap-2">

        <span className="display text-3xl text-paper">{count}</span>

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

          {count === 1 ? "meeting" : "meetings"}

        </span>

      </div>

    </div>

  );

}