/* Tab: Lanzamiento Automatizado → Lista — hoja editable (aún sin backend: los datos no
   se guardan, se pierden al recargar). Selector de canal (Todos + cada canal activo)
   igual que en Producción · Kanban. Clic en una celda para rellenarla; al escribir el
   título de la última fila se añade automáticamente una fila nueva debajo. */

const LAUNCH_SHEET_COLUMNS = ["Título", "Narración", "Estado", "Canal", "Coste", ""];

const LAUNCH_CELL_STYLE = {
  width: "100%", border: "none", background: "transparent", outline: "none",
  fontSize: 12.5, color: "var(--text)", padding: "4px 2px", fontFamily: "inherit",
};

// Icono de canal: logo si tiene, si no el avatar (como en el resto de la app), si no
// las iniciales.
function LaunchChannelIcon({ ch, size = 18 }) {
  if (!ch) return null;
  const src = ch.logo || ch.avatarUrl || null;
  return (
    <span style={{
      width: size, height: size, borderRadius: 5, background: ch.tint,
      display: "grid", placeItems: "center", fontSize: size * 0.45, fontWeight: 700, color: "#00000099",
      overflow: "hidden", flex: `0 0 ${size}px`,
    }}>
      {src ? <img src={src} style={{ width: "100%", height: "100%", objectFit: "cover" }}/> : ch.initials}
    </span>
  );
}

function NarrationModal({ row, onClose, onSave }) {
  const [text, setText] = React.useState(row.narration || "");
  const [useOwn, setUseOwn] = React.useState(!!row.useOwnNarration);
  const [maintainContext, setMaintainContext] = React.useState(!!row.maintainObjectContext);
  return (
    <div className="modal-overlay" onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 200,
      display: "grid", placeItems: "center", padding: 16,
    }}>
      <div className="card card-pad" onClick={(e) => e.stopPropagation()} style={{
        width: "100%", maxWidth: 560, maxHeight: "90vh", overflowY: "auto",
        display: "flex", flexDirection: "column", gap: 12,
      }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--text)" }}>Narración</div>
          <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>
            Pega aquí la narración ya escrita para "{row.title || "este vídeo"}".
          </div>
        </div>
        <textarea
          autoFocus
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Pega aquí la narración ya escrita…"
          style={{
            width: "100%", minHeight: 220, resize: "vertical", borderRadius: 8,
            border: "1px solid var(--border)", background: "var(--bg-card-2)",
            color: "var(--text)", fontSize: 13, padding: 10, fontFamily: "inherit",
          }}
        />
        <label className="row" style={{
          gap: 8, alignItems: "center", cursor: "pointer", padding: "8px 10px",
          borderRadius: 8, background: "var(--bg-card-2)", border: "1px solid var(--border)",
        }}>
          <input type="checkbox" checked={useOwn} onChange={(e) => setUseOwn(e.target.checked)}
            style={{ width: 15, height: 15, flexShrink: 0 }}/>
          <span style={{ fontSize: 12, color: "var(--text-2)" }}>
            <strong style={{ color: "var(--text)" }}>Usar esta narración tal cual</strong> — se generará el
            audio y el vídeo directamente con este texto, sin que Claude lo reescriba.
            {!useOwn && " (por defecto, Claude la adapta/reescribe como guion antes de generar)."}
          </span>
        </label>
        <label className="row" style={{
          gap: 8, alignItems: "center", cursor: "pointer", padding: "8px 10px",
          borderRadius: 8, background: "var(--bg-card-2)", border: "1px solid var(--border)",
        }}>
          <input type="checkbox" checked={maintainContext} onChange={(e) => setMaintainContext(e.target.checked)}
            style={{ width: 15, height: 15, flexShrink: 0 }}/>
          <span style={{ fontSize: 12, color: "var(--text-2)" }}>
            <strong style={{ color: "var(--text)" }}>Mantener el contexto al generar imágenes</strong> — si este
            vídeo gira en torno a un objeto/producto concreto, se reutiliza su primera imagen como referencia
            para que no cambie de aspecto entre imágenes. Solo para este vídeo.
          </span>
        </label>
        <div className="row" style={{ gap: 8, justifyContent: "flex-end" }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => { onSave(text, useOwn, maintainContext); onClose(); }}>Guardar</button>
        </div>
      </div>
    </div>
  );
}

