/* Tab Admin — panel de administración */

const PLAN_BADGE_COLORS = {
  starter: { bg: "rgba(96,165,250,0.15)",  color: "#93c5fd" },
  creator: { bg: "rgba(167,139,250,0.15)", color: "#c4b5fd" },
  pro:     { bg: "rgba(251,191,36,0.15)",  color: "#fcd34d" },
  admin:   { bg: "rgba(248,113,113,0.15)", color: "#fca5a5" },
};
const PLAN_PRICES = { starter: 99, creator: 199, pro: 299 };

function PlanBadge({ plan, status }) {
  if (!plan) return <span style={{ fontSize: 12, color: "var(--text-3)" }}>Sin plan</span>;
  const c = PLAN_BADGE_COLORS[plan] || PLAN_BADGE_COLORS.starter;
  return (
    <span style={{
      fontSize: 11, fontWeight: 700, padding: "2px 8px", borderRadius: 20,
      background: c.bg, color: c.color, textTransform: "uppercase", letterSpacing: 0.5,
    }}>
      {plan}
    </span>
  );
}

function StatusDot({ status }) {
  const active = status === "active" || status === "trialing";
  return (
    <span style={{
      display: "inline-block", width: 8, height: 8, borderRadius: "50%",
      background: active ? "#4ade80" : "#6b7280",
      marginRight: 6, flexShrink: 0,
    }}/>
  );
}

const IMAGE_SOUND_MAX_BYTES = 10 * 1024 * 1024;

function formatSoundDuration(sec) {
  sec = Math.round(sec || 0);
  const m = Math.floor(sec / 60);
  const s = sec % 60;
  return `${m}:${String(s).padStart(2, "0")}`;
}

