"use client";

import { useAuth } from "@/components/AuthProvider";
import { c2api } from "@/lib/c2api";
import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/navigation";

interface FeatureFlags {
  stt_enabled: boolean;
  correlation_enabled: boolean;
  summaries_enabled: boolean;
  vocabulary_learning_enabled: boolean;
}

const FLAG_META: { key: keyof FeatureFlags; label: string; description: string }[] = [
  {
    key: "stt_enabled",
    label: "Speech-to-Text (Whisper)",
    description: "Transcribe call audio via OpenAI Whisper. When off, calls are recorded and stored but no transcript is generated.",
  },
  {
    key: "correlation_enabled",
    label: "Incident Correlation",
    description: "Run scene extraction and incident correlation on each call. When off, calls are logged but not linked to incidents.",
  },
  {
    key: "summaries_enabled",
    label: "Incident Summaries",
    description: "Generate AI summaries for active incidents on each summarizer pass. Auto-resolve sweep is also paused when off.",
  },
  {
    key: "vocabulary_learning_enabled",
    label: "Vocabulary Learning",
    description: "Run the background vocabulary induction loop that proposes new STT terms from recent transcripts.",
  },
];

function Toggle({
  enabled,
  onChange,
  disabled,
}: {
  enabled: boolean;
  onChange: (val: boolean) => void;
  disabled: boolean;
}) {
  return (
    <button
      onClick={() => onChange(!enabled)}
      disabled={disabled}
      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none disabled:opacity-50 ${
        enabled ? "bg-indigo-600" : "bg-gray-700"
      }`}
    >
      <span
        className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${
          enabled ? "translate-x-6" : "translate-x-1"
        }`}
      />
    </button>
  );
}

function CorrelationDebugTab() {
  const [limit, setLimit] = useState(20);
  const [orphanHours, setOrphanHours] = useState(48);
  const [data, setData] = useState<unknown>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const preRef = useRef<HTMLPreElement>(null);

  async function handleFetch() {
    setLoading(true);
    setError(null);
    setData(null);
    setCopied(false);
    try {
      const result = await c2api.getCorrelationDebug(limit, orphanHours);
      setData(result);
    } catch (e) {
      setError(String(e));
    } finally {
      setLoading(false);
    }
  }

  function handleCopy() {
    if (!data) return;
    const text = JSON.stringify(data, null, 2);
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      }).catch(() => fallbackCopy(text));
    } else {
      fallbackCopy(text);
    }
  }

  function fallbackCopy(text: string) {
    const ta = document.createElement("textarea");
    ta.value = text;
    ta.style.position = "fixed";
    ta.style.opacity = "0";
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  const json = data ? JSON.stringify(data, null, 2) : null;
  const meta = data as { incident_count?: number; orphaned_call_count?: number; generated_at?: string } | null;

  return (
    <div className="space-y-4">
      <p className="text-xs text-gray-500 font-mono">
        Fetches recent incidents with per-call correlation debug fields, plus orphaned calls.
        Copy the JSON and paste it to Claude to diagnose correlation problems.
      </p>

      <div className="flex flex-wrap items-end gap-4">
        <div>
          <label className="text-xs text-gray-400 block mb-1">Incidents (limit)</label>
          <input
            type="number"
            min={1} max={100}
            value={limit}
            onChange={(e) => setLimit(Math.min(100, Math.max(1, Number(e.target.value))))}
            className="w-24 bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
          />
        </div>
        <div>
          <label className="text-xs text-gray-400 block mb-1">Orphan scan window (hours)</label>
          <input
            type="number"
            min={1} max={168}
            value={orphanHours}
            onChange={(e) => setOrphanHours(Math.min(168, Math.max(1, Number(e.target.value))))}
            className="w-28 bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
          />
        </div>
        <button
          onClick={handleFetch}
          disabled={loading}
          className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
        >
          {loading ? "Fetching…" : "Fetch"}
        </button>
      </div>

      {error && (
        <div className="bg-red-950 border border-red-800 rounded-lg p-3">
          <p className="text-red-400 text-sm font-mono">{error}</p>
        </div>
      )}

      {meta && (
        <div className="flex items-center justify-between">
          <p className="text-xs text-gray-500 font-mono">
            {meta.incident_count} incidents · {meta.orphaned_call_count} orphaned calls · {meta.generated_at}
          </p>
          <button
            onClick={handleCopy}
            className="text-xs font-mono px-3 py-1.5 rounded-lg border border-gray-700 bg-gray-900 text-gray-300 hover:text-white transition-colors"
          >
            {copied ? "Copied!" : "Copy JSON"}
          </button>
        </div>
      )}

      {json && (
        <pre
          ref={preRef}
          className="bg-gray-950 border border-gray-800 rounded-xl p-4 text-xs text-gray-300 font-mono overflow-auto max-h-[60vh] whitespace-pre"
        >
          {json}
        </pre>
      )}
    </div>
  );
}

export default function AdminPage() {
  const { isAdmin } = useAuth();
  const router = useRouter();
  const [tab, setTab] = useState<"features" | "correlation">("features");

  const [flags, setFlags] = useState<FeatureFlags | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!isAdmin) {
      router.replace("/dashboard");
      return;
    }
    c2api.getFeatureFlags()
      .then((f) => setFlags(f as unknown as FeatureFlags))
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false));
  }, [isAdmin, router]);

  async function handleToggle(key: keyof FeatureFlags, value: boolean) {
    if (!flags) return;
    setSaving(key);
    setError(null);
    try {
      const updated = await c2api.setFeatureFlags({ [key]: value });
      setFlags(updated as unknown as FeatureFlags);
    } catch (e) {
      setError(String(e));
    } finally {
      setSaving(null);
    }
  }

  if (!isAdmin) return null;

  return (
    <div className="max-w-2xl space-y-6">
      <h1 className="text-white text-xl font-bold font-mono">Admin</h1>

      <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit">
        {(["features", "correlation"] as const).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors ${
              tab === t ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
            }`}
          >
            {t === "features" ? "AI Features" : "Correlation Debug"}
          </button>
        ))}
      </div>

      {tab === "features" && (
        <section className="space-y-3">
          {error && (
            <div className="bg-red-950 border border-red-800 rounded-lg p-3">
              <p className="text-red-400 text-sm font-mono">{error}</p>
            </div>
          )}
          {loading ? (
            <p className="text-gray-500 text-sm font-mono">Loading…</p>
          ) : (
            <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
              {FLAG_META.map(({ key, label, description }) => (
                <div key={key} className="flex items-center justify-between gap-4 px-5 py-4">
                  <div className="min-w-0">
                    <p className="text-white text-sm font-semibold">{label}</p>
                    <p className="text-gray-500 text-xs mt-0.5 leading-snug">{description}</p>
                  </div>
                  <Toggle
                    enabled={flags?.[key] ?? true}
                    onChange={(val) => handleToggle(key, val)}
                    disabled={saving === key}
                  />
                </div>
              ))}
            </div>
          )}
        </section>
      )}

      {tab === "correlation" && <CorrelationDebugTab />}
    </div>
  );
}