/* Tab: Producción v16 */

function IconKanbanCols(p) {
  const { size = 18, stroke = 1.6 } = p || {};
  return (
    <svg className="icon" viewBox="0 0 24 24" width={size} height={size}
      fill="none" stroke="currentColor" strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="4" width="5.5" height="16" rx="1.5"/>
      <rect x="9.5" y="4" width="5.5" height="10" rx="1.5"/>
      <rect x="16" y="4" width="5.5" height="13" rx="1.5"/>
    </svg>
  );
}

function _triggerDownload(url) {
  const a = document.createElement("a");
  a.href = url;
  a.download = "";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

function HistoryTab({ videos, channels, refreshJobs }) {
  const [view, setView] = React.useState("grid");
  const [sort, setSort] = React.useState("recent");
  const [reviewVideo, setReviewVideo] = React.useState(null);
  const [galleryVideo, setGalleryVideo] = React.useState(null);
  const [menuFor, setMenuFor] = React.useState(null);
  const [reassembleVideo, setReassembleVideo] = React.useState(null);
  const [channelFilterOpen, setChannelFilterOpen] = React.useState(false);
  const [channelFilterIds, setChannelFilterIds] = React.useState([]); // [] = todos

  React.useEffect(() => {
    if (!channelFilterOpen) return;
    function onDoc() { setChannelFilterOpen(false); }
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, [channelFilterOpen]);

  function toggleChannelFilter(id) {
    setChannelFilterIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
  }

  // 'Creación en lista' se revisa/gestiona en su propia pestaña, no aquí — pero los
  // vídeos lanzados desde 'Video Avatar' → Modo Creación (misma pipeline, launch_broll)
  // sí se revisan en 'Producción', como el resto de 'Video Avatar'.
  let list = videos.filter((v) => !v.launchBroll || v.videoAvatarCreacion);
  if (channelFilterIds.length > 0) list = list.filter((v) => channelFilterIds.includes(v.channelId));
  if (sort === "duration") list = [...list].sort((a, b) => b.durationSec - a.durationSec);

  async function handleAction(actionId, v) {
    switch (actionId) {
      case "dl_zip":
        _triggerDownload(`/api/videos/jobs/${v.id}/files/zip`);
        break;
      case "dl_premiere":
        _triggerDownload(`/api/videos/jobs/${v.id}/export-premiere`);
        break;
      case "dl_video":
        _triggerDownload(`/api/videos/jobs/${v.id}/download`);
        break;
      case "dl_audio":
        _triggerDownload(`/api/videos/jobs/${v.id}/files/audio`);
        break;
      case "dl_script":
        _triggerDownload(`/api/videos/jobs/${v.id}/files/script`);
        break;
      case "dl_prompts":
        _triggerDownload(`/api/videos/jobs/${v.id}/files/prompts`);
        break;
      case "view_imgs":
        setMenuFor(null); setGalleryVideo(v);
        break;
      case "retry":
        await fetch(`/api/videos/jobs/${v.id}/retry`, { method: "POST", credentials: "same-origin" });
        if (refreshJobs) refreshJobs();
        break;
      case "cancel":
        if (!confirm("¿Cancelar este job? El proceso se detendrá.")) return;
        try {
          const cr = await fetch(`/api/videos/jobs/${v.id}/cancel`, { method: "POST", credentials: "same-origin" });
          if (!cr.ok) {
            const err = await cr.json().catch(() => ({}));
            alert("No se pudo cancelar: " + (err.detail || cr.status));
          }
        } catch (e) { alert("Error de red al cancelar"); }
        if (refreshJobs) refreshJobs();
        break;
      case "reassemble":
        setMenuFor(null);
        setReassembleVideo(v);
        break;
      case "delete":
        if (!confirm("¿Eliminar este job y sus archivos del servidor?")) return;
        await fetch(`/api/videos/jobs/${v.id}`, { method: "DELETE", credentials: "same-origin" });
        if (refreshJobs) refreshJobs();
        break;
    }
  }

  // Al cerrar el menú si se hace click fuera
  React.useEffect(() => {
    function onClick() { setMenuFor(null); }
    if (menuFor) {
      document.addEventListener("click", onClick);
      return () => document.removeEventListener("click", onClick);
    }
  }, [menuFor]);

  return (
    <div className="tab-enter">
      {/* 48h notice */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "9px 14px", borderRadius: 10, marginBottom: 14,
        background: "rgba(251,191,36,0.07)", border: "1px solid rgba(251,191,36,0.22)",
        fontSize: 12, color: "rgba(251,191,36,0.85)",
      }}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14, flexShrink: 0 }}>
          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
        </svg>
        <span>Los vídeos se eliminan automáticamente a las <strong>48 horas</strong>. Descarga el ZIP para conservarlos en tu almacenamiento local.</span>
      </div>

      {/* Toolbar */}
      <div className="row" style={{ marginBottom: 16, gap: 10, flexWrap: "wrap" }}>
        <div style={{ position: "relative" }}>
          <button className="btn btn-ghost" onClick={(e) => { e.stopPropagation(); setChannelFilterOpen((o) => !o); }}>
            <IconFilter size={14}/> Filtrar por canal
            {channelFilterIds.length > 0 && <span className="badge">{channelFilterIds.length}</span>}
            <IconChevronDown size={12}/>
          </button>
          {channelFilterOpen && (
            <div className="card-options" onClick={(e) => e.stopPropagation()} style={{
              left: 0, top: 36, minWidth: 220, maxHeight: 320, overflowY: "auto", padding: 4, zIndex: 50,
            }}>
              <button onClick={() => setChannelFilterIds([])} style={{
                width: "100%", background: "transparent", border: "none", color: "var(--text-3)",
                fontSize: 12, padding: "7px 9px", borderRadius: 7, cursor: "pointer", textAlign: "left",
              }}>Mostrar todos</button>
              {(channels || []).map((c) => (
                <label key={c.id} style={{
                  width: "100%", display: "flex", alignItems: "center", gap: 8,
                  padding: "7px 9px", borderRadius: 7, cursor: "pointer", fontSize: 12.5, color: "var(--text)",
                }}>
                  <input type="checkbox" checked={channelFilterIds.includes(c.id)} onChange={() => toggleChannelFilter(c.id)}/>
                  <span style={{
                    width: 16, height: 16, borderRadius: 4, background: c.tint, flex: "0 0 16px",
                    display: "grid", placeItems: "center", fontSize: 7.5, fontWeight: 700, color: "#00000099", overflow: "hidden",
                  }}>
                    {(c.logo || c.avatarUrl) ? <img src={c.logo || c.avatarUrl} style={{ width: "100%", height: "100%", objectFit: "cover" }}/> : c.initials}
                  </span>
                  {c.name}
                </label>
              ))}
            </div>
          )}
        </div>

        <div style={{ marginLeft: "auto" }} className="row">
          <button className="btn btn-ghost" onClick={() => setSort(sort === "recent" ? "duration" : "recent")}>
            <IconFilter size={14}/> {sort === "recent" ? "Más recientes" : "Más largos"}
            <IconChevronDown size={12}/>
          </button>
          <div className="segmented">
            <button className={view === "grid" ? "on" : ""} onClick={() => setView("grid")}><IconGrid size={13}/></button>
            <button className={view === "list" ? "on" : ""} onClick={() => setView("list")}><IconList size={13}/></button>
            <button className={view === "kanban" ? "on" : ""} onClick={() => setView("kanban")}><IconKanbanCols size={13}/></button>
          </div>
        </div>
      </div>

      {/* Grid view */}
      {view === "grid" && (
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
          gap: 16,
        }}>
          {list.map((v) => (
            <VideoCard key={v.id} v={v} channels={channels}
              menuOpen={menuFor === v.id}
              onMenu={(e) => { e.stopPropagation(); setMenuFor(menuFor === v.id ? null : v.id); }}
              onReview={(type) => setReviewVideo({ ...v, _reviewType: type })}
              onAction={handleAction}/>
          ))}
        </div>
      )}

      {/* List view */}
      {view === "list" && (
        <div className="card" style={{ padding: 0 }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "160px minmax(0,1fr) 120px 100px 90px 60px",
            padding: "12px 16px", borderBottom: "1px solid var(--border)",
            fontSize: 11, color: "var(--text-4)", fontWeight: 600, letterSpacing: "0.05em",
          }}>
            <span>VIDEO</span>
            <span>TÍTULO</span>
            <span>CANAL</span>
            <span>ESTADO</span>
            <span style={{ textAlign: "right" }}>DURACIÓN</span>
            <span></span>
          </div>
          {list.map((v) => (
            <VideoRow key={v.id} v={v} channels={channels}
              menuOpen={menuFor === v.id}
              onMenu={(e) => { e.stopPropagation(); setMenuFor(menuFor === v.id ? null : v.id); }}
              onReview={(type) => setReviewVideo({ ...v, _reviewType: type })}
              onAction={handleAction}/>
          ))}
        </div>
      )}

      {/* Kanban view */}
      {view === "kanban" && (
        <KanbanBoard list={list} channels={channels}
          menuFor={menuFor}
          onMenu={(id) => (e) => { e.stopPropagation(); setMenuFor(menuFor === id ? null : id); }}
          onReview={(v, type) => setReviewVideo({ ...v, _reviewType: type })}
          onAction={handleAction}/>
      )}

      {list.length === 0 && (
        <div className="card card-pad" style={{ textAlign: "center", padding: 60 }}>
          <div style={{
            width: 48, height: 48, margin: "0 auto 12px",
            borderRadius: 12, background: "var(--bg-card-2)",
            display: "grid", placeItems: "center", color: "var(--text-4)",
          }}>
            <IconVideo size={20}/>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Sin resultados</div>
          <div className="help" style={{ marginTop: 4 }}>Prueba con otros filtros o crea tu primer video.</div>
        </div>
      )}

      {reviewVideo && (
        <ReviewModal video={reviewVideo} channels={channels}
          onClose={() => setReviewVideo(null)}
          onApproved={() => { setReviewVideo(null); if (refreshJobs) refreshJobs(); }}/>
      )}
      {galleryVideo && (
        <ImageGalleryModal video={galleryVideo} onClose={() => setGalleryVideo(null)}/>
      )}
      {reassembleVideo && (
        <ReassembleModal video={reassembleVideo}
          onClose={() => setReassembleVideo(null)}
          onDone={() => { setReassembleVideo(null); if (refreshJobs) refreshJobs(); }}/>
      )}
    </div>
  );
}

