"use client";

import { useAuth } from "@/components/AuthProvider";
import { c2api } from "@/lib/c2api";
import { useEffect, useState, useRef, useCallback } from "react";
import { useRouter } from "next/navigation";
import type { UserRecord, AuditEntry, UserRole } from "@/lib/types";

// ---------------------------------------------------------------------------
// Shared primitives
// ---------------------------------------------------------------------------

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 fmtDate(iso: string | null | undefined) {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}

function fmtDatetime(iso: string | null | undefined) {
  if (!iso) return "—";
  return new Date(iso).toLocaleString("en-US", {
    month: "short", day: "numeric", year: "numeric",
    hour: "numeric", minute: "2-digit",
  });
}

const ROLE_COLORS: Record<UserRole, string> = {
  admin:    "bg-indigo-900 text-indigo-300",
  operator: "bg-green-900 text-green-300",
  viewer:   "bg-gray-800 text-gray-400",
};

function RoleBadge({ role }: { role: UserRole }) {
  const labels: Record<UserRole, string> = { admin: "Admin", operator: "Operator", viewer: "Viewer" };
  return (
    <span className={`text-xs font-mono px-2 py-0.5 rounded-full ${ROLE_COLORS[role]}`}>
      {labels[role]}
    </span>
  );
}

// ---------------------------------------------------------------------------
// AI Features tab
// ---------------------------------------------------------------------------

function FeaturesTab() {
  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(() => {
    c2api.getFeatureFlags()
      .then((f) => setFlags(f as unknown as FeatureFlags))
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false));
  }, []);

  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);
    }
  }

  return (
    <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>
  );
}

// ---------------------------------------------------------------------------
// Correlation Debug tab
// ---------------------------------------------------------------------------

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;
    incidents?: Array<{ calls_detail?: Array<{ corr_path?: string; corr_fit_signal?: string }> }>;
    orphans_by_talkgroup?: Array<{ talkgroup_id?: number; talkgroup_name?: string; count: number; no_type_count: number; sweep_exhausted_count: number }>;
  } | null;

  const pathCounts: Record<string, number> = {};
  const signalCounts: Record<string, number> = {};
  if (meta?.incidents) {
    for (const inc of meta.incidents) {
      for (const call of inc.calls_detail ?? []) {
        const p = call.corr_path ?? "unknown";
        pathCounts[p] = (pathCounts[p] ?? 0) + 1;
        if (call.corr_fit_signal) {
          signalCounts[call.corr_fit_signal] = (signalCounts[call.corr_fit_signal] ?? 0) + 1;
        }
      }
    }
  }

  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>
      )}

      {meta && Object.keys(pathCounts).length > 0 && (
        <div className="grid grid-cols-2 gap-3">
          <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-1">
            <p className="text-xs text-gray-400 font-mono font-semibold mb-2">corr_path distribution</p>
            {Object.entries(pathCounts).sort((a, b) => b[1] - a[1]).map(([path, n]) => (
              <div key={path} className="flex justify-between text-xs font-mono">
                <span className="text-gray-300">{path}</span>
                <span className="text-indigo-400">{n}</span>
              </div>
            ))}
          </div>
          <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-1">
            <p className="text-xs text-gray-400 font-mono font-semibold mb-2">fit_signal distribution</p>
            {Object.keys(signalCounts).length === 0
              ? <p className="text-xs text-gray-600 font-mono">No signal data yet — deploy correlator update first</p>
              : Object.entries(signalCounts).sort((a, b) => b[1] - a[1]).map(([sig, n]) => (
                  <div key={sig} className="flex justify-between text-xs font-mono">
                    <span className={sig === "time_fallback" ? "text-yellow-400" : "text-gray-300"}>{sig}</span>
                    <span className="text-indigo-400">{n}</span>
                  </div>
                ))
            }
          </div>
        </div>
      )}

      {meta?.orphans_by_talkgroup && meta.orphans_by_talkgroup.length > 0 && (
        <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-1">
          <p className="text-xs text-gray-400 font-mono font-semibold mb-2">orphans by talkgroup</p>
          {meta.orphans_by_talkgroup.map((tg) => (
            <div key={String(tg.talkgroup_id)} className="flex justify-between text-xs font-mono">
              <span className="text-gray-300">{tg.talkgroup_name} <span className="text-gray-600">({tg.talkgroup_id})</span></span>
              <span className="text-gray-400">
                {tg.count} total · <span className="text-gray-500">{tg.no_type_count} no-type</span> · <span className="text-red-400">{tg.sweep_exhausted_count} exhausted</span>
              </span>
            </div>
          ))}
        </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>
  );
}

