/* Tab: Gestión de Canales */

function NewChannelModal({ onClose, onCreated }) {
  const [name, setName] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  async function handleCreate(e) {
    e.preventDefault();
    if (!name.trim()) { setError("El nombre es obligatorio"); return; }
    setLoading(true);
    setError("");
    try {
      const r = await fetch("/api/channels", {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim(), voice_id: "" }),
      });
      const d = await r.json();
      if (r.ok && d.success) { onCreated(d.channel.id); onClose(); }
      else setError(d.detail || "Error al crear canal");
    } catch { setError("Error de conexión"); }
    finally { setLoading(false); }
  }

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", display: "grid",
      placeItems: "center", zIndex: 100, backdropFilter: "blur(4px)",
    }} onClick={onClose}>
      <div className="card card-pad" style={{ width: 420, maxWidth: "calc(100vw - 32px)" }} onClick={(e) => e.stopPropagation()}>
        <h3 className="card-title" style={{ marginBottom: 16 }}>Nuevo canal</h3>
        <form onSubmit={handleCreate} className="col" style={{ gap: 14 }}>
          <div>
            <label className="label">Nombre del canal</label>
            <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Mi canal de historia" autoFocus/>
          </div>

          {error && <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" }}>{error}</div>}
          <div className="row" style={{ gap: 8, marginTop: 4, justifyContent: "flex-end" }}>
            <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? "Creando…" : <><IconPlus size={13}/> Crear canal</>}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function ChannelsTab({ channels, setChannels, refreshChannels, currentUser }) {
  const channelLimit = currentUser?.channel_limit ?? "∞";
  const [selected, setSelected] = React.useState(channels[0]?.id || null);
  const [showNewModal, setShowNewModal] = React.useState(false);
  const [dirty, setDirty] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [saveError, setSaveError] = React.useState("");
  const [editingName, setEditingName] = React.useState(false);
  const [showInactive, setShowInactive] = React.useState(false);
  const cleanRef = React.useRef(null);
  const [cloneVoices, setCloneVoices] = React.useState([]);
  const [loadingClones, setLoadingClones] = React.useState(true);
  const [clonesError, setClonesError] = React.useState("");
  const [editVoiceMode, setEditVoiceMode] = React.useState("manual");
  const [avatars, setAvatars] = React.useState([]);
  const [loadingAvatars, setLoadingAvatars] = React.useState(true);
  const [avatarsError, setAvatarsError] = React.useState("");
  const [uploadingAvatar, setUploadingAvatar] = React.useState(false);
  const [ai33Provider, setAi33Provider] = React.useState("elevenlabs");
  const [ai33Query, setAi33Query] = React.useState("");
  const [ai33Results, setAi33Results] = React.useState([]);
  const [ai33Page, setAi33Page] = React.useState(1);
  const [ai33HasMore, setAi33HasMore] = React.useState(false);
  const [ai33Loading, setAi33Loading] = React.useState(false);
  const [ai33Error, setAi33Error] = React.useState("");
  const [ai33PlayingId, setAi33PlayingId] = React.useState(null);
  const ai33AudioRef = React.useRef(null);

  // Keep selected valid when channels change
  React.useEffect(() => {
    if (!selected && channels.length > 0) setSelected(channels[0].id);
  }, [channels]);

  // Snapshot clean state whenever the selected channel changes
  React.useEffect(() => {
    const ch = channels.find((c) => c.id === selected);
    cleanRef.current = ch ? JSON.parse(JSON.stringify(ch)) : null;
    setDirty(false);
    setSaveError("");
  }, [selected]); // intentionally omit channels to avoid re-snapshot on every keystroke

  // Expose modal opener to parent (topbar button)
  React.useEffect(() => {
    window._openNewChannelModal = () => setShowNewModal(true);
    return () => { delete window._openNewChannelModal; };
  }, []);

  React.useEffect(() => {
    fetch("/api/voice/clones", { credentials: "same-origin" })
      .then(async (r) => {
        if (!r.ok) { const d = await r.json().catch(() => ({})); throw new Error(d.detail || `HTTP ${r.status}`); }
        return r.json();
      })
      .then(d => {
        const raw = d.voice_list || d.data || d.voices || d.clones || [];
        setCloneVoices(raw.map(c => ({
          voice_id: c.voice_id || c.id,
          voice_name: c.voice_name || c.name || "Clon sin nombre",
          sample_url: c.demo_audio || c.sample_url || c.preview_url || null,
        })));
      })
      .catch(e => setClonesError(String(e.message || e)))
      .finally(() => setLoadingClones(false));
  }, []);

  function loadAvatars(channelId) {
    if (!channelId) { setAvatars([]); setLoadingAvatars(false); return; }
    setLoadingAvatars(true);
    fetch(`/api/channels/${channelId}/avatars`, { credentials: "same-origin" })
      .then(async (r) => {
        if (!r.ok) { const d = await r.json().catch(() => ({})); throw new Error(d.detail || `HTTP ${r.status}`); }
        return r.json();
      })
      .then(d => { setAvatars(d.avatars || []); setAvatarsError(""); })
      .catch(e => setAvatarsError(String(e.message || e)))
      .finally(() => setLoadingAvatars(false));
  }

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

  async function uploadAvatar(file) {
    if (!file || !selected) return;
    setUploadingAvatar(true);
    setAvatarsError("");
    const fd = new FormData();
    fd.append("avatar", file);
    try {
      const r = await fetch(`/api/channels/${selected}/avatars`, {
        method: "POST", credentials: "same-origin", body: fd,
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.detail || `HTTP ${r.status}`);
      loadAvatars(selected);
      // La galería es por canal y vive solo aquí, pero channel.avatar_url (el que
      // usan el resto de pestañas: Video Avatar, Creación en lista…) se actualiza en
      // el servidor al subir/marcar por defecto — sin este refresh, el resto de la
      // app se quedaba con el avatar_url viejo (o vacío) hasta recargar la página.
      if (refreshChannels) refreshChannels();
    } catch (e) {
      setAvatarsError(String(e.message || e));
    }
    setUploadingAvatar(false);
  }

  async function setDefaultAvatar(avatarId) {
    try {
      const r = await fetch(`/api/channels/${selected}/avatars/${avatarId}/default`, {
        method: "POST", credentials: "same-origin",
      });
      if (!r.ok) throw new Error();
      loadAvatars(selected);
      if (refreshChannels) refreshChannels();
    } catch {
      setAvatarsError("No se pudo marcar como avatar por defecto");
    }
  }

  async function deleteAvatar(avatarId) {
    if (!confirm("¿Eliminar esta foto de avatar?")) return;
    try {
      const r = await fetch(`/api/channels/${selected}/avatars/${avatarId}`, {
        method: "DELETE", credentials: "same-origin",
      });
      if (!r.ok) throw new Error();
      loadAvatars(selected);
      if (refreshChannels) refreshChannels();
    } catch {
      setAvatarsError("No se pudo eliminar la foto");
    }
  }

  function fetchAi33Voices(page, append) {
    setAi33Loading(true);
    setAi33Error("");
    const params = new URLSearchParams({ provider: ai33Provider, page: String(page), page_size: "20" });
    if (ai33Query.trim()) params.set("search", ai33Query.trim());
    fetch(`/api/voice/ai33-voices?${params.toString()}`, { credentials: "same-origin" })
      .then(async (r) => {
        if (!r.ok) { const d = await r.json().catch(() => ({})); throw new Error(d.detail || `HTTP ${r.status}`); }
        return r.json();
      })
      .then((d) => {
        setAi33Results((prev) => append ? [...prev, ...(d.data || [])] : (d.data || []));
        setAi33HasMore(!!(d.pagination && d.pagination.has_more));
        setAi33Page(page);
      })
      .catch((e) => setAi33Error(String(e.message || e)))
      .finally(() => setAi33Loading(false));
  }

  // Buscador de voces ai33: relanza al cambiar de proveedor o tras dejar de escribir (debounce)
  React.useEffect(() => {
    if (editVoiceMode !== "ai33") return;
    const t = setTimeout(() => fetchAi33Voices(1, false), 400);
    return () => clearTimeout(t);
  }, [editVoiceMode, ai33Provider, ai33Query]);

  function playAi33Preview(url, id) {
    if (ai33AudioRef.current) ai33AudioRef.current.pause();
    if (ai33PlayingId === id) { setAi33PlayingId(null); return; }
    const a = new Audio(url);
    ai33AudioRef.current = a;
    a.play().catch(() => {});
    setAi33PlayingId(id);
    a.onended = () => setAi33PlayingId(null);
  }

  React.useEffect(() => {
    const ch = channels.find(c => c.id === selected);
    if (!ch) { setEditVoiceMode("manual"); return; }
    const isOwnClone = cloneVoices.some(v => v.voice_id === ch.voiceId);
    setEditVoiceMode(isOwnClone && ch.voiceId ? "favorite" : "manual");
  }, [selected, cloneVoices]);

  const sel = channels.find((c) => c.id === selected);

  function updateSel(patch) {
    setChannels(channels.map((c) => c.id === selected ? { ...c, ...patch } : c));
    setDirty(true);
    setSaveError("");
  }

  const inactiveChannels = channels.filter((c) => c.active === false);

  // Si el canal seleccionado está apagado, abre el desplegable para que se vea.
  React.useEffect(() => {
    if (inactiveChannels.some((c) => c.id === selected)) setShowInactive(true);
  }, [selected]);

  function renderChannelRow(c) {
    const isActive = c.active !== false;
    return (
      <button key={c.id} onClick={() => handleSelectChannel(c.id)} style={{
        background: selected === c.id ? "var(--accent-softer)" : "transparent",
        border: "1px solid " + (selected === c.id ? "rgba(124,92,255,0.3)" : "transparent"),
        borderRadius: 10, padding: 10, display: "flex", gap: 12, alignItems: "center",
        cursor: "pointer", color: "var(--text)", textAlign: "left",
        transition: "background 120ms ease",
        opacity: isActive ? 1 : 0.5,
      }}
      onMouseEnter={(e) => { if (selected !== c.id) e.currentTarget.style.background = "var(--bg-hover)"; }}
      onMouseLeave={(e) => { if (selected !== c.id) e.currentTarget.style.background = "transparent"; }}>
        <span style={{
          width: 36, height: 36, borderRadius: 8, background: c.tint,
          display: "grid", placeItems: "center", fontWeight: 700, color: "#00000099",
          flex: "0 0 36px", overflow: "hidden",
        }}>
          {c.avatarUrl
            ? <img src={c.avatarUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            : c.logo
            ? <img src={c.logo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            : c.initials}
        </span>
        <div className="grow" style={{ minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            {c.name}
          </div>
          <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2 }}>
            {c.videos} videos
          </div>
        </div>
        {isActive
          ? <span className="pill ok" style={{ fontSize: 10 }}>ON</span>
          : <span className="pill" style={{ fontSize: 10, opacity: 0.6 }}>OFF</span>}
      </button>
    );
  }

  function handleSelectChannel(id) {
    setEditingName(false);
    if (dirty && id !== selected) {
      // Discard unsaved changes before switching
      if (cleanRef.current) {
        setChannels((prev) => prev.map((c) => c.id === selected ? cleanRef.current : c));
      }
      setDirty(false);
      setSaveError("");
    }
    setSelected(id);
  }

  async function saveChanges() {
    const ch = channels.find((c) => c.id === selected);
    if (!ch) return;
    setSaving(true);
    setSaveError("");
    try {
      const body = window.denormalizeChannel ? window.denormalizeChannel(ch) : {};
      const r = await fetch(`/api/channels/${selected}`, {
        method: "PUT", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      if (r.ok) {
        cleanRef.current = JSON.parse(JSON.stringify(ch));
        setDirty(false);
      } else {
        setSaveError("Error al guardar. Inténtalo de nuevo.");
      }
    } catch { setSaveError("Error de conexión."); }
    finally { setSaving(false); }
  }

  function cancelChanges() {
    if (cleanRef.current) {
      setChannels((prev) => prev.map((c) => c.id === selected ? cleanRef.current : c));
    }
    setDirty(false);
    setSaveError("");
  }

  async function deleteChannel(channelId) {
    if (!confirm("¿Eliminar este canal? Esta acción no se puede deshacer.")) return;
    try {
      await fetch(`/api/channels/${channelId}`, { method: "DELETE", credentials: "same-origin" });
      await refreshChannels();
      setSelected(channels.find((c) => c.id !== channelId)?.id || null);
    } catch { /* ignore */ }
  }

  async function toggleActive() {
    if (!sel) return;
    const newActive = !sel.active;
    const updatedCh = { ...sel, active: newActive };
    setChannels(channels.map((c) => c.id === selected ? updatedCh : c));
    cleanRef.current = updatedCh;
    setDirty(false);
    const body = window.denormalizeChannel ? window.denormalizeChannel(updatedCh) : {};
    try {
      await fetch(`/api/channels/${selected}`, {
        method: "PUT", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
    } catch { /* ignore */ }
  }

  async function onLogoUpload(e) {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const formData = new FormData();
    formData.append("watermark", file);
    try {
      const r = await fetch("/api/upload-watermark", { method: "POST", credentials: "same-origin", body: formData });
      const d = await r.json();
      if (d.success) {
        const updatedCh = { ...sel, logo: d.url, _raw: { ...(sel._raw || {}), watermark_path: d.path } };
        setChannels(channels.map((c) => c.id === selected ? updatedCh : c));
        const body = window.denormalizeChannel ? window.denormalizeChannel(updatedCh) : {};
        body.watermark_path = d.path;
        await fetch(`/api/channels/${selected}`, {
          method: "PUT", credentials: "same-origin",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        });
      }
    } catch { /* ignore */ }
  }

  if (!sel) return (
    <div className="tab-enter card card-pad" style={{ textAlign: "center", padding: 60 }}>
      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Sin canales</div>
      <button className="btn btn-primary" onClick={() => setShowNewModal(true)}><IconPlus size={13}/> Crear canal</button>
      {showNewModal && <NewChannelModal onClose={() => setShowNewModal(false)} onCreated={async (id) => { await refreshChannels(); setSelected(id); }}/>}
    </div>
  );

  return (
    <div className="tab-enter channels-layout">
      {showNewModal && <NewChannelModal onClose={() => setShowNewModal(false)} onCreated={async (id) => { await refreshChannels(); setSelected(id); }}/>}

      {/* List */}
      <div className="card" style={{ padding: 10, height: "fit-content" }}>
        <div className="row" style={{ padding: "8px 10px 12px 10px", justifyContent: "space-between" }}>
          <span style={{ fontSize: 12, color: "var(--text-3)", fontWeight: 600, letterSpacing: "0.05em" }}>
            {channels.length} / {channelLimit} CANALES
          </span>
          <button className="btn btn-ghost" style={{ padding: "4px 8px", fontSize: 12 }} onClick={() => setShowNewModal(true)}>
            <IconPlus size={13}/> Nuevo
          </button>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {channels.filter((c) => c.active !== false).map(renderChannelRow)}

          {inactiveChannels.length > 0 && (
            <>
              <button className="btn btn-ghost"
                onClick={() => setShowInactive((v) => !v)}
                style={{ justifyContent: "space-between", padding: "7px 10px", marginTop: 4, fontSize: 12, color: "var(--text-3)" }}>
                <span>{showInactive ? "Ocultar" : "Mostrar"} apagados ({inactiveChannels.length})</span>
                <IconChevronDown size={13} style={{ transform: showInactive ? "rotate(180deg)" : "none", transition: "transform 0.15s" }}/>
              </button>
              {showInactive && inactiveChannels.map(renderChannelRow)}
            </>
          )}
        </div>
      </div>

      {/* Detail */}
      <div className="col" style={{ gap: 16 }}>
        {/* Header card */}
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ padding: 20, display: "flex", gap: 16, alignItems: "center" }}>
            <span style={{
              width: 64, height: 64, borderRadius: 14, background: sel.tint,
              display: "grid", placeItems: "center", fontSize: 22, fontWeight: 700, color: "#00000099",
              boxShadow: "0 6px 20px rgba(0,0,0,0.4), 0 0 0 3px var(--bg-card)",
              flex: "0 0 64px", overflow: "hidden",
            }}>
              {sel.avatarUrl
                ? <img src={sel.avatarUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                : sel.logo
                ? <img src={sel.logo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                : sel.initials}
            </span>
            <div className="grow">
              <div className="row" style={{ gap: 8 }}>
                {editingName ? (
                  <input
                    className="input" autoFocus value={sel.name}
                    onChange={(e) => {
                      const n = e.target.value;
                      updateSel({ name: n, initials: window.getInitials ? window.getInitials(n) : n.slice(0, 2).toUpperCase() });
                    }}
                    onKeyDown={(e) => { if (e.key === "Enter" || e.key === "Escape") setEditingName(false); }}
                    onBlur={() => setEditingName(false)}
                    placeholder="Nombre del canal"
                    style={{ fontSize: 18, fontWeight: 600, maxWidth: 340, padding: "4px 10px" }}
                  />
                ) : (
                  <>
                    <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>{sel.name}</h2>
                    <button className="btn btn-ghost" title="Editar nombre"
                      onClick={() => setEditingName(true)}
                      style={{ padding: "3px 6px", color: "var(--text-3)" }}>
                      <IconEdit size={13}/>
                    </button>
                  </>
                )}
                {sel.active !== false
                  ? <span className="pill ok"><span style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor" }}/> Activo</span>
                  : <span className="pill" style={{ opacity: 0.6 }}><span style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor" }}/> Inactivo</span>}
              </div>
              <div style={{ fontSize: 12.5, color: "var(--text-3)", marginTop: 4 }}>
                <IconYouTube size={12} style={{ verticalAlign: "-2px", marginRight: 4 }}/>
                youtube.com/@{sel.handle}
              </div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <button className="btn btn-ghost" onClick={toggleActive} style={{
                color: sel.active !== false ? "var(--text-2)" : "var(--accent-2)",
              }}>
                <IconPower size={14}/> {sel.active !== false ? "Desactivar" : "Activar"}
              </button>
              <button className="btn btn-ghost" onClick={() => deleteChannel(selected)}>
                <IconTrash size={14}/> Eliminar
              </button>
            </div>
          </div>
        </div>

        {/* Guionista */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
            <div>
              <h3 className="card-title">Rol del guionista</h3>
              <p className="card-sub">Instrucciones que recibe Claude al generar el guion para este canal.</p>
            </div>
            <span className="pill info"><IconScript size={11}/> System prompt</span>
          </div>
          <textarea className="textarea" rows={6} style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 12.5, lineHeight: 1.6 }}
            value={sel.scriptRole}
            onChange={(e) => updateSel({ scriptRole: e.target.value })}
            placeholder={"Eres un guionista de YouTube especializado en historia oscura. Escribe con tono cinemático, con ganchos cada 90 segundos. Usa frases cortas y evita tecnicismos…"}/>
          <div className="help">Este texto se inyecta como rol del sistema antes del prompt del usuario.</div>
        </div>

        {/* Prompts de imágenes */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
            <div>
              <h3 className="card-title">Instrucciones para prompts de imágenes</h3>
              <p className="card-sub">Cómo debe redactar Claude los prompts que luego recibirá Nanobanana.</p>
            </div>
            <span className="pill info"><IconSparkle size={11}/> Claude → Nanobanana</span>
          </div>
          <textarea className="textarea" rows={5} style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 12.5, lineHeight: 1.6 }}
            value={sel.imageInstructions}
            onChange={(e) => updateSel({ imageInstructions: e.target.value })}
            placeholder={"Por cada escena del guion, genera un prompt en inglés de 2-3 frases, describiendo composición, iluminación, plano y emoción. Nunca incluyas texto dentro de la imagen…"}/>

          <div style={{ marginTop: 14 }}>
            <label className="label">Estilo de imagen <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· se añade al final de cada prompt</span></label>
            <input className="input" style={{ fontFamily: "var(--font-mono)", fontSize: 12.5 }}
              value={sel.imageStyle}
              onChange={(e) => updateSel({ imageStyle: e.target.value })}
              placeholder="cinematic, 35mm, dramatic lighting, warm tones, shallow depth of field"/>
            <div className="help">
              Preview del final del prompt: <span style={{ color: "var(--accent-2)", fontFamily: "var(--font-mono)" }}>
                …{sel.imageStyle || "<sin estilo>"}
              </span>
            </div>
          </div>
        </div>

        {/* Avatar del canal — galería */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 16 }}>
            <div>
              <h3 className="card-title">Avatar del canal</h3>
              <p className="card-sub">Fotos del personaje. La marcada como por defecto se usa como referencia al generar imágenes y como avatar hablando (InfiniTalk/Kling). Puedes subir varias y elegir cuál usar en cada vídeo desde "Creación en lista".</p>
            </div>
            <label className="btn btn-primary" style={{ cursor: "pointer", flexShrink: 0 }}>
              <IconUpload size={13}/> {uploadingAvatar ? "Subiendo…" : "Añadir foto"}
              <input type="file" accept="image/*" style={{ display: "none" }} disabled={uploadingAvatar}
                onChange={(e) => { const f = e.target.files && e.target.files[0]; if (f) uploadAvatar(f); e.target.value = ""; }}/>
            </label>
          </div>

          {avatarsError && (
            <div style={{
              marginBottom: 12, padding: "8px 12px", borderRadius: 8,
              background: "rgba(248,113,113,0.08)", border: "1px solid rgba(248,113,113,0.3)",
              fontSize: 12, color: "#fca5a5",
            }}>
              {avatarsError}
            </div>
          )}

          {loadingAvatars ? (
            <div style={{ padding: "10px 14px", borderRadius: 8, background: "var(--bg-card-2)", border: "1px solid var(--border)", fontSize: 13, color: "var(--text-3)" }}>
              Cargando…
            </div>
          ) : avatars.length === 0 ? (
            <div style={{
              padding: "18px 14px", borderRadius: 10, background: "var(--bg-card-2)",
              border: "1.5px dashed var(--border-strong)", textAlign: "center",
              color: "var(--text-4)", fontSize: 13,
            }}>
              <IconUser size={22}/>
              <div style={{ marginTop: 6 }}>Aún no hay fotos de avatar para este canal.</div>
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: 12 }}>
              {avatars.map((av) => (
                <div key={av.id} style={{
                  position: "relative", borderRadius: 12, overflow: "hidden",
                  border: av.is_default ? "1.5px solid rgba(124,92,255,0.55)" : "1.5px solid var(--border)",
                  background: "var(--bg-card-2)",
                }}>
                  <div style={{ aspectRatio: "3/4", overflow: "hidden" }}>
                    <img src={av.url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                  </div>
                  {av.is_default && (
                    <span style={{
                      position: "absolute", top: 6, left: 6,
                      background: "var(--accent)", color: "#fff",
                      fontSize: 9.5, fontWeight: 700, padding: "2px 7px", borderRadius: 999,
                    }}>POR DEFECTO</span>
                  )}
                  <div className="row" style={{ gap: 4, padding: 6, justifyContent: "center" }}>
                    {!av.is_default && (
                      <button className="btn btn-ghost" style={{ padding: "3px 7px", fontSize: 10.5 }}
                        onClick={() => setDefaultAvatar(av.id)} title="Marcar como por defecto">
                        <IconCheck size={11}/>
                      </button>
                    )}
                    <button className="btn btn-ghost" style={{ padding: "3px 7px", fontSize: 10.5, color: "var(--red)" }}
                      onClick={() => deleteAvatar(av.id)} title="Eliminar">
                      <IconTrash size={11}/>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Voz narrada */}
        <div className="card card-pad">
          <h3 className="card-title" style={{ marginBottom: 4 }}>Voz narrada</h3>
          <p className="card-sub" style={{ marginBottom: 14 }}>Voz por defecto para los vídeos de este canal.</p>

          <div className="segmented" style={{ width: "100%", marginBottom: 12 }}>
            {[{ id: "favorite", label: "Mis voces" }, { id: "ai33", label: "Buscar voz" }, { id: "manual", label: "Voice ID" }].map(m => (
              <button key={m.id} type="button" className={editVoiceMode === m.id ? "on" : ""}
                style={{ flex: 1, justifyContent: "center" }}
                onClick={() => { setEditVoiceMode(m.id); if (m.id === "favorite") updateSel({ voiceId: "" }); }}>
                {m.label}
              </button>
            ))}
          </div>

          {editVoiceMode === "favorite" && (
            loadingClones ? (
              <div style={{
                padding: "10px 14px", borderRadius: 8, background: "var(--bg-card-2)",
                border: "1px solid var(--border)", fontSize: 13, color: "var(--text-3)",
              }}>
                Cargando…
              </div>
            ) : clonesError ? (
              <div style={{
                padding: "10px 14px", borderRadius: 8, background: "rgba(248,113,113,0.08)",
                border: "1px solid rgba(248,113,113,0.3)", fontSize: 12.5, color: "#fca5a5",
              }}>
                No se pudieron cargar tus voces clonadas ({clonesError}).
              </div>
            ) : cloneVoices.length === 0 ? (
              <div style={{
                padding: "10px 14px", borderRadius: 8, background: "var(--bg-card-2)",
                border: "1px solid var(--border)", fontSize: 13, color: "var(--text-3)",
              }}>
                No tienes voces clonadas todavía. Ve a <b>Viral Voice → Clonar voz</b> para crear una.
              </div>
            ) : (
              <div className="col" style={{ gap: 6, maxHeight: 320, overflowY: "auto" }}>
                {cloneVoices.map(v => (
                  <div key={v.voice_id} style={{
                    display: "flex", alignItems: "center", gap: 8, padding: "8px 10px",
                    borderRadius: 8, background: "var(--bg-card-2)",
                    border: sel.voiceId === v.voice_id ? "1px solid var(--accent)" : "1px solid var(--border)",
                  }}>
                    {v.sample_url && (
                      <button className="btn" style={{ padding: "6px 8px" }}
                        onClick={() => playAi33Preview(v.sample_url, v.voice_id)} title="Escuchar">
                        {ai33PlayingId === v.voice_id ? <IconPause size={12}/> : <IconPlay size={12}/>}
                      </button>
                    )}
                    <div style={{ flex: 1, minWidth: 0, fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {v.voice_name}
                    </div>
                    <button className="btn btn-primary" style={{ padding: "6px 12px", fontSize: 12 }}
                      onClick={() => updateSel({ voiceId: v.voice_id })}>
                      {sel.voiceId === v.voice_id ? "Seleccionada" : "Usar voz"}
                    </button>
                  </div>
                ))}
              </div>
            )
          )}

          {editVoiceMode === "ai33" && (
            <div>
              <div className="segmented" style={{ width: "100%", marginBottom: 10 }}>
                {[{ id: "elevenlabs", label: "ElevenLabs" }, { id: "minimax", label: "Minimax" }].map(p => (
                  <button key={p.id} type="button" className={ai33Provider === p.id ? "on" : ""}
                    style={{ flex: 1, justifyContent: "center" }}
                    onClick={() => setAi33Provider(p.id)}>
                    {p.label}
                  </button>
                ))}
              </div>

              <input className="input" style={{ marginBottom: 10 }}
                value={ai33Query} onChange={e => setAi33Query(e.target.value)}
                placeholder="Buscar por nombre, idioma, género…"/>

              {sel.voiceId && (
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 6, marginBottom: 10,
                  padding: "4px 10px", borderRadius: 999, background: "var(--accent-softer)",
                  border: "1px solid var(--accent-soft)", fontSize: 11.5, fontFamily: "var(--font-mono)",
                }}>
                  Voz actual: {sel.voiceId}
                </div>
              )}

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

              <div className="col" style={{ gap: 6, maxHeight: 320, overflowY: "auto" }}>
                {ai33Results.map(v => (
                  <div key={v.voice_id} style={{
                    display: "flex", alignItems: "center", gap: 8, padding: "8px 10px",
                    borderRadius: 8, background: "var(--bg-card-2)",
                    border: sel.voiceId === v.voice_id ? "1px solid var(--accent)" : "1px solid var(--border)",
                  }}>
                    {v.preview_url && (
                      <button className="btn" style={{ padding: "6px 8px" }}
                        onClick={() => playAi33Preview(v.preview_url, v.voice_id)} title="Escuchar">
                        {ai33PlayingId === v.voice_id ? <IconPause size={12}/> : <IconPlay size={12}/>}
                      </button>
                    )}
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{v.name}</div>
                      <div style={{ fontSize: 11, color: "var(--text-3)" }}>
                        {[v.language, v.gender, v.accent].filter(Boolean).join(" · ")}
                      </div>
                    </div>
                    <button className="btn btn-primary" style={{ padding: "6px 12px", fontSize: 12 }}
                      onClick={() => updateSel({ voiceId: v.voice_id })}>
                      {sel.voiceId === v.voice_id ? "Seleccionada" : "Usar"}
                    </button>
                  </div>
                ))}
                {!ai33Loading && ai33Results.length === 0 && (
                  <div style={{ padding: "10px 14px", borderRadius: 8, background: "var(--bg-card-2)", border: "1px solid var(--border)", fontSize: 13, color: "var(--text-3)" }}>
                    Sin resultados.
                  </div>
                )}
              </div>

              <div className="row" style={{ justifyContent: "center", marginTop: 10 }}>
                {ai33Loading ? (
                  <span style={{ fontSize: 12, color: "var(--text-3)" }}>Cargando…</span>
                ) : ai33HasMore ? (
                  <button className="btn" style={{ fontSize: 12 }} onClick={() => fetchAi33Voices(ai33Page + 1, true)}>
                    Cargar más
                  </button>
                ) : null}
              </div>
            </div>
          )}

          {editVoiceMode === "manual" && (
            <div>
              <div className="row" style={{ gap: 8 }}>
                <input className="input"
                  style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: "0.02em" }}
                  value={sel.voiceId || ""}
                  onChange={e => updateSel({ voiceId: e.target.value })}
                  placeholder="voice_xxxxxxxxxxxxxxxx"/>
                {sel.voiceId && (
                  <button className="btn" onClick={() => navigator.clipboard?.writeText(sel.voiceId || "")} title="Copiar">
                    <IconScript size={13}/>
                  </button>
                )}
              </div>
              <div className="help">ID de la voz (ElevenLabs).</div>
            </div>
          )}
        </div>


        {/* Logo + marca de agua */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
            <div>
              <h3 className="card-title">Logo del canal</h3>
              <p className="card-sub">Se usa como identificador y, opcionalmente, como marca de agua en el video.</p>
            </div>
            <span className="pill"><IconImage size={11}/> PNG con transparencia</span>
          </div>

          <div className="rg-logo" style={{ marginTop: 16, gap: 20, alignItems: "flex-start" }}>
            <div>
              <div style={{
                width: 160, height: 160,
                borderRadius: 12,
                background: "var(--bg-card-2)",
                border: "1.5px dashed var(--border-strong)",
                display: "grid", placeItems: "center",
                overflow: "hidden",
                position: "relative",
              }}>
                {sel.logo ? (
                  <img src={sel.logo} alt="logo" style={{ maxWidth: "80%", maxHeight: "80%", objectFit: "contain" }}/>
                ) : (
                  <div style={{ textAlign: "center", color: "var(--text-4)" }}>
                    <IconImage size={24}/>
                    <div style={{ fontSize: 11, marginTop: 6 }}>Sin logo</div>
                  </div>
                )}
              </div>
              <div className="row" style={{ gap: 6, marginTop: 10, justifyContent: "center" }}>
                <label className="btn" style={{ cursor: "pointer" }}>
                  <IconUpload size={13}/> {sel.logo ? "Cambiar" : "Subir"}
                  <input type="file" accept="image/*" style={{ display: "none" }} onChange={onLogoUpload}/>
                </label>
                {sel.logo && (
                  <button className="btn btn-ghost" onClick={async () => {
                    const updatedCh = { ...sel, logo: null, _raw: { ...(sel._raw || {}), watermark_path: null } };
                    setChannels(channels.map((c) => c.id === selected ? updatedCh : c));
                    const body = window.denormalizeChannel ? window.denormalizeChannel(updatedCh) : {};
                    body.watermark_path = null;
                    await fetch(`/api/channels/${selected}`, {
                      method: "PUT", credentials: "same-origin",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify(body),
                    });
                  }}>
                    <IconTrash size={13}/>
                  </button>
                )}
              </div>
            </div>

            <div className="col" style={{ gap: 12 }}>
              <SwitchRow on={sel.watermarkDefault} onToggle={() => updateSel({ watermarkDefault: !sel.watermarkDefault })}
                title="Marca de agua"
                desc="Si está activado, todos los vídeos generados con este canal llevarán el logo como marca de agua, con el estilo configurado abajo."/>

              {sel.watermarkDefault && (
              <React.Fragment>
              <div>
                <label className="label">Posición de la marca de agua</label>
                <div className="rg-4" style={{ gap: 6 }}>
                  {[
                    { id: "tl", label: "↖ Arr. izq." },
                    { id: "tr", label: "↗ Arr. der." },
                    { id: "bl", label: "↙ Abj. izq." },
                    { id: "br", label: "↘ Abj. der." },
                  ].map((p) => (
                    <button key={p.id} onClick={() => updateSel({ watermarkPos: p.id })}
                      style={{
                        background: sel.watermarkPos === p.id ? "var(--accent-softer)" : "var(--bg-card-2)",
                        border: "1px solid " + (sel.watermarkPos === p.id ? "rgba(124,92,255,0.4)" : "var(--border)"),
                        color: "var(--text-2)",
                        borderRadius: 8, padding: "8px 6px", fontSize: 11, fontWeight: 500,
                        cursor: "pointer",
                      }}>{p.label}</button>
                  ))}
                </div>
              </div>

              <div>
                <label className="label">
                  Opacidad · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{sel.watermarkOpacity}%</span>
                </label>
                <input type="range" min="10" max="100" value={sel.watermarkOpacity}
                  onChange={(e) => updateSel({ watermarkOpacity: +e.target.value })}
                  style={{ width: "100%", accentColor: "var(--accent)" }}/>
              </div>

              <div>
                <label className="label">
                  Tamaño · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{sel.watermarkSize || 20}% del ancho</span>
                </label>
                <input type="range" min="5" max="40" value={sel.watermarkSize || 20}
                  onChange={(e) => updateSel({ watermarkSize: +e.target.value })}
                  style={{ width: "100%", accentColor: "var(--accent)" }}/>
                <div className="help">Ancho de la marca respecto al vídeo.</div>
              </div>

              {/* Preview marca de agua */}
              <div>
                <label className="label">Preview de posición y tamaño</label>
                <div style={{
                  position: "relative",
                  width: "100%", aspectRatio: "16/9",
                  borderRadius: 10, overflow: "hidden",
                  background: `linear-gradient(135deg, ${sel.tint}33 0%, #0a0a14 100%), repeating-linear-gradient(45deg, #1a1a24 0 10px, #16161e 10px 20px)`,
                  border: "1px solid var(--border)",
                }}>
                  <div style={{
                    position: "absolute",
                    top: sel.watermarkPos && sel.watermarkPos[0] === "t" ? 12 : "auto",
                    bottom: sel.watermarkPos && sel.watermarkPos[0] === "b" ? 12 : "auto",
                    left: sel.watermarkPos && sel.watermarkPos[1] === "l" ? 12 : "auto",
                    right: sel.watermarkPos && sel.watermarkPos[1] === "r" ? 12 : "auto",
                    width: `${sel.watermarkSize || 20}%`,
                    opacity: (sel.watermarkOpacity || 70) / 100,
                  }}>
                    {sel.logo ? (
                      <img src={sel.logo} alt="" style={{ width: "100%", height: "auto", objectFit: "contain", display: "block" }}/>
                    ) : (
                      <div style={{
                        width: "100%", aspectRatio: "3/1",
                        background: sel.tint,
                        borderRadius: 6,
                        display: "grid", placeItems: "center",
                        color: "#00000099", fontWeight: 700, fontSize: 11,
                      }}>{sel.initials}</div>
                    )}
                  </div>
                </div>
              </div>
              </React.Fragment>
              )}
            </div>
          </div>
        </div>

        {/* Subtítulos */}
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
            <div>
              <h3 className="card-title">Estilo de subtítulos</h3>
              <p className="card-sub">Cómo se queman los subtítulos en los videos de este canal.</p>
            </div>
            <span className="pill info"><IconScript size={11}/> FFmpeg · ass/ssa</span>
          </div>

          <div style={{ marginTop: 12 }}>
            <SwitchRow on={sel.subtitlesEnabled} onToggle={() => updateSel({ subtitlesEnabled: !sel.subtitlesEnabled })}
              title="Subtítulos"
              desc="Si está activado, todos los vídeos generados con este canal se montan con subtítulos quemados, con el estilo configurado abajo."/>
          </div>

          {sel.subtitlesEnabled && (
          <div>
          <div className="rg-2" style={{ marginTop: 16, gap: 16 }}>
            <div className="col" style={{ gap: 12 }}>
              <div>
                <label className="label">Fuente</label>
                <div className="segmented" style={{ width: "100%" }}>
                  {["Inter", "Montserrat", "Bebas", "Impact"].map((f) => (
                    <button key={f} className={sel.subFont === f ? "on" : ""} onClick={() => updateSel({ subFont: f })}
                      style={{ flex: 1, justifyContent: "center" }}>{f}</button>
                  ))}
                </div>
              </div>
              <div>
                <label className="label">Peso</label>
                <div className="segmented" style={{ width: "100%" }}>
                  {["Regular", "Semibold", "Bold", "Black"].map((w) => (
                    <button key={w} className={sel.subWeight === w ? "on" : ""} onClick={() => updateSel({ subWeight: w })}
                      style={{ flex: 1, justifyContent: "center" }}>{w}</button>
                  ))}
                </div>
              </div>
              <div>
                <label className="label">Tamaño · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{sel.subSize}px</span></label>
                <input type="range" min="5" max="96" value={sel.subSize}
                  onChange={(e) => updateSel({ subSize: +e.target.value })}
                  style={{ width: "100%", accentColor: "var(--accent)" }}/>
              </div>
              <div>
                <label className="label">Posición</label>
                <div className="segmented" style={{ width: "100%" }}>
                  {[{id:"top",l:"Arriba"},{id:"center",l:"Centro"},{id:"bottom",l:"Abajo"}].map((p) => (
                    <button key={p.id} className={sel.subPos === p.id ? "on" : ""} onClick={() => updateSel({ subPos: p.id })}
                      style={{ flex: 1, justifyContent: "center" }}>{p.l}</button>
                  ))}
                </div>
              </div>
            </div>

            <div className="col" style={{ gap: 12 }}>
              <div>
                <label className="label">Color del texto</label>
                <div className="swatch-row" style={{ alignItems: "center" }}>
                  {["#ffffff", "#fbbf24", "#7c5cff", "#4ade80", "#f87171", "#60a5fa"].map((c) => (
                    <div key={c} className={"swatch" + (sel.subColor === c ? " on" : "")}
                      style={{ background: c, color: c }} onClick={() => updateSel({ subColor: c })}/>
                  ))}
                  <input type="color" value={/^#[0-9a-fA-F]{6}$/.test(sel.subColor) ? sel.subColor : "#ffffff"}
                    onChange={(e) => updateSel({ subColor: e.target.value })}
                    title="Color personalizado"
                    style={{ width: 26, height: 26, padding: 0, border: "1.5px solid var(--border-strong)", borderRadius: 6, cursor: "pointer", background: "none" }}/>
                  <input type="text" value={sel.subColor}
                    onChange={(e) => { const v = e.target.value; if (/^#[0-9a-fA-F]{0,6}$/.test(v)) updateSel({ subColor: v }); }}
                    placeholder="#f0ff00"
                    style={{
                      width: 82, fontSize: 12, fontFamily: "var(--font-mono)",
                      background: "var(--bg-card-2)", border: "1.5px solid var(--border-strong)",
                      borderRadius: 6, padding: "4px 6px", color: "var(--text-2)",
                    }}/>
                </div>
              </div>
              <div>
                <label className="label">Contorno (stroke)</label>
                <div className="swatch-row">
                  {["#000000", "#1a1a1a", "#7c5cff", "#ffffff"].map((c) => (
                    <div key={c} className={"swatch" + (sel.subStroke === c ? " on" : "")}
                      style={{ background: c, color: c }} onClick={() => updateSel({ subStroke: c })}/>
                  ))}
                </div>
              </div>
              <div>
                <label className="label">Grosor de contorno · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{sel.subStrokeW}px</span></label>
                <input type="range" min="0" max="8" value={sel.subStrokeW}
                  onChange={(e) => updateSel({ subStrokeW: +e.target.value })}
                  style={{ width: "100%", accentColor: "var(--accent)" }}/>
              </div>
              <div>
                <label className="label">Mayúsculas</label>
                <SwitchRow on={sel.subUppercase} onToggle={() => updateSel({ subUppercase: !sel.subUppercase })}
                  title="Todo en mayúsculas" desc="Tipo TikTok / Shorts."/>
              </div>
            </div>
          </div>

          {/* Fondo del subtítulo */}
          <div className="rg-2" style={{ marginTop: 14, gap: 16 }}>
            <div>
              <label className="label">Fondo del subtítulo</label>
              <SwitchRow on={sel.subBgEnabled} onToggle={() => updateSel({ subBgEnabled: !sel.subBgEnabled })}
                title="Activar fondo" desc="Caja de color detrás del texto."/>
              {sel.subBgEnabled && (
                <div style={{ marginTop: 10 }}>
                  <label className="label">Color del fondo</label>
                  <div className="swatch-row">
                    {["#000000", "#1a1a1a", "#ffffff", "#7c5cff", "#fbbf24", "#f87171"].map((c) => (
                      <div key={c} className={"swatch" + (sel.subBgColor === c ? " on" : "")}
                        style={{ background: c, color: c }} onClick={() => updateSel({ subBgColor: c })}/>
                    ))}
                  </div>
                </div>
              )}
            </div>
            <div>
              {sel.subBgEnabled && (
                <>
                  <label className="label">Padding del fondo · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{sel.subBgPadding}px</span></label>
                  <input type="range" min="0" max="30" value={sel.subBgPadding}
                    onChange={(e) => updateSel({ subBgPadding: +e.target.value })}
                    style={{ width: "100%", accentColor: "var(--accent)", marginTop: 24 }}/>
                </>
              )}
            </div>
          </div>

          {/* Preview */}
          <div style={{ marginTop: 16 }}>
            <label className="label">Preview</label>
            <div style={{
              height: 180, borderRadius: 12, overflow: "hidden", position: "relative",
              background: `linear-gradient(135deg, ${sel.tint}33 0%, #0a0a14 100%), repeating-linear-gradient(45deg, #1a1a24 0 10px, #16161e 10px 20px)`,
              border: "1px solid var(--border)",
              display: "flex",
              alignItems: sel.subPos === "top" ? "flex-start" : sel.subPos === "center" ? "center" : "flex-end",
              justifyContent: "center",
              padding: 20,
            }}>
              <span style={{
                fontFamily: sel.subFont === "Inter" ? "Inter, sans-serif" :
                           sel.subFont === "Bebas" ? "'Bebas Neue', Impact, sans-serif" :
                           sel.subFont === "Impact" ? "Impact, sans-serif" :
                           "'Montserrat', sans-serif",
                fontWeight: { Regular: 400, Semibold: 600, Bold: 700, Black: 900 }[sel.subWeight],
                fontSize: Math.min(sel.subSize * 0.55, 48),
                color: sel.subColor,
                textTransform: sel.subUppercase ? "uppercase" : "none",
                letterSpacing: sel.subUppercase ? "0.04em" : "0",
                WebkitTextStroke: sel.subStrokeW > 0 ? `${sel.subStrokeW * 0.6}px ${sel.subStroke}` : "none",
                textAlign: "center", lineHeight: 1.15,
                paintOrder: "stroke fill",
                background: sel.subBgEnabled ? sel.subBgColor : "transparent",
                padding: sel.subBgEnabled ? `${sel.subBgPadding * 0.5}px ${sel.subBgPadding}px` : 0,
                borderRadius: sel.subBgEnabled ? 4 : 0,
              }}>
                Así se verán los subtítulos
              </span>
            </div>
          </div>
          </div>
          )}
        </div>

      </div>

      {/* Floating save pill */}
      {dirty && (
        <div style={{
          position: "fixed", bottom: 28, right: 28,
          display: "flex", alignItems: "center", gap: 8,
          background: "var(--bg-card)",
          border: "1px solid var(--border-strong)",
          borderRadius: 16,
          padding: "10px 14px",
          zIndex: 300,
          boxShadow: "0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,92,255,0.18)",
        }}>
          {saveError && (
            <span style={{ fontSize: 11.5, color: "#fca5a5", maxWidth: 220 }}>{saveError}</span>
          )}
          <button className="btn btn-ghost" onClick={cancelChanges} disabled={saving}
            style={{ padding: "6px 12px", fontSize: 12 }}>
            Descartar
          </button>
          <button className="btn btn-primary" onClick={saveChanges} disabled={saving}
            style={{ padding: "6px 14px", fontSize: 12 }}>
            {saving
              ? "Guardando…"
              : <><IconCheck size={12}/> Guardar cambios</>}
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ChannelsTab });