"use client";
/* eslint-disable @next/next/no-img-element */
import { useEffect, useState, type FormEvent } from "react";
import { QrCode, Radar, Save, ShieldCheck } from "lucide-react";
import { api, type SettingsOut } from "@/lib/api";
import { useAsync } from "@/lib/hooks";
import { useAuth } from "@/lib/auth";
import { useToast } from "@/lib/toast";
import { fmtInt, fmtTs, splitList } from "@/lib/format";
import { Banner, Card, Empty, ErrorState, Field, KV, PageHeader, StatusBadge } from "@/components/ui";
import { JsonView } from "@/components/JsonView";
import { CopyButton } from "@/components/CopyButton";

export default function SettingsPage() {
  const { me, isOwner, refresh } = useAuth();
  const toast = useToast();
  const settings = useAsync((s) => api.get<SettingsOut>("/admin/settings", undefined, s), [], { enabled: isOwner });

  // TOTP
  const [setup, setSetup] = useState<{ otpauth_uri: string; qr_png_data_url: string; secret: string } | null>(null);
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);

  async function startSetup() {
    setBusy(true);
    try {
      setSetup(await api.post("/auth/totp/setup"));
    } catch (e) {
      toast.error(e);
    } finally {
      setBusy(false);
    }
  }
  async function verify(e: FormEvent) {
    e.preventDefault();
    setBusy(true);
    try {
      await api.post("/auth/totp/verify", { code: code.replace(/\s+/g, "") });
      toast.success("Two-factor authentication enabled");
      setSetup(null);
      setCode("");
      await refresh();
    } catch (err) {
      toast.error(err);
    } finally {
      setBusy(false);
    }
  }

  // Tracked tickers
  const [tickers, setTickers] = useState("");
  const [tickersDirty, setTickersDirty] = useState(false);
  useEffect(() => {
    const row = settings.data?.settings.find((s) => s.key === "fundamentals_tracked_tickers");
    if (row && !tickersDirty) setTickers(Array.isArray(row.value) ? (row.value as string[]).join("\n") : "");
  }, [settings.data, tickersDirty]);
  async function saveTickers() {
    setBusy(true);
    try {
      const out = await api.put<{ tickers: string[] }>("/admin/settings/tracked-tickers", { tickers: splitList(tickers) });
      toast.success("Tracked tickers saved", `${out.tickers.length} tickers`);
      setTickers(out.tickers.join("\n"));
      setTickersDirty(false);
      settings.reload();
    } catch (e) {
      toast.error(e);
    } finally {
      setBusy(false);
    }
  }

  // Discovery
  const [disc, setDisc] = useState<unknown>(null);
  async function discover() {
    setBusy(true);
    setDisc(null);
    try {
      setDisc(await api.post("/admin/discover"));
      toast.success("Discovery finished");
    } catch (e) {
      toast.error(e);
    } finally {
      setBusy(false);
    }
  }

  const env = settings.data?.env;
  const otherSettings = (settings.data?.settings ?? []).filter((s) => s.key !== "fundamentals_tracked_tickers");

  return (
    <>
      <PageHeader title="Settings" subtitle="Account security, environment flags and ingestion preferences" />
      <div className="grid gap-4 lg:grid-cols-2">
        <Card title="Account">
          <KV
            items={[
              ["E-mail", me?.email ?? "—"],
              ["Role", <StatusBadge key="r" status="neutral" label={me?.role ?? "—"} icon={false} />],
              ["Scopes", <div key="s" className="flex flex-wrap gap-1">{(me?.scopes ?? []).map((s) => <span key={s} className="pill bg-surface-2 text-ink-2">{s}</span>)}</div>],
              ["Two-factor (TOTP)", me?.totp_enabled ? <StatusBadge key="t" status="ok" label="enabled" /> : <StatusBadge key="t" status="warning" label="not enabled" />],
            ]}
          />
          <div className="mt-4 border-t border-hairline pt-3">
            {!setup ? (
              <button className="btn" onClick={startSetup} disabled={busy}>
                <ShieldCheck className="h-4 w-4" /> {me?.totp_enabled ? "Re-enrol authenticator" : "Enable two-factor authentication"}
              </button>
            ) : (
              <form onSubmit={verify} className="flex flex-col gap-3 sm:flex-row">
                <div className="shrink-0 rounded-md border border-border bg-white p-2 self-start">
                  <img src={setup.qr_png_data_url} alt="TOTP enrolment QR code" width={160} height={160} />
                </div>
                <div className="flex flex-1 flex-col gap-2">
                  <p className="text-sm text-ink-2">
                    <QrCode className="mr-1 inline h-4 w-4" /> Scan with your authenticator, or enter the secret manually:
                  </p>
                  <div className="flex items-center gap-2">
                    <code className="break-all rounded bg-surface-2 px-2 py-1 text-xs">{setup.secret}</code>
                    <CopyButton text={setup.secret} />
                  </div>
                  <Field label="Code from the app">
                    <input className="input font-mono tracking-[0.3em]" inputMode="numeric" autoComplete="one-time-code" value={code} onChange={(e) => setCode(e.target.value)} required />
                  </Field>
                  <div className="flex gap-2">
                    <button className="btn btn-primary" disabled={busy || code.replace(/\s+/g, "").length < 6}>
                      Verify & enable
                    </button>
                    <button type="button" className="btn" onClick={() => setSetup(null)}>
                      Cancel
                    </button>
                  </div>
                </div>
              </form>
            )}
          </div>
        </Card>

        <Card title="Environment">
          {!isOwner && <Empty>Environment flags are visible to the owner only.</Empty>}
          {settings.error && <ErrorState error={settings.error} retry={settings.reload} />}
          {env && (
            <KV
              items={[
                ["Environment", <StatusBadge key="e" status={env.env === "production" ? "ok" : "warning"} label={env.env} />],
                ["Lake path", <code key="l" className="text-xs">{env.lake}</code>],
                ["Public URL", <a key="u" href={env.public_url} className="text-accent-ink hover:underline break-all" target="_blank" rel="noopener">{env.public_url}</a>],
                ["Backup target", <code key="b" className="text-xs">{env.backup_target}</code>],
                ["FirstRate Data vendor", <StatusBadge key="v" status={env.vendor_configured ? "ok" : "error"} label={env.vendor_configured ? "configured" : "not configured"} />],
                ["SEC EDGAR", <StatusBadge key="s" status={env.sec_edgar_configured ? "ok" : "pending_configuration"} label={env.sec_edgar_configured ? "configured" : "pending configuration"} />],
                ["AI providers", <span key="a" className="flex gap-1"><StatusBadge status={env.ai_providers.anthropic ? "ok" : "neutral"} label={`anthropic ${env.ai_providers.anthropic ? "yes" : "no"}`} icon={false} /><StatusBadge status={env.ai_providers.openai ? "ok" : "neutral"} label={`openai ${env.ai_providers.openai ? "yes" : "no"}`} icon={false} /></span>],
              ]}
            />
          )}
          <p className="mt-3 text-[11px] text-ink-3">Secrets are never sent to the browser; only configured yes/no flags are shown.</p>
        </Card>

        {isOwner && (
          <Card title="Tracked tickers (fundamentals)" actions={<span className="text-xs text-ink-3">{fmtInt(splitList(tickers).length)} tickers</span>}>
            <textarea className="input min-h-40 font-mono uppercase" value={tickers} onChange={(e) => { setTickers(e.target.value); setTickersDirty(true); }} placeholder={"AAPL\nMSFT\nNVDA"} />
            <div className="mt-2 flex items-center justify-between gap-2">
              <span className="text-xs text-ink-3">Used by <code>fundamentals</code> jobs when no tickers are given. Max 2 000, deduplicated and upper-cased.</span>
              <button className="btn btn-primary" onClick={saveTickers} disabled={busy || !tickersDirty}>
                <Save className="h-4 w-4" /> Save
              </button>
            </div>
          </Card>
        )}

        {isOwner && (
          <Card title="Vendor discovery" actions={<button className="btn btn-sm" onClick={discover} disabled={busy}><Radar className="h-3.5 w-3.5" /> {busy ? "Probing…" : "Run discovery"}</button>}>
            <p className="text-xs text-ink-2">Live, sanitized probe of FirstRate Data and SEC EDGAR (no bulk download). Output is redacted server-side and recorded in the audit log.</p>
            <div className="mt-2">{disc ? <JsonView value={disc} maxHeight="28rem" /> : <Empty>No discovery run yet in this session.</Empty>}</div>
          </Card>
        )}

        {isOwner && otherSettings.length > 0 && (
          <Card title="Other settings (read-only)" className="lg:col-span-2">
            <ul className="flex flex-col gap-2">
              {otherSettings.map((s) => (
                <li key={s.key} className="text-sm">
                  <div className="flex items-center justify-between gap-2">
                    <code className="text-xs">{s.key}</code>
                    <span className="tnum text-xs text-ink-3">{fmtTs(s.updated_at)}</span>
                  </div>
                  <JsonView value={s.value} collapsed />
                </li>
              ))}
            </ul>
          </Card>
        )}
      </div>
      {!me?.totp_enabled && (
        <Banner tone="warn" className="mt-4">
          Two-factor authentication is not enabled on this account. Enable it above — the owner role controls jobs, keys and storage.
        </Banner>
      )}
    </>
  );
}