"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import Link from "next/link";

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

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

import { formatEt, formatDateShort } from "@/lib/format";

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

export function RegisterHero({ seed }: { seed: FeedItem[] }) {

  const [rows, setRows] = useState<FeedItem[]>(seed);

  const [flashId, setFlashId] = useState<string | null>(null);

  const prevIds = useRef<Set<string>>(new Set(seed.map((r) => r.id)));

  const refresh = useCallback(async () => {

    try {

      const res = await fetch("/api/feed?limit=12", { cache: "no-store" });

      if (!res.ok) return;

      const data = (await res.json()) as { items: FeedItem[] };

      if (!data.items?.length) return;

      setRows((prev) => {

        const next = data.items.slice(0, 12);

        const newTop = next.find((it) => !prevIds.current.has(it.id));

        next.forEach((it) => prevIds.current.add(it.id));

        if (newTop) setFlashId(newTop.id);

        return next;

      });

    } catch {

    }

  }, []);

  useEffect(() => {

    const iv = setInterval(refresh, 15000);

    return () => clearInterval(iv);

  }, [refresh]);

  return (

    <section

      className="relative overflow-hidden border-y border-line"

      aria-label="The Register - live feed of official actions"

    >

      {}

      <div

        aria-hidden="true"

        className="pointer-events-none absolute inset-0"

        style={{ background: "var(--dk-hero-glow)" }}

      />

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

        {}

        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">

          <div>

            <div className="mb-3 flex items-center gap-2.5">

              {}

              <span className="live-dot animate-pulseDot" aria-hidden="true" />

              <span className="label text-paper">Live · The Register</span>

            </div>

            <h1

              className="display max-w-2xl text-paper"

              style={{ fontSize: "clamp(1.875rem, 7vw, 3rem)", lineHeight: 1 }}

            >

              What the government did this week

            </h1>

          </div>

          <p className="prose-lead max-w-sm text-ash">

            Each line is an official action, sealed to its source. No

            commentary. Order is the order of action.

          </p>

        </div>

        {rows.length === 0 ? (

          <EmptyRegister />

        ) : (

          <div

            className="mt-8 overflow-hidden rounded-[3px] border border-line bg-surface/60 backdrop-blur-sm"

            aria-label="Stamped ledger of official actions"

          >

            {}

            <div className="reg-row hidden grid-cols-[5.5rem_7.5rem_minmax(0,1fr)_6.5rem_minmax(0,5rem)] gap-x-2 px-4 py-2 sm:grid">

              <span className="label">Date</span>

              <span className="label">Body</span>

              <span className="label">Item</span>

              <span className="label">Action</span>

              <span className="label text-right">Result</span>

            </div>

            {rows.map((r) => {

              const isNew = r.id === flashId;

              return (

                <div key={r.id} className="border-t border-line first:border-t-0">

                  {

}

                  <RegisterRowInner row={r} flash={isNew} />

                </div>

              );

            })}

          </div>

        )}

        <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">

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

            Ranked by action date, dollar magnitude, and people affected - never by coverage.

          </p>

          <Link

            href="/how-we-pick"

            className="focus-ring label tap w-fit rounded-[3px] px-1 text-ash underline underline-offset-4 hover:text-paper"

          >

            How we pick →

          </Link>

        </div>

      </div>

    </section>

  );

}

function EmptyRegister() {

  return (

    <div className="mt-8 rounded-[3px] border border-line bg-surface/60 p-8 text-center">

      <p className="display text-2xl text-paper">The register is quiet.</p>

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

        No official actions are on record yet. The ledger fills as bills are

        filed, votes are taken, and awards are made - each line sealed to its

        government source.

      </p>

    </div>

  );

}

function RegisterRowInner({

  row,

  flash,

}: {

  row: FeedItem;

  flash?: boolean;

}) {

  const isPass = row.actionType === "PASSED";

  const isFail = row.actionType === "FAILED";

  return (

    <div className="reg-row grid grid-cols-1 gap-1 px-3 py-2.5 sm:grid-cols-[5.5rem_7.5rem_minmax(0,1fr)_6.5rem_minmax(0,5rem)] sm:gap-x-2 sm:items-center sm:px-4">

      <span

        className={clsx(

          "font-mono text-[12px] tabular-nums text-ash",

          flash && "animate-fadeUp"

        )}

      >

        {formatEt(row.actionDate) || formatDateShort(row.actionDate)}

      </span>

      <span className="font-mono text-[12px] uppercase tracking-wide text-ash-2">

        {row.chamber}

      </span>

      <span className="min-w-0 font-mono text-[13px] text-paper">

        {}

        {row.href ? (

          <Link

            href={row.href}

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

          >

            <span className="block break-words">{row.title}</span>

          </Link>

        ) : (

          <span className="block break-words">{row.title}</span>

        )}

        {}

        <SourceLink

          url={row.sourceUrl}

          label="Source"

          className="mt-1"

        />

      </span>

      <span

        className="font-mono text-[12px] uppercase tracking-wider"

        style={{

          color: isPass

            ? "var(--dk-yea)"

            : isFail

              ? "var(--dk-nay)"

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

        }}

      >

        {row.actionType}

      </span>

      <span className="font-mono text-[12px] tabular-nums text-paper sm:text-right">

        {

}

        {row.amountText ? row.amountText : <span className="hidden sm:inline">{"-"}</span>}

      </span>

    </div>

  );

}