import type { Metadata } from "next";
import Link from "next/link";
import { Empty, Page, PageHeader } from "@/components/ui/section";
import { apiEnvelope } from "@/lib/api";
import { cx, formatDateTime, instrumentHref } from "@/lib/format";
import type { Filing } from "@/lib/types";

export const metadata: Metadata = { title: "Filings", description: "Regulatory filings observed on SEC EDGAR, linked to instruments by CIK.", alternates: { canonical: "/filings" } };
export const dynamic = "force-dynamic";

const FORMS = ["8-K", "10-K", "10-Q", "6-K", "S-1", "SC 13D", "SC 13G", "DEF 14A", "4", "424B4", "13F-HR"];

export default async function FilingsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const form = typeof sp.form === "string" ? sp.form : "";
  const q = typeof sp.q === "string" ? sp.q : "";
  const cik = typeof sp.cik === "string" ? sp.cik : "";
  const page = Math.max(1, Number(sp.page ?? 1) || 1);
  const params = new URLSearchParams({ limit: "100", offset: String((page - 1) * 100) });
  if (form) params.set("form", form);
  if (q) params.set("q", q);
  if (cik) params.set("cik", cik);
  const env = await apiEnvelope<Filing[]>(`/v1/filings?${params}`);
  const rows = env.data;
  const link = (patch: Record<string, string | number>) => {
    const u = new URLSearchParams();
    for (const [k, v] of Object.entries({ form, q, cik, page: page > 1 ? page : "", ...patch })) if (v !== "" && v !== 0) u.set(k, String(v));
    const s = u.toString();
    return s ? `/filings?${s}` : "/filings";
  };
  return (
    <Page wide>
      <PageHeader kicker="Regulatory" title="Filings" lead={`Documents filed on SEC EDGAR as Market Atlas observes them (every 2 minutes). ${Number(env.meta.last_7_days ?? 0).toLocaleString("en-US")} filings in the last 7 days. Material forms (8-K, 10-K/Q, 6-K, S-1, 13D/G…) also appear as events.`} />
      <div className="mb-3 flex flex-wrap items-center gap-1.5">
        <Link href={link({ form: "", page: "" })} className={cx("inline-flex h-8 items-center rounded-full border px-3 text-xs", !form ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2 hover:border-rule-strong")}>
          All forms
        </Link>
        {FORMS.map((f) => (
          <Link key={f} href={link({ form: f, page: "" })} className={cx("mono inline-flex h-8 items-center rounded-full border px-3 text-xs", form === f ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2 hover:border-rule-strong")}>
            {f}
          </Link>
        ))}
        <form action="/filings" className="ml-auto flex gap-2">
          {form && <input type="hidden" name="form" value={form} />}
          <input name="q" defaultValue={q} placeholder="Company name" className="h-9 w-48 rounded-md border border-rule bg-surface px-2 text-sm outline-none focus:border-rule-strong" />
        </form>
      </div>
      {cik && (
        <p className="mb-2 text-xs text-ink-3">
          Filtered by CIK {cik} ·{" "}
          <Link href={link({ cik: "", page: "" })} className="text-accent hover:underline">
            clear
          </Link>
        </p>
      )}
      {rows.length ? (
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Filed (ET)</th>
                <th>Form</th>
                <th>Filer</th>
                <th className="hidden md:table-cell">CIK</th>
                <th className="hidden md:table-cell">Role</th>
                <th>Instruments</th>
                <th>Document</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((f) => (
                <tr key={f.id}>
                  <td className="mono text-ink-2">{formatDateTime(f.filed_at, { tz: "America/New_York" })}</td>
                  <td className="mono font-medium">
                    {f.form_type}
                    {f.metadata.material === true && <span className="ml-1 text-[10px] uppercase text-accent">material</span>}
                  </td>
                  <td>
                    <Link href={link({ q: f.company_name, page: "" })} className="hover:underline">
                      {f.company_name}
                    </Link>
                  </td>
                  <td className="mono hidden text-ink-3 md:table-cell">
                    {f.cik ? (
                      <Link href={link({ cik: f.cik, page: "" })} className="hover:underline">
                        {f.cik}
                      </Link>
                    ) : (
                      "—"
                    )}
                  </td>
                  <td className="hidden text-xs text-ink-3 md:table-cell">{String(f.metadata.role ?? "—")}</td>
                  <td>
                    {f.instrument_ids.length ? (
                      f.instrument_ids.slice(0, 3).map((id) => (
                        <Link key={id} href={instrumentHref(id)} className="mono mr-1 text-xs text-accent hover:underline">
                          {id.split("_").pop()?.toUpperCase()}
                        </Link>
                      ))
                    ) : (
                      <span className="text-xs text-ink-3">—</span>
                    )}
                  </td>
                  <td>
                    <a href={f.url} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
                      EDGAR ↗
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <Empty>No filings match.</Empty>
      )}
      <div className="mt-3 flex justify-between text-xs">
        {page > 1 ? (
          <Link href={link({ page: page - 1 })} className="text-accent hover:underline">
            ← Newer
          </Link>
        ) : (
          <span />
        )}
        {rows.length === 100 && (
          <Link href={link({ page: page + 1 })} className="text-accent hover:underline">
            Older →
          </Link>
        )}
      </div>
    </Page>
  );
}