"use client";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { api, type InstrumentDetail } from "@/lib/api";
import { useAsync, useQueryParam } from "@/lib/hooks";
import { fmtCompact, fmtInt } from "@/lib/format";
import { Card, Empty, ErrorState, KV, PageHeader, Skeleton, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { JsonView } from "@/components/JsonView";

export default function SymbolDetailPage() {
  const symbol = useQueryParam("symbol")?.toUpperCase() ?? null;
  const { data, error, loading, reload } = useAsync((s) => api.get<InstrumentDetail>(`/instruments/${encodeURIComponent(symbol!)}`, undefined, s), [symbol], { enabled: !!symbol });
  const inst = data?.instrument;

  return (
    <>
      <Link href="/symbols/" className="mb-2 inline-flex items-center gap-1 text-xs text-ink-2 hover:text-ink-1">
        <ArrowLeft className="h-3.5 w-3.5" /> Symbols
      </Link>
      <PageHeader
        title={symbol ?? "Symbol"}
        subtitle={inst?.name ?? (data && !inst ? "Unknown instrument (no master record) — coverage may still exist" : undefined)}
        actions={
          symbol && (
            <>
              {inst && <StatusBadge status={inst.status} />}
              <Link href={`/bars/?symbol=${encodeURIComponent(symbol)}`} className="btn btn-sm btn-primary">
                Bars
              </Link>
              <Link href={`/coverage/?symbol=${encodeURIComponent(symbol)}`} className="btn btn-sm">
                Sessions
              </Link>
              <Link href={`/fundamentals/?ticker=${encodeURIComponent(symbol)}`} className="btn btn-sm">
                Fundamentals
              </Link>
              <Link href={`/playground/?symbol=${encodeURIComponent(symbol)}`} className="btn btn-sm">
                SQL
              </Link>
            </>
          )
        }
      />
      {!symbol && <Empty>Missing <code>?symbol=</code> parameter.</Empty>}
      {error && <ErrorState error={error} retry={reload} />}
      {loading && !data && <Skeleton rows={8} />}
      {data && (
        <div className="grid gap-4 lg:grid-cols-2">
          <Card title="Instrument">
            {inst ? (
              <KV
                items={[
                  ["Instrument id", <code key="i" className="text-xs">{inst.instrument_id}</code>],
                  ["Asset class", inst.asset_class],
                  ["Currency", inst.currency ?? "—"],
                  ["First date", inst.first_date ?? "—"],
                  ["Last date", inst.last_date ?? "—"],
                  ...Object.entries(inst)
                    .filter(([k]) => !["instrument_id", "symbol", "name", "asset_class", "status", "first_date", "last_date", "currency"].includes(k))
                    .map(([k, v]) => [k, typeof v === "object" && v !== null ? <JsonView key={k} value={v} collapsed /> : String(v ?? "—")] as [string, React.ReactNode]),
                ]}
              />
            ) : (
              <Empty>No master record.</Empty>
            )}
          </Card>
          <Card title="Fundamentals">
            {data.fundamentals && data.fundamentals.facts > 0 ? (
              <KV
                items={[
                  ["Facts (current)", fmtInt(data.fundamentals.facts)],
                  ["Last fiscal period", data.fundamentals.last_period ?? "—"],
                  ["Last filing", data.fundamentals.last_filing ?? "—"],
                ]}
              />
            ) : (
              <Empty>
                No fundamentals ingested for <code>frd:{symbol}</code>.
              </Empty>
            )}
          </Card>
          <Card title={`Coverage per dataset (${data.coverage.length})`} className="lg:col-span-2">
            <DataTable
              rows={data.coverage}
              rowKey={(c) => c.dataset_id}
              mobile="scroll"
              columns={[
                {
                  key: "dataset_id",
                  header: "Dataset",
                  render: (c) => (
                    <Link href={`/datasets/detail/?id=${encodeURIComponent(c.dataset_id)}`} className="font-mono text-xs text-accent-ink hover:underline">
                      {c.dataset_id}
                    </Link>
                  ),
                },
                { key: "sessions", header: "Sessions", num: true, render: (c) => fmtInt(c.sessions) },
                { key: "bars", header: "Bars", num: true, render: (c) => <span title={fmtInt(c.bars)}>{fmtCompact(c.bars)}</span> },
                { key: "d0", header: "From" },
                { key: "d1", header: "To" },
              ]}
              empty="No bars for this symbol yet."
            />
          </Card>
          <Card title={`Corporate actions (${data.corporate_actions.length})`}>
            <DataTable
              rows={data.corporate_actions}
              rowKey={(a, i) => `${a.action_type}-${a.ex_date}-${i}`}
              mobile="scroll"
              maxHeight="24rem"
              columns={[
                { key: "ex_date", header: "Ex-date", render: (a) => <span className="tnum">{a.ex_date}</span> },
                { key: "action_type", header: "Type", render: (a) => <StatusBadge status="neutral" label={a.action_type} icon={false} /> },
                { key: "value", header: "Value", render: (a) => <JsonView value={a.value} collapsed /> },
              ]}
              empty="No splits or dividends recorded."
            />
          </Card>
          <Card title={`Aliases (${data.aliases.length})`}>
            {data.aliases.length === 0 ? (
              <Empty>No aliases.</Empty>
            ) : (
              <ul className="flex flex-col gap-1">
                {data.aliases.map((a, i) => (
                  <li key={i}>
                    <JsonView value={a} collapsed />
                  </li>
                ))}
              </ul>
            )}
          </Card>
        </div>
      )}
    </>
  );
}