"use client";
import { useEffect, useMemo, useState, type FormEvent } from "react";
import { Play } from "lucide-react";
import clsx from "clsx";
import { api, type Fact, type FundamentalsOut, type PeriodsOut } from "@/lib/api";
import { useQueryParam } from "@/lib/hooks";
import { fmtCompact, fmtInt, fmtNum, fmtTs, nowLocalInput } from "@/lib/format";
import { Banner, Card, Empty, ErrorState, Field, PageHeader, StatusBadge, Tabs } from "@/components/ui";
import { DataTable } from "@/components/DataTable";

const DEFAULT_PIVOT = 6;

export default function FundamentalsPage() {
  const qTicker = useQueryParam("ticker");
  const [ticker, setTicker] = useState("AAPL");
  const [asOf, setAsOf] = useState(nowLocalInput());
  const [periodType, setPeriodType] = useState<"" | "q" | "a">("q");
  const [metrics, setMetrics] = useState("");
  const [out, setOut] = useState<FundamentalsOut | null>(null);
  const [periods, setPeriods] = useState<PeriodsOut | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const [tab, setTab] = useState<"pivot" | "facts" | "periods" | "earnings">("pivot");
  const [pivotMetrics, setPivotMetrics] = useState<string[]>([]);

  useEffect(() => {
    if (qTicker) setTicker(qTicker.toUpperCase());
  }, [qTicker]);

  async function run(e?: FormEvent) {
    e?.preventDefault();
    setBusy(true);
    setError(null);
    try {
      const asOfIso = asOf ? new Date(asOf).toISOString() : undefined;
      const t = ticker.trim();
      const [f, p] = await Promise.all([
        api.get<FundamentalsOut>(`/fundamentals/${encodeURIComponent(t)}`, { as_of: asOfIso, metrics: metrics.trim() || undefined, period_type: periodType || undefined, limit: 5000 }),
        api.get<PeriodsOut>(`/fundamentals/${encodeURIComponent(t)}/periods`).catch(() => null),
      ]);
      setOut(f);
      setPeriods(p);
      const all = Array.from(new Set(f.data.map((x) => x.metric)));
      setPivotMetrics((cur) => (cur.length ? cur.filter((m) => all.includes(m)) : all.slice(0, DEFAULT_PIVOT)));
    } catch (err) {
      setError(err instanceof Error ? err : new Error(String(err)));
      setOut(null);
      setPeriods(null);
    } finally {
      setBusy(false);
    }
  }

  const allMetrics = useMemo(() => Array.from(new Set((out?.data ?? []).map((x) => x.metric))).sort(), [out]);
  const pivot = useMemo(() => {
    const rows = new Map<string, { period: string; type: string; fy: number | null; fp: string | null; filing: string | null; values: Record<string, Fact> }>();
    for (const f of out?.data ?? []) {
      const key = `${f.fiscal_period_end}|${f.fiscal_period_type}`;
      const r = rows.get(key) ?? { period: f.fiscal_period_end, type: f.fiscal_period_type, fy: f.fiscal_year, fp: f.fiscal_period, filing: f.filing_date, values: {} };
      r.values[f.metric] = f;
      rows.set(key, r);
    }
    return Array.from(rows.values()).sort((a, b) => b.period.localeCompare(a.period));
  }, [out]);

  return (
    <>
      <PageHeader title="Fundamentals" subtitle="Point-in-time facts: only what was knowable at the chosen instant is returned." />
      <Card className="mb-4">
        <form onSubmit={run} className="grid grid-cols-2 gap-3 md:grid-cols-5 md:items-end">
          <Field label="Ticker or entity id">
            <input className="input font-mono uppercase" value={ticker} onChange={(e) => setTicker(e.target.value)} required placeholder="AAPL or frd:AAPL" />
          </Field>
          <Field label="As of (local time → UTC)">
            <input type="datetime-local" className="input" value={asOf} onChange={(e) => setAsOf(e.target.value)} />
          </Field>
          <Field label="Period type">
            <select className="input" value={periodType} onChange={(e) => setPeriodType(e.target.value as typeof periodType)}>
              <option value="q">quarterly</option>
              <option value="a">annual</option>
              <option value="">both</option>
            </select>
          </Field>
          <Field label="Metrics (comma-separated)">
            <input className="input font-mono text-xs" value={metrics} onChange={(e) => setMetrics(e.target.value)} placeholder="rev, net_inc, eps" />
          </Field>
          <button className="btn btn-primary" disabled={busy || !ticker.trim()}>
            <Play className="h-3.5 w-3.5" /> {busy ? "Loading…" : "Load"}
          </button>
        </form>
      </Card>

      {error && <ErrorState error={error} retry={() => void run()} />}

      {out && (
        <>
          <div className="mb-3 flex flex-wrap items-center gap-2 text-xs">
            <span className="pill bg-surface-2 text-ink-2 tnum">{fmtInt(out.meta.rows)} facts</span>
            <span className="pill bg-surface-2 text-ink-2 tnum">as of {fmtTs(out.meta.as_of)}</span>
            {out.meta.facts_hidden_by_as_of > 0 && <span className="pill bg-warn-soft text-warn-ink tnum">{fmtInt(out.meta.facts_hidden_by_as_of)} facts hidden by as_of</span>}
            {out.entity && <span className="pill bg-surface-2 text-ink-2">{String(out.entity.name ?? out.entity.entity_id ?? "")}</span>}
            <span className="ml-auto">
              <Tabs value={tab} onChange={setTab} items={[{ value: "pivot", label: "Pivot" }, { value: "facts", label: "Raw facts" }, { value: "periods", label: `Periods (${periods?.periods.length ?? 0})` }, { value: "earnings", label: `Earnings (${periods?.earnings.length ?? 0})` }]} />
            </span>
          </div>
          <Banner tone="accent" className="mb-4">
            <span className="text-xs">PIT policy: {out.meta.pit_policy}. Revision history exists only from the first ingestion by this platform.</span>
          </Banner>

          {tab === "pivot" && (
            <Card title="Periods × metrics" actions={<span className="text-xs text-ink-3">{pivotMetrics.length} of {allMetrics.length} metrics</span>}>
              <div className="mb-3 flex flex-wrap gap-1">
                {allMetrics.map((m) => {
                  const on = pivotMetrics.includes(m);
                  return (
                    <button key={m} className={clsx("pill border font-mono", on ? "border-accent bg-accent-soft text-accent-ink" : "border-border bg-surface-1 text-ink-2 hover:bg-surface-3")} onClick={() => setPivotMetrics((cur) => (on ? cur.filter((x) => x !== m) : [...cur, m]))} aria-pressed={on}>
                      {m}
                    </button>
                  );
                })}
              </div>
              {pivot.length === 0 ? (
                <Empty>No facts visible at this as-of instant.</Empty>
              ) : (
                <div className="table-wrap" style={{ maxHeight: "60dvh", overflowY: "auto" }}>
                  <table className="table">
                    <thead>
                      <tr>
                        <th>Period end</th>
                        <th>FY / FP</th>
                        <th>Filed</th>
                        {pivotMetrics.map((m) => (
                          <th key={m} className="text-right font-mono">
                            {m}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {pivot.map((r) => (
                        <tr key={`${r.period}-${r.type}`}>
                          <td className="tnum whitespace-nowrap">
                            {r.period} <span className="text-ink-3">{r.type}</span>
                          </td>
                          <td className="tnum text-xs text-ink-2 whitespace-nowrap">
                            {r.fy ?? "—"} / {r.fp ?? "—"}
                          </td>
                          <td className="tnum text-xs text-ink-2 whitespace-nowrap">{r.filing ?? "—"}</td>
                          {pivotMetrics.map((m) => {
                            const f = r.values[m];
                            return (
                              <td key={m} className="num whitespace-nowrap" title={f ? `${f.value} ${f.unit} · rev ${f.revision_id}${f.restatement_flag ? " · restated" : ""}` : undefined}>
                                {f ? (
                                  <>
                                    {fmtValue(f)}
                                    {f.revision_id > 1 && <sup className="ml-0.5 text-[9px] text-warn-ink">r{f.revision_id}</sup>}
                                  </>
                                ) : (
                                  <span className="text-ink-3">—</span>
                                )}
                              </td>
                            );
                          })}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
              <p className="mt-2 text-[11px] text-ink-3">Values compacted (K/M/B); hover for exact value and unit. <sup>rN</sup> marks a revision observed before as-of.</p>
            </Card>
          )}

          {tab === "facts" && (
            <Card title="Raw facts">
              <DataTable
                rows={out.data}
                rowKey={(f, i) => `${f.metric}-${f.fiscal_period_end}-${f.fiscal_period_type}-${f.revision_id}-${i}`}
                mobile="scroll"
                maxHeight="60dvh"
                columns={[
                  { key: "metric", header: "Metric", mono: true },
                  { key: "value", header: "Value", num: true, render: (f) => <span title={String(f.value)}>{fmtValue(f)}</span> },
                  { key: "unit", header: "Unit", hideSm: true },
                  { key: "fiscal_period_end", header: "Period end", render: (f) => <span className="tnum">{f.fiscal_period_end} <span className="text-ink-3">{f.fiscal_period_type}</span></span> },
                  { key: "fy", header: "FY/FP", hideSm: true, render: (f) => `${f.fiscal_year ?? "—"}/${f.fiscal_period ?? "—"}` },
                  { key: "filing_date", header: "Filed", render: (f) => <span className="tnum">{f.filing_date ?? "—"}</span> },
                  { key: "available_at", header: "Available at", hideSm: true, render: (f) => <span className="tnum text-xs">{fmtTs(f.available_at)}</span> },
                  { key: "observed_at", header: "Observed at", hideSm: true, render: (f) => <span className="tnum text-xs">{fmtTs(f.observed_at)}</span> },
                  { key: "revision_id", header: "Rev", num: true },
                  { key: "restatement_flag", header: "Restated", render: (f) => (f.restatement_flag ? <StatusBadge status="warning" label="yes" /> : <span className="text-ink-3">no</span>) },
                  { key: "source_document", header: "Source", hideSm: true, render: (f) => <span className="text-xs text-ink-2">{f.source_document ?? f.source_id}</span> },
                ]}
              />
            </Card>
          )}

          {tab === "periods" && (
            <Card title="Fiscal periods (all revisions, not PIT-filtered)">
              <DataTable
                rows={periods?.periods}
                rowKey={(p) => `${p.fiscal_period_end}-${p.fiscal_period_type}-${p.filing_date}`}
                mobile="scroll"
                maxHeight="60dvh"
                columns={[
                  { key: "fiscal_period_end", header: "Period end", render: (p) => <span className="tnum">{p.fiscal_period_end} <span className="text-ink-3">{p.fiscal_period_type}</span></span> },
                  { key: "fy", header: "FY/FP", render: (p) => `${p.fiscal_year ?? "—"}/${p.fiscal_period ?? "—"}` },
                  { key: "filing_date", header: "Filed", render: (p) => <span className="tnum">{p.filing_date ?? "—"}</span> },
                  { key: "available_at", header: "Available at", render: (p) => <span className="tnum text-xs">{fmtTs(p.available_at)}</span> },
                  { key: "metrics", header: "Metrics", num: true, render: (p) => fmtInt(p.metrics) },
                  { key: "max_revision", header: "Max rev", num: true },
                  { key: "restated", header: "Restated", render: (p) => (p.restated ? <StatusBadge status="warning" label="yes" /> : <span className="text-ink-3">no</span>) },
                ]}
                empty="No periods."
              />
            </Card>
          )}

          {tab === "earnings" && (
            <Card title="Earnings events">
              <DataTable
                rows={periods?.earnings}
                rowKey={(e) => e.event_date}
                mobile="scroll"
                maxHeight="60dvh"
                columns={[
                  { key: "event_date", header: "Date", render: (e) => <span className="tnum">{e.event_date}</span> },
                  { key: "release_time", header: "Release", render: (e) => e.release_time ?? "—" },
                  { key: "eps_estimate", header: "EPS est.", num: true, render: (e) => fmtNum(e.eps_estimate, 2) },
                  { key: "eps_reported", header: "EPS rep.", num: true, render: (e) => fmtNum(e.eps_reported, 2) },
                  { key: "surprise", header: "Surprise", num: true, render: (e) => (e.eps_estimate !== null && e.eps_reported !== null ? fmtNum(e.eps_reported - e.eps_estimate, 2) : "—") },
                ]}
                empty="No earnings events."
              />
            </Card>
          )}
        </>
      )}
    </>
  );
}

function fmtValue(f: Fact): string {
  if (f.value === null || f.value === undefined) return "—";
  const u = (f.unit ?? "").toLowerCase();
  if (u.includes("ratio") || u.includes("per_share") || u === "pct" || u === "percent" || Math.abs(f.value) < 1000) return fmtNum(f.value, 2);
  return fmtCompact(f.value);
}