"use client";
import { useEffect, useRef, useState, type KeyboardEvent } from "react";
import { Download, Play } from "lucide-react";
import clsx from "clsx";
import { api, type QueryOut } from "@/lib/api";
import { useAsync, useLocalStorage, useQueryParam } from "@/lib/hooks";
import { useToast } from "@/lib/toast";
import { downloadText, fmtInt, toCsv } from "@/lib/format";
import { Banner, Card, Empty, ErrorState, PageHeader } from "@/components/ui";

const DISPLAY_CAP = 1000;

export default function PlaygroundPage() {
  const qSymbol = useQueryParam("symbol");
  const [sql, setSql] = useLocalStorage("findata.playground.sql", "SELECT symbol_as_reported, count(*) bars FROM market_bars_stock_1m_raw GROUP BY 1 ORDER BY 2 DESC LIMIT 20");
  const [maxRows, setMaxRows] = useState(1000);
  const [out, setOut] = useState<QueryOut | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const toast = useToast();
  const ta = useRef<HTMLTextAreaElement>(null);
  const views = useAsync((s) => api.get<{ views: { name: string; files: number }[]; examples: string[] }>("/query/views", undefined, s), []);

  useEffect(() => {
    if (qSymbol) setSql(`SELECT session_date, min(low) lo, max(high) hi, sum(volume) vol\nFROM market_bars_stock_1m_raw\nWHERE symbol_as_reported = '${qSymbol.toUpperCase().replace(/'/g, "")}'\nGROUP BY 1 ORDER BY 1 DESC LIMIT 100`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [qSymbol]);

  async function run() {
    if (!sql.trim()) return;
    setBusy(true);
    setError(null);
    try {
      const o = await api.post<QueryOut>("/query", { sql, max_rows: maxRows });
      setOut(o);
    } catch (e) {
      setError(e instanceof Error ? e : new Error(String(e)));
      setOut(null);
    } finally {
      setBusy(false);
    }
  }

  function onKey(e: KeyboardEvent<HTMLTextAreaElement>) {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
      e.preventDefault();
      void run();
    }
    if (e.key === "Tab") {
      e.preventDefault();
      const el = e.currentTarget;
      const s = el.selectionStart, en = el.selectionEnd;
      const next = sql.slice(0, s) + "  " + sql.slice(en);
      setSql(next);
      requestAnimationFrame(() => el.setSelectionRange(s + 2, s + 2));
    }
  }

  const shown = out ? out.rows.slice(0, DISPLAY_CAP) : [];

  return (
    <>
      <PageHeader title="SQL playground" subtitle="DuckDB over the curated Parquet files — read-only, one statement, sandboxed. Results are logged to the audit trail." />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
        <div className="flex flex-col gap-4">
          <Card>
            <textarea
              ref={ta}
              className="input min-h-40 resize-y font-mono text-[13px] leading-relaxed"
              spellCheck={false}
              value={sql}
              onChange={(e) => setSql(e.target.value)}
              onKeyDown={onKey}
              aria-label="SQL"
            />
            <div className="mt-2 flex flex-wrap items-center gap-2">
              <button className="btn btn-primary" onClick={() => void run()} disabled={busy || !sql.trim()}>
                <Play className="h-3.5 w-3.5" /> {busy ? "Running…" : "Run"}
              </button>
              <span className="text-xs text-ink-3">
                <kbd className="kbd">⌘</kbd>/<kbd className="kbd">Ctrl</kbd> + <kbd className="kbd">Enter</kbd>
              </span>
              <label className="ml-auto flex items-center gap-2 text-xs text-ink-2">
                max rows
                <input type="number" className="input w-24 py-1" min={1} max={100000} value={maxRows} onChange={(e) => setMaxRows(Math.max(1, Math.min(100000, Number(e.target.value) || 1000)))} />
              </label>
            </div>
          </Card>

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

          {out && (
            <Card
              title={
                <span className="flex flex-wrap items-center gap-2 text-sm">
                  Results
                  <span className="pill bg-surface-2 text-ink-2 tnum">{fmtInt(out.meta.rows)} rows</span>
                  <span className="pill bg-surface-2 text-ink-2 tnum">{fmtInt(out.meta.elapsed_ms)} ms</span>
                  {out.meta.truncated && <span className="pill bg-warn-soft text-warn-ink">truncated at max_rows</span>}
                  {out.rows.length > DISPLAY_CAP && <span className="pill bg-warn-soft text-warn-ink">showing first {fmtInt(DISPLAY_CAP)}</span>}
                </span>
              }
              actions={
                <button className="btn btn-sm" onClick={() => downloadText(`query-${Date.now()}.csv`, toCsv(out.columns.map((c) => c.name), out.rows))} disabled={!out.rows.length}>
                  <Download className="h-3.5 w-3.5" /> CSV ({fmtInt(out.rows.length)} rows)
                </button>
              }
            >
              {out.rows.length === 0 ? (
                <Empty>Query returned no rows.</Empty>
              ) : (
                <div className="table-wrap" style={{ maxHeight: "60dvh", overflowY: "auto" }}>
                  <table className="table">
                    <thead>
                      <tr>
                        {out.columns.map((c) => (
                          <th key={c.name}>
                            {c.name}
                            <div className="font-normal text-[10px] text-ink-3">{c.type}</div>
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {shown.map((r, i) => (
                        <tr key={i}>
                          {out.columns.map((c) => {
                            const v = r[c.name];
                            const isNum = typeof v === "number";
                            return (
                              <td key={c.name} className={clsx("font-mono text-xs whitespace-nowrap", isNum && "num")}>
                                {v === null || v === undefined ? <span className="text-ink-3">NULL</span> : typeof v === "object" ? JSON.stringify(v) : String(v)}
                              </td>
                            );
                          })}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
              <div className="mt-2 text-[11px] text-ink-3">engine: {out.meta.engine}</div>
            </Card>
          )}
        </div>

        <div className="flex flex-col gap-4">
          <Card title="Views">
            {views.error && <ErrorState error={views.error} retry={views.reload} />}
            {views.data && views.data.views.length === 0 && <Empty>No views (no curated files yet).</Empty>}
            <ul className="flex flex-col gap-1 text-xs">
              {views.data?.views.map((v) => (
                <li key={v.name} className="flex items-center justify-between gap-2">
                  <button className="font-mono text-accent-ink hover:underline text-left break-all" onClick={() => setSql(`SELECT * FROM ${v.name} LIMIT 100`)} title="Insert SELECT">
                    {v.name}
                  </button>
                  <span className="tnum text-ink-3 whitespace-nowrap">{fmtInt(v.files)} files</span>
                </li>
              ))}
            </ul>
          </Card>
          <Card title="Examples">
            <ul className="flex flex-col gap-2">
              {views.data?.examples.map((ex, i) => (
                <li key={i}>
                  <button className="w-full rounded-md border border-hairline bg-surface-2 p-2 text-left font-mono text-[11px] leading-snug text-ink-2 hover:border-accent/60 whitespace-pre-wrap break-words" onClick={() => setSql(ex)}>
                    {ex}
                  </button>
                </li>
              ))}
            </ul>
          </Card>
          <Banner tone="accent">
            <div className="text-xs">
              Bars are stamped at <strong>bar open</strong> in UTC. Columns: <code>timestamp_utc, session_date, open, high, low, close, volume, vwap, trade_count, quality_flags, symbol_as_reported, instrument_id</code>. Stored data is <strong>raw</strong>; adjustments live in <code>corporate_actions</code>.
            </div>
          </Banner>
          <p className="text-[11px] text-ink-3" onClick={() => toast.info("Query results are private", "FirstRate Data terms forbid redistribution of raw bars.")}>License: frd-private — no redistribution of raw bars.</p>
        </div>
      </div>
    </>
  );
}