// Popover con el motivo de un error (fila local o job fallido en el servidor). La
// primera línea suele ser el resumen legible; el resto (traceback) queda debajo,
// con scroll, por si hace falta más detalle.
function ErrorPopover({ text, onClose }) {
  const lines = (text || "").split("\n");
  const summary = lines[0] || "Error desconocido";
  const rest = lines.slice(1).join("\n").trim();
  return (
    <div onClick={(e) => e.stopPropagation()} style={{
      position: "absolute", top: "calc(100% + 6px)", left: 0,
      background: "#0d0a10", border: "1px solid rgba(248,113,113,0.35)",
      borderRadius: 9, padding: "10px 12px",
      fontSize: 11.5, color: "#fca5a5", lineHeight: 1.5,
      minWidth: 260, maxWidth: 380,
      zIndex: 400, boxShadow: "0 8px 28px rgba(0,0,0,0.7)",
    }}>
      <div style={{ fontWeight: 600, wordBreak: "break-word" }}>{summary}</div>
      {rest && (
        <div style={{
          marginTop: 8, paddingTop: 8, borderTop: "1px solid rgba(248,113,113,0.2)",
          fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-4)",
          whiteSpace: "pre-wrap", wordBreak: "break-word",
          maxHeight: 160, overflow: "auto",
        }}>{rest}</div>
      )}
      <button className="btn" style={{ marginTop: 8, fontSize: 11, padding: "3px 8px" }} onClick={onClose}>Cerrar</button>
    </div>
  );
}

const LAUNCH_STATUS_LABELS = {
  pending: "Generando guion…",
  processing: "Procesando…",
  pending_approval: "Revisar guion",
  pending_image_approval: "Revisar contenido",
  pending_final_approval: "Revisar montaje",
  queued: "En cola",
  queued_resume: "En cola",
  queued_render: "En cola",
  completed: "Completado",
  failed: "Error",
  cancelled: "Error",
};

const LAUNCH_REVIEW_STATUSES = new Set(["pending_approval", "pending_image_approval", "pending_final_approval"]);

