"use client";

import { useAuth } from "@/components/AuthProvider";
import { c2api } from "@/lib/c2api";
import { useEffect, useState } 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>
  );
}

export default function AdminPage() {
  const { isAdmin } = useAuth();
  const router = useRouter();

  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-8">
      <h1 className="text-white text-xl font-bold font-mono">Admin</h1>

      <section className="space-y-3">
        <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider">AI Features</h2>

        {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>
    </div>
  );
}