"use client";

import { useState, useEffect, useCallback } from "react";
import {
  RefreshCw, Trash2, Search, X, Terminal,
  AlertCircle, Info, Bug, AlertTriangle,
  Database, CheckCircle, XCircle, Clock
} from "lucide-react";

interface LogEntry {
  id: number;
  ts: string;
  level: "INFO" | "WARN" | "ERROR" | "DEBUG";
  ctx: string;
  msg: string;
  data?: unknown;
}

interface DbStatus {
  ok: boolean;
  message: string;
  tables?: string[];
  durationMs?: number;
  error?: string;
}

interface EnvStatus { [key: string]: string }

interface ProcessInfo {
  pid: number;
  nodeVersion: string;
  platform: string;
  uptimeSeconds: number;
  memoryMB: { rss: number; heapUsed: number; heapTotal: number };
  cwd: string;
}

interface DebugResponse {
  ok: boolean;
  ts: string;
  db: DbStatus;
  env: EnvStatus;
  process: ProcessInfo;
  logsTotal: number;
  logsCleared: boolean;
  logs: LogEntry[];
}

const LEVEL_STYLE: Record<string, { bg: string; text: string; icon: React.ReactNode }> = {
  ERROR: { bg: "#450a0a", text: "#fca5a5", icon: <AlertCircle size={14} /> },
  WARN:  { bg: "#422006", text: "#fcd34d", icon: <AlertTriangle size={14} /> },
  INFO:  { bg: "#0c1a2e", text: "#93c5fd", icon: <Info size={14} /> },
  DEBUG: { bg: "#0f172a", text: "#a3e635", icon: <Bug size={14} /> },
};