/* ========== Vista Kanban (columnas = canales, filas = estados) ========== */

const KANBAN_GROUPS = [
  { key: "review",  label: "Esperando revisión", match: (v) => ["pending_approval", "pending_image_approval", "pending_final_approval"].includes(v._rawStatus) },
  { key: "active",  label: "Procesando",         match: (v) => ["queued", "queued_resume", "queued_render", "pending", "processing"].includes(v._rawStatus) },
  { key: "ready",   label: "Listo",              match: (v) => v.status === "ready" },
  { key: "failed",  label: "Fallido",            match: (v) => v.status === "failed" },
];

function KanbanBoard({ list, channels, menuFor, onMenu, onReview, onAction }) {
  const activeChannels = channels.filter((c) => c.active !== false);
  const knownIds = new Set(activeChannels.map((c) => c.id));
  const orphanVideos = list.filter((v) => !knownIds.has(v.channelId));

  const columns = activeChannels.map((ch) => ({
    channel: ch,
    videos: list.filter((v) => v.channelId === ch.id),
  }));
  if (orphanVideos.length > 0) {
    columns.push({ channel: null, videos: orphanVideos });
  }

  if (columns.length === 0) {
    return (
      <div className="card card-pad" style={{ textAlign: "center", padding: 60 }}>
        <div className="help">Crea un canal para empezar a ver el tablero Kanban.</div>
      </div>
    );
  }

  return (
    <div style={{ display: "flex", gap: 14, overflowX: "auto", paddingBottom: 8, alignItems: "flex-start" }}>
      {columns.map((col) => (
        <KanbanColumn key={col.channel ? col.channel.id : "_orphan"} channel={col.channel} videos={col.videos}
          menuFor={menuFor} onMenu={onMenu} onReview={onReview} onAction={onAction}/>
      ))}
    </div>
  );
}