function ImageSoundsTab() {
  const [sounds, setSounds] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [uploading, setUploading] = React.useState(false);
  const [uploadError, setUploadError] = React.useState("");
  const [playingId, setPlayingId] = React.useState(null);
  const audioRef = React.useRef(null);
  const fileInputRef = React.useRef(null);

  function fetchSounds() {
    setLoading(true);
    fetch("/api/image-sounds", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setSounds(d.sounds || []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }

  React.useEffect(() => { fetchSounds(); }, []);

  function playPreview(url, id) {
    if (audioRef.current) audioRef.current.pause();
    if (playingId === id) { setPlayingId(null); return; }
    const a = new Audio(url);
    audioRef.current = a;
    a.play().catch(() => {});
    setPlayingId(id);
    a.onended = () => setPlayingId(null);
  }

  async function handleUpload(e) {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file) return;
    setUploadError("");
    if (file.size > IMAGE_SOUND_MAX_BYTES) {
      setUploadError("El sonido no debe superar 10MB");
      return;
    }
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append("file", file);
      const r = await fetch("/api/image-sounds", { method: "POST", credentials: "same-origin", body: fd });
      const d = await r.json();
      if (r.ok && d.success) setSounds((prev) => [d.sound, ...prev]);
      else setUploadError(d.detail || "Error al subir el sonido");
    } catch {
      setUploadError("Error de conexión");
    } finally {
      setUploading(false);
    }
  }

  async function deleteSound(sound) {
    if (!confirm(`¿Borrar "${sound.original_name}"?`)) return;
    const r = await fetch(`/api/image-sounds/${sound.id}`, { method: "DELETE", credentials: "same-origin" });
    if (r.ok) setSounds((prev) => prev.filter((s) => s.id !== sound.id));
  }

  return (
    <div className="card card-pad">
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
        <div>
          <h3 className="card-title">Sonidos de imágenes</h3>
          <p className="card-sub" style={{ marginTop: 2 }}>
            Biblioteca de sonidos para "FX Sonido en Imagen" (Hook Intro Imagen) — se usará próximamente en la generación de vídeos.
          </p>
        </div>
        <input type="file" accept="audio/*" ref={fileInputRef} style={{ display: "none" }} onChange={handleUpload}/>
        <button className="btn btn-primary" disabled={uploading} onClick={() => fileInputRef.current && fileInputRef.current.click()}>
          {uploading ? "Subiendo…" : <><IconUpload size={13}/> Subir sonido</>}
        </button>
      </div>

      {uploadError && (
        <div style={{ background: "rgba(248,113,113,0.12)", border: "1px solid rgba(248,113,113,0.3)", borderRadius: 8, padding: "10px 12px", fontSize: 12.5, color: "#fca5a5", marginTop: 12 }}>
          {uploadError}
        </div>
      )}

      <div style={{ marginTop: 16 }}>
        {loading && <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>Cargando…</div>}
        {!loading && sounds.length === 0 && (
          <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>
            Todavía no hay sonidos. Máximo 10MB por sonido.
          </div>
        )}
        {!loading && sounds.length > 0 && (
          <div className="col" style={{ gap: 4 }}>
            {sounds.map((s) => (
              <div key={s.id} className="row" style={{
                justifyContent: "space-between", padding: "8px 10px", borderRadius: 8,
                background: "var(--bg-card-2)", border: "1px solid var(--border)",
              }}>
                <div className="row" style={{ gap: 10, minWidth: 0 }}>
                  <button className="btn btn-ghost" style={{ padding: "5px 8px" }} onClick={() => playPreview(s.url, s.id)}>
                    {playingId === s.id ? <IconPause size={13}/> : <IconPlay size={13}/>}
                  </button>
                  <span style={{ fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {s.original_name}
                  </span>
                </div>
                <div className="row" style={{ gap: 12, flex: "0 0 auto" }}>
                  <span style={{ fontSize: 12, color: "var(--text-4)", fontFamily: "var(--font-mono)" }}>{formatSoundDuration(s.duration)}</span>
                  <button className="btn btn-ghost" style={{ padding: "4px 6px", opacity: 0.6 }} onClick={() => deleteSound(s)}>
                    <IconTrash size={13}/>
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function AdminTab({ currentUser }) {
  const [view, setView] = React.useState("costs"); // "costs" | "users" | "image_sounds" | "music"
  const [users, setUsers] = React.useState([]);
  const [stats, setStats] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [editingUser, setEditingUser] = React.useState(null);
  const [editPlan, setEditPlan] = React.useState("");
  const [editStatus, setEditStatus] = React.useState("active");
  const [saving, setSaving] = React.useState(false);
  const [deletingId, setDeletingId] = React.useState(null);
  const [msg, setMsg] = React.useState(null);

  async function loadData() {
    setLoading(true);
    try {
      const [usersRes, statsRes] = await Promise.all([
        fetch("/api/admin/users", { credentials: "same-origin" }),
        fetch("/api/admin/stats", { credentials: "same-origin" }),
      ]);
      if (usersRes.ok) setUsers((await usersRes.json()).users || []);
      if (statsRes.ok) setStats(await statsRes.json());
    } catch (e) {
      setMsg({ type: "error", text: "Error al cargar datos" });
    } finally {
      setLoading(false);
    }
  }

  React.useEffect(() => { loadData(); }, []);

  async function savePlan() {
    setSaving(true);
    try {
      const r = await fetch(`/api/admin/users/${editingUser.id}/plan`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ plan: editPlan || null, subscription_status: editStatus }),
      });
      if (r.ok) {
        setMsg({ type: "success", text: `Plan de ${editingUser.username} actualizado` });
        setEditingUser(null);
        loadData();
      } else {
        const d = await r.json();
        setMsg({ type: "error", text: d.detail || "Error al guardar" });
      }
    } catch (e) {
      setMsg({ type: "error", text: "Error de conexión" });
    } finally {
      setSaving(false);
    }
  }

  async function deleteUser(user) {
    const warn =
      `Vas a ELIMINAR a "${user.username}" y todos sus datos: avatares/canales, vídeos, ` +
      `música, accesos compartidos y sesiones.\n\nEsta acción NO se puede deshacer.`;
    if (!confirm(warn)) return;
    if (!confirm(`Confirma de nuevo: eliminar definitivamente a "${user.username}".`)) return;
    setDeletingId(user.id);
    setMsg(null);
    try {
      const r = await fetch(`/api/admin/users/${user.id}`, {
        method: "DELETE",
        credentials: "same-origin",
      });
      const d = await r.json().catch(() => ({}));
      if (r.ok) {
        setMsg({ type: "success", text: `Usuario "${user.username}" eliminado` });
        setUsers((prev) => prev.filter((u) => u.id !== user.id));
        loadData();
      } else {
        setMsg({ type: "error", text: d.detail || "No se pudo eliminar el usuario" });
      }
    } catch (e) {
      setMsg({ type: "error", text: "Error de conexión" });
    } finally {
      setDeletingId(null);
    }
  }

  function openEdit(user) {
    setEditingUser(user);
    setEditPlan(user.plan || "");
    setEditStatus(user.subscription_status || "active");
    setMsg(null);
  }

  if (loading) return (
    <div style={{ display: "grid", placeItems: "center", minHeight: 200 }}>
      <div style={{ width: 28, height: 28, borderRadius: "50%", border: "2.5px solid rgba(255,255,255,0.1)", borderTopColor: "var(--accent)", animation: "spin 0.8s linear infinite" }}/>
    </div>
  );

  return (
    <div className="col" style={{ gap: 24 }}>

      <div className="segmented" style={{ width: "fit-content" }}>
        <button className={view === "costs" ? "on" : ""} onClick={() => setView("costs")}>Gastos</button>
        <button className={view === "users" ? "on" : ""} onClick={() => setView("users")}>Usuarios</button>
        <button className={view === "image_sounds" ? "on" : ""} onClick={() => setView("image_sounds")}>Sonidos Imágenes</button>
        <button className={view === "music" ? "on" : ""} onClick={() => setView("music")}>Música de fondo</button>
      </div>

      {view === "costs" ? <AdminCostsTab/> : view === "image_sounds" ? <ImageSoundsTab/> : view === "music" ? <MusicLibraryTab/> : <>

      {msg && (
        <div style={{
          padding: "10px 14px", borderRadius: "var(--radius)", fontSize: 13,
          background: msg.type === "success" ? "rgba(74,222,128,0.1)" : "rgba(248,113,113,0.1)",
          border: `1px solid ${msg.type === "success" ? "rgba(74,222,128,0.3)" : "rgba(248,113,113,0.3)"}`,
          color: msg.type === "success" ? "#4ade80" : "#fca5a5",
        }}>{msg.text}</div>
      )}

      {/* Stats row */}
      {stats && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 12 }}>
          {[
            { label: "Usuarios totales", value: stats.total_users },
            { label: "Suscriptores activos", value: stats.active_subscribers },
            { label: "MRR", value: `$${stats.mrr_eur}` },
            ...Object.entries(stats.plan_distribution || {}).map(([p, n]) => ({
              label: `Plan ${p}`, value: n,
            })),
          ].map((s, i) => (
            <div key={i} className="card card-pad" style={{ padding: "16px 18px" }}>
              <div style={{ fontSize: 22, fontWeight: 700, color: "var(--text)", marginBottom: 4 }}>{s.value}</div>
              <div style={{ fontSize: 12, color: "var(--text-3)" }}>{s.label}</div>
            </div>
          ))}
        </div>
      )}

      {/* Users table */}
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Usuarios ({users.length})</h3>
          <button className="btn" style={{ padding: "6px 12px", fontSize: 12 }} onClick={loadData}>Actualizar</button>
        </div>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <thead>
              <tr style={{ background: "var(--bg-3)" }}>
                {["Usuario", "Email", "Plan", "Estado", "Créditos (mes)", "Créditos (total)", "Ingreso mensual", "Registro", ""].map(h => (
                  <th key={h} style={{ padding: "10px 14px", textAlign: "left", fontWeight: 600, color: "var(--text-3)", whiteSpace: "nowrap" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {users.map(u => {
                const creditsUsedMonth = u.credits_used_month != null ? u.credits_used_month : 0;
                const creditsMonthlyGrant = u.credits_monthly_grant != null ? u.credits_monthly_grant : 0;
                const creditsUsedTotal = u.credits_used_total != null ? u.credits_used_total : 0;
                const date = u.created_at ? new Date(u.created_at).toLocaleDateString("es-ES") : "—";
                const monthlyRevenue = u.plan && PLAN_PRICES[u.plan] && u.subscription_status === "active"
                  ? "$" + PLAN_PRICES[u.plan]
                  : "—";
                return (
                  <tr key={u.id} style={{ borderTop: "1px solid var(--border)" }}>
                    <td style={{ padding: "10px 14px", fontWeight: 600, color: "var(--text)" }}>
                      {u.is_admin && <span style={{ marginRight: 6, fontSize: 11, background: "rgba(248,113,113,0.15)", color: "#fca5a5", padding: "1px 6px", borderRadius: 10, fontWeight: 700 }}>ADMIN</span>}
                      {u.username}
                    </td>
                    <td style={{ padding: "10px 14px", color: "var(--text-2)" }}>{u.email || "—"}</td>
                    <td style={{ padding: "10px 14px" }}><PlanBadge plan={u.plan} status={u.subscription_status}/></td>
                    <td style={{ padding: "10px 14px" }}>
                      <div style={{ display: "flex", alignItems: "center", fontSize: 12, color: "var(--text-2)" }}>
                        <StatusDot status={u.subscription_status}/>
                        {u.subscription_status || "—"}
                      </div>
                    </td>
                    <td style={{ padding: "10px 14px", color: "var(--text-2)", fontFamily: "var(--font-mono)", fontSize: 12 }}>
                      {u.is_admin ? "∞" : creditsUsedMonth.toLocaleString() + " / " + creditsMonthlyGrant.toLocaleString()}
                    </td>
                    <td style={{ padding: "10px 14px", color: "var(--text-2)", fontFamily: "var(--font-mono)", fontSize: 12 }}>
                      {u.is_admin ? "∞" : creditsUsedTotal.toLocaleString()}
                    </td>
                    <td style={{ padding: "10px 14px", color: "var(--text-2)", fontWeight: 600 }}>
                      {monthlyRevenue}
                    </td>
                    <td style={{ padding: "10px 14px", color: "var(--text-3)" }}>{date}</td>
                    <td style={{ padding: "10px 14px" }}>
                      {!u.is_admin && (
                        <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                          <button className="btn" style={{ padding: "4px 10px", fontSize: 12 }} onClick={() => openEdit(u)}>
                            Editar plan
                          </button>
                          {u.id !== currentUser?.id && (
                            <button
                              className="btn"
                              style={{ padding: "4px 10px", fontSize: 12, color: "#fca5a5", borderColor: "rgba(248,113,113,0.35)" }}
                              disabled={deletingId === u.id}
                              onClick={() => deleteUser(u)}>
                              {deletingId === u.id ? "Eliminando…" : "Eliminar"}
                            </button>
                          )}
                        </div>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Edit plan modal */}
      {editingUser && (
        <div style={{
          position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", display: "grid", placeItems: "center", zIndex: 1000,
        }} onClick={(e) => { if (e.target === e.currentTarget) setEditingUser(null); }}>
          <div className="card card-pad" style={{ width: 360, boxShadow: "0 24px 60px rgba(0,0,0,0.5)" }}>
            <h3 style={{ margin: "0 0 20px", fontSize: 16 }}>Editar plan — {editingUser.username}</h3>
            <div className="col" style={{ gap: 14 }}>
              <div>
                <label className="label">Plan</label>
                <select className="input" value={editPlan} onChange={e => setEditPlan(e.target.value)}>
                  <option value="">Sin plan</option>
                  <option value="starter">Starter ($99/mes)</option>
                  <option value="creator">Creator ($199/mes)</option>
                  <option value="pro">Pro ($299/mes)</option>
                </select>
              </div>
              <div>
                <label className="label">Estado de suscripción</label>
                <select className="input" value={editStatus} onChange={e => setEditStatus(e.target.value)}>
                  <option value="active">Activo</option>
                  <option value="inactive">Inactivo</option>
                  <option value="trialing">Trial</option>
                  <option value="cancelled">Cancelado</option>
                </select>
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
                <button className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}
                  onClick={savePlan} disabled={saving}>
                  {saving ? "Guardando…" : "Guardar"}
                </button>
                <button className="btn" style={{ flex: 1, justifyContent: "center" }}
                  onClick={() => setEditingUser(null)} disabled={saving}>
                  Cancelar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      </>}
    </div>
  );
}

/* ============================================
   Gastos de APIs externas
   ============================================ */

const COST_PROVIDER_COLORS = {
  anthropic:  "#a78bfa",
  nanobanana: "#4ade80",
  ltx:        "#60a5fa",
  heygen:     "#f472b6",
  lemonfox:   "#fbbf24",
  elevenlabs: "#fb923c",
  minimax:    "#34d399",
  motion:     "#38bdf8",
  pexels:     "#94a3b8",
};
const COST_PROVIDER_LABELS = {
  anthropic:  "Claude (Anthropic)",
  nanobanana: "NanoBanana",
  ltx:        "LTX Video",
  heygen:     "HeyGen",
  lemonfox:   "Lemonfox (transcripción)",
  elevenlabs: "ElevenLabs / ai33 (TTS)",
  minimax:    "Minimax (TTS)",
  motion:     "Motion.so (infografía)",
  pexels:     "Pexels (stock)",
};

function fmtUSD(n) {
  const v = Number(n) || 0;
  return "$" + v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function CostBar({ label, value, max, color }) {
  const pct = max > 0 ? Math.max(2, Math.round((value / max) * 100)) : 0;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "140px 1fr 90px", alignItems: "center", gap: 10, marginBottom: 8 }}>
      <span style={{ fontSize: 12, color: "var(--text-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
      <div style={{ height: 8, borderRadius: 4, background: "var(--bg-card-2)", overflow: "hidden" }}>
        <div style={{ width: pct + "%", height: "100%", background: color || "var(--accent)", borderRadius: 4 }}/>
      </div>
      <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--text-2)", textAlign: "right" }}>{fmtUSD(value)}</span>
    </div>
  );
}

function lastNMonths(n) {
  const out = [];
  const now = new Date();
  for (let i = 0; i < n; i++) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const ym = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
    out.push({ id: ym, label: d.toLocaleDateString("es-ES", { month: "long", year: "numeric" }) });
  }
  return out;
}

const MONTHS_ES = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];

function fmtUSDshort(n) {
  const v = Number(n) || 0;
  if (v === 0) return "$0";
  if (v >= 1000) return "$" + (v / 1000).toFixed(1) + "k";
  if (v >= 10) return "$" + v.toFixed(0);
  return "$" + v.toFixed(2);
}

function monthLabel(ym) {
  const [y, m] = (ym || "").split("-").map(Number);
  return `${MONTHS_ES[(m || 1) - 1]} ${y || ""}`;
}

function ProviderLegend({ providers }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
      {providers.map((p) => (
        <span key={p} style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--text-3)" }}>
          <span style={{ width: 9, height: 9, borderRadius: 3, background: COST_PROVIDER_COLORS[p] || "var(--text-4)" }}/>
          {COST_PROVIDER_LABELS[p] || p}
        </span>
      ))}
    </div>
  );
}

/* Gráfica anual: barras apiladas por proveedor, un grupo por mes. Click = seleccionar mes. */
function AnnualCostChart({ byMonth, providers, selectedMonth, onSelectMonth }) {
  const W = 640, H = 210, padL = 44, padB = 24, padT = 10, padR = 8;
  const plotW = W - padL - padR, plotH = H - padT - padB;
  const max = Math.max(0.01, ...byMonth.map((m) => m.total));
  const niceMax = (() => {
    const steps = [0.5, 1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000];
    return steps.find((s) => s >= max) || Math.ceil(max);
  })();
  const bandW = plotW / 12;
  const barW = Math.min(26, bandW * 0.6);
  const y = (v) => padT + plotH - (v / niceMax) * plotH;
  const gridVals = [0, 0.25, 0.5, 0.75, 1].map((f) => niceMax * f);

  return (
    <div style={{ overflowX: "auto" }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", minWidth: 460, display: "block" }}>
        {gridVals.map((gv, i) => (
          <g key={i}>
            <line x1={padL} x2={W - padR} y1={y(gv)} y2={y(gv)} stroke="var(--border)" strokeWidth="1"/>
            <text x={padL - 6} y={y(gv) + 3} textAnchor="end" fontSize="9" fill="var(--text-4)" fontFamily="var(--font-mono)">
              {fmtUSDshort(gv)}
            </text>
          </g>
        ))}
        {byMonth.map((m, mi) => {
          const cx = padL + bandW * mi + bandW / 2;
          const isSel = m.month === selectedMonth;
          let acc = 0;
          return (
            <g key={m.month} style={{ cursor: "pointer" }} onClick={() => onSelectMonth && onSelectMonth(m.month)}>
              {isSel && (
                <rect x={cx - bandW / 2 + 2} y={padT} width={bandW - 4} height={plotH}
                  fill="var(--accent-softer)" rx="4"/>
              )}
              {providers.map((p) => {
                const val = m.by_provider[p] || 0;
                if (val <= 0) return null;
                const h = (val / niceMax) * plotH;
                const yTop = y(acc + val);
                acc += val;
                return <rect key={p} x={cx - barW / 2} y={yTop} width={barW} height={Math.max(0.5, h)}
                  fill={COST_PROVIDER_COLORS[p] || "var(--accent)"}/>;
              })}
              <text x={cx} y={H - padB + 14} textAnchor="middle" fontSize="9.5"
                fill={isSel ? "var(--accent)" : "var(--text-4)"} fontWeight={isSel ? 700 : 400}>
                {MONTHS_ES[mi]}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

/* Detalle diario del mes: una línea por proveedor + área del total. */
function DailyCostChart({ byDay, providers, ym }) {
  const [y, m] = ym.split("-").map(Number);
  const daysInMonth = new Date(y, m, 0).getDate();
  const map = {};
  byDay.forEach((d) => { map[Number(d.day.split("-")[2])] = d; });

  const W = 640, H = 210, padL = 44, padB = 24, padT = 10, padR = 8;
  const plotW = W - padL - padR, plotH = H - padT - padB;
  const totals = [];
  for (let dd = 1; dd <= daysInMonth; dd++) totals.push(map[dd] ? map[dd].total : 0);
  const max = Math.max(0.01, ...totals);
  const niceMax = (() => {
    const steps = [0.5, 1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
    return steps.find((s) => s >= max) || Math.ceil(max);
  })();
  const px = (dd) => padL + (plotW * (dd - 1)) / Math.max(1, daysInMonth - 1);
  const py = (v) => padT + plotH - (v / niceMax) * plotH;
  const gridVals = [0, 0.25, 0.5, 0.75, 1].map((f) => niceMax * f);
  const ticks = [1, 5, 10, 15, 20, 25, 30].filter((t) => t <= daysInMonth);

  const areaPts = totals.map((v, i) => `${px(i + 1)},${py(v)}`).join(" ");
  const areaPath = `${padL},${py(0)} ${areaPts} ${px(daysInMonth)},${py(0)}`;

  return (
    <div style={{ overflowX: "auto" }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", minWidth: 460, display: "block" }}>
        {gridVals.map((gv, i) => (
          <g key={i}>
            <line x1={padL} x2={W - padR} y1={py(gv)} y2={py(gv)} stroke="var(--border)" strokeWidth="1"/>
            <text x={padL - 6} y={py(gv) + 3} textAnchor="end" fontSize="9" fill="var(--text-4)" fontFamily="var(--font-mono)">
              {fmtUSDshort(gv)}
            </text>
          </g>
        ))}
        <polygon points={areaPath} fill="var(--accent-softer)" stroke="none"/>
        {providers.map((p) => {
          const pts = [];
          for (let dd = 1; dd <= daysInMonth; dd++) {
            const v = map[dd] ? (map[dd].by_provider[p] || 0) : 0;
            pts.push(`${px(dd)},${py(v)}`);
          }
          return <polyline key={p} points={pts.join(" ")} fill="none"
            stroke={COST_PROVIDER_COLORS[p] || "var(--accent)"} strokeWidth="1.5"
            strokeLinejoin="round" strokeLinecap="round"/>;
        })}
        {ticks.map((t) => (
          <text key={t} x={px(t)} y={H - padB + 14} textAnchor="middle" fontSize="9.5" fill="var(--text-4)">{t}</text>
        ))}
      </svg>
    </div>
  );
}

function MonthPicker({ year, byMonth, selectedMonth, onSelect }) {
  const totals = {};
  byMonth.forEach((m) => { totals[m.month] = m.total; });
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
      {MONTHS_ES.map((lbl, i) => {
        const ym = `${year}-${String(i + 1).padStart(2, "0")}`;
        const total = totals[ym] || 0;
        const isSel = ym === selectedMonth;
        return (
          <button key={ym} onClick={() => onSelect(ym)} style={{
            display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
            padding: "10px 4px", borderRadius: 10, cursor: "pointer",
            border: "1px solid " + (isSel ? "var(--accent)" : "var(--border)"),
            background: isSel ? "var(--accent-soft)" : "var(--bg-card-2)",
            color: isSel ? "var(--accent)" : "var(--text-2)",
          }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>{lbl}</span>
            <span style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", color: total > 0 ? (isSel ? "var(--accent)" : "var(--text-3)") : "var(--text-4)" }}>
              {total > 0 ? fmtUSD(total) : "—"}
            </span>
          </button>
        );
      })}
    </div>
  );
}

function SpendCalendar({ ym, byDay }) {
  const [y, m] = ym.split("-").map(Number);
  const map = {};
  byDay.forEach((d) => { map[Number(d.day.split("-")[2])] = d.total; });
  const daysInMonth = new Date(y, m, 0).getDate();
  const firstDow = (new Date(y, m - 1, 1).getDay() + 6) % 7; // 0 = Lunes
  const maxDay = Math.max(0.01, ...Object.values(map));
  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6, marginBottom: 6 }}>
        {["L", "M", "X", "J", "V", "S", "D"].map((d) => (
          <div key={d} style={{ fontSize: 10, color: "var(--text-4)", textAlign: "center", fontWeight: 600 }}>{d}</div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6 }}>
        {cells.map((d, i) => {
          if (d === null) return <div key={"e" + i}/>;
          const total = map[d] || 0;
          const intensity = total > 0 ? 0.12 + 0.5 * (total / maxDay) : 0;
          return (
            <div key={d} style={{
              minHeight: 54, borderRadius: 8, padding: "6px 8px",
              border: "1px solid " + (total > 0 ? "rgba(124,92,255,0.35)" : "var(--border)"),
              background: total > 0 ? `rgba(124,92,255,${intensity.toFixed(3)})` : "var(--bg-card-2)",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <span style={{ fontSize: 11, color: "var(--text-3)" }}>{d}</span>
              <span style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: total > 0 ? "var(--text)" : "var(--text-4)" }}>
                {total > 0 ? fmtUSD(total) : "—"}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AdminCostsTab() {
  const [summary, setSummary] = React.useState(null);
  const [byVideo, setByVideo] = React.useState([]);
  const [byChannel, setByChannel] = React.useState([]);
  const [byProviderOp, setByProviderOp] = React.useState([]);
  const [allChannels, setAllChannels] = React.useState([]);
  const [logRows, setLogRows] = React.useState([]);
  const [logTotal, setLogTotal] = React.useState(0);
  const [logProvider, setLogProvider] = React.useState("");
  const [logOffset, setLogOffset] = React.useState(0);
  const [filterChannel, setFilterChannel] = React.useState("");
  const [filterMonth, setFilterMonth] = React.useState("");
  const LOG_PAGE = 25;
  const [loading, setLoading] = React.useState(true);

  const _now = new Date();
  const [year, setYear] = React.useState(_now.getFullYear());
  const [selMonth, setSelMonth] = React.useState(
    `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}`
  );
  const [breakdown, setBreakdown] = React.useState(null);

  const monthOptions = lastNMonths(12);

  React.useEffect(() => {
    // Lista de canales sin filtrar (para las opciones del selector) — independiente del
    // resultado filtrado que se usa para el gráfico "Gasto por canal".
    fetch("/api/admin/costs/by-channel", { credentials: "same-origin" }).then(r => r.json())
      .then(d => setAllChannels((d.channels || []).map(c => ({ id: c.channel_id, name: c.channel_name }))))
      .catch(() => setAllChannels([]));
  }, []);

  async function loadAll() {
    setLoading(true);
    try {
      const commonQs = new URLSearchParams();
      if (filterChannel) commonQs.set("channel_id", filterChannel);
      if (filterMonth) commonQs.set("month", filterMonth);
      const summaryQs = new URLSearchParams(commonQs); summaryQs.set("months", "6");
      const videoQs = new URLSearchParams(commonQs); videoQs.set("limit", "50");
      const [s, v, c, p] = await Promise.all([
        fetch(`/api/admin/costs/summary?${summaryQs.toString()}`, { credentials: "same-origin" }).then(r => r.json()),
        fetch(`/api/admin/costs/by-video?${videoQs.toString()}`, { credentials: "same-origin" }).then(r => r.json()),
        fetch(`/api/admin/costs/by-channel?${commonQs.toString()}`, { credentials: "same-origin" }).then(r => r.json()),
        fetch(`/api/admin/costs/by-provider?${commonQs.toString()}`, { credentials: "same-origin" }).then(r => r.json()),
      ]);
      setSummary(s);
      setByVideo(v.videos || []);
      setByChannel(c.channels || []);
      setByProviderOp(p.providers || []);
    } catch (e) { /* ignore */ }
    setLoading(false);
  }

  async function loadLog() {
    const qs = new URLSearchParams({ limit: LOG_PAGE, offset: logOffset });
    if (logProvider) qs.set("provider", logProvider);
    if (filterChannel) qs.set("channel_id", filterChannel);
    if (filterMonth) qs.set("month", filterMonth);
    try {
      const r = await fetch(`/api/admin/costs/log?${qs.toString()}`, { credentials: "same-origin" });
      const d = await r.json();
      setLogRows(d.rows || []);
      setLogTotal(d.total || 0);
    } catch (e) { /* ignore */ }
  }

  async function loadBreakdown() {
    const qs = new URLSearchParams({ year: String(year), month: selMonth });
    if (filterChannel) qs.set("channel_id", filterChannel);
    try {
      const r = await fetch(`/api/admin/costs/breakdown?${qs.toString()}`, { credentials: "same-origin" });
      setBreakdown(await r.json());
    } catch (e) { /* ignore */ }
  }

  React.useEffect(() => { loadAll(); }, [filterChannel, filterMonth]);
  React.useEffect(() => { loadBreakdown(); }, [year, selMonth, filterChannel]);
  React.useEffect(() => { loadLog(); }, [logProvider, logOffset, filterChannel, filterMonth]);
  React.useEffect(() => { setLogOffset(0); }, [filterChannel, filterMonth]);

  if (loading) return (
    <div style={{ display: "grid", placeItems: "center", minHeight: 200 }}>
      <div style={{ width: 28, height: 28, borderRadius: "50%", border: "2.5px solid rgba(255,255,255,0.1)", borderTopColor: "var(--accent)", animation: "spin 0.8s linear infinite" }}/>
    </div>
  );

  const monthMax = Math.max(1, ...(summary?.by_month || []).map(m => m.total));
  const providerTotals = summary?.by_provider || [];
  const providerMax = Math.max(1, ...providerTotals.map(p => p.total));
  const videoMax = Math.max(1, ...byVideo.map(v => v.total));
  const channelMax = Math.max(1, ...byChannel.map(c => c.total));

  return (
    <div className="col" style={{ gap: 24 }}>
      <div style={{
        padding: "9px 14px", borderRadius: 10,
        background: "rgba(251,191,36,0.07)", border: "1px solid rgba(251,191,36,0.22)",
        fontSize: 12, color: "rgba(251,191,36,0.85)",
      }}>
        Los costes son <strong>estimaciones</strong> calculadas con precios configurables por unidad (tokens, imágenes, minutos, caracteres), no facturas reales de cada proveedor. Ajusta las tarifas en <code style={{ fontFamily: "var(--font-mono)" }}>src/cost_tracker.py</code> según tus contratos reales. El registro de gastos se conserva indefinidamente (mínimo 1 año), aunque el vídeo o el canal se borren después.
      </div>

      {/* Filtros: canal + mes */}
      <div className="row" style={{ gap: 10 }}>
        <select className="input" style={{ width: 240 }} value={filterChannel}
          onChange={(e) => setFilterChannel(e.target.value)}>
          <option value="">Todos los canales</option>
          {allChannels.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
        </select>
        <select className="input" style={{ width: 200 }} value={filterMonth}
          onChange={(e) => setFilterMonth(e.target.value)}>
          <option value="">Todos los meses</option>
          {monthOptions.map(m => (<option key={m.id} value={m.id}>{m.label}</option>))}
        </select>
        {(filterChannel || filterMonth) && (
          <button className="btn" style={{ padding: "6px 12px", fontSize: 12 }}
            onClick={() => { setFilterChannel(""); setFilterMonth(""); }}>Quitar filtros</button>
        )}
      </div>

      {/* Stats row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 12 }}>
        <div className="card card-pad" style={{ padding: "16px 18px" }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--text)", marginBottom: 4 }}>{fmtUSD(summary?.total_this_month)}</div>
          <div style={{ fontSize: 12, color: "var(--text-3)" }}>Gasto este mes</div>
        </div>
        <div className="card card-pad" style={{ padding: "16px 18px" }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--text)", marginBottom: 4 }}>{fmtUSD(summary?.total_all_time)}</div>
          <div style={{ fontSize: 12, color: "var(--text-3)" }}>Gasto total</div>
        </div>
        <div className="card card-pad" style={{ padding: "16px 18px" }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--text)", marginBottom: 4 }}>{byVideo.length}</div>
          <div style={{ fontSize: 12, color: "var(--text-3)" }}>Vídeos con coste registrado</div>
        </div>
        <div className="card card-pad" style={{ padding: "16px 18px" }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--text)", marginBottom: 4 }}>
            {providerTotals[0] ? COST_PROVIDER_LABELS[providerTotals[0].provider] || providerTotals[0].provider : "—"}
          </div>
          <div style={{ fontSize: 12, color: "var(--text-3)" }}>Mayor gasto por API</div>
        </div>
      </div>

      {/* ── Vista visual: resumen anual + detalle diario ── */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
            <h3 className="card-title">Resumen anual <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{year}</span></h3>
            <div className="row" style={{ gap: 4 }}>
              <button className="btn" style={{ padding: "3px 9px", fontSize: 13 }} onClick={() => setYear(y => y - 1)}>‹</button>
              <button className="btn" style={{ padding: "3px 9px", fontSize: 13 }}
                disabled={year >= _now.getFullYear()} onClick={() => setYear(y => y + 1)}>›</button>
            </div>
          </div>
          {breakdown ? (
            <>
              <AnnualCostChart byMonth={breakdown.by_month} providers={breakdown.providers}
                selectedMonth={selMonth}
                onSelectMonth={(ym) => { setYear(Number(ym.split("-")[0])); setSelMonth(ym); }}/>
              <div style={{ marginTop: 10 }}><ProviderLegend providers={breakdown.providers}/></div>
            </>
          ) : <div className="help">Cargando…</div>}
        </div>

        <div className="card card-pad">
          <h3 className="card-title" style={{ marginBottom: 10 }}>
            Detalle diario <span style={{ color: "var(--text-4)", fontWeight: 400 }}>— {monthLabel(selMonth)}</span>
          </h3>
          {!breakdown ? (
            <div className="help">Cargando…</div>
          ) : breakdown.by_day.length === 0 ? (
            <div className="help">Sin gasto registrado este mes.</div>
          ) : (
            <>
              <DailyCostChart byDay={breakdown.by_day} providers={breakdown.providers} ym={selMonth}/>
              <div style={{ marginTop: 10 }}><ProviderLegend providers={breakdown.providers}/></div>
            </>
          )}
        </div>
      </div>

      {/* ── Selector de mes + calendario de gasto por día ── */}
      <div style={{ display: "grid", gridTemplateColumns: "minmax(260px, 340px) 1fr", gap: 16 }}>
        <div className="card card-pad">
          <h3 className="card-title" style={{ marginBottom: 12 }}>Seleccionar mes</h3>
          {breakdown
            ? <MonthPicker year={year} byMonth={breakdown.by_month} selectedMonth={selMonth} onSelect={setSelMonth}/>
            : <div className="help">Cargando…</div>}
        </div>

        <div className="card card-pad">
          <h3 className="card-title" style={{ marginBottom: 12 }}>
            Calendario de gastos <span style={{ color: "var(--text-4)", fontWeight: 400 }}>— {monthLabel(selMonth)}</span>
          </h3>
          {breakdown
            ? <SpendCalendar ym={selMonth} byDay={breakdown.by_day}/>
            : <div className="help">Cargando…</div>}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {/* Gasto por API — mes seleccionado */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
            <h3 className="card-title">
              Gasto por API <span style={{ color: "var(--text-4)", fontWeight: 400 }}>— {monthLabel(selMonth)}</span>
            </h3>
            <span style={{ fontSize: 15, fontWeight: 700, fontFamily: "var(--font-mono)" }}>{fmtUSD(breakdown?.month_total)}</span>
          </div>
          {!breakdown || breakdown.month_by_provider.length === 0 ? (
            <div className="help">Sin datos este mes.</div>
          ) : breakdown.month_by_provider.map(p => (
            <div key={p.provider} className="row" style={{ justifyContent: "space-between", padding: "7px 0", borderTop: "1px solid var(--border)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--text-2)" }}>
                <span style={{ width: 9, height: 9, borderRadius: 3, background: COST_PROVIDER_COLORS[p.provider] || "var(--text-4)" }}/>
                {COST_PROVIDER_LABELS[p.provider] || p.provider}
              </span>
              <span style={{ fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--text-2)" }}>{fmtUSD(p.total)}</span>
            </div>
          ))}
        </div>

        {/* Gasto por canal */}
        <div className="card card-pad">
          <h3 className="card-title" style={{ marginBottom: 14 }}>Gasto por canal</h3>
          {byChannel.length === 0 ? (
            <div className="help">Sin datos todavía.</div>
          ) : byChannel.slice(0, 8).map(c => (
            <CostBar key={c.channel_id || "none"} label={c.channel_name} value={c.total} max={channelMax}/>
          ))}
        </div>
      </div>

      {/* Gasto por vídeo */}
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Coste por vídeo</h3>
        </div>
        <div style={{ overflowX: "auto", maxHeight: 360, overflowY: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <thead>
              <tr style={{ background: "var(--bg-3)" }}>
                {["Vídeo", "Canal", "Llamadas", "Coste"].map(h => (
                  <th key={h} style={{ padding: "10px 14px", textAlign: "left", fontWeight: 600, color: "var(--text-3)", position: "sticky", top: 0, background: "var(--bg-3)" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {byVideo.length === 0 && (
                <tr><td colSpan={4} style={{ padding: 20, textAlign: "center", color: "var(--text-4)" }}>Sin datos todavía.</td></tr>
              )}
              {byVideo.map(v => (
                <tr key={v.job_id} style={{ borderTop: "1px solid var(--border)" }}>
                  <td style={{ padding: "9px 14px", color: "var(--text)", maxWidth: 320, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{v.title}</td>
                  <td style={{ padding: "9px 14px", color: "var(--text-2)" }}>{v.channel_name}</td>
                  <td style={{ padding: "9px 14px", color: "var(--text-3)", fontFamily: "var(--font-mono)" }}>{v.calls}</td>
                  <td style={{ padding: "9px 14px", color: "var(--text)", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{fmtUSD(v.total)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Gasto por operación (desglose por API) */}
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Desglose por API y operación</h3>
        </div>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <thead>
              <tr style={{ background: "var(--bg-3)" }}>
                {["API", "Operación", "Llamadas", "Coste"].map(h => (
                  <th key={h} style={{ padding: "10px 14px", textAlign: "left", fontWeight: 600, color: "var(--text-3)" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {byProviderOp.length === 0 && (
                <tr><td colSpan={4} style={{ padding: 20, textAlign: "center", color: "var(--text-4)" }}>Sin datos todavía.</td></tr>
              )}
              {byProviderOp.map((r, i) => (
                <tr key={i} style={{ borderTop: "1px solid var(--border)" }}>
                  <td style={{ padding: "9px 14px" }}>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                      <span style={{ width: 8, height: 8, borderRadius: "50%", background: COST_PROVIDER_COLORS[r.provider] || "var(--text-4)" }}/>
                      {COST_PROVIDER_LABELS[r.provider] || r.provider}
                    </span>
                  </td>
                  <td style={{ padding: "9px 14px", color: "var(--text-2)", fontFamily: "var(--font-mono)", fontSize: 12 }}>{r.operation}</td>
                  <td style={{ padding: "9px 14px", color: "var(--text-3)", fontFamily: "var(--font-mono)" }}>{r.calls}</td>
                  <td style={{ padding: "9px 14px", color: "var(--text)", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{fmtUSD(r.total)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Log completo */}
      <div className="card" style={{ overflow: "hidden" }}>
        <div className="row" style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", justifyContent: "space-between" }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Log de gastos ({logTotal})</h3>
          <select className="input" style={{ width: 220 }} value={logProvider}
            onChange={(e) => { setLogProvider(e.target.value); setLogOffset(0); }}>
            <option value="">Todas las APIs</option>
            {Object.keys(COST_PROVIDER_LABELS).map(p => (
              <option key={p} value={p}>{COST_PROVIDER_LABELS[p]}</option>
            ))}
          </select>
        </div>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead>
              <tr style={{ background: "var(--bg-3)" }}>
                {["Fecha", "API", "Operación", "Vídeo", "Canal", "Unidades", "Coste"].map(h => (
                  <th key={h} style={{ padding: "9px 14px", textAlign: "left", fontWeight: 600, color: "var(--text-3)", whiteSpace: "nowrap" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {logRows.length === 0 && (
                <tr><td colSpan={7} style={{ padding: 20, textAlign: "center", color: "var(--text-4)" }}>Sin resultados.</td></tr>
              )}
              {logRows.map(r => (
                <tr key={r.id} style={{ borderTop: "1px solid var(--border)" }}>
                  <td style={{ padding: "8px 14px", color: "var(--text-4)", fontFamily: "var(--font-mono)", fontSize: 11, whiteSpace: "nowrap" }}>
                    {r.created_at ? new Date(r.created_at + "Z").toLocaleString("es-ES") : "—"}
                  </td>
                  <td style={{ padding: "8px 14px" }}>{COST_PROVIDER_LABELS[r.provider] || r.provider}</td>
                  <td style={{ padding: "8px 14px", color: "var(--text-3)", fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{r.operation}</td>
                  <td style={{ padding: "8px 14px", color: "var(--text-2)", maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.job_title || "—"}</td>
                  <td style={{ padding: "8px 14px", color: "var(--text-2)" }}>{r.channel_name || "—"}</td>
                  <td style={{ padding: "8px 14px", color: "var(--text-4)", fontFamily: "var(--font-mono)", fontSize: 11.5 }}>
                    {r.units != null ? `${Math.round(r.units * 100) / 100} ${r.unit_label || ""}` : "—"}
                  </td>
                  <td style={{ padding: "8px 14px", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{fmtUSD(r.cost_usd)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="row" style={{ padding: "12px 20px", borderTop: "1px solid var(--border)", justifyContent: "flex-end", gap: 10 }}>
          <button className="btn" style={{ padding: "5px 12px", fontSize: 12 }}
            disabled={logOffset === 0} onClick={() => setLogOffset(Math.max(0, logOffset - LOG_PAGE))}>Anterior</button>
          <span style={{ fontSize: 12, color: "var(--text-3)", fontFamily: "var(--font-mono)" }}>
            {logOffset + 1}–{Math.min(logOffset + LOG_PAGE, logTotal)} de {logTotal}
          </span>
          <button className="btn" style={{ padding: "5px 12px", fontSize: 12 }}
            disabled={logOffset + LOG_PAGE >= logTotal} onClick={() => setLogOffset(logOffset + LOG_PAGE)}>Siguiente</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  AdminTab,
  // Reutilizados por la vista de gastos propia del usuario (tab_billing.jsx)
  AnnualCostChart, DailyCostChart, MonthPicker, SpendCalendar, ProviderLegend,
  COST_PROVIDER_COLORS, COST_PROVIDER_LABELS, costFmtUSD: fmtUSD, costMonthLabel: monthLabel,
});