/* Tab: Configuración - App personal (sin billing, sin danger zone) */

function SettingsTab({ authUser }) {
  const isAdmin = authUser?.is_admin;
  const [section, setSection] = React.useState("account");

  const sections = [
    { id: "account",    label: "Cuenta",            Icon: IconUser,    adminOnly: false },
    { id: "appearance", label: "Apariencia",        Icon: IconPalette, adminOnly: false },
    { id: "notif",      label: "Notificaciones",    Icon: IconBell,    adminOnly: false },
    { id: "api",        label: "API Keys",          Icon: IconKey,     adminOnly: true },
    { id: "service",    label: "Servicio",          Icon: IconSparkle, adminOnly: true },
    { id: "status",     label: "System Status",     Icon: IconWave,    adminOnly: true },
    { id: "logs",       label: "Logs",              Icon: IconScript,  adminOnly: true },
    { id: "reset",      label: "Resetear app",      Icon: IconTrash,   adminOnly: true },
  ].filter((s) => !s.adminOnly || isAdmin);

  return (
    <div className="tab-enter" style={{ display: "grid", gridTemplateColumns: "220px minmax(0,1fr)", gap: 24 }}>
      <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {sections.map(({ id, label, Icon }) => (
          <button key={id} onClick={() => setSection(id)} className={"nav-item" + (section === id ? " active" : "")}>
            <Icon size={16}/>
            <span>{label}</span>
          </button>
        ))}
      </nav>

      <div className="col" style={{ gap: 16, maxWidth: 780 }}>
        {section === "account"    && <AccountSection authUser={authUser} isAdmin={isAdmin}/>}
        {section === "api"        && <ApiSection/>}
        {section === "appearance" && <AppearanceSection/>}
        {section === "notif"      && <NotifSection/>}
        {section === "service"    && <ServiceSection/>}
        {section === "status"     && <StatusSection/>}
        {section === "logs"       && <LogsSection/>}
        {section === "reset"      && <ResetSection/>}
      </div>
    </div>
  );
}

