"use client";
import Link from "next/link";
import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
import { Download, Play } from "lucide-react";
import { api, isApiError, type Bar, type BarsOut } from "@/lib/api";
import { useQueryParam } from "@/lib/hooks";
import { useToast } from "@/lib/toast";
import { daysAgo, downloadText, fmtInt, fmtNum, fmtTs, toCsv, today } from "@/lib/format";
import { Banner, Card, Empty, ErrorState, Field, PageHeader, Tabs } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { CloseLineChart, VolumeBarChart } from "@/components/charts";

const MAX_SPAN: Record<string, number> = { "1m": 31, "5m": 186, "1d": 3660 };

export default function BarsPage() {
  const qSymbol = useQueryParam("symbol");
  const qInterval = useQueryParam("interval");
  const qStart = useQueryParam("start");
  const qEnd = useQueryParam("end");
  const [symbol, setSymbol] = useState("AAPL");
  const [interval, setInterval_] = useState<"1m" | "5m" | "1d">("1m");
  const [start, setStart] = useState(daysAgo(7));
  const [end, setEnd] = useState(today());
  const [adjustment, setAdjustment] = useState<"raw" | "split" | "split_div">("raw");
  const [limit, setLimit] = useState(2000);
  const [out, setOut] = useState<BarsOut | null>(null);
  const [rows, setRows] = useState<Bar[]>([]);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const [view, setView] = useState<"chart" | "table">("chart");
  const toast = useToast();

  useEffect(() => {
    if (qSymbol) setSymbol(qSymbol.toUpperCase());
  }, [qSymbol]);
  useEffect(() => {
    if (qInterval === "1m" || qInterval === "5m" || qInterval === "1d") setInterval_(qInterval);
  }, [qInterval]);
  useEffect(() => {
    if (qStart && /^\d{4}-\d{2}-\d{2}$/.test(qStart)) setStart(qStart);
    if (qEnd && /^\d{4}-\d{2}-\d{2}$/.test(qEnd)) setEnd(qEnd);
  }, [qStart, qEnd]);
  // deep link (/bars/?symbol=…&start=…&end=…) loads automatically once the params are applied
  const autoRan = useRef(false);
  useEffect(() => {
    if (autoRan.current || !qSymbol || !qStart || !qEnd) return;
    if (symbol === qSymbol.toUpperCase() && start === qStart && end === qEnd) {
      autoRan.current = true;
      void run();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [symbol, start, end, qSymbol, qStart, qEnd]);

  const spanDays = useMemo(() => Math.round((new Date(end).getTime() - new Date(start).getTime()) / 86_400_000), [start, end]);
  const tooLarge = spanDays > (MAX_SPAN[interval] ?? 31);

  async function run(e?: FormEvent) {
    e?.preventDefault();
    setBusy(true);
    setError(null);
    try {
      const o = await api.get<BarsOut>("/market/bars", { symbol: symbol.trim().toUpperCase(), interval, start, end, adjustment, limit });
      setOut(o);
      setRows(o.data);
    } catch (err) {
      setError(err instanceof Error ? err : new Error(String(err)));
      setOut(null);
      setRows([]);
    } finally {
      setBusy(false);
    }
  }

  async function loadMore() {
    if (!out?.next_cursor) return;
    setBusy(true);
    try {
      const o = await api.get<BarsOut>("/market/bars", { symbol: symbol.trim().toUpperCase(), interval, start, end, adjustment, limit, cursor: out.next_cursor });
      setOut({ ...o, data: [] });
      setRows((r) => [...r, ...o.data]);
    } catch (err) {
      toast.error(err);
    } finally {
      setBusy(false);
    }
  }

  const chart = useMemo(
    () =>
      rows.map((b) => ({
        t: fmtTs(b.timestamp_utc),
        label: interval === "1d" ? b.session_date : fmtTs(b.timestamp_utc).slice(5, 16),
        close: b.close,
        open: b.open,
        high: b.high,
        low: b.low,
        volume: b.volume,
      })),
    [rows, interval],
  );
  const flagged = useMemo(() => rows.filter((b) => b.quality_flags && b.quality_flags.length > 0).length, [rows]);
  const flagCounts = useMemo(() => {
    const m = new Map<string, number>();
    for (const b of rows) for (const f of b.quality_flags ?? []) m.set(f, (m.get(f) ?? 0) + 1);
    return Array.from(m.entries()).sort((a, b) => b[1] - a[1]);
  }, [rows]);

  const rangeErr = isApiError(error) && error.code === "range_too_large";

  return (
    <>
      <PageHeader title="Bars explorer" subtitle="OHLCV bars stamped at bar open (UTC). Adjustments are applied at query time from corporate actions." />
      <Card className="mb-4">
        <form onSubmit={run} className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6 lg:items-end">
          <Field label="Symbol">
            <input className="input font-mono uppercase" value={symbol} onChange={(e) => setSymbol(e.target.value)} required />
          </Field>
          <Field label="Interval">
            <select className="input" value={interval} onChange={(e) => setInterval_(e.target.value as typeof interval)}>
              <option value="1m">1 minute</option>
              <option value="5m">5 minutes</option>
              <option value="1d">1 day</option>
            </select>
          </Field>
          <Field label="Start">
            <input type="date" className="input" value={start} max={end} onChange={(e) => setStart(e.target.value)} required />
          </Field>
          <Field label="End">
            <input type="date" className="input" value={end} min={start} onChange={(e) => setEnd(e.target.value)} required />
          </Field>
          <Field label="Adjustment">
            <select className="input" value={adjustment} onChange={(e) => setAdjustment(e.target.value as typeof adjustment)}>
              <option value="raw">raw (as traded)</option>
              <option value="split">split-adjusted</option>
              <option value="split_div">split + dividend</option>
            </select>
          </Field>
          <div className="flex items-end gap-2">
            <Field label="Page size" className="w-24">
              <input type="number" className="input" min={100} max={10000} step={100} value={limit} onChange={(e) => setLimit(Number(e.target.value) || 2000)} />
            </Field>
            <button className="btn btn-primary flex-1" disabled={busy || !symbol}>
              <Play className="h-3.5 w-3.5" /> {busy ? "Loading…" : "Load"}
            </button>
          </div>
        </form>
        <p className={tooLarge ? "mt-2 text-xs text-warn-ink" : "mt-2 text-xs text-ink-3"}>
          Range: {spanDays} day{spanDays === 1 ? "" : "s"} · limit for {interval}: {MAX_SPAN[interval]} days per call (HTTP 413 <code>range_too_large</code> beyond). Larger ranges →{" "}
          <Link href="/exports/" className="text-accent-ink hover:underline">
            Exports
          </Link>{" "}
          (async Parquet/CSV).
        </p>
      </Card>

      {error && !rangeErr && <ErrorState error={error} retry={() => void run()} />}
      {rangeErr && (
        <Banner tone="warn" className="mb-4">
          <div className="font-medium">Range too large for {interval}</div>
          <div className="text-xs">
            {(error as Error).message} Use{" "}
            <Link href={`/exports/?symbols=${encodeURIComponent(symbol)}&start=${start}&end=${end}&adjustment=${adjustment}`} className="underline">
              an export
            </Link>{" "}
            for {spanDays} days, or shorten the window.
          </div>
        </Banner>
      )}

      {out && (
        <>
          <div className="mb-3 flex flex-wrap items-center gap-2 text-xs text-ink-2">
            <span className="pill bg-surface-2">{out.meta.symbol}</span>
            <span className="pill bg-surface-2">{out.meta.interval}</span>
            <span className="pill bg-surface-2">{out.meta.adjustment}</span>
            {out.meta.version !== undefined && <span className="pill bg-surface-2">dataset v{String(out.meta.version)}</span>}
            <span className="tnum">
              {fmtInt(rows.length)} of {fmtInt(out.meta.rows_matching || rows.length)} rows
            </span>
            {flagged > 0 && <span className="pill bg-warn-soft text-warn-ink">{fmtInt(flagged)} flagged bars</span>}
            <span className="ml-auto">
              <Tabs value={view} onChange={setView} items={[{ value: "chart", label: "Chart" }, { value: "table", label: "Table" }]} />
            </span>
          </div>
          {out.meta.adjustment_notes?.length > 0 && (
            <Banner tone="accent" className="mb-3">
              <div className="text-xs font-medium">Adjustment notes</div>
              <ul className="list-disc pl-4 text-xs">
                {out.meta.adjustment_notes.map((n, i) => (
                  <li key={i}>{n}</li>
                ))}
              </ul>
            </Banner>
          )}
          {flagCounts.length > 0 && (
            <div className="mb-3 flex flex-wrap gap-1 text-xs">
              <span className="text-ink-3">quality_flags:</span>
              {flagCounts.map(([f, n]) => (
                <span key={f} className="pill bg-warn-soft text-warn-ink">
                  {f} × {fmtInt(n)}
                </span>
              ))}
            </div>
          )}
          {rows.length === 0 ? (
            <Empty>No bars for this range. Zero-volume bars are not stored; check the session coverage.</Empty>
          ) : view === "chart" ? (
            <Card title={`Close · ${out.meta.symbol} (${out.meta.adjustment})`}>
              <CloseLineChart data={chart} height={280} />
              <div className="mt-2 text-xs font-semibold text-ink-2">Volume</div>
              <VolumeBarChart data={chart} height={110} />
              <p className="mt-2 text-[11px] text-ink-3">Hover for OHLCV. Single series per chart — close and volume use separate axes by design.</p>
            </Card>
          ) : (
            <Card
              actions={
                <button className="btn btn-sm" onClick={() => downloadText(`${out.meta.symbol}_${interval}_${start}_${end}.csv`, toCsv(["timestamp_utc", "session_date", "open", "high", "low", "close", "volume", "vwap", "trade_count", "quality_flags"], rows.map((r) => ({ ...r, quality_flags: (r.quality_flags ?? []).join("|") }))))}>
                  <Download className="h-3.5 w-3.5" /> CSV (loaded rows)
                </button>
              }
            >
              <DataTable
                rows={rows}
                rowKey={(r) => r.timestamp_utc}
                mobile="scroll"
                maxHeight="60dvh"
                columns={[
                  { key: "timestamp_utc", header: "Timestamp (UTC, bar open)", render: (r) => <span className="tnum font-mono text-xs">{fmtTs(r.timestamp_utc)}</span> },
                  { key: "session_date", header: "Session", hideSm: true, render: (r) => <span className="tnum">{r.session_date}</span> },
                  { key: "open", header: "Open", num: true, render: (r) => fmtNum(r.open, 4) },
                  { key: "high", header: "High", num: true, render: (r) => fmtNum(r.high, 4) },
                  { key: "low", header: "Low", num: true, render: (r) => fmtNum(r.low, 4) },
                  { key: "close", header: "Close", num: true, render: (r) => fmtNum(r.close, 4) },
                  { key: "volume", header: "Volume", num: true, render: (r) => fmtInt(r.volume) },
                  { key: "vwap", header: "VWAP", num: true, hideSm: true, render: (r) => (r.vwap === null || r.vwap === undefined ? "—" : fmtNum(r.vwap, 4)) },
                  { key: "quality_flags", header: "Flags", render: (r) => (r.quality_flags?.length ? r.quality_flags.map((f) => <span key={f} className="pill mr-1 bg-warn-soft text-warn-ink">{f}</span>) : <span className="text-ink-3">—</span>) },
                ]}
              />
            </Card>
          )}
          <div className="mt-3 flex items-center justify-between text-xs text-ink-3">
            <span>{out.meta.license} · timestamps = {out.meta.timestamp_convention}</span>
            {out.next_cursor && (
              <button className="btn btn-sm" onClick={loadMore} disabled={busy}>
                {busy ? "Loading…" : `Load next ${fmtInt(limit)}`}
              </button>
            )}
          </div>
        </>
      )}
    </>
  );
}