"use client";

import { useState } from "react";
import { PROVIDERS, type Provider } from "../lib/askProvider";
import type { AgentMode } from "../lib/searchAgent";

const MODES: { value: AgentMode; label: string }[] = [
  { value: "auto", label: "Auto" },
  { value: "native", label: "Native tools" },
  { value: "scripted", label: "Scripted" },
];

type Props = {
  provider: Provider;
  setProvider: (p: Provider) => void;
  apiKey: string;
  setApiKey: (v: string) => void;
  model: string;
  setModel: (v: string) => void;
  remember: boolean;
  setRemember: (v: boolean) => void;
  showKey: boolean;
  setShowKey: (v: boolean) => void;
  searchMode: AgentMode;
  setSearchMode: (m: AgentMode) => void;
  persistKey: (p: Provider, key: string, mdl: string, rememberOn: boolean) => void;
  maxAnswerTokens: number;
  setMaxAnswerTokens: (n: number) => void;
  sweepBatch: number;
  setSweepBatch: (n: number) => void;
  // Requests-per-minute pacing for the current provider+model.
  rpmOverride: number | null;
  rpmDefault: number;
  effectiveRpm: number;
  setRpm: (n: number | null) => void;
  buildDebugJson: () => string;
};

export function ProviderSettings(props: Props) {
  const {
    provider,
    setProvider,
    apiKey,
    setApiKey,
    model,
    setModel,
    remember,
    setRemember,
    showKey,
    setShowKey,
    searchMode,
    setSearchMode,
    persistKey,
    maxAnswerTokens,
    setMaxAnswerTokens,
    sweepBatch,
    setSweepBatch,
    rpmOverride,
    rpmDefault,
    effectiveRpm,
    setRpm,
    buildDebugJson,
  } = props;
  const info = PROVIDERS[provider];
  // Derived spacing between requests at the effective RPM (e.g. 5 RPM → ≈12s).
  const spacingSec = effectiveRpm > 0 ? 60 / effectiveRpm : 0;
  const spacingLabel =
    spacingSec >= 1
      ? `${Math.round(spacingSec)}s`
      : `${Math.max(1, Math.round(spacingSec * 1000))}ms`;
  // Seed the panel open when there's no key yet, then hand control to the user.
  // Must NOT be recomputed from `apiKey` on every render — otherwise typing the
  // first character of the key flips it closed and yanks the panel away mid-entry.
  const [open, setOpen] = useState(!apiKey);
  const [debugCopied, setDebugCopied] = useState(false);

  const downloadDebug = () => {
    const blob = new Blob([buildDebugJson()], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `ask-debug-${Date.now()}.json`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  };
  const copyDebug = async () => {
    try {
      if (!navigator.clipboard) throw new Error("clipboard unavailable");
      await navigator.clipboard.writeText(buildDebugJson());
      setDebugCopied(true);
      setTimeout(() => setDebugCopied(false), 1500);
    } catch {
      /* clipboard blocked — the Download button still works */
    }
  };

  return (
    <details
      className="rounded-lg border border-border bg-card/40"
      open={open}
      onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}
    >
      <summary className="cursor-pointer px-4 py-2.5 text-sm font-medium text-foreground">
        {apiKey ? `${info.label} · key set` : "Set up your AI provider"}
      </summary>
      <div className="flex flex-col gap-3 border-t border-border px-4 py-3">
        <div className="flex flex-wrap gap-3">
          <label className="flex flex-col gap-1 text-xs text-muted-foreground">
            Provider
            <select
              value={provider}
              onChange={(e) => setProvider(e.target.value as Provider)}
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
            >
              {(Object.keys(PROVIDERS) as Provider[]).map((p) => (
                <option key={p} value={p}>
                  {PROVIDERS[p].label}
                </option>
              ))}
            </select>
          </label>
          <label className="flex min-w-[10rem] flex-1 flex-col gap-1 text-xs text-muted-foreground">
            Model
            <input
              list="ask-models"
              value={model}
              onChange={(e) => setModel(e.target.value)}
              className="rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
            />
            <datalist id="ask-models">
              {info.models.map((m) => (
                <option key={m} value={m} />
              ))}
            </datalist>
          </label>
        </div>

        <label className="flex flex-col gap-1 text-xs text-muted-foreground">
          API key
          <div className="flex gap-2">
            <input
              type={showKey ? "text" : "password"}
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder={info.keyHint}
              autoComplete="off"
              className="flex-1 rounded-md border border-border bg-background px-2 py-1.5 font-mono text-sm text-foreground"
            />
            <button
              type="button"
              onClick={() => setShowKey(!showKey)}
              className="rounded-md border border-border px-2 text-xs text-muted-foreground hover:text-foreground"
            >
              {showKey ? "Hide" : "Show"}
            </button>
          </div>
        </label>

        <label className="flex items-center gap-2 text-xs text-muted-foreground">
          <input
            type="checkbox"
            checked={remember}
            onChange={(e) => {
              setRemember(e.target.checked);
              persistKey(provider, apiKey, model, e.target.checked);
            }}
          />
          Remember my key in this browser
        </label>

        {/* Search mode: how the model drives multi-step retrieval. */}
        <div className="flex flex-col gap-1 text-xs text-muted-foreground">
          <span>Search mode</span>
          <div className="inline-flex w-fit overflow-hidden rounded-md border border-border">
            {MODES.map((m) => (
              <button
                key={m.value}
                type="button"
                onClick={() => setSearchMode(m.value)}
                aria-pressed={searchMode === m.value}
                className={
                  "px-2.5 py-1 text-xs transition-colors " +
                  (searchMode === m.value
                    ? "bg-brand text-brand-ink"
                    : "text-muted-foreground hover:text-foreground")
                }
              >
                {m.label}
              </button>
            ))}
          </div>
          <span className="text-muted-foreground/70">
            Auto uses your model’s native tool-calling when supported and falls
            back to a text protocol otherwise. Switch to Scripted if searches
            misbehave.
          </span>
        </div>

        {/* Everything below is a knob, not a setup step: a first-time reader
            needs provider, model and key, and nothing else. */}
        <details className="rounded-md border border-border">
          <summary className="cursor-pointer px-3 py-2 text-xs font-medium text-foreground">
            Advanced
          </summary>
          <div className="flex flex-col gap-3 border-t border-border px-3 py-3">
          {/* Answer length: raise it so long reports don't truncate at the cap. */}
          <label className="flex flex-col gap-1 text-xs text-muted-foreground">
            Max answer length (tokens)
            <input
              type="number"
              min={256}
              max={32768}
              step={512}
              value={maxAnswerTokens}
              onChange={(e) => setMaxAnswerTokens(Number(e.target.value))}
              className="w-32 rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
            />
            <span className="text-muted-foreground/70">
              How long an answer can be before the model cuts it off. Gemini,
              OpenAI, and Claude all support ~8k; raise it for big reports.
            </span>
          </label>

          {/* Sweep batch size: how many result videos each corpus-sweep batch folds
              into the report. Smaller → more, lighter batches (kinder to rate limits
              + easier to pause/resume); bigger → fewer, heavier passes. */}
          <label className="flex flex-col gap-1 text-xs text-muted-foreground">
            Sweep batch size (videos per batch)
            <input
              type="number"
              min={1}
              max={100}
              step={1}
              value={sweepBatch}
              onChange={(e) => setSweepBatch(Number(e.target.value))}
              className="w-32 rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
            />
            <span className="text-muted-foreground/70">
              How many videos a whole-corpus sweep reads per batch. Lower it if a
              sweep keeps hitting your provider’s rate limit.
            </span>
          </label>

          {/* Requests per minute: paces every AI call so a free-tier key stays
              under its per-minute cap instead of erroring. Defaults are conservative
              per-model guesses (shown as the placeholder); set a higher value for a
              paid key. Auto-lowers itself after a rate-limit (429). */}
          <label className="flex flex-col gap-1 text-xs text-muted-foreground">
            Requests per minute
            <div className="flex items-center gap-2">
              <input
                type="number"
                min={1}
                max={100000}
                step={1}
                value={rpmOverride ?? ""}
                placeholder={String(rpmDefault)}
                onChange={(e) => {
                  const v = e.target.value.trim();
                  setRpm(v === "" ? null : Number(v));
                }}
                aria-label="Requests per minute"
                className="w-32 rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
              />
              {rpmOverride != null && (
                <button
                  type="button"
                  onClick={() => setRpm(null)}
                  className="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
                >
                  Reset to default
                </button>
              )}
            </div>
            <span className="text-muted-foreground/70">
              Paces requests to ≈{spacingLabel} apart so a free-tier key stays under
              its per-minute limit. Blank uses the per-model default ({rpmDefault}).
              It auto-lowers itself after a rate-limit (429).
            </span>
          </label>

          {/* Debug export: a redacted snapshot for troubleshooting. */}
          <div className="flex flex-col gap-1 text-xs text-muted-foreground">
            <span>Debug</span>
            <div className="flex flex-wrap items-center gap-2">
              <button
                type="button"
                onClick={downloadDebug}
                className="rounded-md border border-border px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
              >
                Download debug JSON
              </button>
              <button
                type="button"
                onClick={() => void copyDebug()}
                className="rounded-md border border-border px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
              >
                {debugCopied ? "Copied" : "Copy debug JSON"}
              </button>
            </div>
            <span className="text-muted-foreground/70">
              A redacted snapshot of this chat plus the most recent API calls
              (finish reasons + payloads) for troubleshooting. Your API key is
              never included.
            </span>
          </div>
          </div>
        </details>

        <p className="text-xs text-muted-foreground/80">
          Your key is stored only{" "}
          {remember ? "in this browser" : "for this page session"} and is sent
          directly to {info.label} — never to this site. Requests are billed to
          your own account.{" "}
          <a
            href={info.keyUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-brand hover:underline"
          >
            Get a key →
          </a>
        </p>
      </div>
    </details>
  );
}