"use client";

import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

type ModelId = "anthropic" | "openai" | "gemini";

interface Verdict {
  model: ModelId;
  ok: boolean;
  message?: string;
  error?: string;
  latencyMs?: number;
}

interface CouncilStatus {
  configured: Record<ModelId, boolean>;
  models: Record<ModelId, string>;
}

const MODEL_DISPLAY: Record<ModelId, { label: string; icon: string; color: string }> = {
  anthropic: { label: "Anthropic Claude", icon: "🟧", color: "#cc785c" },
  openai: { label: "OpenAI GPT-4o", icon: "🟢", color: "#10a37f" },
  gemini: { label: "Google Gemini", icon: "🔵", color: "#4285f4" },
};

const PRESETS: Array<{ label: string; system: string; prompt: string }> = [
  {
    label: "Legal risk check",
    system:
      "You are reviewing a legal-sensitive document for SAG (a NC holding company). Flag risks, ambiguous terms, and missing protections. Be specific. 6-12 bullets max.",
    prompt: "Paste the contract / letter / policy here:",
  },
  {
    label: "Big-bill sanity check",
    system:
      "You are reviewing a bill or invoice before approving payment. Flag anything suspicious: amount inconsistencies, unexpected charges, vendor red flags, missing receipts. Be specific.",
    prompt: "Paste the bill detail here:",
  },
  {
    label: "Offer letter review",
    system:
      "You are reviewing a SAG offer letter for NC employment law compliance + market competitiveness. Flag any compliance gaps and grade comp.",
    prompt: "Paste the offer letter here:",
  },
];

export function CouncilConsole() {
  const [status, setStatus] = useState<CouncilStatus | null>(null);
  const [prompt, setPrompt] = useState("");
  const [system, setSystem] = useState("");
  const [selectedModels, setSelectedModels] = useState<Set<ModelId>>(
    new Set(["anthropic", "openai", "gemini"])
  );
  const [verdicts, setVerdicts] = useState<Verdict[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>("");

  useEffect(() => {
    const t = setTimeout(async () => {
      try {
        const resp = await fetch("/api/council/consult");
        const data = (await resp.json()) as CouncilStatus;
        setStatus(data);
      } catch {
        // ignore
      }
    }, 0);
    return () => clearTimeout(t);
  }, []);

  function toggleModel(m: ModelId) {
    setSelectedModels((prev) => {
      const next = new Set(prev);
      if (next.has(m)) next.delete(m);
      else next.add(m);
      return next;
    });
  }

  async function consult() {
    setLoading(true);
    setError("");
    setVerdicts([]);
    try {
      const resp = await fetch("/api/council/consult", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          prompt,
          system: system || undefined,
          models: Array.from(selectedModels),
        }),
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || "Failed");
      setVerdicts(data.verdicts ?? []);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Unknown");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-6 max-w-6xl">
      <Card>
        <CardContent className="p-5 space-y-3">
          <div className="flex items-center justify-between flex-wrap gap-2">
            <div>
              <h2 className="text-base font-semibold">Three models, one question</h2>
              <p className="text-xs text-muted-foreground max-w-2xl">
                Sends the same prompt to Claude, GPT-4o, and Gemini in parallel. Compare answers
                side-by-side. Useful when one model&apos;s answer is too risky to trust solo —
                legal letters, big-ticket bill approval, offer-letter review, NC compliance
                interpretations.
              </p>
            </div>
            <div className="flex items-center gap-2 flex-wrap">
              {(Object.keys(MODEL_DISPLAY) as ModelId[]).map((m) => {
                const live = status?.configured[m];
                const active = selectedModels.has(m);
                return (
                  <button
                    key={m}
                    onClick={() => toggleModel(m)}
                    disabled={!live}
                    className={`text-xs px-3 py-1.5 rounded-full border transition-colors inline-flex items-center gap-1 ${
                      !live
                        ? "opacity-50 cursor-not-allowed border-input text-muted-foreground"
                        : active
                          ? "bg-foreground text-background border-foreground"
                          : "border-input text-muted-foreground hover:bg-accent"
                    }`}
                    title={!live ? `${MODEL_DISPLAY[m].label} API key not set` : MODEL_DISPLAY[m].label}
                  >
                    <span>{MODEL_DISPLAY[m].icon}</span>
                    {MODEL_DISPLAY[m].label}
                    {!live && <span className="ml-1 text-[10px]">(no key)</span>}
                  </button>
                );
              })}
            </div>
          </div>

          <div>
            <label className="text-xs text-muted-foreground">Presets</label>
            <div className="mt-1 flex flex-wrap gap-1">
              {PRESETS.map((p) => (
                <button
                  key={p.label}
                  onClick={() => {
                    setSystem(p.system);
                    setPrompt(p.prompt);
                  }}
                  className="text-[11px] px-2 py-1 rounded-full border bg-background hover:bg-accent"
                >
                  {p.label}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="text-xs text-muted-foreground">System (optional)</label>
            <textarea
              value={system}
              onChange={(e) => setSystem(e.target.value)}
              rows={2}
              className="mt-1 w-full rounded-md border border-input bg-background p-2 text-sm"
              placeholder="Optional: give the models a role or constraint."
            />
          </div>

          <div>
            <label className="text-xs text-muted-foreground">Prompt</label>
            <textarea
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              rows={6}
              className="mt-1 w-full rounded-md border border-input bg-background p-2 text-sm"
              placeholder="What do you want the council to evaluate?"
            />
          </div>

          <div className="flex items-center justify-end gap-2">
            <Button
              variant="brand"
              size="sm"
              disabled={loading || !prompt.trim() || selectedModels.size === 0}
              onClick={consult}
            >
              {loading ? "Consulting…" : "Consult the council"}
            </Button>
          </div>
          {error && <p className="text-xs text-destructive">{error}</p>}
        </CardContent>
      </Card>

      {verdicts.length > 0 && (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {verdicts.map((v) => {
            const display = MODEL_DISPLAY[v.model];
            return (
              <Card key={v.model}>
                <CardContent className="p-5 space-y-2">
                  <div className="flex items-center justify-between gap-2 flex-wrap">
                    <div className="inline-flex items-center gap-2">
                      <span className="text-xl">{display.icon}</span>
                      <h3 className="text-sm font-semibold">{display.label}</h3>
                    </div>
                    {v.ok ? (
                      <Badge variant="success" className="text-[10px]">
                        OK · {v.latencyMs ?? "?"}ms
                      </Badge>
                    ) : (
                      <Badge variant="destructive" className="text-[10px]">
                        Error
                      </Badge>
                    )}
                  </div>
                  {v.ok ? (
                    <p className="text-sm whitespace-pre-wrap leading-relaxed">{v.message}</p>
                  ) : (
                    <p className="text-xs text-destructive">{v.error}</p>
                  )}
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      <Card className="border-dashed">
        <CardContent className="p-5 text-xs text-muted-foreground">
          To unlock OpenAI + Gemini in the council, add{" "}
          <code className="text-[11px]">OPENAI_API_KEY</code> and{" "}
          <code className="text-[11px]">GEMINI_API_KEY</code> to{" "}
          <code className="text-[11px]">.env.local</code>, then restart the dev server. Claude
          is already configured. Inspired by{" "}
          <a
            href="https://github.com/karpathy/llm-council"
            target="_blank"
            rel="noopener noreferrer"
            className="underline"
          >
            karpathy/llm-council
          </a>
          .
        </CardContent>
      </Card>
    </div>
  );
}