function LaunchListTab({ channels, jobs, fetchJobs }) {
  const activeChannels = (channels || []).filter((c) => c.active !== false);
  const [selected, setSelected] = React.useState("all"); // "all" | channel.id
  const selectedChannel = activeChannels.find((c) => c.id === selected) || null;
  const [narrationRowId, setNarrationRowId] = React.useState(null);
  const [launching, setLaunching] = React.useState({}); // rowId -> true mientras se crea el job
  const [reviewJobId, setReviewJobId] = React.useState(null); // revisión inline (no se mezcla con Producción)
  const [menuForRow, setMenuForRow] = React.useState(null);
  const [galleryJobId, setGalleryJobId] = React.useState(null);
  const [reassembleRowJobId, setReassembleRowJobId] = React.useState(null);
  const [errorPopoverRow, setErrorPopoverRow] = React.useState(null);

  React.useEffect(() => {
    function onDocClick() { setMenuForRow(null); }
    if (menuForRow) {
      document.addEventListener("click", onDocClick);
      return () => document.removeEventListener("click", onDocClick);
    }
  }, [menuForRow]);

  React.useEffect(() => {
    function onDocClick() { setErrorPopoverRow(null); }
    if (errorPopoverRow) {
      document.addEventListener("click", onDocClick);
      return () => document.removeEventListener("click", onDocClick);
    }
  }, [errorPopoverRow]);

  function makeEmptyRow() {
    return {
      id: `row_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
      title: "", narration: "", useOwnNarration: false, maintainObjectContext: false,
      channelId: selected !== "all" ? selected : "",
      avatarId: null, // null = usar el avatar por defecto del canal
      cost: null, // se asigna automáticamente (como en Producción), no se rellena a mano
      jobId: null, error: "",
    };
  }

  // Galería de avatares por canal, cargada bajo demanda (channelId -> [avatares]).
  const [channelAvatars, setChannelAvatars] = React.useState({});
  const [avatarPickerRow, setAvatarPickerRow] = React.useState(null);

  function loadChannelAvatars(channelId) {
    if (!channelId || channelAvatars[channelId]) return;
    fetch(`/api/channels/${channelId}/avatars`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setChannelAvatars((prev) => ({ ...prev, [channelId]: d.avatars || [] })))
      .catch(() => setChannelAvatars((prev) => ({ ...prev, [channelId]: [] })));
  }

  React.useEffect(() => {
    function onDocClick() { setAvatarPickerRow(null); }
    if (avatarPickerRow) {
      document.addEventListener("click", onDocClick);
      return () => document.removeEventListener("click", onDocClick);
    }
  }, [avatarPickerRow]);

  function isRowReady(r) {
    return r.title.trim() !== "" && r.narration.trim() !== "" && r.channelId !== "";
  }

  function jobForRow(r) {
    return r.jobId ? (jobs || []).find((j) => j.id === r.jobId) : null;
  }

  async function launchRow(r) {
    setLaunching((prev) => ({ ...prev, [r.id]: true }));
    updateRow(r.id, "error", "");
    try {
      const resp = await fetch("/api/videos/generate", {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: r.title,
          channel_id: r.channelId,
          mode: r.useOwnNarration ? "narracion" : "referencia",
          transcription: r.narration,
          launch_broll: true,
          voice_speed: 0.9,
          maintain_object_context: !!r.maintainObjectContext,
          avatar_id: r.avatarId || null,
        }),
      });
      const d = await resp.json();
      if (resp.ok && d.success) {
        updateRow(r.id, "jobId", d.job_id);
        if (fetchJobs) fetchJobs();
      } else {
        updateRow(r.id, "error", d.detail || "Error al iniciar la generación");
      }
    } catch (e) {
      updateRow(r.id, "error", "Error de red al crear el vídeo");
    } finally {
      setLaunching((prev) => ({ ...prev, [r.id]: false }));
    }
  }

  // Si el job falló (p.ej. se cortó el montaje por un reinicio del servidor) y el
  // contenido ya estaba generado del todo, esto lo reanuda sin gastar créditos de
  // nuevo; si no se puede reanudar, cae a generar el vídeo desde cero.
  async function retryOrRegenerateRow(r) {
    setLaunching((prev) => ({ ...prev, [r.id]: true }));
    try {
      const resp = await fetch(`/api/videos/jobs/${r.jobId}/retry`, {
        method: "POST", credentials: "same-origin",
      });
      if (resp.ok) {
        if (fetchJobs) fetchJobs();
        return;
      }
    } catch (e) { /* sigue al fallback de abajo */ }
    finally {
      setLaunching((prev) => ({ ...prev, [r.id]: false }));
    }
    if (!confirm("No se pudo reanudar el montaje — ¿generar de nuevo este vídeo desde cero? Se creará un vídeo nuevo con el mismo título, narración y canal.")) return;
    launchRow(r);
  }

  const LAUNCH_ROWS_KEY = "vc_launch_list_rows";
  const [rows, setRows] = React.useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem(LAUNCH_ROWS_KEY) || "null");
      if (Array.isArray(saved) && saved.length > 0) return saved;
    } catch {}
    return [makeEmptyRow()];
  });

  React.useEffect(() => {
    try { localStorage.setItem(LAUNCH_ROWS_KEY, JSON.stringify(rows)); } catch {}
  }, [rows]);

  // Precarga la galería de avatares de cada canal usado en la hoja (para poder
  // mostrar el botón de "elegir avatar" ya desde la primera carga).
  React.useEffect(() => {
    const ids = [...new Set(rows.map((r) => r.channelId).filter(Boolean))];
    ids.forEach(loadChannelAvatars);
  }, [rows]);

  // Recupera filas "huérfanas": jobs reales de 'Creación en lista' que ya existen en el
  // servidor pero no están vinculados a ninguna fila (p.ej. si se creó el job antes de
  // que existiera esta persistencia, si se borró el localStorage, o si lo lanzó otra
  // persona/otro dispositivo). Así nunca se pierde un vídeo ya generado aunque la fila
  // local desaparezca, y se recupera también su narración real (la que se envió al
  // servidor al lanzarlo, no la que hubiera en este navegador).
  React.useEffect(() => {
    if (!jobs || jobs.length === 0) return;
    const orphans = jobs.filter((j) => j.launchBroll && !j.challengeRun && !j.videoAvatarCreacion && !rows.some((r) => r.jobId === j.id));
    if (orphans.length === 0) return;
    setRows((prev) => {
      const nonDraft = prev.filter((r) => r.title.trim() !== "");
      const recovered = orphans.map((j) => ({
        id: `row_${j.id}`, title: j.title, narration: j.transcription || "", channelId: j.channelId,
        cost: j.creditCost || null, jobId: j.id, error: "",
      }));
      return [...nonDraft, ...recovered, makeEmptyRow()];
    });
  }, [jobs]);

  // Limpia sola las filas cuyo vídeo ya no existe en el servidor (borrado automático a
  // las 48h, o borrado manual desde otro dispositivo/persona) — antes se quedaban ahí
  // paradas ("No encontrado (borrado)") esperando a que el usuario le diera a la
  // papelera a mano. Se exige que lleve ausente 2 comprobaciones seguidas (~20s) antes
  // de quitarla, para no borrar por error una fila recién lanzada mientras el primer
  // GET /jobs todavía no la incluye.
  const missingSinceRef = React.useRef({});
  React.useEffect(() => {
    if (!jobs || jobs.length === 0) return;
    const now = Date.now();
    const goneIds = [];
    rows.forEach((r) => {
      if (!r.jobId) return;
      if (jobs.some((j) => j.id === r.jobId)) {
        delete missingSinceRef.current[r.jobId];
        return;
      }
      if (!missingSinceRef.current[r.jobId]) missingSinceRef.current[r.jobId] = now;
      else if (now - missingSinceRef.current[r.jobId] > 15000) goneIds.push(r.jobId);
    });
    if (goneIds.length > 0) {
      goneIds.forEach((id) => delete missingSinceRef.current[id]);
      setRows((prev) => prev.filter((r) => !r.jobId || !goneIds.includes(r.jobId)));
    }
  }, [jobs]);

  function updateRow(id, field, value) {
    setRows((prev) => {
      let next = prev.map((r) => (r.id === id ? { ...r, [field]: value } : r));
      const last = next[next.length - 1];
      // Al rellenar el título de la última fila, se añade automáticamente una nueva vacía.
      if (last.id === id && field === "title" && last.title.trim() !== "") {
        next = [...next, makeEmptyRow()];
      }
      return next;
    });
  }

  function removeRow(id) {
    setRows((prev) => {
      let next = prev.filter((r) => r.id !== id);
      if (next.length === 0) return [makeEmptyRow()];
      // Garantiza que siempre quede una fila vacía al final para poder añadir un
      // vídeo nuevo — si se borra justo esa (p.ej. sin querer), se repone sola.
      const last = next[next.length - 1];
      if (last.title.trim() !== "") next = [...next, makeEmptyRow()];
      return next;
    });
  }

  async function deleteRow(r) {
    if (r.jobId) {
      if (!confirm("¿Eliminar este vídeo del servidor? Esta acción no se puede deshacer.")) return;
      try {
        await fetch(`/api/videos/jobs/${r.jobId}`, { method: "DELETE", credentials: "same-origin" });
      } catch {}
      if (fetchJobs) fetchJobs();
    }
    removeRow(r.id);
  }

  // Cancela un vídeo que se está generando ahora mismo (los créditos ya gastados no
  // se recuperan al cancelar).
  async function cancelRow(r) {
    if (!confirm("¿Cancelar la generación de este vídeo? Se perderá el progreso y no se recuperan los créditos gastados.")) return;
    try {
      await fetch(`/api/videos/jobs/${r.jobId}`, { method: "DELETE", credentials: "same-origin" });
    } catch {}
    if (fetchJobs) fetchJobs();
    removeRow(r.id);
  }

  const visibleRows = rows.filter((r) =>
    selected === "all" || r.channelId === selected || r.title.trim() === "");

  return (
    <div className="tab-enter">
      <div className="col" style={{ gap: 16 }}>

        <div style={{
          padding: "8px 12px",
          background: "rgba(255,160,60,0.08)", borderRadius: 8,
          border: "1px solid rgba(255,160,60,0.3)",
          fontSize: 12, color: "var(--warning, #f59e0b)",
        }}>
          ⚠ Descarga tus vídeos antes de 48 horas — pasado ese tiempo se eliminan automáticamente del servidor para liberar espacio y no se pueden recuperar.
        </div>

        {/* ── Selector de canal: Todos + cada canal activo por separado (1 sola línea, con scroll) ── */}
        <div className="row" style={{ gap: 8, flexWrap: "nowrap", overflowX: "auto", overflowY: "hidden", paddingBottom: 4 }}>
          <button
            onClick={() => setSelected("all")}
            className="row"
            style={{
              gap: 7, padding: "6px 12px", borderRadius: 20, cursor: "pointer",
              background: selected === "all" ? "var(--accent-softer)" : "var(--bg-card-2)",
              border: "1px solid " + (selected === "all" ? "rgba(124,92,255,0.45)" : "var(--border)"),
              color: selected === "all" ? "var(--text)" : "var(--text-2)",
              fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0,
            }}>
            <IconGrid size={12}/> Ver todos
          </button>
          {activeChannels.map((ch) => (
            <button
              key={ch.id}
              onClick={() => setSelected(ch.id)}
              className="row"
              style={{
                gap: 7, padding: "6px 12px 6px 8px", borderRadius: 20, cursor: "pointer",
                background: selected === ch.id ? "var(--accent-softer)" : "var(--bg-card-2)",
                border: "1px solid " + (selected === ch.id ? "rgba(124,92,255,0.45)" : "var(--border)"),
                color: selected === ch.id ? "var(--text)" : "var(--text-2)",
                fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0,
              }}>
              <LaunchChannelIcon ch={ch} size={18}/>
              {ch.name}
            </button>
          ))}
          {activeChannels.length === 0 && (
            <span className="help">Activa un canal en "Mis canales" para poder filtrar por él aquí.</span>
          )}
        </div>

        {/* ── Hoja editable ── */}
        <div className="card" style={{ padding: 0, overflow: "visible" }}>
          <div style={{
            padding: "10px 14px", borderBottom: "1px solid var(--border)",
            display: "flex", alignItems: "center", gap: 8,
          }}>
            <span style={{ fontSize: 12, color: "var(--text-3)" }}>Mostrando actividad de:</span>
            <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text)" }}>
              {selectedChannel ? selectedChannel.name : "Todos los canales"}
            </span>
          </div>
          <div style={{ overflowX: "visible" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
              <thead>
                <tr>
                  {LAUNCH_SHEET_COLUMNS.map((col) => (
                    <th key={col || "icons"} style={{
                      textAlign: "left", padding: "10px 14px", whiteSpace: "nowrap",
                      background: "var(--bg-card-2)", borderBottom: "1px solid var(--border)",
                      color: "var(--text-3)", fontWeight: 600, fontSize: 11.5,
                      textTransform: "uppercase", letterSpacing: "0.04em",
                    }}>{col}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {visibleRows.map((r) => {
                  const isDraft = r.title.trim() === "";
                  const locked = !!r.jobId; // una vez lanzado el vídeo, la fila queda fija (solo muestra lo usado)
                  const td = (last) => ({
                    padding: "6px 12px",
                    borderBottom: "1px solid var(--border)",
                    borderRight: !last ? "1px solid var(--border)" : "none",
                  });
                  return (
                    <tr key={r.id} style={{ opacity: isDraft ? 0.65 : 1 }}>
                      <td style={td(false)}>
                        <input style={{ ...LAUNCH_CELL_STYLE, cursor: locked ? "default" : "text" }}
                          placeholder="Título del vídeo…" disabled={locked} readOnly={locked}
                          value={r.title} onChange={(e) => updateRow(r.id, "title", e.target.value)}
                          title={locked ? "El vídeo ya está generado con este título — no se puede editar" : undefined}/>
                      </td>
                      <td style={td(false)}>
                        <button
                          onClick={() => !locked && setNarrationRowId(r.id)}
                          disabled={locked}
                          className="row"
                          style={{
                            gap: 6, width: "100%", textAlign: "left", background: "transparent",
                            border: "none", cursor: locked ? "default" : "pointer", padding: "4px 2px",
                            color: r.narration.trim() ? "var(--text)" : "var(--text-4)",
                            fontSize: 12.5, fontFamily: "inherit",
                          }}
                          title={locked ? "El vídeo ya está generado con esta narración — no se puede editar" : undefined}>
                          {!locked && <IconEdit size={11} style={{ flexShrink: 0, opacity: 0.7 }}/>}
                          {r.useOwnNarration && r.narration.trim() && (
                            <span className="pill" style={{ fontSize: 9, flexShrink: 0, padding: "1px 5px" }}
                              title="Se usará tal cual, sin que Claude la reescriba">TAL CUAL</span>
                          )}
                          {r.maintainObjectContext && (
                            <span className="pill info" style={{ fontSize: 9, flexShrink: 0, padding: "1px 5px" }}
                              title="Mantener el contexto activado para este vídeo">CONTEXTO</span>
                          )}
                          <span style={{
                            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 220,
                          }}>
                            {r.narration.trim() ? r.narration.trim() : "Pegar narración…"}
                          </span>
                        </button>
                      </td>
                      <td style={{ ...td(false), whiteSpace: "nowrap" }}>
                        {(() => {
                          if (isDraft) return <span style={{ fontSize: 12, color: "var(--text-4)" }}>—</span>;
                          if (r.error) return (
                            <span style={{ position: "relative", display: "inline-block" }}>
                              <span className="pill" style={{ fontSize: 10.5, color: "var(--red)", cursor: "pointer" }}
                                title={r.error}
                                onClick={(e) => { e.stopPropagation(); setErrorPopoverRow(errorPopoverRow === r.id ? null : r.id); }}>
                                Error
                              </span>
                              {errorPopoverRow === r.id && (
                                <ErrorPopover text={r.error} onClose={() => setErrorPopoverRow(null)}/>
                              )}
                            </span>
                          );
                          const job = jobForRow(r);
                          if (!r.jobId) return (
                            <span className="pill warn" style={{ fontSize: 10.5 }} title="Se asigna automáticamente">
                              Listo para generar
                            </span>
                          );
                          const raw = job ? job._rawStatus : null;
                          const label = job ? (LAUNCH_STATUS_LABELS[raw] || "Procesando…") : "No encontrado (borrado)";
                          const clickable = LAUNCH_REVIEW_STATUSES.has(raw);
                          const expiryBadge = job && job.expiresIn != null && (
                            <span className="pill" style={{
                              fontSize: 10, marginLeft: 4,
                              color: job.expiresIn <= 6 ? "#f87171" : "var(--text-4)",
                            }} title="Tiempo restante antes de que el vídeo se borre automáticamente del servidor">
                              <IconClock size={10}/> {job.expiresIn}h
                            </span>
                          );
                          if (raw === "failed" && job.error) {
                            return (
                              <span style={{ position: "relative", display: "inline-block" }}>
                                <span className="pill" style={{ fontSize: 10.5, cursor: "pointer" }}
                                  title={(job.error.split("\n")[0] || job.error).slice(0, 240)}
                                  onClick={(e) => { e.stopPropagation(); setErrorPopoverRow(errorPopoverRow === r.id ? null : r.id); }}>
                                  {label}
                                </span>
                                {expiryBadge}
                                {errorPopoverRow === r.id && (
                                  <ErrorPopover text={job.error} onClose={() => setErrorPopoverRow(null)}/>
                                )}
                              </span>
                            );
                          }
                          return (
                            <span style={{ display: "inline-flex", alignItems: "center" }}>
                              <span
                                className="pill"
                                onClick={clickable ? () => setReviewJobId(r.jobId) : undefined}
                                style={{
                                  fontSize: 10.5,
                                  cursor: clickable ? "pointer" : "default",
                                  textDecoration: clickable ? "underline" : "none",
                                }}
                                title={clickable ? "Revisar aquí mismo" : (job ? label : "El vídeo ya no existe en el servidor (se borra automáticamente a las 48h de completarse, o si se borró a mano). Puedes borrar esta fila o generar de nuevo.")}>
                                {label}
                              </span>
                              {expiryBadge}
                            </span>
                          );
                        })()}
                      </td>
                      <td style={td(false)}>
                        {locked ? (
                          <div className="row" style={{ gap: 7, alignItems: "center" }} title="El vídeo ya está generado con este canal — no se puede editar">
                            <LaunchChannelIcon ch={(channels || []).find((c) => c.id === r.channelId)}/>
                            <span style={{ fontSize: 12.5, color: "var(--text)" }}>
                              {(channels || []).find((c) => c.id === r.channelId)?.name || "—"}
                            </span>
                          </div>
                        ) : (
                          <div className="row" style={{ gap: 7, alignItems: "center" }}>
                            <LaunchChannelIcon ch={activeChannels.find((c) => c.id === r.channelId)}/>
                            <select style={{ ...LAUNCH_CELL_STYLE, cursor: "pointer" }}
                              value={r.channelId}
                              onChange={(e) => { updateRow(r.id, "channelId", e.target.value); updateRow(r.id, "avatarId", null); loadChannelAvatars(e.target.value); }}>
                              <option value="">Selecciona canal…</option>
                              {activeChannels.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
                            </select>
                            {r.channelId && (channelAvatars[r.channelId] || []).length >= 1 && (
                              <span style={{ position: "relative", flexShrink: 0 }}>
                                <button className="icon-btn" style={{ width: 22, height: 22 }}
                                  title="Elegir foto de avatar para este vídeo"
                                  onClick={(e) => { e.stopPropagation(); setAvatarPickerRow(avatarPickerRow === r.id ? null : r.id); }}>
                                  <IconUser size={11}/>
                                </button>
                                {avatarPickerRow === r.id && (
                                  <div className="card-options" onClick={(e) => e.stopPropagation()} style={{
                                    left: 0, top: 26, padding: 6, minWidth: 190,
                                    display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6,
                                  }}>
                                    {(channelAvatars[r.channelId] || []).map((av) => (
                                      <button key={av.id} onClick={() => { updateRow(r.id, "avatarId", av.is_default ? null : av.id); setAvatarPickerRow(null); }}
                                        title={av.is_default ? "Por defecto" : "Usar esta foto"}
                                        style={{
                                          padding: 0, border: "2px solid " + ((r.avatarId ? r.avatarId === av.id : av.is_default) ? "var(--accent)" : "transparent"),
                                          borderRadius: 6, overflow: "hidden", cursor: "pointer", background: "none",
                                        }}>
                                        <img src={av.url} style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", display: "block" }}/>
                                      </button>
                                    ))}
                                  </div>
                                )}
                              </span>
                            )}
                          </div>
                        )}
                      </td>
                      <td style={{ ...td(false), whiteSpace: "nowrap" }}>
                        <div className="row" style={{ gap: 5, alignItems: "center" }} title="Se asigna automáticamente, como en Producción">
                          <span style={{ fontSize: 12, color: "var(--text-4)" }}>
                            {(() => {
                              const job = jobForRow(r);
                              const credits = job && job.creditCost ? job.creditCost : null;
                              if (credits == null) return "—";
                              return `$${(credits * 0.005).toFixed(2)}`;
                            })()}
                          </span>
                        </div>
                      </td>
                      <td style={{ ...td(true), whiteSpace: "nowrap" }}>
                        {(() => {
                          const job = jobForRow(r);
                          // Si hay jobId pero el job ya no aparece en la lista del servidor,
                          // es que se borró (a mano o por la limpieza automática a las 48h) —
                          // no está "procesando", está huérfano: se trata igual que terminado
                          // para no dejar la fila bloqueada ni el borrado deshabilitado.
                          const orphaned = !!r.jobId && !job;
                          const finished = !!r.jobId && (orphaned || ["completed", "failed", "cancelled"].includes(job._rawStatus));
                          const midGeneration = !!r.jobId && !finished;
                          const canPlay = (!r.jobId && isRowReady(r)) || finished; // 1ª vez, o regenerar tras terminar
                          const busy = !!launching[r.id];
                          const downloadReady = !!(r.jobId && job && job._rawStatus === "completed");
                          // Remontar solo necesita que ya haya contenido generado (audio + imágenes/clips) —
                          // no hace falta que el montaje haya terminado bien, así que también se permite
                          // con el vídeo en 'failed' (p.ej. si el montaje se cortó o falló tras generar todo).
                          const reassembleReady = !!(r.jobId && job && ["completed", "failed"].includes(job._rawStatus));
                          return (
                            <div className="row" style={{ gap: 4 }}>
                              <button className="icon-btn" disabled={!canPlay || busy}
                                style={{
                                  width: 28, height: 28,
                                  opacity: (canPlay && !busy) ? 1 : 0.4,
                                  cursor: (canPlay && !busy) ? "pointer" : "default",
                                }}
                                title={job && job._rawStatus === "failed" ? "Reintentar (reanuda si es posible, si no genera de nuevo)"
                                  : finished ? "Generar de nuevo (vídeo nuevo, con el mismo título/narración/canal)"
                                  : (midGeneration ? "Ya se está generando" : "Generar vídeo")}
                                onClick={() => {
                                  if (job && job._rawStatus === "failed") { retryOrRegenerateRow(r); return; }
                                  if (finished && !confirm("¿Generar de nuevo este vídeo? Se creará un vídeo nuevo con el mismo título, narración y canal.")) return;
                                  launchRow(r);
                                }}>
                                <IconChevronRight size={14}/>
                              </button>
                              <button className="icon-btn" disabled={!downloadReady}
                                style={{ width: 28, height: 28, opacity: downloadReady ? 1 : 0.4, cursor: downloadReady ? "pointer" : "default" }}
                                title="Descargar"
                                onClick={() => downloadReady && _triggerDownload(`/api/videos/jobs/${r.jobId}/download`)}>
                                <IconDownload size={13}/>
                              </button>
                              <button className="icon-btn" disabled={midGeneration} onClick={() => deleteRow(r)}
                                style={{ width: 28, height: 28, color: "var(--red)", opacity: midGeneration ? 0.4 : 1, cursor: midGeneration ? "default" : "pointer" }}
                                title={midGeneration ? "Se está generando — espera a que termine para poder borrarlo" : (r.jobId ? "Eliminar vídeo del servidor" : "Borrar")}>
                                <IconTrash size={13}/>
                              </button>
                              <div style={{ position: "relative" }}>
                                <button className="icon-btn" disabled={!r.jobId}
                                  style={{ width: 28, height: 28, opacity: r.jobId ? 1 : 0.4, cursor: r.jobId ? "pointer" : "default" }}
                                  title="Más opciones"
                                  onClick={(e) => { e.stopPropagation(); setMenuForRow(menuForRow === r.id ? null : r.id); }}>
                                  <IconMore size={13}/>
                                </button>
                                {menuForRow === r.id && (
                                  <div className="card-options" onClick={(e) => e.stopPropagation()} style={{ right: 0, top: 32, minWidth: 200, padding: 4 }}>
                                    {midGeneration && (
                                      <button onClick={() => { cancelRow(r); setMenuForRow(null); }} style={{
                                        width: "100%", background: "transparent", border: "none", color: "var(--red)",
                                        fontSize: 12.5, padding: "8px 10px", borderRadius: 7, cursor: "pointer",
                                        display: "flex", alignItems: "center", gap: 10, textAlign: "left",
                                      }}>
                                        <IconX size={13}/> Cancelar generación
                                      </button>
                                    )}
                                    <button onClick={() => { setGalleryJobId(r.jobId); setMenuForRow(null); }} style={{
                                      width: "100%", background: "transparent", border: "none", color: "var(--text)",
                                      fontSize: 12.5, padding: "8px 10px", borderRadius: 7, cursor: "pointer",
                                      display: "flex", alignItems: "center", gap: 10, textAlign: "left",
                                    }}>
                                      <IconImage size={13}/> Ver imágenes
                                    </button>
                                    <button onClick={() => { _triggerDownload(`/api/videos/jobs/${r.jobId}/transcript`); setMenuForRow(null); }} style={{
                                      width: "100%", background: "transparent", border: "none", color: "var(--text)",
                                      fontSize: 12.5, padding: "8px 10px", borderRadius: 7, cursor: "pointer",
                                      display: "flex", alignItems: "center", gap: 10, textAlign: "left",
                                    }}>
                                      <IconDownload size={13}/> Descargar transcripción
                                    </button>
                                    <button onClick={() => { _triggerDownload(`/api/videos/jobs/${r.jobId}/audio`); setMenuForRow(null); }} style={{
                                      width: "100%", background: "transparent", border: "none", color: "var(--text)",
                                      fontSize: 12.5, padding: "8px 10px", borderRadius: 7, cursor: "pointer",
                                      display: "flex", alignItems: "center", gap: 10, textAlign: "left",
                                    }}>
                                      <IconDownload size={13}/> Descargar audio
                                    </button>
                                    <button disabled={!reassembleReady}
                                      onClick={() => { if (!reassembleReady) return; setReassembleRowJobId(r.jobId); setMenuForRow(null); }}
                                      title={reassembleReady ? "Vuelve a montar el vídeo con el audio/imágenes/clips ya generados, sin gastar créditos de nuevo" : "Solo disponible cuando ya hay contenido generado (vídeo completado o fallido)"}
                                      style={{
                                        width: "100%", background: "transparent", border: "none",
                                        color: reassembleReady ? "var(--text)" : "var(--text-4)",
                                        fontSize: 12.5, padding: "8px 10px", borderRadius: 7,
                                        cursor: reassembleReady ? "pointer" : "default",
                                        display: "flex", alignItems: "center", gap: 10, textAlign: "left",
                                      }}>
                                      <IconVideo size={13}/> Remontar vídeo
                                    </button>
                                  </div>
                                )}
                              </div>
                            </div>
                          );
                        })()}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          {!rows.some((r) => r.title.trim() === "") && (
            <div style={{ padding: "10px 14px", borderTop: "1px solid var(--border)", textAlign: "center" }}>
              <button className="btn" style={{ fontSize: 12.5 }}
                onClick={() => setRows((prev) => [...prev, makeEmptyRow()])}>
                <IconPlus size={12}/> Añadir vídeo
              </button>
            </div>
          )}
          <div style={{
            padding: "12px 14px", borderTop: "1px solid var(--border)",
            fontSize: 11.5, color: "var(--text-4)", textAlign: "center",
          }}>
            Haz clic en una celda para rellenarla — al escribir el título se añade una fila nueva automáticamente.
            Estado y Coste se asignan solos. Cuando el título, la narración y el canal estén completos, usa <IconPlay size={10} style={{ verticalAlign: "-1px" }}/> para generar el vídeo:
            se creará el guion a partir de la narración, y cuando el Estado pida revisión podrás abrirla haciendo clic ahí mismo (esta hoja no se mezcla con Producción).
          </div>
        </div>
      </div>

      {narrationRowId && (
        <NarrationModal
          row={rows.find((r) => r.id === narrationRowId)}
          onClose={() => setNarrationRowId(null)}
          onSave={(text, useOwn, maintainContext) => {
            updateRow(narrationRowId, "narration", text);
            updateRow(narrationRowId, "useOwnNarration", useOwn);
            updateRow(narrationRowId, "maintainObjectContext", maintainContext);
          }}
        />
      )}

      {reviewJobId && (() => {
        const job = (jobs || []).find((j) => j.id === reviewJobId);
        if (!job) return null;
        const reviewType = job._rawStatus === "pending_approval" ? "script" : "images";
        return (
          <ReviewModal
            video={{ ...job, _reviewType: reviewType }}
            channels={channels}
            onClose={() => setReviewJobId(null)}
            onApproved={() => { setReviewJobId(null); if (fetchJobs) fetchJobs(); }}
          />
        );
      })()}

      {galleryJobId && (
        <ImageGalleryModal
          video={{ id: galleryJobId }}
          onClose={() => setGalleryJobId(null)}
        />
      )}

      {reassembleRowJobId && (() => {
        const job = (jobs || []).find((j) => j.id === reassembleRowJobId);
        return (
          <ReassembleModal
            video={{ id: reassembleRowJobId, title: job ? job.title : "" }}
            onClose={() => setReassembleRowJobId(null)}
            onDone={() => { setReassembleRowJobId(null); if (fetchJobs) fetchJobs(); }}
          />
        );
      })()}
    </div>
  );
}

Object.assign(window, { LaunchListTab });