function KanbanColumn({ channel, videos, menuFor, onMenu, onReview, onAction }) {
  return (
    <div style={{
      flex: "0 0 300px", width: 300,
      background: "var(--bg-card-2)", border: "1px solid var(--border)",
      borderRadius: 12, display: "flex", flexDirection: "column",
      maxHeight: "calc(100vh - 230px)",
    }}>
      <div className="row" style={{
        gap: 8, padding: "12px 12px", borderBottom: "1px solid var(--border)", flex: "0 0 auto",
      }}>
        <span style={{
          width: 20, height: 20, borderRadius: 5, background: channel ? channel.tint : "var(--border-strong)",
          display: "grid", placeItems: "center", fontSize: 9, fontWeight: 700, color: "#00000099",
          overflow: "hidden", flex: "0 0 20px",
        }}>
          {channel && channel.logo ? <img src={channel.logo} style={{ width: "100%", height: "100%", objectFit: "cover" }}/> : (channel ? channel.initials : "?")}
        </span>
        <span className="grow" style={{ fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {channel ? channel.name : "Sin canal"}
        </span>
        <span className="pill" style={{ fontSize: 10.5 }}>{videos.length}</span>
      </div>

      <div style={{ overflowY: "auto", padding: 10, display: "flex", flexDirection: "column", gap: 14 }}>
        {videos.length === 0 && (
          <div style={{ textAlign: "center", padding: "20px 8px", color: "var(--text-4)", fontSize: 12 }}>
            Sin vídeos
          </div>
        )}
        {KANBAN_GROUPS.map((g) => {
          const groupVideos = videos.filter(g.match);
          if (groupVideos.length === 0) return null;
          return (
            <div key={g.key}>
              <div style={{
                fontSize: 10.5, letterSpacing: "0.06em", fontWeight: 700,
                color: "var(--text-4)", marginBottom: 8, display: "flex", alignItems: "center", gap: 6,
              }}>
                {g.label.toUpperCase()}
                <span style={{ opacity: 0.7 }}>· {groupVideos.length}</span>
              </div>
              <div className="col" style={{ gap: 10 }}>
                {groupVideos.map((v) => (
                  <VideoCard key={v.id} v={v} channels={channel ? [channel] : []}
                    menuOpen={menuFor === v.id}
                    onMenu={onMenu(v.id)}
                    onReview={(type) => onReview(v, type)}
                    onAction={onAction}/>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ========== Menú de acciones ========== */
const ACTION_ITEMS = [
  { id: "dl_zip",      label: "Descargar todo (.zip)",        Icon: IconDownload },
  { id: "dl_premiere", label: "Exportar a Premiere Pro",      Icon: IconClap,     onlyReady: true },
  { id: "divider" },
  { id: "dl_video",    label: "Descargar vídeo",              Icon: IconDownload },
  { id: "dl_audio",    label: "Descargar audio",              Icon: IconWave },
  { id: "dl_script",   label: "Descargar guion",              Icon: IconScript },
  { id: "dl_prompts",  label: "Descargar prompts",            Icon: IconScript },
  { id: "view_imgs",   label: "Ver imágenes",                 Icon: IconImage },
  { id: "reassemble",  label: "Remontar vídeo",               Icon: IconVideo },
  { id: "divider" },
  { id: "retry",       label: "Reintentar",                   Icon: IconSparkle,  onlyFailed: true },
  { id: "cancel",      label: "Cancelar (forzar error)",      Icon: IconX,        onlyActive: true, danger: true },
  { id: "delete",      label: "Eliminar del servidor",        Icon: IconTrash,    danger: true },
];

function ActionMenu({ onAction, style, isFailed, isActive, isReady, excludeIds }) {
  const items = ACTION_ITEMS.filter((it) => {
    if (excludeIds && excludeIds.includes(it.id)) return false;
    if (it.onlyFailed && !isFailed) return false;
    if (it.onlyActive && !isActive) return false;
    if (it.onlyReady  && !isReady)  return false;
    return true;
  });
  return (
    <div className="card-options" onClick={(e) => e.stopPropagation()} style={{
      right: 8, top: 32,
      minWidth: 220,
      padding: 4,
      ...style,
    }}>
      {items.map((it, i) => it.id === "divider" ? (
        <div key={i} style={{ height: 1, background: "var(--border)", margin: "4px 6px" }}/>
      ) : (
        <button key={it.id} onClick={() => onAction(it.id)} style={{
          width: "100%", background: "transparent", border: "none",
          color: it.danger ? "#fca5a5" : "var(--text)",
          fontSize: 12.5, padding: "8px 10px",
          borderRadius: 7, cursor: "pointer",
          display: "flex", alignItems: "center", gap: 10,
          textAlign: "left",
        }}
          onMouseEnter={(e) => e.currentTarget.style.background = it.danger ? "rgba(248,113,113,0.1)" : "var(--bg-hover)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
          <it.Icon size={13}/> {it.label}
        </button>
      ))}
    </div>
  );
}

const THUMB_STATUS_MAP = {
  ready:      { bg: "rgba(22,90,50,0.55)",  border: "rgba(74,222,128,0.4)",  fg: "#86efac", label: "Listo",       Icon: IconCheck },
  processing: { bg: "rgba(66,40,140,0.55)", border: "rgba(167,139,250,0.4)", fg: "#c4b5fd", label: "Procesando", Icon: IconClock },
  queued:     { bg: "rgba(120,80,10,0.55)", border: "rgba(251,191,36,0.4)",  fg: "#fde68a", label: "En cola",      Icon: IconClock },
  draft:      { bg: "rgba(40,40,46,0.6)",   border: "rgba(255,255,255,0.15)", fg: "#d4d4d8", label: "Borrador",     Icon: IconEdit },
  failed:     { bg: "rgba(110,25,25,0.55)", border: "rgba(248,113,113,0.4)", fg: "#fca5a5", label: "Fallido",     Icon: IconX },
};

function Thumbnail({ v, size = "normal", ch, menuOpen, onMenu, onAction, isReady, roundBottom = true }) {
  const chSrc = ch ? (ch.logo || ch.avatarUrl) : null;
  const h = size === "list" ? 60 : 158;
  return (
    <div style={{
      position: "relative",
      aspectRatio: "16/9",
      height: size === "list" ? h : undefined,
      width: size === "list" ? h * 16/9 : "100%",
      flex: size === "list" ? `0 0 ${h * 16/9}px` : undefined,
    }}>
    <div style={{
      position: "absolute", inset: 0,
      borderRadius: size === "list" ? 7 : `14px 14px ${roundBottom ? "14px 14px" : "0 0"}`,
      overflow: "hidden",
      background: v.thumbBg,
    }}>
      {v.thumbnailUrl ? (
        <img src={v.thumbnailUrl} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
      ) : (
        <>
          <div style={{ position: "absolute", inset: 0,
            background: "repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px)" }}/>
          <div style={{ position: "absolute", inset: 0,
            background: `radial-gradient(circle at ${v.glowX}% ${v.glowY}%, ${v.glow}77 0%, transparent 55%)` }}/>
          {size !== "list" && (
            <div style={{
              position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -60%)",
              fontSize: 60, fontWeight: 900, fontStyle: "italic",
              color: "rgba(255,255,255,0.08)", letterSpacing: "-0.05em",
            }}>{v.glyph}</div>
          )}
        </>
      )}
      {size !== "list" && (
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0, height: "80%",
          background: "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, transparent 100%)",
          pointerEvents: "none",
        }}/>
      )}
      {size !== "list" && (
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "20px 60px 10px 10px",
          zIndex: 2, pointerEvents: "none",
        }}>
          <div className="row" style={{ gap: 6, marginBottom: 4 }}>
            <span style={{
              width: 16, height: 16, borderRadius: 5, background: ch ? ch.tint : "#7c5cff",
              display: "grid", placeItems: "center", fontSize: 7.5, fontWeight: 700, color: "#00000099",
              flex: "0 0 16px", overflow: "hidden",
            }}>{chSrc ? <img src={chSrc} style={{ width: "100%", height: "100%", objectFit: "cover" }}/> : (ch ? ch.initials : "?")}</span>
            <span style={{
              fontSize: 10.5, color: "rgba(255,255,255,0.75)", fontWeight: 500,
              textShadow: "0 1px 3px rgba(0,0,0,0.6)",
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
            }}>{ch ? ch.name : v.channelId}</span>
          </div>
          <div style={{
            fontSize: 11, fontWeight: 700, color: "white",
            textShadow: "0 1px 3px rgba(0,0,0,0.6)",
            lineHeight: 1.3, letterSpacing: "-0.005em",
            display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
          }}>{v.title}</div>
        </div>
      )}
      {size !== "list" && (() => {
        const s = THUMB_STATUS_MAP[v.status] || THUMB_STATUS_MAP.draft;
        return (
          <span style={{
            position: "absolute", top: 8, left: 8, zIndex: 2, pointerEvents: "none",
            display: "inline-flex", alignItems: "center", gap: 5,
            background: s.bg, color: s.fg, border: `1px solid ${s.border}`,
            fontSize: 11.5, fontWeight: 700,
            padding: "3px 9px 3px 7px", borderRadius: 999,
            backdropFilter: "blur(4px)",
          }}><s.Icon size={12}/> {s.label}</span>
        );
      })()}
      {size !== "list" && v.expiresIn != null ? (
        <span style={{
          position: "absolute", top: 8, right: 8, zIndex: 2, pointerEvents: "none",
          display: "inline-flex", alignItems: "center", gap: 4,
          background: "rgba(0,0,0,0.7)", color: v.expiresIn <= 6 ? "#fca5a5" : "white",
          fontSize: 11.5, fontWeight: 600,
          padding: "4px 10px 4px 8px", borderRadius: 999,
          backdropFilter: "blur(4px)",
        }}><IconClock size={12}/> {v.expiresIn}h</span>
      ) : (
        <span style={{
          position: "absolute", top: 8, right: 8, zIndex: 2, pointerEvents: "none",
          background: "rgba(0,0,0,0.7)", color: "white",
          fontFamily: "var(--font-mono)", fontSize: 10,
          padding: "2px 6px", borderRadius: 4,
          backdropFilter: "blur(4px)",
        }}>{v.duration}</span>
      )}
      {(v._rawStatus === "processing" || v._rawStatus === "pending") && (
        <div style={{
          position: "absolute", inset: 0,
          background: "rgba(10,10,14,0.7)",
          display: "grid", placeItems: "center",
          backdropFilter: "blur(2px)",
        }}>
          <div style={{ textAlign: "center" }}>
            <div style={{
              width: 28, height: 28, margin: "0 auto 6px",
              borderRadius: "50%",
              border: "2.5px solid rgba(255,255,255,0.15)",
              borderTopColor: "var(--accent-2)",
              animation: "spin 1s linear infinite",
            }}/>
            <div style={{ fontSize: 11, color: "white", fontFamily: "var(--font-mono)" }}>{v.progress}%</div>
          </div>
        </div>
      )}
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
    {size !== "list" && onMenu && (
      <div className="row" style={{ position: "absolute", right: 7, bottom: 7, gap: 5 }}>
        <button disabled={!isReady} style={{
          width: 21, height: 21, padding: 0, lineHeight: 0,
          borderRadius: 999, display: "grid", placeItems: "center",
          background: "transparent", border: "none",
          color: "white",
          opacity: isReady ? 1 : 0.4, cursor: isReady ? "pointer" : "default",
        }}
          title={isReady ? "Descargar vídeo" : "Aún no está listo"}
          onClick={(e) => { e.stopPropagation(); if (isReady) onAction("dl_video", v); }}>
          <IconDownload size={13}/>
        </button>
        <span style={{ position: "relative" }}>
          <button style={{
            width: 21, height: 21, padding: 0, lineHeight: 0,
            borderRadius: 999, display: "grid", placeItems: "center",
            background: "transparent", border: "none",
            color: "white", cursor: "pointer",
          }} onClick={onMenu}>
            <IconMore size={13}/>
          </button>
          {menuOpen && <ActionMenu onAction={(id) => onAction(id, v)} isFailed={v.status === "failed"}
            isActive={["processing", "pending", "pending_approval", "pending_image_approval", "pending_final_approval"].includes(v._rawStatus)}
            isReady={isReady} excludeIds={["dl_video"]} style={{ top: 26 }}/>}
        </span>
      </div>
    )}
    </div>
  );
}

function StatusPill({ status, errorMsg }) {
  const [open, setOpen] = React.useState(false);
  const map = {
    ready:      { cls: "ok",     label: "Listo" },
    queued:     { cls: "warn",   label: "En cola" },
    processing: { cls: "info",   label: "Procesando" },
    draft:      { cls: "warn",   label: "Borrador" },
    failed:     { cls: "danger", label: "Fallido" },
  };
  const s = map[status] || map.draft;

  React.useEffect(() => {
    if (!open) return;
    function onClick() { setOpen(false); }
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, [open]);

  return (
    <span style={{ position: "relative", display: "inline-block" }}>
      <span className={"pill " + s.cls} style={{ fontSize: 10.5, cursor: errorMsg ? "pointer" : "default" }}
        title={errorMsg ? (errorMsg.split("\n")[0] || errorMsg).slice(0, 240) : undefined}
        onClick={errorMsg ? (e) => { e.stopPropagation(); setOpen((v) => !v); } : undefined}>
        {s.label}
      </span>
      {open && errorMsg && (
        <div style={{
          position: "absolute", top: "calc(100% + 6px)", right: 0,
          background: "#0d0a10", border: "1px solid rgba(248,113,113,0.35)",
          borderRadius: 9, padding: "10px 12px",
          fontSize: 11.5, color: "#fca5a5", lineHeight: 1.55,
          whiteSpace: "pre-wrap", wordBreak: "break-word",
          minWidth: 220, maxWidth: 340,
          zIndex: 400, boxShadow: "0 8px 28px rgba(0,0,0,0.7)",
        }} onClick={(e) => e.stopPropagation()}>
          {errorMsg}
        </div>
      )}
    </span>
  );
}

function CostBreakdownBadge({ jobId, align = "left" }) {
  const [open, setOpen] = React.useState(false);
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  function load() {
    if (data || loading) return;
    setLoading(true);
    fetch(`/api/videos/jobs/${jobId}/costs`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setData(d))
      .catch(() => setData({ total: 0, rows: [] }))
      .finally(() => setLoading(false));
  }

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

  React.useEffect(() => {
    if (!open) return;
    function onClick() { setOpen(false); }
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, [open]);

  const grouped = React.useMemo(() => {
    if (!data) return [];
    const m = {};
    for (const r of data.rows) {
      if (!m[r.provider]) m[r.provider] = { provider: r.provider, total: 0, calls: 0 };
      m[r.provider].total += r.cost_usd || 0;
      m[r.provider].calls += 1;
    }
    return Object.values(m).sort((a, b) => b.total - a.total);
  }, [data]);

  return (
    <span style={{ position: "relative", display: "inline-flex" }} onMouseEnter={load}>
      <span
        style={{ color: "var(--text-4)", fontSize: 10, display: "flex", alignItems: "center", gap: 3, cursor: "pointer" }}
        onClick={(e) => { e.stopPropagation(); load(); setOpen((o) => !o); }}>
        <span style={{ fontWeight: 700, fontFamily: "var(--font-mono)" }}>$</span>
        {data ? data.total.toFixed(3) : "coste"}
      </span>
      {open && (
        <div style={{
          position: "absolute", bottom: "calc(100% + 6px)", [align]: 0,
          background: "#0d0a10", border: "1px solid var(--border-strong)",
          borderRadius: 9, padding: "10px 12px",
          fontSize: 11.5, color: "var(--text-2)", lineHeight: 1.5,
          minWidth: 210, maxWidth: 280,
          zIndex: 400, boxShadow: "0 8px 28px rgba(0,0,0,0.7)",
        }} onClick={(e) => e.stopPropagation()}>
          <div style={{ fontWeight: 600, marginBottom: 6, color: "var(--text)" }}>Desglose de gastos</div>
          {loading && <div style={{ color: "var(--text-4)" }}>Cargando…</div>}
          {!loading && data && data.rows.length === 0 && (
            <div style={{ color: "var(--text-4)" }}>Sin gastos registrados para este vídeo.</div>
          )}
          {!loading && grouped.length > 0 && (
            <div className="col" style={{ gap: 4 }}>
              {grouped.map((g) => (
                <div key={g.provider} className="row" style={{ justifyContent: "space-between", gap: 12 }}>
                  <span>{(typeof COST_PROVIDER_LABELS !== "undefined" && COST_PROVIDER_LABELS[g.provider]) || g.provider}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>${g.total.toFixed(4)}</span>
                </div>
              ))}
              <div className="row" style={{ justifyContent: "space-between", gap: 12, marginTop: 4, paddingTop: 6, borderTop: "1px solid var(--border)" }}>
                <span style={{ fontWeight: 600, color: "var(--text)" }}>Total</span>
                <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--text)" }}>${data.total.toFixed(4)}</span>
              </div>
            </div>
          )}
        </div>
      )}
    </span>
  );
}

function VideoCard({ v, channels, menuOpen, onMenu, onReview, onAction }) {
  const ch = channels.find((c) => c.id === v.channelId);
  const needsScriptReview = v._rawStatus === "pending_approval";
  const needsImageReview = ["pending_image_approval", "pending_final_approval"].includes(v._rawStatus);
  const isFinalReview = v._rawStatus === "pending_final_approval";
  const isFailed = v.status === "failed";
  const isReady  = v.status === "ready";
  const isActive = ["processing", "pending", "pending_approval", "pending_image_approval", "pending_final_approval"].includes(v._rawStatus);
  const hasFooter = needsScriptReview || needsImageReview || isFailed;
  return (
    <div className="card" style={{ padding: 0, transition: "transform 160ms ease, border-color 160ms ease", cursor: "pointer", position: "relative", zIndex: menuOpen ? 10 : 1 }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.borderColor = "var(--border-strong)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.borderColor = "var(--border)"; }}>
      <Thumbnail v={v} ch={ch} menuOpen={menuOpen} onMenu={onMenu} onAction={onAction} isReady={isReady} roundBottom={true}/>
      {hasFooter && (
        <div style={{
          position: "absolute", inset: 0, zIndex: 1, display: "grid", placeItems: "center",
          padding: "0 16px", pointerEvents: "none",
          background: "rgba(10,10,14,0.7)", backdropFilter: "blur(2px)",
          borderRadius: 14,
        }}>
          {needsScriptReview && (
            <button className="btn btn-primary" style={{
              pointerEvents: "auto", fontSize: 12.5, padding: "8px 16px",
              boxShadow: "0 4px 16px rgba(0,0,0,0.5)",
            }} onClick={(e) => { e.stopPropagation(); onReview("script"); }}>
              <IconScript size={13}/> Revisar guion
            </button>
          )}
          {needsImageReview && (
            <button className="btn btn-primary" style={{
              pointerEvents: "auto", fontSize: 12.5, padding: "8px 16px",
              boxShadow: "0 4px 16px rgba(0,0,0,0.5)",
            }} onClick={(e) => { e.stopPropagation(); onReview("images"); }}>
              <IconImage size={13}/> {isFinalReview ? "Revisión final" : "Revisar imágenes"}
            </button>
          )}
          {isFailed && (
            <button className="btn" style={{
              pointerEvents: "auto", fontSize: 12.5, padding: "8px 16px",
              boxShadow: "0 4px 16px rgba(0,0,0,0.5)",
              background: "var(--bg-card)",
              borderColor: "rgba(248,113,113,0.45)", color: "#fca5a5",
            }} onClick={(e) => { e.stopPropagation(); onAction("retry", v); }}>
              <IconSparkle size={13}/> Reintentar
            </button>
          )}
        </div>
      )}
    </div>
  );
}

function VideoRow({ v, channels, menuOpen, onMenu, onReview, onAction }) {
  const ch = channels.find((c) => c.id === v.channelId);
  const needsScriptReview = v._rawStatus === "pending_approval";
  const needsImageReview = ["pending_image_approval", "pending_final_approval"].includes(v._rawStatus);
  const isFinalReview = v._rawStatus === "pending_final_approval";
  const isFailed = v.status === "failed";
  const isReady  = v.status === "ready";
  const isActive = ["processing", "pending", "pending_approval", "pending_image_approval", "pending_final_approval"].includes(v._rawStatus);
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "160px minmax(0,1fr) 120px 100px 90px 60px",
      padding: "10px 16px", borderBottom: "1px solid var(--border)",
      alignItems: "center", cursor: "pointer", position: "relative",
      transition: "background 120ms ease",
      zIndex: menuOpen ? 10 : 1,
    }}
      onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"}
      onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
      <Thumbnail v={v} size="list"/>
      <div style={{ paddingLeft: 14, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          {v.title}
        </div>
        <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 3, fontFamily: "var(--font-mono)" }}>
          {v.ago}
          {needsScriptReview && (
            <button style={{ marginLeft: 10, background: "transparent", border: "none", color: "var(--accent-2)", fontSize: 11, cursor: "pointer", fontFamily: "var(--font-mono)", textDecoration: "underline" }}
              onClick={(e) => { e.stopPropagation(); onReview("script"); }}>revisar guion</button>
          )}
          {needsImageReview && (
            <button style={{ marginLeft: 10, background: "transparent", border: "none", color: "var(--accent-2)", fontSize: 11, cursor: "pointer", fontFamily: "var(--font-mono)", textDecoration: "underline" }}
              onClick={(e) => { e.stopPropagation(); onReview("images"); }}>{isFinalReview ? "revisión final" : "revisar imágenes"}</button>
          )}
          {isFailed && (
            <button style={{ marginLeft: 10, background: "transparent", border: "none", color: "#fca5a5", fontSize: 11, cursor: "pointer", fontFamily: "var(--font-mono)", textDecoration: "underline" }}
              onClick={(e) => { e.stopPropagation(); onAction("retry", v); }}>reintentar</button>
          )}
        </div>
      </div>
      <div className="row" style={{ gap: 6 }}>
        <span style={{ width: 16, height: 16, borderRadius: 4, background: ch ? ch.tint : "#7c5cff", flex: "0 0 16px" }}/>
        <span style={{ fontSize: 12, color: "var(--text-2)" }}>{ch ? ch.name : v.channelId}</span>
      </div>
      <StatusPill status={v.status} errorMsg={v.error}/>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-3)", textAlign: "right" }}>
        {v.duration}
        {v.creditCost > 0 && (
          <div style={{ fontSize: 10, color: "var(--text-4)", marginTop: 2, display: "flex", alignItems: "center", gap: 3, justifyContent: "flex-end" }}>
            <IconCoin size={10}/> {v.creditCost.toLocaleString()}
          </div>
        )}
        <div style={{ marginTop: 2, display: "flex", justifyContent: "flex-end" }}>
          <CostBreakdownBadge jobId={v.id} align="right"/>
        </div>
        {v.expiresIn != null && (
          <div style={{ fontSize: 10, color: v.expiresIn <= 6 ? "#f87171" : "var(--text-4)", marginTop: 2 }}>
            ⏳ {v.expiresIn}h
          </div>
        )}
      </div>
      <div style={{ position: "relative", justifySelf: "end" }}>
        <button className="icon-btn" style={{ width: 28, height: 28 }} onClick={onMenu}>
          <IconMore size={14}/>
        </button>
        {menuOpen && <ActionMenu onAction={(id) => onAction(id, v)} isFailed={isFailed} isActive={isActive} isReady={isReady}/>}
      </div>
    </div>
  );
}

/* ========== Modal de revisión ========== */

function ReviewModal({ video, channels, onClose, onApproved }) {
  const reviewType = video._reviewType || "script"; // "script" | "images"
  return reviewType === "script"
    ? <ScriptReviewModal video={video} channels={channels} onClose={onClose} onApproved={onApproved}/>
    : <ImagesReviewModal video={video} channels={channels} onClose={onClose} onApproved={onApproved}/>;
}

function ScriptReviewModal({ video, onClose, onApproved }) {
  const [script, setScript] = React.useState("");
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);

  React.useEffect(() => {
    fetch(`/api/videos/jobs/${video.id}/script`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => { if (d.script) setScript(d.script); setLoading(false); })
      .catch(() => setLoading(false));
  }, [video.id]);

  async function approve() {
    setSaving(true);
    await fetch(`/api/videos/jobs/${video.id}/approve`, {
      method: "POST", credentials: "same-origin",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ approved: true, edited_script: script }),
    });
    if (onApproved) onApproved();
  }

  async function reject() {
    if (!confirm("¿Rechazar el guion? El job se marcará como fallido.")) return;
    await fetch(`/api/videos/jobs/${video.id}/approve`, {
      method: "POST", credentials: "same-origin",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ approved: false }),
    });
    if (onApproved) onApproved();
  }

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", display: "grid", placeItems: "center", zIndex: 100, backdropFilter: "blur(6px)", padding: 24 }} onClick={onClose}>
      <div className="card" style={{ width: "100%", maxWidth: 860, maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }} onClick={(e) => e.stopPropagation()}>
        <div className="row" style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", gap: 12 }}>
          <span style={{ width: 28, height: 28, borderRadius: 7, background: "var(--accent-softer)", color: "var(--accent-2)", display: "grid", placeItems: "center", flex: "0 0 28px" }}>
            <IconScript size={15}/>
          </span>
          <div className="grow">
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Revisar guion generado</h3>
            <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>{video.title}</div>
          </div>
          <span className="pill info"><IconClock size={10}/> Esperando aprobación</span>
          <button className="icon-btn" onClick={onClose}>×</button>
        </div>
        <div style={{ flex: 1, minHeight: 0, overflow: "auto", padding: 20 }}>
          {loading ? (
            <div style={{ textAlign: "center", padding: 40, color: "var(--text-4)" }}>Cargando guion…</div>
          ) : (
            <React.Fragment>
              <div className="row" style={{ gap: 14, marginBottom: 8, fontSize: 11.5, color: "var(--text-4)", fontFamily: "var(--font-mono)" }}>
                <span>{(script.trim() ? script.trim().split(/\s+/).length : 0)} palabras</span>
                <span>{script.length} caracteres</span>
              </div>
              <textarea className="textarea" style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 1.7, minHeight: 400, resize: "vertical" }}
                value={script} onChange={(e) => setScript(e.target.value)}/>
            </React.Fragment>
          )}
        </div>
        <div className="row" style={{ padding: "14px 20px", borderTop: "1px solid var(--border)", gap: 10, background: "var(--bg-card-2)" }}>
          <span style={{ fontSize: 12, color: "var(--text-3)" }}>Edita el guion si lo necesitas, luego aprueba para continuar con la generación de imágenes.</span>
          <div className="row" style={{ marginLeft: "auto", gap: 8 }}>
            <button className="btn btn-ghost" onClick={onClose}>Posponer</button>
            <button className="btn" style={{ color: "#fca5a5" }} onClick={reject}>Rechazar</button>
            <button className="btn btn-primary" onClick={approve} disabled={saving || loading}>
              <IconCheck size={13}/> {saving ? "Aprobando…" : "Aprobar guion"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function FileBtn({ icon, label, inputRef, disabled, onChange, accept = "image/*" }) {
  return (
    <label className="btn" style={{ cursor: disabled ? "wait" : "pointer" }}>
      {icon} {label}
      <input ref={inputRef} type="file" accept={accept} style={{ display: "none" }} onChange={onChange} disabled={disabled}/>
    </label>
  );
}

function ImagesReviewModal({ video, onClose, onApproved }) {
  const FREE_REGENS  = 2;
  const MODEL_COSTS  = { v1: 10, v2: 20, pro: 40 };

  const [images, setImages] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [selected, setSelected] = React.useState(0);
  const [regenPrompt, setRegenPrompt] = React.useState("");
  const [regenLoading, setRegenLoading] = React.useState(false);
  const [regenModel, setRegenModel] = React.useState(video.nanobanana_version || "v1");
  const [regenError, setRegenError] = React.useState("");
  const [saving, setSaving] = React.useState(false);
  const [regenStats, setRegenStats] = React.useState({ normal: 0, custom: 0 });
  const [meta, setMeta] = React.useState({});
  const [motionDraft, setMotionDraft] = React.useState("");
  const [clipBusy, setClipBusy] = React.useState(false);

  const isVA = meta.job_mode === "video_avatar";
  const isLaunchBroll = !!meta.launch_broll;
  const canRegenClip = isVA || isLaunchBroll;
  const isFinal = meta.job_status === "pending_final_approval";
  const REGEN_COST = isVA ? 10 : (MODEL_COSTS[regenModel] || 20);

  // Reset per-image state when switching images
  React.useEffect(() => {
    setRegenModel(video.nanobanana_version || "v1");
    setRegenError("");
    setEditFor(null);
  }, [selected]);

  function reloadImages() {
    return fetch(`/api/videos/jobs/${video.id}/images`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => {
        if (d.images) setImages(d.images);
        if (d.regen_stats) setRegenStats(d.regen_stats);
        setMeta({ job_mode: d.job_mode, job_status: d.job_status, launch_broll: d.launch_broll });
        setLoading(false);
        return d;
      })
      .catch(() => setLoading(false));
  }

  React.useEffect(() => { reloadImages(); }, [video.id]);

  // Sincroniza el borrador del motion prompt con el asset seleccionado
  React.useEffect(() => {
    const s = images[selected];
    setMotionDraft(s ? (s.motion_prompt || "") : "");
  }, [selected, images]);

  async function saveAsset(id, patch) {
    setImages((prev) => prev.map((im) => im.id === id ? { ...im, ...patch } : im));
    try {
      await fetch(`/api/videos/jobs/${video.id}/assets`, {
        method: "PUT", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ assets: [{ id, ...patch }] }),
      });
    } catch { /* ignore */ }
  }

  async function regenerateClip(id) {
    const asset = images.find((im) => im.id === id);
    const cost = asset && asset.avatar_kind ? 120 : 84;
    if (!confirm(`Regenerar este clip cuesta ${cost} créditos. ¿Continuar?`)) return;
    setClipBusy(true);
    try {
      if (!asset || !asset.avatar_kind) {
        if (motionDraft) await saveAsset(id, { motion_prompt: motionDraft });
      }
      const r = await fetch(`/api/videos/jobs/${video.id}/regenerate-clip/${id}`, {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ motion_prompt: motionDraft || null }),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) { alert(d.detail || "Error al regenerar el clip"); }
      else if (onApproved) onApproved(); // el job pasa a 'processing'; la vista se refresca
    } finally { setClipBusy(false); }
  }

  const [editFor, setEditFor] = React.useState(null);
  const [replaceLoading, setReplaceLoading] = React.useState(false);
  const replaceInputRef = React.useRef(null);
  const [replaceClipLoading, setReplaceClipLoading] = React.useState(false);
  const replaceClipInputRef = React.useRef(null);

  function downloadImage() {
    if (!sel || sel.media_type === "clip") return;
    const a = document.createElement("a");
    a.href = sel.url;
    a.download = `${sel.id || "imagen"}.png`;
    a.click();
  }

  async function replaceImage(file) {
    if (!file || !sel) return;
    setReplaceLoading(true);
    const fd = new FormData();
    fd.append("file", file);
    try {
      const r = await fetch(`/api/videos/jobs/${video.id}/replace-image/${sel.id}`, {
        method: "POST", credentials: "same-origin", body: fd,
      });
      const d = await r.json();
      if (d.success) {
        const r2 = await fetch(`/api/videos/jobs/${video.id}/images`, { credentials: "same-origin" });
        const d2 = await r2.json();
        if (d2.images) setImages(d2.images);
      }
    } catch { /* ignore */ }
    setReplaceLoading(false);
  }

  async function replaceClip(file) {
    if (!file || !sel) return;
    setReplaceClipLoading(true);
    const fd = new FormData();
    fd.append("file", file);
    try {
      const r = await fetch(`/api/videos/jobs/${video.id}/replace-clip/${sel.id}`, {
        method: "POST", credentials: "same-origin", body: fd,
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) { alert(d.detail || "Error al reemplazar el clip"); }
      else await reloadImages();
    } catch { alert("Error de red al subir el vídeo"); }
    setReplaceClipLoading(false);
  }

  async function regenerate(imageId, prompt) {
    const isCustom = !!prompt;
    const usedCount = isCustom ? regenStats.custom : regenStats.normal;
    if (usedCount >= FREE_REGENS) {
      const ok = confirm(
        `Has usado las ${FREE_REGENS} regeneraciones gratuitas para esta opción.\n` +
        `Esta regeneración costará ${REGEN_COST} créditos. ¿Continuar?`
      );
      if (!ok) return;
    }
    setRegenLoading(true);
    setRegenError("");
    try {
      const res = await fetch(`/api/videos/jobs/${video.id}/regenerate-image/${imageId}`, {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ custom_prompt: prompt || null, model_version: regenModel }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        setRegenError(err.detail || `Error ${res.status} — el modelo rechazó el contenido (política de uso). Prueba con v1.`);
      } else {
        const data = await res.json();
        // Use server-returned stats when available; otherwise increment locally
        if (data.regen_stats) {
          setRegenStats(data.regen_stats);
        } else {
          setRegenStats(prev => ({
            normal: isCustom ? prev.normal : prev.normal + 1,
            custom: isCustom ? prev.custom + 1 : prev.custom,
          }));
        }
        const r2 = await fetch(`/api/videos/jobs/${video.id}/images`, { credentials: "same-origin" });
        const d2 = await r2.json();
        if (d2.images) setImages(d2.images);
        setEditFor(null);
      }
    } catch (e) {
      setRegenError(String(e));
    }
    setRegenLoading(false);
  }

  async function approve() {
    setSaving(true);
    const endpoint = isFinal ? "approve-final" : "approve-images";
    await fetch(`/api/videos/jobs/${video.id}/${endpoint}`, {
      method: "POST", credentials: "same-origin",
    });
    if (onApproved) onApproved();
  }

  const sel = images[selected];
  const errorCount = images.filter(img => img.error).length;

  return (
    <div className="rt-overlay" style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", display: "grid", placeItems: "center", zIndex: 100, backdropFilter: "blur(6px)", padding: 24 }} onClick={onClose}>
      <style>{`
        @media (max-width: 720px) {
          .rt-overlay { padding: 0 !important; }
          .rt-card { max-width: 100% !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
          .rt-main-grid { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; }
          .rt-media-list { overflow: hidden !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; max-height: 100px; padding: 8px 10px !important; }
          .rt-media-items { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; }
          .rt-media-items button { flex: 0 0 160px !important; width: 160px !important; margin-right: 6px !important; margin-bottom: 0 !important; }
          .rt-detail-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div className="card rt-card" style={{ width: "100%", maxWidth: 1100, maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }} onClick={(e) => e.stopPropagation()}>
        <div className="row" style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", gap: 12 }}>
          <span style={{ width: 28, height: 28, borderRadius: 7, background: "var(--accent-softer)", color: "var(--accent-2)", display: "grid", placeItems: "center", flex: "0 0 28px" }}>
            <IconImage size={15}/>
          </span>
          <div className="grow">
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{isFinal ? "Revisión final — imágenes + vídeos" : "Revisar imágenes generadas"}</h3>
            <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>{video.title} · {images.length} imágenes{errorCount > 0 ? <span style={{ color: "#f87171", marginLeft: 6 }}>· {errorCount} con error</span> : null}</div>
          </div>
          <span className="pill info"><IconClock size={10}/> Esperando aprobación</span>
          <button className="icon-btn" onClick={onClose}>×</button>
        </div>

        <div className="rt-main-grid" style={{ display: "grid", gridTemplateColumns: "220px minmax(0,1fr)", flex: 1, minHeight: 0, overflow: "hidden" }}>
          {/* Media list */}
          <div className="rt-media-list" style={{ borderRight: "1px solid var(--border)", overflow: "auto", padding: 10, background: "var(--bg-card-2)" }}>
            <div style={{ fontSize: 10.5, letterSpacing: "0.08em", color: "var(--text-4)", fontWeight: 600, padding: "4px 6px 8px" }}>
              MEDIA · {images.filter(m => m.media_type === "clip").length > 0
                ? `${images.filter(m => m.media_type === "clip").length} clips + ${images.filter(m => m.media_type !== "clip").length} imágenes`
                : `${images.length} imágenes`}
            </div>
            <div className="rt-media-items">
            {loading ? (
              <div style={{ textAlign: "center", padding: 20, color: "var(--text-4)", fontSize: 12 }}>Cargando…</div>
            ) : images.map((img, i) => (
              <button key={img.name} onClick={() => setSelected(i)} style={{
                width: "100%", background: selected === i ? (img.error ? "rgba(248,113,113,0.12)" : "var(--accent-softer)") : "transparent",
                border: "1px solid " + (img.error ? "rgba(248,113,113,0.5)" : selected === i ? "rgba(124,92,255,0.35)" : "transparent"),
                borderRadius: 8, padding: 8, marginBottom: 4,
                display: "flex", gap: 8, alignItems: "center", cursor: "pointer", color: "var(--text)", textAlign: "left",
                opacity: img.hidden ? 0.4 : 1,
              }}>
                <div style={{ position: "relative", flex: "0 0 56px" }}>
                  {img.media_type === "clip"
                    ? <video src={img.url} style={{ width: 56, height: 32, objectFit: "cover", borderRadius: 5, display: "block" }} muted preload="metadata"/>
                    : <img src={img.url} alt="" style={{ width: 56, height: 32, objectFit: "cover", borderRadius: 5, display: "block" }}/>
                  }
                  {img.media_type === "clip" && (
                    <div style={{ position: "absolute", inset: 0, borderRadius: 5, display: "grid", placeItems: "center", background: "rgba(0,0,0,0.35)" }}>
                      <IconPlay size={12} style={{ color: "#fff" }}/>
                    </div>
                  )}
                  {img.error && (
                    <div style={{ position: "absolute", inset: 0, borderRadius: 5, background: "rgba(200,30,30,0.55)", display: "grid", placeItems: "center" }}>
                      <span style={{ color: "#fff", fontSize: 13, lineHeight: 1 }}>✕</span>
                    </div>
                  )}
                </div>
                <div className="grow" style={{ minWidth: 0 }}>
                  <div className="row" style={{ gap: 5, alignItems: "center" }}>
                    <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: img.error ? "#f87171" : img.media_type === "clip" ? "var(--accent-2)" : "var(--text-4)" }}>
                      {img.error ? "⚠ Error" : img.media_type === "clip" ? `▶ Clip ${i + 1}` : `Imagen ${i + 1}`}
                    </div>
                    {img.is_hook && <span className="pill info" style={{ fontSize: 9, padding: "1px 5px" }}>Hook</span>}
                    {isVA && img.media_type !== "clip" && img.broll_kind === "clip" && <span className="pill info" style={{ fontSize: 9, padding: "1px 5px" }}>→ clip</span>}
                    {isVA && img.split && <span className="pill" style={{ fontSize: 9, padding: "1px 5px" }}>split</span>}
                    {isVA && img.hidden && <span className="pill" style={{ fontSize: 9, padding: "1px 5px" }}>oculto</span>}
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--text-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {(img.narration || img.prompt || "—").slice(0, 28)}…
                  </div>
                </div>
              </button>
            ))}
            </div>
          </div>

          {/* Media detail */}
          <div style={{ overflow: "auto", padding: 20 }}>
            {sel && (
              <>
                <div className="rt-detail-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
                  {/* ── Columna izquierda: imagen ── */}
                  <div>
                    <label className="label">
                      {sel.media_type === "clip" ? "Clip de vídeo" : "Imagen"} · {selected + 1} de {images.length}
                      {sel.media_type === "clip" && <span className="pill info" style={{ marginLeft: 8, fontSize: 10 }}><IconPlay size={9}/> {isVA ? "Gemini Omni" : "LTX"}</span>}
                      {sel.is_hook && <span className="pill info" style={{ marginLeft: 8, fontSize: 10 }}>Hook</span>}
                    </label>
                    <div style={{ aspectRatio: "16/9", borderRadius: 10, overflow: "hidden", border: "1px solid " + (sel.error ? "rgba(248,113,113,0.6)" : "var(--border)"), background: "#0a0a14" }}>
                      {sel.media_type === "clip"
                        ? <video key={sel.url} src={sel.url} controls autoPlay loop muted style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                        : <img src={`${sel.url}?t=${Date.now()}`} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                      }
                    </div>
                    {sel.error && (
                      <div style={{ marginTop: 8, padding: "8px 10px", borderRadius: 8, background: "rgba(248,113,113,0.1)", border: "1px solid rgba(248,113,113,0.35)", fontSize: 11.5, color: "#f87171", lineHeight: 1.4 }}>
                        <strong>Error:</strong> {sel.error_message || "Error desconocido"}
                      </div>
                    )}
                  </div>

                  {/* ── Columna derecha: acciones + narración + prompt ── */}
                  <div className="col" style={{ gap: 14 }}>
                    {sel.media_type !== "clip" && (
                      <div className="col" style={{ gap: 8 }}>
                        {!sel.is_hook && !isVA && (
                          <div className="row" style={{ gap: 5, alignItems: "center" }}>
                            <span style={{ fontSize: 11, color: "var(--text-4)", whiteSpace: "nowrap" }}>Modelo:</span>
                            {[["v1", "v1"], ["v2", "v2"], ["pro", "Pro ✦"]].map(([val, label]) => (
                              <button key={val} onClick={() => setRegenModel(val)} style={{
                                padding: "3px 9px", borderRadius: 6, border: "1px solid",
                                fontSize: 11, fontWeight: 600, cursor: "pointer",
                                background: regenModel === val ? "var(--accent)" : "transparent",
                                borderColor: regenModel === val ? "var(--accent)" : "var(--border)",
                                color: regenModel === val ? "#fff" : "var(--text-3)",
                              }}>{label}</button>
                            ))}
                          </div>
                        )}
                        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                          <button className="btn" onClick={() => { setEditFor(selected); setRegenPrompt(sel.prompt || ""); }}>
                            <IconEdit size={13}/> Editar prompt
                          </button>
                          <button className="btn" onClick={downloadImage}>
                            <IconDownload size={13}/> Descargar
                          </button>
                          <FileBtn icon={<IconUpload size={13}/>} label={replaceLoading ? "Subiendo…" : "Reemplazar"}
                            inputRef={replaceInputRef} disabled={replaceLoading}
                            onChange={(e) => { if (e.target.files[0]) { replaceImage(e.target.files[0]); e.target.value = ""; } }}/>
                          <button className="btn" disabled={regenLoading || replaceLoading}
                            onClick={() => regenerate(sel.id, null)}
                            style={{ fontSize: 12, padding: "5px 10px" }}>
                            <IconSparkle size={12}/>
                            {regenLoading ? "Regenerando…" : "Rehacer"}
                            {!regenLoading && (regenStats.normal < FREE_REGENS
                              ? <span style={{ background: "var(--accent-soft)", color: "var(--accent-2)", fontSize: 9, fontWeight: 700, padding: "1px 5px", borderRadius: 4, letterSpacing: "0.07em", marginLeft: 2 }}>FREE</span>
                              : <span style={{ color: "var(--accent-2)", fontSize: 10, fontWeight: 600, marginLeft: 2, display: "inline-flex", alignItems: "center", gap: 2 }}><IconCoin size={9}/>{REGEN_COST} cr</span>
                            )}
                          </button>
                        </div>
                        {regenError && (
                          <div style={{ padding: "8px 10px", borderRadius: 8, background: "rgba(248,113,113,0.1)", border: "1px solid rgba(248,113,113,0.35)", fontSize: 11.5, color: "#f87171", lineHeight: 1.4 }}>
                            <strong>Error al regenerar:</strong> {regenError}
                          </div>
                        )}
                      </div>
                    )}
                    {isVA && (
                      <div style={{ display: "flex", flexDirection: "column", gap: 10, padding: "4px 0 2px" }}>
                        <div className="row" style={{ gap: 12, alignItems: "center" }}>
                          <div className="grow">
                            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Ocultar en el montaje</div>
                            <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 2 }}>Ese hueco vuelve al vídeo del avatar.</div>
                          </div>
                          <div className={"toggle" + (sel.hidden ? " on" : "")}
                            onClick={() => saveAsset(sel.id, { hidden: !sel.hidden })}/>
                        </div>
                        <div className="row" style={{ gap: 12, alignItems: "center" }}>
                          <div className="grow">
                            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Split screen 50/50</div>
                            <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 2 }}>Ese hueco: imagen/clip a la izquierda, avatar a la derecha.</div>
                          </div>
                          <div className={"toggle" + (sel.split ? " on" : "")}
                            onClick={() => saveAsset(sel.id, { split: !sel.split })}/>
                        </div>
                      </div>
                    )}
                    {canRegenClip && sel.media_type === "clip" && sel.avatar_kind && (
                      <div>
                        <div style={{ fontSize: 11.5, color: "var(--text-4)", padding: "4px 0 8px" }}>
                          {sel.avatar_kind === "split"
                            ? "Avatar hablando (InfiniTalk) en split screen — usa el audio original de esa ventana, no un prompt de movimiento."
                            : "Avatar hablando (InfiniTalk) — usa el audio original de esa ventana, no un prompt de movimiento."}
                        </div>
                        <div className="row" style={{ justifyContent: "flex-end" }}>
                          <button className="btn btn-primary" style={{ fontSize: 12 }} disabled={clipBusy}
                            onClick={() => regenerateClip(sel.id)}>
                            <IconSparkle size={12}/> {clipBusy ? "Regenerando…" : "Regenerar avatar"}
                            <span style={{ color: "var(--accent-2)", fontSize: 10, fontWeight: 600, marginLeft: 4, display: "inline-flex", alignItems: "center", gap: 2 }}><IconCoin size={9}/>120 cr</span>
                          </button>
                        </div>
                      </div>
                    )}
                    {canRegenClip && sel.media_type === "clip" && !sel.avatar_kind && (
                      <div>
                        <label className="label">Prompt de animación (imagen → vídeo)</label>
                        <textarea className="textarea" rows={5}
                          style={{ fontFamily: "var(--font-mono)", fontSize: 11, width: "100%" }}
                          value={motionDraft} onChange={(e) => setMotionDraft(e.target.value)}/>
                        <div className="row" style={{ marginTop: 8, gap: 8, justifyContent: "flex-end", flexWrap: "wrap" }}>
                          <button className="btn btn-ghost" style={{ fontSize: 12 }}
                            disabled={clipBusy || motionDraft === (sel.motion_prompt || "")}
                            onClick={() => saveAsset(sel.id, { motion_prompt: motionDraft })}>
                            Guardar prompt
                          </button>
                          {(isFinal || isLaunchBroll) && (
                            <button className="btn btn-primary" style={{ fontSize: 12 }} disabled={clipBusy}
                              onClick={() => regenerateClip(sel.id)}>
                              <IconSparkle size={12}/> {clipBusy ? "Regenerando…" : "Regenerar clip"}
                              <span style={{ color: "var(--accent-2)", fontSize: 10, fontWeight: 600, marginLeft: 4, display: "inline-flex", alignItems: "center", gap: 2 }}><IconCoin size={9}/>84 cr</span>
                            </button>
                          )}
                        </div>
                        {!isFinal && !isLaunchBroll && (
                          <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 6 }}>
                            El clip se generará al aprobar esta pantalla, con este prompt.
                          </div>
                        )}
                      </div>
                    )}
                    {!canRegenClip && sel.media_type === "clip" && (
                      <div style={{ fontSize: 11.5, color: "var(--text-4)", padding: "6px 0" }}>
                        Los clips LTX no se pueden regenerar individualmente desde aquí.
                      </div>
                    )}
                    {sel.media_type === "clip" && (
                      <div className="row" style={{ gap: 6 }}>
                        <a className="btn" href={sel.url} download={`${sel.id || "clip"}.mp4`}>
                          <IconDownload size={13}/> Descargar
                        </a>
                        <FileBtn icon={<IconUpload size={13}/>} label={replaceClipLoading ? "Subiendo…" : "Reemplazar"}
                          inputRef={replaceClipInputRef} disabled={replaceClipLoading} accept="video/*"
                          onChange={(e) => { if (e.target.files[0]) { replaceClip(e.target.files[0]); e.target.value = ""; } }}/>
                      </div>
                    )}
                    {sel.media_type === "clip" && !sel.avatar_kind && (
                      <div>
                        <label className="label">Audio del clip</label>
                        <div className="segmented" style={{ width: "100%" }}>
                          {[
                            { id: "mute", label: "Sin audio" },
                            { id: "-10db", label: "-10dB" },
                            { id: "active", label: "Audio activo" },
                          ].map((o) => (
                            <button key={o.id} type="button"
                              className={(sel.audio_level || "mute") === o.id ? "on" : ""}
                              style={{ flex: 1, justifyContent: "center" }}
                              onClick={() => saveAsset(sel.id, { audio_level: o.id })}>
                              {o.label}
                            </button>
                          ))}
                        </div>
                        <div className="help">
                          Por defecto el clip se monta mudo (domina la narración). Si el clip tiene su propio
                          audio y quieres que se oiga de fondo, activa -10dB o audio activo.
                        </div>
                      </div>
                    )}
                    {sel.narration && (
                      <div>
                        <label className="label">Narración</label>
                        <div style={{ background: "var(--bg-card-2)", border: "1px solid var(--border)", borderRadius: 9, padding: 12, fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55 }}>
                          "{sel.narration}"
                        </div>
                      </div>
                    )}
                    <div>
                      <label className="label">Prompt {isVA ? "(Claude → GPT Image 2)" : sel.media_type === "clip" ? "(Claude → LTX)" : "(Claude → Nanobanana)"}</label>
                      {editFor === selected && sel.media_type !== "clip" ? (
                        <div style={{ padding: 12, borderRadius: 9, background: "var(--accent-softer)", border: "1px solid rgba(124,92,255,0.35)" }}>
                          <textarea className="textarea" rows={4} autoFocus style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, width: "100%" }}
                            value={regenPrompt} onChange={(e) => setRegenPrompt(e.target.value)}/>
                          <div className="row" style={{ marginTop: 10, gap: 8, justifyContent: "flex-end", alignItems: "center" }}>
                            <button className="btn btn-ghost" onClick={() => setEditFor(null)}>Cancelar</button>
                            <button className="btn btn-primary" disabled={regenLoading}
                              onClick={() => regenerate(sel.id, regenPrompt)}
                              style={{ fontSize: 12, padding: "5px 12px" }}>
                              <IconSparkle size={12}/>
                              {regenLoading ? "Regenerando…" : "Regenerar con prompt"}
                              {!regenLoading && (regenStats.custom < FREE_REGENS
                                ? <span style={{ background: "rgba(255,255,255,0.18)", color: "#fff", fontSize: 9, fontWeight: 700, padding: "1px 5px", borderRadius: 4, letterSpacing: "0.07em", marginLeft: 2 }}>FREE</span>
                                : <span style={{ color: "var(--accent-2)", fontSize: 10, fontWeight: 600, marginLeft: 2, display: "inline-flex", alignItems: "center", gap: 2 }}><IconCoin size={9}/>{REGEN_COST} cr</span>
                              )}
                            </button>
                          </div>
                        </div>
                      ) : (
                        <div style={{ background: "#0a0a10", border: "1px solid var(--border)", borderRadius: 9, padding: 12, fontSize: 11.5, color: "var(--accent-2)", lineHeight: 1.55, fontFamily: "var(--font-mono)" }}>
                          {sel.prompt || "—"}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>

        <div className="row" style={{ padding: "14px 20px", borderTop: "1px solid var(--border)", gap: 10, background: "var(--bg-card-2)", flexWrap: "wrap" }}>
          {errorCount > 0 ? (
            <span style={{ fontSize: 12, color: "#f87171" }}>
              ⚠ Regenera las {errorCount} imagen{errorCount !== 1 ? "es" : ""} con error antes de aprobar.
            </span>
          ) : (
            <span style={{ fontSize: 12, color: "var(--text-3)" }}>
              {isVA && !isFinal
                ? "Revisa las imágenes y sus prompts de animación. Al aprobar se generarán los clips."
                : isFinal
                ? "Revisión final: oculta lo que no quieras, activa split screen por hueco y aprueba para montar."
                : "Revisa clips e imágenes. Cuando estén bien, aprueba para iniciar el montaje con FFmpeg."}
            </span>
          )}
          <div className="row" style={{ marginLeft: "auto", gap: 8 }}>
            <button className="btn btn-ghost" onClick={onClose}>Posponer</button>
            <button className="btn btn-primary" onClick={approve} disabled={saving || loading || clipBusy || errorCount > 0}
              title={errorCount > 0 ? "Hay imágenes con error. Regéneralas primero." : undefined}>
              <IconCheck size={13}/> {saving ? "Aprobando…" : (isVA && !isFinal ? "Aprobar imágenes → generar clips" : "Aprobar y montar")}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ========== Galería de imágenes (solo lectura) ========== */

function ImageGalleryModal({ video, onClose }) {
  const [images, setImages] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [selected, setSelected] = React.useState(0);
  const thumbRowRef = React.useRef(null);

  React.useEffect(() => {
    fetch(`/api/videos/jobs/${video.id}/images`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => { if (d.images) setImages(d.images); setLoading(false); })
      .catch(() => setLoading(false));
  }, [video.id]);

  // Scroll the thumbnail strip so the active thumb stays visible
  React.useEffect(() => {
    if (!thumbRowRef.current) return;
    const btn = thumbRowRef.current.children[selected];
    if (btn) btn.scrollIntoView({ inline: "center", behavior: "smooth", block: "nearest" });
  }, [selected]);

  // Keyboard nav
  React.useEffect(() => {
    function onKey(e) {
      if (e.key === "ArrowRight") setSelected((s) => Math.min(s + 1, images.length - 1));
      if (e.key === "ArrowLeft")  setSelected((s) => Math.max(s - 1, 0));
      if (e.key === "Escape") onClose();
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [images.length]);

  const sel = images[selected];

  return (
    <div className="rtg-overlay" style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", display: "grid", placeItems: "center", zIndex: 9999, backdropFilter: "blur(8px)", padding: 20 }}
      onClick={onClose}>
      <style>{`
        @media (max-width: 720px) {
          .rtg-overlay { padding: 0 !important; }
          .rtg-card { max-width: 100% !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
          .rtg-grid { grid-template-columns: 1fr !important; grid-template-rows: minmax(0,1fr) auto !important; }
          .rtg-image-panel { min-height: 45vh !important; }
          .rtg-meta-panel { border-left: none !important; border-top: 1px solid var(--border) !important; max-height: 40vh !important; }
        }
      `}</style>
      <div className="card rtg-card" style={{ width: "100%", maxWidth: 1060, maxHeight: "92vh", display: "flex", flexDirection: "column", overflow: "hidden" }}
        onClick={(e) => e.stopPropagation()}>

        {/* Header */}
        <div className="row" style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", gap: 12 }}>
          <span style={{ width: 28, height: 28, borderRadius: 7, background: "var(--accent-softer)", color: "var(--accent-2)", display: "grid", placeItems: "center", flex: "0 0 28px" }}>
            <IconImage size={15}/>
          </span>
          <div className="grow">
            <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>{video.title}</h3>
            <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 1 }}>
              {loading ? "Cargando…" : `${images.length} imágenes · usa ← → para navegar`}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}>×</button>
        </div>

        {/* Main content */}
        <div style={{ flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
          {loading ? (
            <div style={{ flex: 1, display: "grid", placeItems: "center", color: "var(--text-4)" }}>Cargando imágenes…</div>
          ) : !sel ? (
            <div style={{ flex: 1, display: "grid", placeItems: "center", color: "var(--text-4)" }}>Sin imágenes</div>
          ) : (
            <>
              {/* Large image + meta */}
              <div className="rtg-grid" style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "minmax(0,1fr) 320px", overflow: "hidden" }}>

                {/* Image */}
                <div className="rtg-image-panel" style={{ position: "relative", background: "#06060c", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
                  {sel.media_type === "clip"
                    ? <video key={sel.url} src={sel.url} controls autoPlay loop muted style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}/>
                    : <img key={sel.url} src={sel.url} alt="" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}/>
                  }
                  {/* Prev / Next arrows */}
                  {selected > 0 && (
                    <button onClick={() => setSelected(selected - 1)} style={{
                      position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)",
                      background: "rgba(0,0,0,0.55)", border: "none", borderRadius: 8,
                      color: "white", width: 34, height: 34, fontSize: 18,
                      cursor: "pointer", display: "grid", placeItems: "center",
                      backdropFilter: "blur(4px)",
                    }}>‹</button>
                  )}
                  {selected < images.length - 1 && (
                    <button onClick={() => setSelected(selected + 1)} style={{
                      position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
                      background: "rgba(0,0,0,0.55)", border: "none", borderRadius: 8,
                      color: "white", width: 34, height: 34, fontSize: 18,
                      cursor: "pointer", display: "grid", placeItems: "center",
                      backdropFilter: "blur(4px)",
                    }}>›</button>
                  )}
                  {/* Counter badge */}
                  <span style={{
                    position: "absolute", bottom: 10, right: 10,
                    background: "rgba(0,0,0,0.65)", color: "white",
                    fontFamily: "var(--font-mono)", fontSize: 10.5,
                    padding: "3px 8px", borderRadius: 5, backdropFilter: "blur(4px)",
                  }}>{selected + 1} / {images.length}</span>
                </div>

                {/* Narration + Prompt */}
                <div className="rtg-meta-panel" style={{ borderLeft: "1px solid var(--border)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
                  <div style={{ flex: 1, overflow: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 14 }}>
                    {sel.narration && (
                      <div>
                        <label className="label">Narración</label>
                        <div style={{
                          background: "var(--bg-card-2)", border: "1px solid var(--border)",
                          borderRadius: 9, padding: 12, fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.6,
                        }}>"{sel.narration}"</div>
                      </div>
                    )}
                    <div>
                      <label className="label">Prompt · {sel.media_type === "clip" ? "LTX" : "Nanobanana"}</label>
                      <div style={{
                        background: "#06060f", border: "1px solid var(--border)",
                        borderRadius: 9, padding: 12, fontSize: 11.5, color: "var(--accent-2)",
                        lineHeight: 1.55, fontFamily: "var(--font-mono)", wordBreak: "break-word",
                      }}>{sel.prompt || "—"}</div>
                    </div>
                    <div className="row" style={{ gap: 8, marginTop: "auto", paddingTop: 8 }}>
                      <a href={sel.url} target="_blank" rel="noreferrer" className="btn" style={{ flex: 1, justifyContent: "center", textDecoration: "none" }}>
                        <IconDownload size={13}/> Abrir
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              {/* Thumbnail strip */}
              <div style={{ borderTop: "1px solid var(--border)", background: "var(--bg-card-2)", padding: "10px 12px" }}>
                <div ref={thumbRowRef} style={{ display: "flex", gap: 6, overflowX: "auto", scrollbarWidth: "thin", paddingBottom: 2 }}>
                  {images.map((img, i) => (
                    <button key={img.name || i} onClick={() => setSelected(i)} style={{
                      flex: "0 0 auto",
                      width: 72, height: 41,
                      borderRadius: 6, overflow: "hidden",
                      border: "2px solid " + (selected === i ? "var(--accent)" : "transparent"),
                      padding: 0, cursor: "pointer",
                      opacity: selected === i ? 1 : 0.6,
                      transition: "opacity 120ms, border-color 120ms",
                      background: "#0a0a14",
                    }}>
                      {img.media_type === "clip"
                        ? <video src={img.url} muted preload="metadata" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                        : <img src={img.url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                      }
                    </button>
                  ))}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

/* ========== Modal de remontar ========== */

function ReassembleModal({ video, onClose, onDone }) {
  const [subtitles, setSubtitles] = React.useState(video.enableSubtitles !== false);
  const [loading, setLoading] = React.useState(false);

  async function confirm() {
    setLoading(true);
    await fetch(`/api/videos/jobs/${video.id}/reassemble`, {
      method: "POST",
      credentials: "same-origin",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ subtitles }),
    });
    if (onDone) onDone();
  }

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", display: "grid", placeItems: "center", zIndex: 100, backdropFilter: "blur(6px)", padding: 24 }} onClick={onClose}>
      <div className="card" style={{ width: "100%", maxWidth: 420, overflow: "hidden" }} onClick={(e) => e.stopPropagation()}>
        <div className="row" style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", gap: 12 }}>
          <span style={{ width: 28, height: 28, borderRadius: 7, background: "var(--accent-softer)", color: "var(--accent-2)", display: "grid", placeItems: "center", flex: "0 0 28px" }}>
            <IconVideo size={15}/>
          </span>
          <div className="grow">
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Remontar vídeo</h3>
            <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>{video.title}</div>
          </div>
          <button className="icon-btn" onClick={onClose}>×</button>
        </div>

        <div style={{ padding: "20px 20px 16px" }}>
          <p style={{ fontSize: 13, color: "var(--text-2)", marginBottom: 20, lineHeight: 1.5 }}>
            Se remontará el vídeo usando las imágenes y el audio actuales, sin regenerar contenido.
          </p>

          <div className="row" style={{ justifyContent: "space-between", alignItems: "center", padding: "12px 14px", background: "var(--bg-card-2)", borderRadius: 10, border: "1px solid var(--border)" }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Subtítulos</div>
              <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 2 }}>Incrustados en el vídeo final</div>
            </div>
            <button onClick={() => setSubtitles(!subtitles)} style={{
              width: 40, height: 22, borderRadius: 11,
              background: subtitles ? "var(--accent)" : "var(--bg-hover)",
              border: "none", cursor: "pointer", position: "relative",
              transition: "background 200ms",
              flexShrink: 0,
            }}>
              <span style={{
                position: "absolute", top: 3, left: subtitles ? 21 : 3,
                width: 16, height: 16, borderRadius: "50%",
                background: "white",
                transition: "left 200ms",
                boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
              }}/>
            </button>
          </div>
        </div>

        <div className="row" style={{ padding: "14px 20px", borderTop: "1px solid var(--border)", gap: 8, background: "var(--bg-card-2)", justifyContent: "flex-end" }}>
          <button className="btn btn-ghost" onClick={onClose} disabled={loading}>Cancelar</button>
          <button className="btn btn-primary" onClick={confirm} disabled={loading}>
            <IconVideo size={13}/> {loading ? "Iniciando…" : "Remontar"}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ========== Editor de colas (reordenar vídeos en espera) ========== */

function QueueSection({ title, hint, list, saving, chName, onMove }) {
  return (
    <div>
      <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-2)" }}>{title}</div>
      <div style={{ fontSize: 11, color: "var(--text-4)", margin: "2px 0 9px" }}>{hint}</div>
      {list.length === 0 ? (
        <div style={{ fontSize: 12, color: "var(--text-4)", padding: "6px 0 2px" }}>Vacía.</div>
      ) : list.map((it, i) => (
        <div key={it.id} className="row" style={{
          gap: 8, padding: "7px 8px", borderRadius: 8, marginBottom: 5,
          background: "var(--bg-card-2)", border: "1px solid var(--border)",
        }}>
          <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-4)", width: 16, textAlign: "right" }}>{i + 1}</span>
          <div className="grow" style={{ minWidth: 0 }}>
            <div style={{ fontSize: 12.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.title}</div>
            <div style={{ fontSize: 10.5, color: "var(--text-4)" }}>{chName(it.channelId)}</div>
          </div>
          <button className="icon-btn" style={{ width: 26, height: 26 }} disabled={i === 0 || saving}
            onClick={() => onMove(i, -1)} title="Subir"><IconChevronUp size={13}/></button>
          <button className="icon-btn" style={{ width: 26, height: 26 }} disabled={i === list.length - 1 || saving}
            onClick={() => onMove(i, 1)} title="Bajar"><IconChevronDown size={13}/></button>
        </div>
      ))}
    </div>
  );
}

function QueueEditorModal({ jobs, channels, onClose, onChanged }) {
  const chName = (id) => (channels.find((c) => c.id === id) || {}).name || id || "—";

  const [apiOrder, setApiOrder] = React.useState([]);
  const [renderOrder, setRenderOrder] = React.useState([]);
  const [meta, setMeta] = React.useState({ api: {}, render: {} });
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);

  const toRow = (j) => ({ id: j.job_id, title: j.title || "Sin título", channelId: j.channel_id });

  React.useEffect(() => {
    fetch("/api/videos/queue", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => {
        setApiOrder((d.api?.jobs || []).map(toRow));
        setRenderOrder((d.render?.jobs || []).map(toRow));
        setMeta({ api: d.api || {}, render: d.render || {} });
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function persist(kind, list) {
    setSaving(true);
    try {
      await fetch("/api/videos/queue/reorder", {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ kind, order: list.map((x) => x.id) }),
      });
      if (onChanged) onChanged();
    } catch { /* ignore */ }
    finally { setSaving(false); }
  }

  function mover(kind, list, setList) {
    return (idx, dir) => {
      const j = idx + dir;
      if (j < 0 || j >= list.length) return;
      const next = list.slice();
      [next[idx], next[j]] = [next[j], next[idx]];
      setList(next);
      persist(kind, next);
    };
  }

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", display: "grid", placeItems: "center", zIndex: 300, backdropFilter: "blur(6px)", padding: 24 }} onClick={onClose}>
      <div className="card" style={{ width: "100%", maxWidth: 540, maxHeight: "85vh", display: "flex", flexDirection: "column", overflow: "hidden" }} onClick={(e) => e.stopPropagation()}>
        <div className="row" style={{ padding: "15px 20px", borderBottom: "1px solid var(--border)", gap: 10 }}>
          <span className="pill warn" style={{ fontSize: 10.5 }}><IconList size={11}/> En cola</span>
          <h3 className="grow" style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Editar cola</h3>
          <button className="icon-btn" onClick={onClose}>×</button>
        </div>
        <div style={{ padding: 20, overflow: "auto", display: "flex", flexDirection: "column", gap: 22 }}>
          {loading ? (
            <div style={{ fontSize: 12, color: "var(--text-4)" }}>Cargando…</div>
          ) : <>
            <QueueSection title="Cola de generación (API)"
              hint={`Guion, imágenes y clips · Claude · Nanobanana · kie.ai · ${meta.api.running ?? 0}/${meta.api.cap ?? 3} activos.`}
              list={apiOrder} saving={saving} chName={chName}
              onMove={mover("api", apiOrder, setApiOrder)}/>
            <QueueSection title="Cola de montaje"
              hint={`Ensamblado final con FFmpeg · ${meta.render.running ?? 0}/${meta.render.cap ?? 3} activos.`}
              list={renderOrder} saving={saving} chName={chName}
              onMove={mover("render", renderOrder, setRenderOrder)}/>
          </>}
        </div>
        <div className="row" style={{ padding: "12px 20px", borderTop: "1px solid var(--border)", justifyContent: "flex-end", background: "var(--bg-card-2)" }}>
          <button className="btn btn-primary" onClick={onClose}>{saving ? "Guardando…" : "Hecho"}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HistoryTab, QueueEditorModal, ImageGalleryModal, ReassembleModal });