function AccountSection({ authUser, isAdmin }) {
  const username = authUser?.username || authUser || "—";
  const email = authUser?.email || "—";
  return (
    <SettingsGroup title="Perfil" desc="Datos de tu cuenta.">
      <Field label="Usuario" value={username} readOnly/>
      <Field label="Email" value={email} readOnly/>
      {isAdmin && (
        <div style={{ padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
          <div style={{ fontSize: 12, color: "var(--text-3)", fontWeight: 500, marginBottom: 6 }}>Rol</div>
          <span style={{ fontSize: 12, fontWeight: 700, background: "rgba(248,113,113,0.15)", color: "#fca5a5", padding: "3px 10px", borderRadius: 10 }}>ADMINISTRADOR</span>
        </div>
      )}
    </SettingsGroup>
  );
}

const API_KEYS_CONFIG = [
  { id: "anthropic", name: "Claude (Anthropic)", icon: "C",  color: "#cc785c", placeholder: "sk-ant-…" },
  { id: "nanobanana", name: "Nanobanana",         icon: "🍌", color: "#fbbf24", placeholder: "nb-…" },
  { id: "ai33",       name: "ai33 (voz)",         icon: "33", color: "#60a5fa", placeholder: "ai33-…" },
  { id: "lemonfox",   name: "LemonFox",           icon: "🍋", color: "#84cc16", placeholder: "lf-…" },
];

const STATUS_DOT = {
  null:      { color: "var(--border-strong)",  glow: "none",                          label: "Sin comprobar" },
  checking:  { color: "var(--yellow)",          glow: "none",                          label: "Comprobando…" },
  ok:        { color: "var(--green)",           glow: "0 0 7px var(--green)",          label: "Operativa" },
  warn:      { color: "var(--yellow)",          glow: "0 0 7px var(--yellow)",         label: "Inestable" },
  error:     { color: "var(--red)",             glow: "0 0 7px var(--red)",            label: "Sin conexión" },
};

function ApiSection() {
  const [keys, setKeys] = React.useState(() =>
    Object.fromEntries(API_KEYS_CONFIG.map((k) => [k.id, ""]))
  );
  const [visible, setVisible] = React.useState({});
  const [saved, setSaved]     = React.useState({});
  const [health, setHealth]   = React.useState({});
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetch("/api/settings/keys", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => { if (d) setKeys((prev) => ({ ...prev, ...d })); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function save(id) {
    try {
      await fetch("/api/settings/keys", {
        method: "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, value: keys[id] }),
      });
      setSaved((s) => ({ ...s, [id]: true }));
      setTimeout(() => setSaved((s) => ({ ...s, [id]: false })), 2000);
    } catch {}
  }

  async function checkOne(id) {
    setHealth((h) => ({ ...h, [id]: "checking" }));
    try {
      const r = await fetch("/api/settings/keys/check", {
        method: "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });
      const d = await r.json();
      setHealth((h) => ({ ...h, [id]: d.status || "error" }));
    } catch {
      setHealth((h) => ({ ...h, [id]: "error" }));
    }
  }

  async function checkAll() {
    for (const k of API_KEYS_CONFIG) {
      if (keys[k.id]) checkOne(k.id);
    }
  }

  return (
    <SettingsGroup title="API Keys" desc="Claves externas usadas por el pipeline. Se guardan cifradas en local.">
      {loading ? (
        <div style={{ color: "var(--text-4)", fontSize: 12, padding: "8px 0" }}>Cargando…</div>
      ) : (
        <>
          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 4 }}>
            <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={checkAll}>
              <IconWave size={13}/> Comprobar todas
            </button>
          </div>
          {API_KEYS_CONFIG.map((k) => {
            const st = STATUS_DOT[health[k.id] ?? null];
            const isChecking = health[k.id] === "checking";
            return (
              <div key={k.id} style={{ padding: "14px 0", borderBottom: "1px solid var(--border)" }}>
                <div className="row" style={{ gap: 12, marginBottom: 10 }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: 8, background: k.color + "22",
                    color: k.color, display: "grid", placeItems: "center", fontWeight: 700, fontSize: 12,
                    flex: "0 0 32px",
                  }}>{k.icon}</span>
                  <div className="grow">
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{k.name}</div>
                  </div>
                  <div className="row" style={{ gap: 8 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                      <span style={{
                        width: 9, height: 9, borderRadius: "50%",
                        background: st.color, boxShadow: st.glow, flex: "0 0 9px",
                        transition: "background 300ms, box-shadow 300ms",
                      }}/>
                      <span style={{ fontSize: 11, color: "var(--text-4)" }}>{st.label}</span>
                    </div>
                    <button className="btn btn-ghost" style={{ padding: "4px 10px", fontSize: 12 }}
                      onClick={() => checkOne(k.id)}
                      disabled={!keys[k.id] || isChecking}>
                      {isChecking ? <><IconClock size={12}/> …</> : "Probar"}
                    </button>
                  </div>
                  {keys[k.id] && health[k.id] == null && <span className="pill ok">Configurada</span>}
                </div>
                <div className="row" style={{ gap: 8 }}>
                  <div style={{ position: "relative", flex: 1 }}>
                    <input
                      className="input"
                      type={visible[k.id] ? "text" : "password"}
                      value={keys[k.id]}
                      onChange={(e) => { setKeys((prev) => ({ ...prev, [k.id]: e.target.value })); setHealth((h) => ({ ...h, [k.id]: null })); }}
                      placeholder={k.placeholder}
                      style={{ paddingRight: 36, fontFamily: "var(--font-mono)", fontSize: 12 }}
                    />
                    <button onClick={() => setVisible((v) => ({ ...v, [k.id]: !v[k.id] }))} style={{
                      position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)",
                      background: "none", border: "none", cursor: "pointer", color: "var(--text-4)", padding: 4,
                    }}>
                      {visible[k.id] ? <IconEye size={14}/> : <IconLock size={14}/>}
                    </button>
                  </div>
                  <button
                    className={"btn" + (saved[k.id] ? " btn-primary" : "")}
                    style={{ flex: "0 0 auto" }}
                    onClick={() => save(k.id)}
                    disabled={!keys[k.id]}>
                    {saved[k.id] ? "✓ Guardado" : "Guardar"}
                  </button>
                </div>
              </div>
            );
          })}
        </>
      )}
    </SettingsGroup>
  );
}

const ACCENT_PALETTE = [
  { hex: "#7c5cff", h2: "#a78bfa", r: 124, g: 92,  b: 255 },
  { hex: "#4ade80", h2: "#86efac", r: 74,  g: 222, b: 128 },
  { hex: "#60a5fa", h2: "#93c5fd", r: 96,  g: 165, b: 250 },
  { hex: "#f87171", h2: "#fca5a5", r: 248, g: 113, b: 113 },
  { hex: "#fbbf24", h2: "#fcd34d", r: 251, g: 191, b: 36  },
];

function applyAccent(a) {
  const root = document.documentElement.style;
  root.setProperty("--accent",        a.hex);
  root.setProperty("--accent-2",      a.h2);
  root.setProperty("--accent-soft",   `rgba(${a.r},${a.g},${a.b},0.14)`);
  root.setProperty("--accent-softer", `rgba(${a.r},${a.g},${a.b},0.08)`);
  root.setProperty("--accent-glow",   `0 0 24px rgba(${a.r},${a.g},${a.b},0.35)`);
}

function applyTheme(theme) {
  const resolved = theme === "auto"
    ? (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark")
    : theme;
  document.documentElement.setAttribute("data-theme", resolved);
}

function AppearanceSection() {
  const [theme,    setTheme]    = React.useState(() => localStorage.getItem("vc-theme")  || "dark");
  const [accent,   setAccent]   = React.useState(() => localStorage.getItem("vc-accent") || "#7c5cff");
  const [autosave, setAutosave] = React.useState(true);

  React.useEffect(() => {
    applyTheme(theme);
    localStorage.setItem("vc-theme", theme);
  }, [theme]);

  React.useEffect(() => {
    const a = ACCENT_PALETTE.find((c) => c.hex === accent) || ACCENT_PALETTE[0];
    applyAccent(a);
    localStorage.setItem("vc-accent", accent);
  }, [accent]);

  return (
    <SettingsGroup title="Apariencia">
      <SettingsRow title="Tema" desc="Cambia entre modo oscuro, claro o según el sistema." control={
        <div className="segmented">
          {[["dark","Dark"],["light","Light"],["auto","Auto"]].map(([id, label]) => (
            <button key={id} className={theme === id ? "on" : ""} onClick={() => setTheme(id)}>{label}</button>
          ))}
        </div>
      }/>
      <SettingsRow title="Color de acento" desc="Usado en botones y elementos activos." control={
        <div className="swatch-row">
          {ACCENT_PALETTE.map((c) => (
            <div key={c.hex}
              className={"swatch" + (accent === c.hex ? " on" : "")}
              style={{ background: c.hex }}
              onClick={() => setAccent(c.hex)}/>
          ))}
        </div>
      }/>
      <SettingsRow title="Guardado automático" desc="Guarda los cambios mientras editas un proyecto."
        control={<div className={"toggle" + (autosave ? " on" : "")} onClick={() => setAutosave(!autosave)}/>}/>
    </SettingsGroup>
  );
}

function NotifSection() {
  const [a, setA] = React.useState(true);
  const [b, setB] = React.useState(true);
  const [c, setC] = React.useState(false);
  const [d, setD] = React.useState(true);
  return (
    <SettingsGroup title="Notificaciones" desc="Avisos del sistema operativo cuando un vídeo cambia de estado.">
      <SettingsRow title="Vídeo listo" desc="Cuando termina de montarse un vídeo y queda listo para publicar."
        control={<div className={"toggle" + (a ? " on" : "")} onClick={() => setA(!a)}/>}/>
      <SettingsRow title="Vídeo fallido" desc="Si algún paso del pipeline falla."
        control={<div className={"toggle" + (b ? " on" : "")} onClick={() => setB(!b)}/>}/>
      <SettingsRow title="Esperando tu aprobación" desc="Cuando el contenido está generado y necesita tu revisión antes del montaje."
        control={<div className={"toggle" + (d ? " on" : "")} onClick={() => setD(!d)}/>}/>
      <SettingsRow title="Sonido al completar" desc="Ping discreto cuando hay un vídeo listo."
        control={<div className={"toggle" + (c ? " on" : "")} onClick={() => setC(!c)}/>}/>
    </SettingsGroup>
  );
}

function ServiceSection() {
  const [restarting, setRestarting] = React.useState(false);
  async function restart() {
    if (!confirm("¿Reiniciar el servidor? Las generaciones en curso se interrumpirán.")) return;
    setRestarting(true);
    try {
      await fetch("/api/service/restart", { method: "POST", credentials: "same-origin" });
      setTimeout(() => { window.location.reload(); }, 3000);
    } catch { setRestarting(false); }
  }
  return (
    <SettingsGroup title="Servicio" desc="Controla el proceso local que ejecuta el pipeline.">
      <div style={{ padding: "12px 0", borderBottom: "1px solid var(--border)" }}>
        <div className="row" style={{ justifyContent: "space-between" }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Estado</div>
            <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2 }}>
              VIRAL CODE Dashboard v3.0
            </div>
          </div>
          <span className={"pill " + (restarting ? "warn" : "ok")}>
            {restarting ? "Reiniciando…" : "En ejecución"}
          </span>
        </div>
      </div>
      <div style={{ padding: "14px 0" }}>
        <div className="row" style={{ justifyContent: "space-between", gap: 16 }}>
          <div className="grow">
            <div style={{ fontSize: 13, fontWeight: 500 }}>Reiniciar servicio</div>
            <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>
              Corta cualquier trabajo en curso y vuelve a arrancar el pipeline. Útil si algo se ha quedado colgado.
            </div>
          </div>
          <button className="btn btn-primary" onClick={restart} disabled={restarting}
            style={{ flex: "0 0 auto" }}>
            {restarting ? <><IconClock size={13}/> Reiniciando…</> : <><IconSparkle size={13}/> Reiniciar</>}
          </button>
        </div>
      </div>
    </SettingsGroup>
  );
}

function StatusSection() {
  const [stats, setStats] = React.useState(null);

  React.useEffect(() => {
    function load() {
      fetch("/api/system/stats", { credentials: "same-origin" })
        .then((r) => r.json()).then(setStats).catch(() => {});
    }
    load();
    const id = setInterval(load, 5000);
    return () => clearInterval(id);
  }, []);

  const services = [
    { name: "Claude (Anthropic)", latency: "—" },
    { name: "Nanobanana",         latency: "—" },
    { name: "ai33 (voz)",         latency: "—" },
    { name: "LemonFox",           latency: "—" },
    { name: "FFmpeg worker",      latency: "local" },
  ];

  const resources = stats ? [
    { k: "CPU",   v: stats.cpu,              suffix: "%", note: null },
    { k: "RAM",   v: stats.ram.percent,      suffix: "%", note: `${stats.ram.used_gb} / ${stats.ram.total_gb} GB` },
    { k: "Disco", v: stats.disk.percent,     suffix: "%", note: `${stats.disk.used_gb} / ${stats.disk.total_gb} GB` },
  ] : [];

  return (
    <>
      <SettingsGroup title="Servicios externos" desc="APIs usadas por el pipeline (estado asumido si el servidor responde).">
        {services.map((s) => (
          <div key={s.name} className="row" style={{ padding: "12px 0", borderBottom: "1px solid var(--border)", gap: 12 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--green)", boxShadow: "0 0 8px var(--green)", flex: "0 0 8px" }}/>
            <div className="grow" style={{ fontSize: 13, fontWeight: 500 }}>{s.name}</div>
            <span style={{ fontSize: 11.5, color: "var(--text-4)", fontFamily: "var(--font-mono)" }}>{s.latency}</span>
            <span className="pill ok">Conectado</span>
          </div>
        ))}
      </SettingsGroup>

      <SettingsGroup title="Recursos del equipo" desc="Uso actual del servidor.">
        {!stats ? (
          <div style={{ color: "var(--text-4)", fontSize: 12, padding: "8px 0" }}>Cargando…</div>
        ) : resources.map((r) => (
          <div key={r.k} style={{ padding: "12px 0", borderBottom: "1px solid var(--border)" }}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
              <div>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{r.k}</span>
                {r.note && <span style={{ fontSize: 11, color: "var(--text-4)", marginLeft: 8 }}>· {r.note}</span>}
              </div>
              <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: r.v > 80 ? "var(--yellow)" : "var(--text-2)" }}>
                {r.v}{r.suffix}
              </span>
            </div>
            <div className="progress-track" style={{ background: "#1a1a24" }}>
              <div style={{
                height: "100%", width: r.v + "%", borderRadius: 4,
                background: r.v > 80 ? "linear-gradient(90deg,#fbbf24,#f97316)" : "linear-gradient(90deg,#7c5cff,#a78bfa)",
              }}/>
            </div>
          </div>
        ))}
      </SettingsGroup>
    </>
  );
}

function LogsSection() {
  const [filter, setFilter] = React.useState("all");
  const [logs, setLogs] = React.useState([]);

  React.useEffect(() => {
    function load() {
      fetch("/api/logs?limit=100", { credentials: "same-origin" })
        .then((r) => r.json()).then((d) => { if (d.logs) setLogs([...d.logs].reverse()); }).catch(() => {});
    }
    load();
    const id = setInterval(load, 5000);
    return () => clearInterval(id);
  }, []);

  const filtered = filter === "all" ? logs : logs.filter((l) => l.lvl === filter);

  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div className="row" style={{ padding: 16, borderBottom: "1px solid var(--border)" }}>
        <div>
          <h3 className="card-title">Logs del sistema</h3>
          <p className="card-sub">Últimas operaciones en orden cronológico inverso.</p>
        </div>
        <div className="segmented" style={{ marginLeft: "auto" }}>
          {[{id:"all",l:"Todos"},{id:"info",l:"Info"},{id:"warn",l:"Warn"},{id:"error",l:"Error"}].map((o) => (
            <button key={o.id} className={filter === o.id ? "on" : ""} onClick={() => setFilter(o.id)}>{o.l}</button>
          ))}
        </div>
        <button className="btn btn-ghost"><IconDownload size={13}/> Exportar</button>
      </div>
      <div style={{ maxHeight: 520, overflow: "auto", background: "#0a0a10", fontFamily: "var(--font-mono)", fontSize: 11.5 }}>
        {filtered.map((l, i) => (
          <div key={i} style={{
            padding: "8px 16px",
            borderBottom: "1px solid #15151c",
            display: "grid",
            gridTemplateColumns: "80px 60px 80px 1fr",
            gap: 12, alignItems: "center",
          }}>
            <span style={{ color: "var(--text-4)" }}>{l.t}</span>
            <span style={{
              color: l.lvl === "error" ? "var(--red)" : l.lvl === "warn" ? "var(--yellow)" : "var(--green)",
              textTransform: "uppercase", fontWeight: 600, fontSize: 10, letterSpacing: "0.05em",
            }}>{l.lvl}</span>
            <span style={{ color: "var(--accent-2)" }}>{l.src}</span>
            <span style={{ color: "var(--text-2)" }}>{l.msg}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ResetSection() {
  const [confirmOpen, setConfirmOpen] = React.useState(false);
  const [scope, setScope] = React.useState(new Set(["cache"]));
  const opts = [
    { id: "cache",    l: "Caché de generaciones",    d: "Libera espacio. Seguro." },
    { id: "logs",     l: "Logs antiguos",            d: "Elimina logs con más de 7 días." },
    { id: "history",  l: "Historial de videos",      d: "Elimina el registro, no los archivos de YouTube." },
    { id: "channels", l: "Configuración de canales", d: "Vuelve a los valores por defecto." },
    { id: "all",      l: "Resetear TODO",            d: "Estado de fábrica. API keys incluidas." },
  ];
  function toggle(id) {
    const s = new Set(scope);
    s.has(id) ? s.delete(id) : s.add(id);
    setScope(s);
  }

  return (
    <SettingsGroup title="Resetear aplicación" desc="Elige qué quieres limpiar. Ninguna acción afecta a tus videos ya publicados en YouTube.">
      <div className="col" style={{ gap: 8, marginTop: 6 }}>
        {opts.map((o) => (
          <label key={o.id} className="row" style={{
            padding: 12, background: "var(--bg-card-2)",
            border: "1px solid " + (scope.has(o.id) ? "rgba(124,92,255,0.35)" : "var(--border)"),
            borderRadius: 10, cursor: "pointer", gap: 12,
          }}>
            <input type="checkbox" checked={scope.has(o.id)} onChange={() => toggle(o.id)}
              style={{ accentColor: "var(--accent)", width: 16, height: 16, cursor: "pointer" }}/>
            <div className="grow">
              <div style={{ fontSize: 13, fontWeight: 600, color: o.id === "all" ? "#fca5a5" : "var(--text)" }}>{o.l}</div>
              <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2 }}>{o.d}</div>
            </div>
          </label>
        ))}
      </div>

      <div className="row" style={{ marginTop: 16, gap: 10, justifyContent: "flex-end" }}>
        <button className="btn btn-ghost" onClick={() => setScope(new Set())}>Deseleccionar</button>
        <button className="btn" style={{
          borderColor: scope.has("all") ? "rgba(248,113,113,0.4)" : "var(--border)",
          color: scope.has("all") ? "#fca5a5" : "var(--text)",
        }}
          disabled={scope.size === 0}
          onClick={() => setConfirmOpen(true)}>
          <IconTrash size={13}/> Resetear seleccionado ({scope.size})
        </button>
      </div>

      {confirmOpen && (
        <div style={{
          position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)",
          display: "grid", placeItems: "center", zIndex: 100, backdropFilter: "blur(4px)",
        }} onClick={() => setConfirmOpen(false)}>
          <div className="card card-pad" style={{ maxWidth: 420, margin: 20 }} onClick={(e) => e.stopPropagation()}>
            <h3 className="card-title">¿Seguro que quieres resetear?</h3>
            <p className="card-sub" style={{ marginTop: 6 }}>
              Vas a limpiar: {Array.from(scope).map((id) => opts.find((o) => o.id === id).l).join(", ")}.
              Esto no se puede deshacer.
            </p>
            <div className="row" style={{ marginTop: 16, gap: 8, justifyContent: "flex-end" }}>
              <button className="btn btn-ghost" onClick={() => setConfirmOpen(false)}>Cancelar</button>
              <button className="btn" style={{ borderColor: "rgba(248,113,113,0.4)", color: "#fca5a5" }}
                onClick={() => { setConfirmOpen(false); setScope(new Set()); }}>
                Confirmar reset
              </button>
            </div>
          </div>
        </div>
      )}
    </SettingsGroup>
  );
}

function SettingsGroup({ title, desc, children }) {
  return (
    <div className="card card-pad">
      <h3 className="card-title">{title}</h3>
      {desc && <p className="card-sub" style={{ marginBottom: 4 }}>{desc}</p>}
      <div style={{ marginTop: 10 }}>{children}</div>
    </div>
  );
}

function SettingsRow({ title, desc, control }) {
  return (
    <div className="row" style={{ padding: "12px 0", borderBottom: "1px solid var(--border)", gap: 16 }}>
      <div className="grow">
        <div style={{ fontSize: 13, fontWeight: 500 }}>{title}</div>
        {desc && <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>{desc}</div>}
      </div>
      <div style={{ flex: "0 0 auto" }}>{control}</div>
    </div>
  );
}

function Field({ label, value, readOnly }) {
  const [v, setV] = React.useState(value);
  return (
    <div style={{ padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
      <label style={{ fontSize: 12, color: "var(--text-3)", fontWeight: 500, display: "block", marginBottom: 6 }}>{label}</label>
      <input className="input" value={v} onChange={(e) => !readOnly && setV(e.target.value)}
        readOnly={readOnly} style={{ padding: "8px 10px", opacity: readOnly ? 0.7 : 1 }}/>
    </div>
  );
}

Object.assign(window, { SettingsTab });