"use client";

import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import Link from "next/link";

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

import { ArchiveLink } from "@/components/record-archive";

import { ordinal } from "@/lib/format";

import {

  SearchFilterBar,

  FilterField,

  FilterInput,

  FilterSelect,

  FilterSubmit,

} from "@/components/search-filter-bar";

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

function LawsSkeleton() {

  return (

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

      <div className="h-14 w-full animate-pulse rounded-sm bg-graphite" />

      <div className="mt-8 mb-4 h-4 w-40 animate-pulse rounded-sm bg-graphite" />

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

        {Array.from({ length: 12 }).map((_, i) => (

          <div key={i} className="h-28 w-full animate-pulse rounded-sm bg-graphite" />

        ))}

      </div>

    </div>

  );

}

function snippet(s: string, max = 240): string {

  if (!s) return "";

  const clean = s.trim();

  return clean.length <= max ? clean : clean.slice(0, max - 1).trimEnd() + "…";

}

function LawCards({ laws }: { laws: LawListItem[] }) {

  return (

    <ul

      style={{ display: "flex", flexDirection: "column", gap: "12px", listStyle: "none", padding: 0, margin: 0 }}

      role="list"

    >

      {laws.map((law) => (

        <li key={law.id}>

          <div

            style={{

              borderRadius: "10px",

              border: "1px solid var(--dk-line)",

              background: "var(--dk-surface)",

              padding: "clamp(20px, 3vw, 28px)",

            }}

          >

            {}

            <div

              style={{

                display: "flex",

                flexWrap: "wrap",

                alignItems: "baseline",

                justifyContent: "space-between",

                gap: "12px",

                marginBottom: "14px",

              }}

            >

              <p

                className="font-mono text-paper"

                style={{ fontSize: "clamp(1.0625rem, 2.4vw, 1.25rem)", fontWeight: 700, letterSpacing: "0.01em" }}

              >

                Public Law {law.plNumber || "-"}

              </p>

              <span

                className="font-mono"

                style={{ fontSize: "12px", color: "var(--dk-ash-2)", letterSpacing: "0.06em" }}

              >

                {ordinal(law.congress)} Congress

              </span>

            </div>

            {}

            <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "6px" }}>

              Enacted from{" "}

              <Link

                href={law.billHref}

                className="focus-ring font-mono hover:text-paper underline underline-offset-4"

                style={{ color: "var(--dk-signal)" }}

              >

                {law.billNumber}

              </Link>

            </p>

            {}

            <Link

              href={law.billHref}

              className="focus-ring font-prose text-paper"

              style={{

                display: "block",

                fontSize: "clamp(1rem, 1.8vw, 1.125rem)",

                lineHeight: 1.5,

                textDecoration: "underline",

                textDecorationColor: "var(--dk-line)",

                textUnderlineOffset: "3px",

                marginBottom: law.summary ? "12px" : "16px",

              }}

            >

              {law.title}

            </Link>

            {}

            {law.summary ? (

              <p

                className="font-prose"

                style={{ fontSize: "0.9375rem", lineHeight: 1.6, color: "var(--dk-ash)", marginBottom: "16px" }}

              >

                {snippet(law.summary)}

              </p>

            ) : null}

            {}

            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "12px" }}>

              <SourceLink url={law.sourceUrl} label="Official record" />

              {law.archivePdfUrl ? (

                <ArchiveLink url={law.archivePdfUrl} label="Archived text - Docket" />

              ) : null}

            </div>

          </div>

        </li>

      ))}

    </ul>

  );

}

export function LawsBrowser() {

  const sp = useSearchParams();

  const q = sp.get("q") ?? "";

  const sort = sp.get("sort") ?? "";

  const [laws, setLaws] = useState<LawListItem[]>([]);

  const [total, setTotal] = useState(0);

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

  useEffect(() => {

    setLoading(true);

    const params = new URLSearchParams();

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

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

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

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

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

      .then((data) => {

        setLaws(data.items ?? []);

        setTotal(data.total ?? 0);

      })

      .catch(() => {

        setLaws([]);

        setTotal(0);

      })

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

  }, [q, sort]);

  const isFiltered = !!(q || sort);

  if (loading) {

    return <LawsSkeleton />;

  }

  return (

    <div>

      <div className="mt-8">

        <form method="get" action="/laws" className="contents">

          <SearchFilterBar

            count={total}

            countLabel="law"

            clearHref={isFiltered ? "/laws" : undefined}

          >

            <FilterField label="Search laws" span="2">

              <FilterInput

                name="q"

                defaultValue={q}

                placeholder="Law number, bill number, or title…"

                aria-label="Search public laws"

              />

            </FilterField>

            <FilterField label="Sort by">

              <FilterSelect

                name="sort"

                defaultValue={sort}

                aria-label="Sort laws"

                options={[

                  { value: "", label: "Most recent" },

                  { value: "oldest", label: "Oldest first" },

                  { value: "number", label: "By law number" },

                ]}

              />

            </FilterField>

            <FilterSubmit />

          </SearchFilterBar>

        </form>

      </div>

      <section style={{ marginTop: "32px" }} aria-label="Public laws list">

        <p className="label" style={{ color: "var(--dk-ash)", marginBottom: "24px" }}>

          {total.toLocaleString()} public law{total === 1 ? "" : "s"}

          {isFiltered ? " match" : ""} · showing {laws.length}

        </p>

        {laws.length === 0 ? (

          <div className="rounded-[6px] border border-line bg-surface p-8" role="status">

            <p className="font-prose" style={{ fontSize: "1.0625rem", color: "var(--dk-ash)" }}>

              No public laws match this search in the current record.

            </p>

          </div>

        ) : (

          <LawCards laws={laws} />

        )}

      </section>

    </div>

  );

}