// ---------------------------------------------------------------------------
// User detail panel
// ---------------------------------------------------------------------------

function UserDetailPanel({
  user,
  onClose,
  onUpdated,
  currentUid,
}: {
  user: UserRecord;
  onClose: () => void;
  onUpdated: (u: UserRecord) => void;
  currentUid: string;
}) {
  const [detail, setDetail] = useState<UserRecord>(user);
  const [editRole, setEditRole] = useState<UserRole>(user.role);
  const [editNodes, setEditNodes] = useState<string>(user.owned_node_ids.join(", "));
  const [editName, setEditName] = useState<string>(user.display_name ?? "");
  const [saving, setSaving] = useState(false);
  const [toggling, setToggling] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showSessions, setShowSessions] = useState(false);

  // Fetch full detail (sessions) lazily
  useEffect(() => {
    c2api.getUser(user.uid)
      .then((d) => setDetail(d))
      .catch(() => {});
  }, [user.uid]);

  async function handleSave() {
    setSaving(true);
    setError(null);
    const nodes = editRole === "operator"
      ? editNodes.split(",").map((s) => s.trim()).filter(Boolean)
      : [];
    try {
      const updated = await c2api.updateUser(user.uid, {
        role: editRole,
        owned_node_ids: nodes,
        display_name: editName || undefined,
      });
      onUpdated(updated);
      setDetail((d) => ({ ...d, ...updated }));
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
    }
  }

  async function handleToggleDisabled() {
    setToggling(true);
    setError(null);
    try {
      if (detail.disabled) {
        await c2api.enableUser(user.uid);
      } else {
        await c2api.disableUser(user.uid);
      }
      const next = { ...detail, disabled: !detail.disabled };
      setDetail(next);
      onUpdated(next);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setToggling(false);
    }
  }

  async function handleDelete() {
    if (!confirm(`Permanently delete ${detail.email}? This cannot be undone.`)) return;
    setDeleting(true);
    setError(null);
    try {
      await c2api.deleteUser(user.uid);
      onUpdated({ ...detail, uid: "__deleted__" });
      onClose();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setDeleting(false);
    }
  }

  const isSelf = user.uid === currentUid;

  return (
    <div className="bg-gray-900 border border-gray-700 rounded-xl p-5 space-y-5 font-mono">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-white font-semibold">{detail.email}</p>
          <p className="text-xs text-gray-500 mt-0.5">{detail.uid}</p>
        </div>
        <button onClick={onClose} className="text-gray-600 hover:text-gray-300 transition-colors text-xl leading-none">×</button>
      </div>

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

      <div className="space-y-3">
        <div>
          <label className="text-xs text-gray-400 block mb-1">Display Name</label>
          <input
            value={editName}
            onChange={(e) => setEditName(e.target.value)}
            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
            placeholder="Full name"
          />
        </div>

        <div>
          <label className="text-xs text-gray-400 block mb-1">Role</label>
          <select
            value={editRole}
            onChange={(e) => setEditRole(e.target.value as UserRole)}
            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
          >
            <option value="admin">Admin — full access</option>
            <option value="operator">Operator — owns nodes</option>
            <option value="viewer">Viewer — read-only</option>
          </select>
        </div>

        {editRole === "operator" && (
          <div>
            <label className="text-xs text-gray-400 block mb-1">
              Owned Node IDs <span className="text-gray-600">(comma-separated, required)</span>
            </label>
            <input
              value={editNodes}
              onChange={(e) => setEditNodes(e.target.value)}
              className="w-full 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"
              placeholder="node-abc123, node-def456"
            />
          </div>
        )}

        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm px-4 py-1.5 rounded-lg transition-colors"
        >
          {saving ? "Saving…" : "Save changes"}
        </button>
      </div>

      <div className="border-t border-gray-800 pt-4 space-y-2 text-xs">
        <div className="flex justify-between">
          <span className="text-gray-500">Status</span>
          <span className={detail.disabled ? "text-red-400" : "text-green-400"}>
            {detail.disabled ? "Disabled" : "Active"}
          </span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-500">Discord</span>
          <span className="text-gray-300">
            {detail.discord_linked
              ? `@${detail.discord_username ?? detail.discord_user_id}`
              : "Not linked"}
          </span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-500">Created</span>
          <span className="text-gray-300">{fmtDate(detail.creation_time)}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-500">Last sign-in</span>
          <span className="text-gray-300">{fmtDate(detail.last_sign_in)}</span>
        </div>
      </div>

      {(detail.sessions?.length ?? 0) > 0 && (
        <div className="border-t border-gray-800 pt-4">
          <button
            onClick={() => setShowSessions((v) => !v)}
            className="text-xs text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1"
          >
            <span>{showSessions ? "▲" : "▼"}</span>
            <span>Login history ({detail.sessions?.length} recent)</span>
          </button>
          {showSessions && (
            <div className="mt-3 space-y-1.5 max-h-48 overflow-y-auto">
              {detail.sessions?.map((s) => (
                <div key={s.session_id} className="text-xs text-gray-400 flex justify-between gap-4">
                  <span>{fmtDatetime(s.timestamp)}</span>
                  <span className="text-gray-600 truncate">{s.ip ?? "—"}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      <div className="border-t border-gray-800 pt-4 flex gap-4 flex-wrap">
        {!isSelf ? (
          <>
            <button
              onClick={handleToggleDisabled}
              disabled={toggling}
              className="text-xs text-yellow-500 hover:text-yellow-400 disabled:opacity-50 transition-colors"
            >
              {toggling ? "…" : detail.disabled ? "Enable account" : "Disable account"}
            </button>
            <button
              onClick={handleDelete}
              disabled={deleting}
              className="text-xs text-red-500 hover:text-red-400 disabled:opacity-50 transition-colors"
            >
              {deleting ? "Deleting…" : "Delete user"}
            </button>
          </>
        ) : (
          <p className="text-xs text-gray-600">Cannot disable or delete your own account.</p>
        )}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Create User modal
// ---------------------------------------------------------------------------

function CreateUserModal({
  onClose,
  onCreated,
}: {
  onClose: () => void;
  onCreated: (u: UserRecord) => void;
}) {
  const [email, setEmail] = useState("");
  const [displayName, setDisplayName] = useState("");
  const [role, setRole] = useState<UserRole>("viewer");
  const [nodeIds, setNodeIds] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [inviteLink, setInviteLink] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    const owned_node_ids = role === "operator"
      ? nodeIds.split(",").map((s) => s.trim()).filter(Boolean)
      : [];
    try {
      const created = await c2api.createUser({
        email,
        role,
        display_name: displayName || undefined,
        owned_node_ids,
      });
      onCreated(created);
      if (created.invite_link) {
        setInviteLink(created.invite_link);
      } else {
        onClose();
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
    }
  }

  function copyLink() {
    if (!inviteLink) return;
    navigator.clipboard?.writeText(inviteLink).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  }

  if (inviteLink) {
    return (
      <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
        <div className="bg-gray-900 border border-gray-700 rounded-xl w-full max-w-md p-6 space-y-4 font-mono">
          <h2 className="text-white font-semibold">User Created</h2>
          <p className="text-xs text-gray-400">
            Share this one-time invite link with the new user so they can set their password.
            It expires after use.
          </p>
          <div className="bg-gray-800 border border-gray-700 rounded-lg p-3">
            <p className="text-xs text-indigo-300 break-all">{inviteLink}</p>
          </div>
          <div className="flex gap-3">
            <button
              onClick={copyLink}
              className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
            >
              {copied ? "Copied!" : "Copy link"}
            </button>
            <button
              onClick={onClose}
              className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg py-2 text-sm transition-colors"
            >
              Done
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
      <div className="bg-gray-900 border border-gray-700 rounded-xl w-full max-w-md p-6 font-mono">
        <h2 className="text-white font-semibold mb-4">Create User</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="text-xs text-gray-400 block mb-1">Email</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
              placeholder="user@example.com"
            />
          </div>
          <div>
            <label className="text-xs text-gray-400 block mb-1">
              Display Name <span className="text-gray-600">(optional)</span>
            </label>
            <input
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
              placeholder="Jane Smith"
            />
          </div>
          <div>
            <label className="text-xs text-gray-400 block mb-1">Role</label>
            <select
              value={role}
              onChange={(e) => setRole(e.target.value as UserRole)}
              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
            >
              <option value="admin">Admin — full access</option>
              <option value="operator">Operator — owns nodes</option>
              <option value="viewer">Viewer — read-only</option>
            </select>
          </div>
          {role === "operator" && (
            <div>
              <label className="text-xs text-gray-400 block mb-1">
                Owned Node IDs <span className="text-gray-600">(comma-separated, required)</span>
              </label>
              <input
                value={nodeIds}
                onChange={(e) => setNodeIds(e.target.value)}
                required
                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
                placeholder="node-abc123, node-def456"
              />
            </div>
          )}
          {error && <p className="text-red-400 text-xs">{error}</p>}
          <div className="flex gap-3 pt-1">
            <button
              type="submit"
              disabled={saving}
              className="flex-1 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg py-2 text-sm font-semibold transition-colors"
            >
              {saving ? "Creating…" : "Create user"}
            </button>
            <button
              type="button"
              onClick={onClose}
              className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Users tab
// ---------------------------------------------------------------------------

function UsersTab({ currentUid }: { currentUid: string }) {
  const [users, setUsers] = useState<UserRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedUid, setSelectedUid] = useState<string | null>(null);
  const [showCreate, setShowCreate] = useState(false);

  const loadUsers = useCallback(async () => {
    try {
      const data = await c2api.listUsers();
      setUsers(data);
    } catch (e) {
      setError(String(e));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { loadUsers(); }, [loadUsers]);

  function handleUpdated(updated: UserRecord) {
    if (updated.uid === "__deleted__") {
      setUsers((prev) => prev.filter((u) => u.uid !== selectedUid));
      setSelectedUid(null);
    } else {
      setUsers((prev) => prev.map((u) => u.uid === updated.uid ? { ...u, ...updated } : u));
    }
  }

  function handleCreated(created: UserRecord) {
    setUsers((prev) => [...prev, created]);
  }

  const selectedUser = users.find((u) => u.uid === selectedUid);

  return (
    <div className="space-y-4">
      {showCreate && (
        <CreateUserModal
          onClose={() => setShowCreate(false)}
          onCreated={(u) => { handleCreated(u); setShowCreate(false); }}
        />
      )}

      <div className="flex items-center justify-between">
        <p className="text-xs text-gray-500 font-mono">{users.length} user{users.length !== 1 ? "s" : ""}</p>
        <button
          onClick={() => setShowCreate(true)}
          className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
        >
          + Create user
        </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>
      )}

      {loading ? (
        <p className="text-gray-500 text-sm font-mono">Loading…</p>
      ) : users.length === 0 ? (
        <p className="text-gray-600 text-sm font-mono">No users found.</p>
      ) : (
        <div className="border border-gray-800 rounded-xl overflow-hidden">
          <table className="w-full text-xs font-mono">
            <thead>
              <tr className="bg-gray-900 text-gray-500 uppercase tracking-wider">
                <th className="px-4 py-2.5 text-left">Email</th>
                <th className="px-4 py-2.5 text-left hidden lg:table-cell">Name</th>
                <th className="px-4 py-2.5 text-left">Role</th>
                <th className="px-4 py-2.5 text-left hidden sm:table-cell">Discord</th>
                <th className="px-4 py-2.5 text-left hidden md:table-cell">Last sign-in</th>
                <th className="px-4 py-2.5 text-left">Status</th>
                <th className="px-4 py-2.5 w-16"></th>
              </tr>
            </thead>
            <tbody>
              {users.map((u) => (
                <tr
                  key={u.uid}
                  className={`border-t border-gray-800 transition-colors ${
                    selectedUid === u.uid ? "bg-gray-800/60" : "hover:bg-gray-900/60"
                  }`}
                >
                  <td className="px-4 py-2.5 text-gray-200">{u.email ?? "—"}</td>
                  <td className="px-4 py-2.5 text-gray-400 hidden lg:table-cell">{u.display_name ?? "—"}</td>
                  <td className="px-4 py-2.5"><RoleBadge role={u.role} /></td>
                  <td className="px-4 py-2.5 text-gray-500 hidden sm:table-cell">
                    {u.discord_linked ? `@${u.discord_username ?? "linked"}` : "—"}
                  </td>
                  <td className="px-4 py-2.5 text-gray-500 hidden md:table-cell">{fmtDate(u.last_sign_in)}</td>
                  <td className="px-4 py-2.5">
                    {u.disabled
                      ? <span className="text-red-500">Disabled</span>
                      : <span className="text-green-500">Active</span>
                    }
                  </td>
                  <td className="px-4 py-2.5 text-right">
                    <button
                      onClick={() => setSelectedUid(selectedUid === u.uid ? null : u.uid)}
                      className="text-indigo-400 hover:text-indigo-300 transition-colors"
                    >
                      {selectedUid === u.uid ? "Close" : "Edit"}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {selectedUser && (
        <UserDetailPanel
          user={selectedUser}
          onClose={() => setSelectedUid(null)}
          onUpdated={handleUpdated}
          currentUid={currentUid}
        />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Audit Log tab
// ---------------------------------------------------------------------------

function AuditLogTab() {
  const [entries, setEntries] = useState<AuditEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const PAGE = 50;

  useEffect(() => {
    c2api.getAuditLog(PAGE, 0)
      .then((data) => {
        setEntries(data);
        setHasMore(data.length === PAGE);
      })
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false));
  }, []);

  async function loadMore() {
    setLoadingMore(true);
    try {
      const more = await c2api.getAuditLog(PAGE, entries.length);
      setEntries((prev) => [...prev, ...more]);
      setHasMore(more.length === PAGE);
    } catch (e) {
      setError(String(e));
    } finally {
      setLoadingMore(false);
    }
  }

  function actionColor(action: string) {
    if (action.includes("delete")) return "text-red-400";
    if (action.includes("disable")) return "text-yellow-400";
    if (action.includes("create")) return "text-green-400";
    return "text-indigo-400";
  }

  return (
    <div className="space-y-4">
      {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>
      ) : entries.length === 0 ? (
        <p className="text-gray-600 text-sm font-mono">No audit entries yet.</p>
      ) : (
        <>
          <div className="border border-gray-800 rounded-xl overflow-hidden">
            <table className="w-full text-xs font-mono">
              <thead>
                <tr className="bg-gray-900 text-gray-500 uppercase tracking-wider">
                  <th className="px-4 py-2.5 text-left">Time</th>
                  <th className="px-4 py-2.5 text-left">Action</th>
                  <th className="px-4 py-2.5 text-left hidden sm:table-cell">Actor</th>
                  <th className="px-4 py-2.5 text-left hidden md:table-cell">Target</th>
                  <th className="px-4 py-2.5 text-left">Details</th>
                </tr>
              </thead>
              <tbody>
                {entries.map((e) => (
                  <tr key={e.log_id} className="border-t border-gray-800 hover:bg-gray-900/40">
                    <td className="px-4 py-2.5 text-gray-500 whitespace-nowrap">{fmtDatetime(e.timestamp)}</td>
                    <td className={`px-4 py-2.5 whitespace-nowrap ${actionColor(e.action)}`}>{e.action}</td>
                    <td className="px-4 py-2.5 text-gray-400 hidden sm:table-cell">{e.actor_email}</td>
                    <td className="px-4 py-2.5 text-gray-400 hidden md:table-cell">{e.target_email ?? "—"}</td>
                    <td className="px-4 py-2.5 text-gray-600 max-w-xs truncate">
                      {Object.keys(e.details).length > 0
                        ? Object.entries(e.details)
                            .map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
                            .join(" · ")
                        : "—"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {hasMore && (
            <button
              onClick={loadMore}
              disabled={loadingMore}
              className="text-sm font-mono text-indigo-400 hover:text-indigo-300 disabled:opacity-50 transition-colors"
            >
              {loadingMore ? "Loading…" : "Load more"}
            </button>
          )}
        </>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Main admin page
// ---------------------------------------------------------------------------

type AdminTab = "features" | "correlation" | "users" | "audit";

const TAB_LABELS: { key: AdminTab; label: string }[] = [
  { key: "features",    label: "AI Features" },
  { key: "correlation", label: "Correlation Debug" },
  { key: "users",       label: "Users" },
  { key: "audit",       label: "Audit Log" },
];

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

  useEffect(() => {
    if (!isAdmin) router.replace("/dashboard");
  }, [isAdmin, router]);

  if (!isAdmin) return null;

  // Users/Audit tabs benefit from full width; AI Features / Correlation are narrow
  const wide = tab === "users" || tab === "audit";

  return (
    <div className={`space-y-6 ${wide ? "" : "max-w-2xl"}`}>
      <h1 className="text-white text-xl font-bold font-mono">Admin</h1>

      <div className="flex flex-wrap gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit">
        {TAB_LABELS.map(({ key, label }) => (
          <button
            key={key}
            onClick={() => setTab(key)}
            className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors ${
              tab === key ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {tab === "features"    && <FeaturesTab />}
      {tab === "correlation" && <CorrelationDebugTab />}
      {tab === "users"       && <UsersTab currentUid={user?.uid ?? ""} />}
      {tab === "audit"       && <AuditLogTab />}
    </div>
  );
}