export default function DebugPanel({ token }: { token: string }) {
  const [data, setData]           = useState<DebugResponse | null>(null);
  const [loading, setLoading]     = useState(false);
  const [fetchError, setFetchError] = useState("");
  const [filter, setFilter]       = useState("");
  const [levelFilter, setLevel]   = useState<string>("ALL");
  const [autoRefresh, setAuto]    = useState(false);
  const [lastUpdate, setLastUpdate] = useState<string>("");

  const fetchLogs = useCallback(async (clear = false) => {
    setLoading(true);
    setFetchError("");
    try {
      const params = new URLSearchParams({ token, limit: "200" });
      if (levelFilter !== "ALL") params.set("level", levelFilter);
      if (clear) params.set("clear", "1");
      const res = await fetch(`/api/debug?${params}`);
      if (!res.ok) {
        const j = await res.json();
        throw new Error(j.error || `HTTP ${res.status}`);
      }
      const json: DebugResponse = await res.json();
      setData(json);
      setLastUpdate(new Date().toLocaleTimeString("es-VE"));
    } catch (e: unknown) {
      setFetchError(e instanceof Error ? e.message : "Error desconocido");
    } finally {
      setLoading(false);
    }
  }, [token, levelFilter]);

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

  useEffect(() => {
    if (!autoRefresh) return;
    const interval = setInterval(() => fetchLogs(), 5000);
    return () => clearInterval(interval);
  }, [autoRefresh, fetchLogs]);

  const logs = data?.logs ?? [];
  const displayed = logs.filter((l) => {
    const q = filter.toLowerCase();
    return !q || l.msg.toLowerCase().includes(q) || l.ctx.toLowerCase().includes(q)
      || JSON.stringify(l.data || "").toLowerCase().includes(q);
  });

  const counts = { ERROR: 0, WARN: 0, INFO: 0, DEBUG: 0 };
  logs.forEach((l) => { if (l.level in counts) counts[l.level as keyof typeof counts]++; });

  return (
    <div style={{ fontFamily: "'Fira Code','Courier New',monospace", background: "#020617", color: "#e2e8f0", minHeight: "100vh", padding: "1.25rem" }}>

      {/* ── Header ── */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1.25rem", flexWrap: "wrap", gap: "0.75rem" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
          <Terminal size={22} color="#38bdf8" />
          <span style={{ fontSize: "1.1rem", fontWeight: 800, color: "#f8fafc" }}>Debug Console — CursosNirgua</span>
          {lastUpdate && <span style={{ fontSize: "0.7rem", color: "#475569" }}>actualizado: {lastUpdate}</span>}
        </div>
        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
          <label style={{ fontSize: "0.72rem", color: "#64748b", display: "flex", alignItems: "center", gap: "0.4rem", cursor: "pointer" }}>
            <input type="checkbox" checked={autoRefresh} onChange={(e) => setAuto(e.target.checked)} />
            Auto (5s)
          </label>
          <button onClick={() => fetchLogs()} disabled={loading}
            style={{ display: "flex", alignItems: "center", gap: "0.4rem", background: "#1e3a5f", color: "#38bdf8", border: "none", borderRadius: 6, padding: "0.45rem 0.9rem", fontSize: "0.78rem", cursor: "pointer", opacity: loading ? 0.5 : 1 }}>
            <RefreshCw size={13} /> Actualizar
          </button>
          <button onClick={() => fetchLogs(true)} disabled={loading}
            style={{ display: "flex", alignItems: "center", gap: "0.4rem", background: "#450a0a", color: "#fca5a5", border: "none", borderRadius: 6, padding: "0.45rem 0.9rem", fontSize: "0.78rem", cursor: "pointer" }}>
            <Trash2 size={13} /> Limpiar
          </button>
        </div>
      </div>

      {fetchError && (
        <div style={{ background: "#450a0a", border: "1px solid #991b1b", borderRadius: 8, padding: "0.75rem 1rem", marginBottom: "1rem", color: "#fca5a5", fontSize: "0.8rem" }}>
          Error al obtener datos: {fetchError}
        </div>
      )}

      {/* ── DB Status Card ── */}
      {data && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem", marginBottom: "1rem" }}>

          {/* Conexion BD */}
          <div style={{ background: data.db.ok ? "#052e16" : "#450a0a", border: `1px solid ${data.db.ok ? "#16a34a" : "#dc2626"}`, borderRadius: 10, padding: "1rem" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.5rem" }}>
              <Database size={16} color={data.db.ok ? "#4ade80" : "#f87171"} />
              <span style={{ fontWeight: 700, fontSize: "0.82rem", color: data.db.ok ? "#4ade80" : "#f87171" }}>
                Base de Datos — {data.db.ok ? "CONECTADA" : "ERROR"}
              </span>
              {data.db.durationMs && <span style={{ fontSize: "0.68rem", color: "#64748b" }}>{data.db.durationMs}ms</span>}
            </div>
            <p style={{ margin: 0, fontSize: "0.78rem", color: data.db.ok ? "#86efac" : "#fca5a5" }}>
              {data.db.message}
            </p>
            {data.db.error && (
              <pre style={{ margin: "0.5rem 0 0", fontSize: "0.68rem", color: "#fca5a5", whiteSpace: "pre-wrap", wordBreak: "break-all", background: "#1c0a0a", padding: "0.5rem", borderRadius: 6 }}>
                {data.db.error}
              </pre>
            )}
            {data.db.tables && data.db.tables.length > 0 && (
              <details style={{ marginTop: "0.5rem" }}>
                <summary style={{ cursor: "pointer", fontSize: "0.72rem", color: "#4ade80" }}>
                  {data.db.tables.length} tablas encontradas
                </summary>
                <div style={{ display: "flex", flexWrap: "wrap", gap: "0.3rem", marginTop: "0.4rem" }}>
                  {data.db.tables.map((t) => (
                    <span key={t} style={{ background: "#14532d", color: "#86efac", borderRadius: 4, padding: "0.1rem 0.4rem", fontSize: "0.65rem" }}>{t}</span>
                  ))}
                </div>
              </details>
            )}
          </div>

          {/* Env vars + Proceso */}
          <div style={{ background: "#0f172a", border: "1px solid #1e293b", borderRadius: 10, padding: "1rem" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.5rem" }}>
              <span style={{ fontWeight: 700, fontSize: "0.82rem", color: "#94a3b8" }}>Variables de Entorno</span>
            </div>
            {data.env && Object.entries(data.env).map(([k, v]) => {
              const ok = v.startsWith("✅");
              const err = v.startsWith("❌");
              return (
                <div key={k} style={{ display: "flex", gap: "0.5rem", fontSize: "0.68rem", marginBottom: "0.2rem", alignItems: "flex-start" }}>
                  {ok && <CheckCircle size={11} color="#4ade80" style={{ flexShrink: 0, marginTop: 1 }} />}
                  {err && <XCircle size={11} color="#f87171" style={{ flexShrink: 0, marginTop: 1 }} />}
                  {!ok && !err && <span style={{ width: 11 }} />}
                  <span style={{ color: "#475569", minWidth: 120 }}>{k}:</span>
                  <span style={{ color: err ? "#f87171" : ok ? "#86efac" : "#94a3b8", wordBreak: "break-all" }}>{v.replace(/^[✅❌]\s*/, "")}</span>
                </div>
              );
            })}
            {data.process && (
              <div style={{ marginTop: "0.75rem", paddingTop: "0.5rem", borderTop: "1px solid #1e293b", fontSize: "0.68rem", color: "#475569" }}>
                <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
                  <Clock size={11} /> uptime: {Math.floor(data.process.uptimeSeconds / 60)}m {data.process.uptimeSeconds % 60}s
                  &nbsp;|&nbsp; pid: {data.process.pid}
                  &nbsp;|&nbsp; {data.process.nodeVersion}
                  &nbsp;|&nbsp; heap: {data.process.memoryMB.heapUsed}/{data.process.memoryMB.heapTotal} MB
                </div>
                <div style={{ marginTop: "0.2rem", color: "#334155" }}>cwd: {data.process.cwd}</div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* ── Filtros de logs ── */}
      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap", alignItems: "center" }}>
        {(["ALL", "ERROR", "WARN", "INFO", "DEBUG"] as const).map((lvl) => {
          const isAll = lvl === "ALL";
          const count = isAll ? logs.length : counts[lvl];
          const s = isAll ? { text: "#94a3b8", bg: "#1e293b" } : LEVEL_STYLE[lvl];
          return (
            <button key={lvl} onClick={() => setLevel(lvl)}
              style={{ background: levelFilter === lvl ? s.bg : "#0f172a", color: levelFilter === lvl ? s.text : "#475569", border: `1px solid ${levelFilter === lvl ? s.text + "40" : "#1e293b"}`, borderRadius: 6, padding: "0.3rem 0.7rem", fontSize: "0.72rem", fontWeight: 700, cursor: "pointer" }}>
              {lvl} {count > 0 && `(${count})`}
            </button>
          );
        })}
        <div style={{ position: "relative", marginLeft: "auto" }}>
          <Search size={13} style={{ position: "absolute", left: 9, top: "50%", transform: "translateY(-50%)", color: "#475569" }} />
          <input type="text" placeholder="Filtrar logs..." value={filter} onChange={(e) => setFilter(e.target.value)}
            style={{ background: "#0f172a", border: "1px solid #1e293b", borderRadius: 6, padding: "0.3rem 1.8rem 0.3rem 1.8rem", color: "#e2e8f0", fontSize: "0.72rem", outline: "none", width: 200 }} />
          {filter && <button onClick={() => setFilter("")} style={{ position: "absolute", right: 7, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "#475569" }}><X size={11} /></button>}
        </div>
      </div>

      {/* ── Lista de logs ── */}
      <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
        {displayed.length === 0 && (
          <div style={{ textAlign: "center", padding: "2rem", color: "#334155", fontSize: "0.82rem" }}>
            {loading ? "Cargando..." : "No hay logs en el buffer. Los logs aparecen cuando se generan errores en tiempo real."}
          </div>
        )}
        {displayed.map((log) => {
          const s = LEVEL_STYLE[log.level] || LEVEL_STYLE.DEBUG;
          return (
            <details key={log.id} style={{ background: s.bg, borderRadius: 6, border: `1px solid ${s.text}20` }}>
              <summary style={{ padding: "0.45rem 0.7rem", cursor: "pointer", display: "flex", alignItems: "flex-start", gap: "0.6rem", listStyle: "none", fontSize: "0.75rem" }}>
                <span style={{ color: s.text, display: "flex", alignItems: "center", gap: "0.3rem", fontWeight: 700, flexShrink: 0 }}>{s.icon} {log.level}</span>
                <span style={{ color: "#64748b", flexShrink: 0 }}>{log.ts.replace("T", " ").slice(0, 19)}</span>
                <span style={{ background: "#1e293b", color: "#38bdf8", borderRadius: 4, padding: "0 0.35rem", fontSize: "0.67rem", flexShrink: 0 }}>{log.ctx}</span>
                <span style={{ color: "#cbd5e1", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{log.msg}</span>
              </summary>
              {log.data != null && (
                <pre style={{ margin: 0, padding: "0.6rem 1rem", background: "#020617", fontSize: "0.68rem", overflowX: "auto", color: "#94a3b8", borderTop: `1px solid ${s.text}20`, whiteSpace: "pre-wrap", wordBreak: "break-all" }}>
                  {JSON.stringify(log.data, null, 2)}
                </pre>
              )}
            </details>
          );
        })}
      </div>
    </div>
  );
}