/* Tab: Crear Video - flujo en 3 pasos (actualizado) */

// Separador usado para unir Intro + Resto en un único texto de transcripción cuando
// el modo es "Avatar + Imágenes" con guion propio (debe coincidir con el backend).
const AVATAR_INTRO_DELIMITER = "\n\n<<<RESTO>>>\n\n";

function CreateVideoTab({ channels, onGenerated, initialMode, lockedMode }) {
  const activeChannels = channels.filter((c) => c.active !== false);

  // Modo de vídeo. `lockedMode` = página dedicada (Imágenes IA / Personaje / Clips de
  // stock): el selector de modo se oculta. Heygen Ready ("avatar") está eliminado.
  const MODES = ["imagenes_ia", "personaje", "stock_clips"];
  const [narrationMode, setNarrationMode] = React.useState(
    MODES.includes(lockedMode) ? lockedMode
      : MODES.includes(initialMode) ? initialMode
      : "imagenes_ia"
  ); // imagenes_ia | personaje | stock_clips
  // Sub-modo cuando es "Generar con IA"
  const [promptMode, setPromptMode] = React.useState("creation"); // creation | reference | adaptation
  // Sub-modo cuando narrationMode === "imagenes_ia" | "avatar": de dónde sale el guion
  const [scriptSource, setScriptSource] = React.useState("ai"); // ai | own
  // Sub-modo cuando narrationMode === "avatar" (etiqueta visible: "Heygen Ready")
  const [heygenSubMode, setHeygenSubMode] = React.useState("con_imagenes"); // con_imagenes | split_screen | con_personaje
  // Sub-modo cuando narrationMode === "stock_clips": de dónde sale el guion
  const [stockClipsSubMode, setStockClipsSubMode] = React.useState("normal"); // normal | split_avatar
  // "Usar personaje en el contenido": compartido entre "Heygen con imágenes" y "Split Screen".
  const [useCharacterInContent, setUseCharacterInContent] = React.useState(true);
  const [zoomAvatarHookIntroFx, setZoomAvatarHookIntroFx] = React.useState(false);
  const [promptTitle, setPromptTitle] = React.useState("");
  const [refNarration, setRefNarration] = React.useState("");
  const [script, setScript] = React.useState("");
  const [scriptResto, setScriptResto] = React.useState(""); // solo modo avatar + guion propio
  const [scriptAudio, setScriptAudio] = React.useState(null);
  const [scriptVideo, setScriptVideo] = React.useState(null); // solo modo avatar + "Heygen con imágenes"/"Split Screen"

  // Avatar + Imágenes: look concreto del avatar del canal a usar en este vídeo
  const [heygenLooks, setHeygenLooks] = React.useState([]);
  const [loadingHeygenLooks, setLoadingHeygenLooks] = React.useState(false);
  const [heygenLookId, setHeygenLookId] = React.useState("");

  // Fuente efectiva de guion (colapsa "imagenes_ia"/"avatar"/"personaje" a su sub-modo real).
  // En "avatar" (Heygen Ready), "con_imagenes" y "split_screen" siempre parten de un
  // vídeo subido; solo "con_personaje" usa el picker ai/own de siempre.
  const scriptKind = narrationMode === "avatar"
    ? (heygenSubMode === "con_personaje" ? (scriptSource === "own" ? "script" : "prompt") : "video")
    : narrationMode === "stock_clips" && stockClipsSubMode === "split_avatar"
      ? "video"
    : (narrationMode === "imagenes_ia" || narrationMode === "personaje" || narrationMode === "stock_clips")
      ? (scriptSource === "own" ? "script" : "prompt")
      : narrationMode; // "prompt" | "script" | "video"
  const isAudioDriven = scriptKind === "script" || scriptKind === "video";

  // Paso 2: montaje — opciones disponibles
  const [assemblyMode, setAssemblyMode] = React.useState("story_images");
  // story_images | long_1image
  const [loopImages, setLoopImages] = React.useState(false);
  const [hookMode, setHookMode] = React.useState(""); // "" | "motion" | "pexels"
  const [imageCadence, setImageCadence] = React.useState(20); // 10 | 20 | 30 (solo modo avatar)
  const [hookIntroImages, setHookIntroImages] = React.useState(false); // Hook Intro Imagen (solo modo avatar)
  const [hookIntroImageCount, setHookIntroImageCount] = React.useState(2); // 1 | 2 | 3

  // Paso 3: config
  const [channelId, setChannelId] = React.useState("");
  const [durationBucket, setDurationBucket] = React.useState("regular"); // short|regular|medium|long|xlong
  const [kenBurns, setKenBurns] = React.useState(true);
  // Paso 4: transiciones (opcional, apagado por defecto)
  const [transitions, setTransitions] = React.useState(false);
  // Paso 5: música de fondo (opcional, apagado por defecto)
  const [musicEnabled, setMusicEnabled] = React.useState(false);
  const [availableMusicFolders, setAvailableMusicFolders] = React.useState([]);
  const [selectedMusicFolderIds, setSelectedMusicFolderIds] = React.useState([]);
  const [musicVolumeDb, setMusicVolumeDb] = React.useState(-28);
  // Velocidad de la voz narrada (solo aplica cuando el guion se genera con IA y ai33 la narra)
  const [voiceSpeed, setVoiceSpeed] = React.useState(1.0);
  // Modo "Clips de stock": usar también fotos/ilustraciones de Pixabay, o solo vídeo
  const [stockUseImages, setStockUseImages] = React.useState(true);
  // Modo "Imágenes Personaje": animar las primeras 5 imágenes a vídeo (LTX image-to-video)
  const [animateFirstImages, setAnimateFirstImages] = React.useState(false);
  const [nanoBananaVersion, setNanoBananaVersion] = React.useState("v1"); // v1 | v2 | pro

  const [generating, setGenerating] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [stepIdx, setStepIdx] = React.useState(-1);
  const [uploadPct, setUploadPct] = React.useState(0);
  const [summaryOpen, setSummaryOpen] = React.useState(false);

  const steps = [
    { key: "script",        label: "Guion",              tool: "Claude Sonnet",    dur: 14 },
    { key: "review_script", label: "Revisión de guion",  tool: "Tú apruebas",      dur: 0  },
    { key: "voice",         label: "Voz narrada",        tool: "ai33",             dur: 18 },
    { key: "scenes",        label: "Storyboard",         tool: "Claude · escenas", dur: 10 },
    { key: "images",        label: "Imágenes",           tool: "Nanobanana",       dur: 26 },
    { key: "review_images", label: "Revisión de imágenes", tool: "Tú apruebas",   dur: 0  },
    { key: "assembly",      label: "Montaje",            tool: "FFmpeg",           dur: 12 },
  ];

  const selectedChannel = activeChannels.find((c) => c.id === channelId) ?? null;
  const _videoCost = isAudioDriven ? 250 : ({ short: 250, regular: 500, medium: 1200 }[durationBucket] || 250);


  const loopApplies = false;

  const [genError, setGenError] = React.useState("");

  // Al elegir canal (en modo avatar) cargamos los looks de su personaje HeyGen
  React.useEffect(() => {
    setHeygenLookId("");
    setHeygenLooks([]);
    if (narrationMode !== "avatar" || !selectedChannel || !selectedChannel.heygenGroupId) return;
    setLoadingHeygenLooks(true);
    fetch(`/api/heygen/avatar-groups/${selectedChannel.heygenGroupId}/looks`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setHeygenLooks(d.looks || []))
      .catch(() => setHeygenLooks([]))
      .finally(() => setLoadingHeygenLooks(false));
  }, [narrationMode, selectedChannel && selectedChannel.heygenGroupId]);

  // Carpetas de música de fondo del usuario (para el Paso 5)
  React.useEffect(() => {
    fetch("/api/music/folders", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setAvailableMusicFolders(d.folders || []))
      .catch(() => setAvailableMusicFolders([]));
  }, []);

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

  async function start() {
    if (!channelId) return;
    if (!promptTitle.trim()) return;
    if (scriptKind === "script" && !scriptAudio && !script.trim()) return;
    if (narrationMode === "avatar" && heygenSubMode === "con_personaje" && scriptSource === "own" && !scriptAudio && !scriptResto.trim()) return;
    if (narrationMode === "avatar" && (heygenSubMode === "con_imagenes" || heygenSubMode === "split_screen") && !scriptVideo) return;
    if (narrationMode === "stock_clips" && stockClipsSubMode === "split_avatar" && !scriptVideo) return;

    setGenerating(true);
    setProgress(0);
    setStepIdx(0);
    setUploadPct(0);
    setGenError("");

    const modeMap = {
      creation: "creacion",
      reference: "referencia",
      adaptation: "adaptacion",
    };

    const title = promptTitle.trim();
    const effectiveAssemblyMode = narrationMode === "avatar" ? "avatar_images" : narrationMode === "stock_clips" ? "stock_clips" : assemblyMode;

    try {
      let ok, d;
      if (scriptKind === "video" && scriptVideo && narrationMode === "stock_clips") {
        // "Clips de stock · Split Avatar": vídeo de avatar → XHR para rastrear progreso de subida
        const fd = new FormData();
        fd.append("video", scriptVideo);
        fd.append("channel_id", channelId);
        fd.append("title", title);
        fd.append("duration_bucket", durationBucket);
        fd.append("transitions", transitions ? "true" : "false");
        fd.append("music", musicEnabled ? "true" : "false");
        fd.append("music_folder_ids", JSON.stringify(musicEnabled ? selectedMusicFolderIds : []));
        fd.append("music_volume_db", String(musicVolumeDb));
        fd.append("stock_use_images", stockUseImages ? "true" : "false");

        const result = await new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("POST", "/api/videos/generate-stock-split-avatar");
          xhr.withCredentials = true;
          xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) setUploadPct(Math.round((e.loaded / e.total) * 100));
          };
          xhr.onload = () => {
            try { resolve({ ok: xhr.status >= 200 && xhr.status < 300, data: JSON.parse(xhr.responseText) }); }
            catch { reject(new Error("Respuesta inválida del servidor")); }
          };
          xhr.onerror = () => reject(new Error("Error de red"));
          xhr.send(fd);
        });
        ok = result.ok;
        d = result.data;
        setUploadPct(0);
      } else if (scriptKind === "video" && scriptVideo) {
        // "Heygen Ready": vídeo ya grabado → XHR para rastrear progreso de subida
        const fd = new FormData();
        fd.append("video", scriptVideo);
        fd.append("channel_id", channelId);
        fd.append("title", title);
        fd.append("nanobanana_version", nanoBananaVersion);
        fd.append("duration_bucket", durationBucket);
        fd.append("transitions", transitions ? "true" : "false");
        fd.append("music", musicEnabled ? "true" : "false");
        fd.append("music_folder_ids", JSON.stringify(musicEnabled ? selectedMusicFolderIds : []));
        fd.append("music_volume_db", String(musicVolumeDb));
        fd.append("hook_intro_images", hookIntroImages && heygenSubMode !== "split_screen" ? "true" : "false");
        fd.append("hook_intro_image_count", String(hookIntroImageCount));
        fd.append("split_screen", heygenSubMode === "split_screen" ? "true" : "false");
        fd.append("split_screen_use_character", useCharacterInContent ? "true" : "false");
        fd.append("zoom_avatar_hook_intro_fx", heygenSubMode === "con_imagenes" && zoomAvatarHookIntroFx ? "true" : "false");

        const result = await new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("POST", "/api/videos/generate-heygen-ready");
          xhr.withCredentials = true;
          xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) setUploadPct(Math.round((e.loaded / e.total) * 100));
          };
          xhr.onload = () => {
            try { resolve({ ok: xhr.status >= 200 && xhr.status < 300, data: JSON.parse(xhr.responseText) }); }
            catch { reject(new Error("Respuesta inválida del servidor")); }
          };
          xhr.onerror = () => reject(new Error("Error de red"));
          xhr.send(fd);
        });
        ok = result.ok;
        d = result.data;
        setUploadPct(0);
      } else if ((scriptKind === "script" || narrationMode === "personaje") && scriptAudio) {
        // Audio file → XHR para poder rastrear progreso de subida
        const fd = new FormData();
        fd.append("audio", scriptAudio);
        fd.append("channel_id", channelId);
        fd.append("title", title);
        fd.append("mode", narrationMode === "personaje" ? "personaje" : "narracion");
        fd.append("character_mode", narrationMode === "personaje" ? "true" : "false");
        fd.append("nanobanana_version", nanoBananaVersion);
        fd.append("assembly_mode", effectiveAssemblyMode);
        fd.append("loop_images", loopImages ? "true" : "false");
        fd.append("duration_bucket", durationBucket);
        fd.append("transitions", transitions ? "true" : "false");
        fd.append("music", musicEnabled ? "true" : "false");
        fd.append("music_folder_ids", JSON.stringify(musicEnabled ? selectedMusicFolderIds : []));
        fd.append("music_volume_db", String(musicVolumeDb));
        fd.append("voice_speed", String(voiceSpeed));
        fd.append("stock_use_images", stockUseImages ? "true" : "false");
        fd.append("hook_mode", hookMode || "");
        fd.append("animate_first_images", narrationMode === "personaje" && animateFirstImages ? "true" : "false");
        fd.append("hook_intro_images", narrationMode === "avatar" && hookIntroImages ? "true" : "false");
        fd.append("hook_intro_image_count", String(hookIntroImageCount));
        if (narrationMode === "avatar") fd.append("heygen_look_id", heygenLookId || (selectedChannel ? selectedChannel.heygenAvatarId : "") || "");

        const result = await new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("POST", "/api/videos/generate-from-audio");
          xhr.withCredentials = true;
          xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) setUploadPct(Math.round((e.loaded / e.total) * 100));
          };
          xhr.onload = () => {
            try { resolve({ ok: xhr.status >= 200 && xhr.status < 300, data: JSON.parse(xhr.responseText) }); }
            catch { reject(new Error("Respuesta inválida del servidor")); }
          };
          xhr.onerror = () => reject(new Error("Error de red"));
          xhr.send(fd);
        });
        ok = result.ok;
        d = result.data;
        setUploadPct(0);
      } else {
        const mode = scriptKind === "script"
          ? "narracion"
          : (modeMap[promptMode] || "creacion");
        const transcription = scriptKind === "script"
          ? (narrationMode === "avatar" ? `${script}${AVATAR_INTRO_DELIMITER}${scriptResto}` : script)
          : (promptMode === "reference" || promptMode === "adaptation") ? refNarration : "";
        const r = await fetch("/api/videos/generate", {
          method: "POST", credentials: "same-origin",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            title,
            channel_id: channelId,
            mode,
            transcription,
            nanobanana_version: nanoBananaVersion,
            image_frequency: narrationMode === "avatar" ? imageCadence : 45,
            duration_bucket: durationBucket,
            assembly_mode: effectiveAssemblyMode,
            loop_images: loopImages,
            transitions: transitions,
            music: musicEnabled,
            music_folder_ids: musicEnabled ? selectedMusicFolderIds : [],
            music_volume_db: musicVolumeDb,
            voice_speed: voiceSpeed,
            stock_use_images: stockUseImages,
            animate_first_images: narrationMode === "personaje" && animateFirstImages,
            hook_intro_images: narrationMode === "avatar" && hookIntroImages,
            hook_intro_image_count: hookIntroImageCount,
            character_mode: narrationMode === "personaje",
            heygen_look_id: narrationMode === "avatar" ? (heygenLookId || (selectedChannel ? selectedChannel.heygenAvatarId : "") || "") : null,
            hook_mode: hookMode || "",
          }),
        });
        ok = r.ok;
        d = await r.json();
      }
      if (ok && d.success) {
        if (onGenerated) onGenerated(d.job_id);
      } else {
        setGenError(d.detail || "Error al iniciar la generación");
        setGenerating(false);
        setStepIdx(-1);
        setUploadPct(0);
      }
    } catch {
      setGenError("Error de conexión con el servidor");
      setGenerating(false);
      setStepIdx(-1);
      setUploadPct(0);
    }
  }


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

        {/* ========= PASO 1: CANAL ========= */}
        <div className="card card-pad">
          <StepHeader num="1" title="Canal" desc="Los ajustes del canal (voz, avatar, estilo) se aplican al vídeo."/>
          <div style={{ marginTop: 4 }}>
            <ChannelSelect channels={activeChannels} value={channelId} onChange={setChannelId}/>
          </div>
        </div>

        {/* ========= PASO 2: MODO DE VÍDEO (oculto en páginas dedicadas) ========= */}
        {!lockedMode && (
          <div className="card card-pad">
            <StepHeader num="2" title="Modo de vídeo" desc="De dónde sale el texto, la voz y las escenas del video."/>
            <div className="rg-3" style={{ gap: 10, marginTop: 4 }}>
              <ModeCard active={narrationMode === "imagenes_ia"} onClick={() => setNarrationMode("imagenes_ia")}
                Icon={IconSparkle} title="Imágenes IA"
                desc="Guion generado con IA o propio, ilustrado con imágenes."/>
              <ModeCard active={narrationMode === "personaje"} onClick={() => { setNarrationMode("personaje"); setScript(""); }}
                Icon={IconUser} title="Imágenes Personaje"
                desc="Sube tu audio y el personaje del canal aparece en las imágenes."/>
              <ModeCard active={narrationMode === "stock_clips"} onClick={() => setNarrationMode("stock_clips")}
                Icon={IconClap} title="Clips de stock" badge="BETA"
                desc="Montado con clips de Pexels y Pixabay, con fotos/ilustraciones opcionales."/>
            </div>
          </div>
        )}

        {/* ========= Sub-selector: de dónde sale el guion (Imágenes IA / Avatar + Imágenes / Imágenes Personaje) ========= */}
        {(narrationMode === "imagenes_ia" || narrationMode === "avatar" || narrationMode === "personaje" || narrationMode === "stock_clips") && (
          <div className="card card-pad">
            {narrationMode === "avatar" ? (
              <>
                <label className="label">Sub-modo de Heygen Ready</label>
                <div className="rg-3" style={{ gap: 10, marginBottom: 4 }}>
                  <PromptModeCard active={heygenSubMode === "con_personaje"} onClick={() => setHeygenSubMode("con_personaje")}
                    title="Nuevo Heygen con API" desc="Guion propio o con IA + intro HeyGen + imágenes del personaje."/>
                  <PromptModeCard active={heygenSubMode === "split_screen"} onClick={() => setHeygenSubMode("split_screen")}
                    title="Split Screen" desc="Sube un vídeo; se divide la pantalla en dos, avatar a un lado y contenido al otro."/>
                  <PromptModeCard active={heygenSubMode === "con_imagenes"} onClick={() => setHeygenSubMode("con_imagenes")}
                    title="Heygen con imágenes" desc="Sube un vídeo ya grabado con el avatar; insertamos imágenes intercaladas."/>
                </div>
                {(heygenSubMode === "con_imagenes" || heygenSubMode === "split_screen") && (
                  <div style={{
                    marginTop: 12, padding: 12, borderRadius: 10,
                    background: "var(--bg-card-2)", border: "1px solid var(--border)",
                  }}>
                    <div className="row" style={{ gap: 12 }}>
                      <div className="grow">
                        <div style={{ fontSize: 13, fontWeight: 600 }}>Usar personaje en el contenido</div>
                        <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>
                          {heygenSubMode === "split_screen"
                            ? "Las imágenes del lado de contenido muestran al personaje del canal. Si lo desactivas, son imágenes genéricas sobre el tema."
                            : "Las imágenes intercaladas muestran al personaje del canal. Si lo desactivas, son imágenes genéricas sobre el tema."}
                        </div>
                      </div>
                      <div className={"toggle" + (useCharacterInContent ? " on" : "")} onClick={() => setUseCharacterInContent(!useCharacterInContent)}/>
                    </div>
                  </div>
                )}
                {heygenSubMode === "con_personaje" && (
                  <div style={{ marginTop: 14 }}>
                    <label className="label">De dónde sale el guion</label>
                    <div className="rg-2" style={{ gap: 10, marginBottom: 4 }}>
                      <PromptModeCard active={scriptSource === "ai"} onClick={() => setScriptSource("ai")}
                        title="Generar con IA" desc="Claude escribe el guion (creación, referencia o adaptación)."/>
                      <PromptModeCard active={scriptSource === "own"} onClick={() => setScriptSource("own")}
                        title="Guion propio" desc="Pega tu narración o sube el audio ya grabado."/>
                    </div>
                  </div>
                )}
              </>
            ) : narrationMode === "stock_clips" ? (
              <>
                <label className="label">De dónde sale el guion</label>
                <div className="rg-3" style={{ gap: 10, marginBottom: 4 }}>
                  <PromptModeCard active={stockClipsSubMode === "normal" && scriptSource === "ai"} onClick={() => { setStockClipsSubMode("normal"); setScriptSource("ai"); }}
                    title="Generar con IA" desc="Claude escribe el guion (creación, referencia o adaptación)."/>
                  <PromptModeCard active={stockClipsSubMode === "normal" && scriptSource === "own"} onClick={() => { setStockClipsSubMode("normal"); setScriptSource("own"); }}
                    title="Guion propio" desc="Pega tu narración o sube el audio ya grabado."/>
                  <PromptModeCard active={stockClipsSubMode === "split_avatar"} onClick={() => setStockClipsSubMode("split_avatar")}
                    title="Split Avatar" desc="Sube tu vídeo de avatar; se divide la pantalla 50/50 con clips de stock."/>
                </div>
              </>
            ) : (
              <>
                <label className="label">De dónde sale el guion</label>
                <div className="rg-2" style={{ gap: 10, marginBottom: 4 }}>
                  <PromptModeCard active={scriptSource === "ai"} onClick={() => setScriptSource("ai")}
                    title="Generar con IA" desc="Claude escribe el guion (creación, referencia o adaptación)."/>
                  <PromptModeCard active={scriptSource === "own"} onClick={() => setScriptSource("own")}
                    title="Guion propio" desc="Pega tu narración o sube el audio ya grabado."/>
                </div>
              </>
            )}

            {narrationMode === "avatar" && heygenSubMode === "con_personaje" && selectedChannel && (!selectedChannel.avatarUrl || !selectedChannel.heygenAvatarId) && (
              <div style={{
                marginTop: 12, 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)",
              }}>
                ⚠ Al canal seleccionado le falta {!selectedChannel.avatarUrl && !selectedChannel.heygenAvatarId
                  ? "la foto de avatar y el HeyGen Avatar ID"
                  : !selectedChannel.avatarUrl ? "la foto de avatar" : "el HeyGen Avatar ID"}. Ve a Canales → Avatar del canal para configurarlo.
              </div>
            )}
            {narrationMode === "avatar" && (heygenSubMode === "con_imagenes" || heygenSubMode === "split_screen") && selectedChannel && !selectedChannel.avatarUrl && (
              <div style={{
                marginTop: 12, 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)",
              }}>
                ⚠ Al canal seleccionado le falta la foto de avatar (necesaria para las imágenes de cutaway). Ve a Canales → Avatar del canal para configurarlo.
              </div>
            )}
            {narrationMode === "avatar" && selectedChannel && selectedChannel.avatarUrl && (heygenSubMode !== "con_personaje" || selectedChannel.heygenAvatarId) && (
              <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 10 }}>
                <img src={selectedChannel.avatarUrl} alt="avatar" style={{ width: 36, height: 48, borderRadius: 6, objectFit: "cover" }}/>
                <div style={{ fontSize: 12, color: "var(--text-3)" }}>Avatar de <b style={{ color: "var(--text-2)" }}>{selectedChannel.name}</b> listo{heygenSubMode === "con_personaje" ? " para HeyGen" : ""}.</div>
              </div>
            )}

            {narrationMode === "personaje" && selectedChannel && !selectedChannel.avatarUrl && (
              <div style={{
                marginTop: 12, 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)",
              }}>
                ⚠ El canal seleccionado no tiene avatar configurado. Ve a Canales → Avatar del canal para añadirlo.
              </div>
            )}
            {narrationMode === "personaje" && selectedChannel && selectedChannel.avatarUrl && (
              <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 10 }}>
                <img src={selectedChannel.avatarUrl} alt="avatar" style={{ width: 36, height: 48, borderRadius: 6, objectFit: "cover" }}/>
                <div style={{ fontSize: 12, color: "var(--text-3)" }}>Avatar de <b style={{ color: "var(--text-2)" }}>{selectedChannel.name}</b> listo.</div>
              </div>
            )}
            {narrationMode === "personaje" && (
              <div style={{
                marginTop: 14, padding: 12, borderRadius: 10,
                background: "var(--bg-card-2)", border: "1px solid var(--border)",
              }}>
                <div className="row" style={{ gap: 12 }}>
                  <div className="grow">
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Animar las primeras 5 imágenes a vídeo</div>
                    <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>
                      Convierte cada una de las 5 primeras imágenes generadas en un clip de vídeo animado (LTX), a partir de esa misma foto. El resto sigue siendo imágenes fijas.
                    </div>
                  </div>
                  <div className={"toggle" + (animateFirstImages ? " on" : "")} onClick={() => setAnimateFirstImages(!animateFirstImages)}/>
                </div>
              </div>
            )}

            {narrationMode === "avatar" && heygenSubMode === "con_personaje" && selectedChannel && selectedChannel.heygenGroupId && (
              loadingHeygenLooks ? (
                <div style={{ marginTop: 14, fontSize: 12, color: "var(--text-3)" }}>Cargando looks del avatar…</div>
              ) : heygenLooks.length > 1 ? (
                <div style={{ marginTop: 14 }}>
                  <label className="label">Look del avatar para este vídeo</label>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(72px, 1fr))", gap: 8 }}>
                    {heygenLooks.map((look) => {
                      const active = (heygenLookId || selectedChannel.heygenAvatarId) === look.id;
                      return (
                        <div key={look.id} onClick={() => setHeygenLookId(look.id)}
                          title={look.name}
                          style={{
                            cursor: "pointer", borderRadius: 8, overflow: "hidden",
                            border: active ? "2px solid var(--accent)" : "1.5px solid var(--border-strong)",
                            aspectRatio: "1 / 1", position: "relative",
                          }}>
                          <img src={look.image_url} alt={look.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ) : null
            )}
          </div>
        )}

        {/* ========= Input dinámico ========= */}
        {(narrationMode === "imagenes_ia" || narrationMode === "avatar" || narrationMode === "personaje" || narrationMode === "stock_clips") && scriptSource === "ai" && (narrationMode !== "avatar" || heygenSubMode === "con_personaje") && !(narrationMode === "stock_clips" && stockClipsSubMode === "split_avatar") && (
          <div className="card card-pad">
            {/* Sub-tipo de prompt */}
            <label className="label">Tipo de generación</label>
            <div className="rg-3" style={{ gap: 10, marginBottom: 16 }}>
              <PromptModeCard active={promptMode === "creation"} onClick={() => setPromptMode("creation")}
                title="Creación" desc="Solo hace falta el título."/>
              <PromptModeCard active={promptMode === "reference"} onClick={() => setPromptMode("reference")}
                title="Referencia" desc="Título + narración de referencia."/>
              <PromptModeCard active={promptMode === "adaptation"} onClick={() => setPromptMode("adaptation")}
                title="Adaptación" desc="Título + narración a adaptar."/>
            </div>

            <label className="label">Título del vídeo</label>
            <input className="input" value={promptTitle} onChange={(e) => setPromptTitle(e.target.value)}
              placeholder="Ej. Los 5 imperios antiguos más crueles de la historia"/>

            {(promptMode === "reference" || promptMode === "adaptation") && (
              <div style={{ marginTop: 14 }}>
                <label className="label">
                  {promptMode === "reference" ? "Narración de referencia" : "Narración a adaptar"}
                </label>
                <textarea className="textarea" rows={6}
                  value={refNarration} onChange={(e) => setRefNarration(e.target.value)}
                  placeholder={promptMode === "reference"
                    ? "Pega aquí la narración que quieres usar como referencia de estilo y estructura…"
                    : "Pega aquí la narración original que se va a adaptar…"}/>
                <div className="help">
                  {promptMode === "reference"
                    ? "Claude imitará el tono, ritmo y estructura sin copiar el contenido."
                    : "Claude reescribirá este texto adaptándolo al rol del canal."}
                </div>
              </div>
            )}

            <div className="help" style={{ marginTop: 12 }}>
              Rol de guionista aplicado: <b style={{ color: "var(--text-2)" }}>{selectedChannel ? selectedChannel.name : "—"}</b>.
            </div>
          </div>
        )}

        {(narrationMode === "imagenes_ia" || narrationMode === "avatar" || narrationMode === "personaje" || narrationMode === "stock_clips") && scriptSource === "own" && (narrationMode !== "avatar" || heygenSubMode === "con_personaje") && !(narrationMode === "stock_clips" && stockClipsSubMode === "split_avatar") && (
          <div className="card card-pad">
            <label className="label">Título del vídeo</label>
            <input className="input" style={{ marginBottom: 14 }} value={promptTitle} onChange={(e) => setPromptTitle(e.target.value)}
              placeholder="Ej. Los 5 imperios antiguos más crueles de la historia"/>
            {narrationMode === "avatar" ? (
              <div>
                <label className="label">Guion de la Intro <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· ~20-60s, la habla el avatar</span></label>
                <textarea className="textarea" rows={5}
                  value={script}
                  onChange={(e) => setScript(e.target.value)}
                  placeholder={"El hook que dirá el avatar de HeyGen…"}
                  style={{ marginBottom: 12 }}/>
                <label className="label">Guion del Resto <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· imágenes + Pexels</span></label>
                <textarea className="textarea" rows={5}
                  value={scriptResto}
                  onChange={(e) => setScriptResto(e.target.value)}
                  placeholder={"El resto de la narración, sobre imágenes del personaje…"}/>
                <div className="help" style={{ marginTop: 6 }}>
                  Dos audios separados: Intro con voz Minimax del canal (avatar), Resto con la voz normal del canal.
                </div>
              </div>
            ) : (
              <div className="rg-2" style={{ gap: 14 }}>
                {/* Transcripción de texto */}
                <div>
                  <label className="label">Transcripción</label>
                  <textarea className="textarea" rows={8}
                    value={script}
                    onChange={(e) => { setScript(e.target.value); if (e.target.value) setScriptAudio(null); }}
                    placeholder={"Pega aquí la narración ya escrita…"}
                    style={{ opacity: scriptAudio ? 0.4 : 1 }}/>
                  {!scriptAudio && script && (
                    <div className="help" style={{ marginTop: 6 }}>
                      Se saltará el TTS y el pipeline arrancará desde la generación de imágenes.
                    </div>
                  )}
                </div>

                {/* Audio ya grabado */}
                <div>
                  <label className="label">Audio ya grabado</label>
                  <div style={{
                    borderRadius: 10, padding: 24, textAlign: "center",
                    background: scriptAudio ? "var(--accent-softer)" : "var(--bg-card-2)",
                    border: scriptAudio ? "1.5px solid rgba(124,92,255,0.45)" : "1.5px dashed var(--border-strong)",
                    cursor: script ? "not-allowed" : "pointer",
                    transition: "all 140ms ease",
                    opacity: script ? 0.4 : 1,
                    position: "relative",
                  }} onClick={() => { if (!script && !uploadPct) document.getElementById("script-audio-input").click(); }}>
                    {uploadPct > 0 ? (
                      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                        <AudioUploadCircle pct={uploadPct}/>
                        <div style={{ fontSize: 12, color: "var(--accent-2)", fontWeight: 500 }}>Subiendo… {uploadPct}%</div>
                      </div>
                    ) : (
                      <>
                        <IconWave size={22} style={{ color: scriptAudio ? "var(--accent-2)" : "var(--text-4)" }}/>
                        {scriptAudio
                          ? <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 500, color: "var(--accent-2)" }}>{scriptAudio.name}</div>
                          : <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 500 }}>Arrastra o <span style={{ color: "var(--accent-2)" }}>explora</span></div>
                        }
                        <div className="help">MP3 · WAV · M4A</div>
                      </>
                    )}
                  </div>
                  <input id="script-audio-input" type="file" accept="audio/mp3,audio/wav,audio/m4a,audio/*" style={{ display: "none" }}
                    onChange={(e) => { if (e.target.files[0]) { setScriptAudio(e.target.files[0]); setScript(""); } }}/>
                  {scriptAudio && (
                    <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 6 }}>
                      <div className="help" style={{ flex: 1 }}>La duración la marca el audio. Pipeline: subtítulos → imágenes → montaje.</div>
                      <button style={{ background: "none", border: "none", color: "var(--text-4)", cursor: "pointer", fontSize: 11 }}
                        onClick={() => setScriptAudio(null)}>Quitar</button>
                    </div>
                  )}
                </div>
              </div>
            )}

            {narrationMode !== "avatar" && !script && !scriptAudio && (
              <div className="help" style={{ marginTop: 10 }}>
                Pega la transcripción para saltar el TTS, o sube el audio ya grabado para que la duración la marque el archivo.
              </div>
            )}
          </div>
        )}

        {narrationMode === "avatar" && (heygenSubMode === "con_imagenes" || heygenSubMode === "split_screen") && (
          <div className="card card-pad">
            <label className="label">Título del vídeo</label>
            <input className="input" style={{ marginBottom: 14 }} value={promptTitle} onChange={(e) => setPromptTitle(e.target.value)}
              placeholder="Ej. Los 5 imperios antiguos más crueles de la historia"/>

            <label className="label">Vídeo ya grabado con el avatar</label>
            <div style={{
              borderRadius: 10, padding: 28, textAlign: "center",
              background: scriptVideo ? "var(--accent-softer)" : "var(--bg-card-2)",
              border: scriptVideo ? "1.5px solid rgba(124,92,255,0.45)" : "1.5px dashed var(--border-strong)",
              cursor: "pointer",
              transition: "all 140ms ease",
              position: "relative",
            }} onClick={() => { if (!uploadPct) document.getElementById("script-video-input").click(); }}>
              {uploadPct > 0 ? (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                  <AudioUploadCircle pct={uploadPct}/>
                  <div style={{ fontSize: 12, color: "var(--accent-2)", fontWeight: 500 }}>Subiendo… {uploadPct}%</div>
                </div>
              ) : (
                <>
                  <IconWave size={22} style={{ color: scriptVideo ? "var(--accent-2)" : "var(--text-4)" }}/>
                  {scriptVideo
                    ? <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 500, color: "var(--accent-2)" }}>{scriptVideo.name}</div>
                    : <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 500 }}>Arrastra o <span style={{ color: "var(--accent-2)" }}>explora</span></div>
                  }
                  <div className="help">MP4 · MOV</div>
                </>
              )}
            </div>
            <input id="script-video-input" type="file" accept="video/mp4,video/quicktime,video/*" style={{ display: "none" }}
              onChange={(e) => { if (e.target.files[0]) setScriptVideo(e.target.files[0]); }}/>
            {scriptVideo && (
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 6 }}>
                <div className="help" style={{ flex: 1 }}>La duración la marca el vídeo. Extraemos su audio, lo transcribimos, y añadimos imágenes de cutaway (6-8s cada ~30s) sin tocar el audio original.</div>
                <button style={{ background: "none", border: "none", color: "var(--text-4)", cursor: "pointer", fontSize: 11 }}
                  onClick={() => setScriptVideo(null)}>Quitar</button>
              </div>
            )}
          </div>
        )}

        {narrationMode === "stock_clips" && stockClipsSubMode === "split_avatar" && (
          <div className="card card-pad">
            <label className="label">Título del vídeo</label>
            <input className="input" style={{ marginBottom: 14 }} value={promptTitle} onChange={(e) => setPromptTitle(e.target.value)}
              placeholder="Ej. Los 5 imperios antiguos más crueles de la historia"/>

            <label className="label">Vídeo de tu avatar</label>
            <div style={{
              borderRadius: 10, padding: 28, textAlign: "center",
              background: scriptVideo ? "var(--accent-softer)" : "var(--bg-card-2)",
              border: scriptVideo ? "1.5px solid rgba(124,92,255,0.45)" : "1.5px dashed var(--border-strong)",
              cursor: "pointer",
              transition: "all 140ms ease",
              position: "relative",
            }} onClick={() => { if (!uploadPct) document.getElementById("script-video-input").click(); }}>
              {uploadPct > 0 ? (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                  <AudioUploadCircle pct={uploadPct}/>
                  <div style={{ fontSize: 12, color: "var(--accent-2)", fontWeight: 500 }}>Subiendo… {uploadPct}%</div>
                </div>
              ) : (
                <>
                  <IconWave size={22} style={{ color: scriptVideo ? "var(--accent-2)" : "var(--text-4)" }}/>
                  {scriptVideo
                    ? <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 500, color: "var(--accent-2)" }}>{scriptVideo.name}</div>
                    : <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 500 }}>Arrastra o <span style={{ color: "var(--accent-2)" }}>explora</span></div>
                  }
                  <div className="help">MP4 · MOV</div>
                </>
              )}
            </div>
            <input id="script-video-input" type="file" accept="video/mp4,video/quicktime,video/*" style={{ display: "none" }}
              onChange={(e) => { if (e.target.files[0]) setScriptVideo(e.target.files[0]); }}/>
            {scriptVideo && (
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 6 }}>
                <div className="help" style={{ flex: 1 }}>La duración la marca el vídeo. Extraemos su audio, lo transcribimos, y buscamos clips de stock para la mitad izquierda sin tocar el audio original.</div>
                <button style={{ background: "none", border: "none", color: "var(--text-4)", cursor: "pointer", fontSize: 11 }}
                  onClick={() => setScriptVideo(null)}>Quitar</button>
              </div>
            )}
          </div>
        )}

        {/* ========= PASO 2: MONTAJE ========= */}
        <div className="card card-pad">
          <StepHeader num="3" title="Forma de montaje" desc="Cómo se ensambla el video visualmente."/>

          {narrationMode === "avatar" ? (
            <React.Fragment>
              {heygenSubMode === "con_personaje" ? (
                <div style={{
                  padding: 14, borderRadius: 10,
                  background: "var(--accent-softer)", border: "1px solid rgba(124,92,255,0.45)",
                  fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5,
                }}>
                  <b>Intro</b>: voz Minimax del canal + avatar de HeyGen (con pausa de 1s al final).{" "}
                  <b>Resto</b>: clip de Motion.so de apertura + imágenes del personaje (Nanobanana) + un clip de stock de Pexels sin caras cada ~30s.
                </div>
              ) : heygenSubMode === "split_screen" ? (
                <div style={{
                  padding: 14, borderRadius: 10,
                  background: "var(--accent-softer)", border: "1px solid rgba(124,92,255,0.45)",
                  fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5,
                }}>
                  El vídeo subido ocupa una mitad de la pantalla (con su audio original íntegro) y la otra mitad se rellena con imágenes generadas según lo que se narra.
                </div>
              ) : (
                <div style={{
                  padding: 14, borderRadius: 10,
                  background: "var(--accent-softer)", border: "1px solid rgba(124,92,255,0.45)",
                  fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5,
                }}>
                  Se insertan imágenes tipo cutaway (6-8s cada ~30s) sobre el vídeo subido, conservando el vídeo y el audio originales en el resto de la narración.
                </div>
              )}
              {heygenSubMode === "con_personaje" && (
                <div style={{ marginTop: 14 }}>
                  <label className="label">Cada cuánto cambia la imagen (Resto)</label>
                  <div className="segmented" style={{ width: "100%" }}>
                    {[[10, "10s"], [20, "20s"], [30, "30s"]].map(([val, label]) => (
                      <button key={val} className={imageCadence === val ? "on" : ""}
                        onClick={() => setImageCadence(val)}
                        style={{ flex: 1, justifyContent: "center" }}>{label}</button>
                    ))}
                  </div>
                </div>
              )}
            </React.Fragment>
          ) : narrationMode === "stock_clips" ? (
            <div>
              <div style={{
                padding: 14, borderRadius: 10,
                background: "var(--accent-softer)", border: "1px solid rgba(124,92,255,0.45)",
                fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5,
              }}>
                {stockClipsSubMode === "split_avatar"
                  ? "La pantalla se divide 50/50: clips de stock de Pexels y Pixabay a la izquierda (cambiando según lo narrado), tu vídeo de avatar a la derecha, con su audio original íntegro."
                  : "El vídeo se monta con clips de stock de Pexels y Pixabay a lo largo de toda la narración (buscados automáticamente según el guion, sin caras, ~6s cada uno)."}
              </div>
              <div style={{
                marginTop: 14, padding: 12, borderRadius: 10,
                background: "var(--bg-card-2)", border: "1px solid var(--border)",
              }}>
                <div className="row" style={{ gap: 12 }}>
                  <div className="grow">
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Usar también fotos e ilustraciones</div>
                    <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>
                      Intercala fotos/ilustraciones de Pixabay cada cierto tiempo. Si lo desactivas, el vídeo será 100% clips.
                    </div>
                  </div>
                  <div className={"toggle" + (stockUseImages ? " on" : "")} onClick={() => setStockUseImages(!stockUseImages)}/>
                </div>
              </div>
            </div>
          ) : (
            <div className="rg-2" style={{ gap: 10, marginTop: 4 }}>
              {ASSEMBLY_OPTIONS.map((o) => (
                <AssemblyCard key={o.id}
                  active={assemblyMode === o.id}
                  onClick={() => setAssemblyMode(o.id)}
                  title={o.title}
                  desc={o.desc}
                  Icon={o.Icon}/>
              ))}
            </div>
          )}

          {loopApplies && (
            <div style={{
              marginTop: 14, padding: 12, borderRadius: 10,
              background: "var(--bg-card-2)", border: "1px solid var(--border)",
            }}>
              <div className="row" style={{ gap: 12 }}>
                <div className="grow">
                  <div style={{ fontSize: 13, fontWeight: 600 }}>Función loop de imágenes</div>
                  <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>
                    Repite las imágenes a lo largo del video para abaratar el coste de generación.
                  </div>
                </div>
                <div className={"toggle" + (loopImages ? " on" : "")} onClick={() => setLoopImages(!loopImages)}/>
              </div>
            </div>
          )}

          {narrationMode !== "avatar" && narrationMode !== "stock_clips" && (
            <div style={{
              marginTop: 14, padding: 12, borderRadius: 10,
              background: "var(--bg-card-2)", border: "1px solid var(--border)",
            }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Hook Intro especial</div>
              <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, marginBottom: 10, lineHeight: 1.5 }}>
                Sustituye la imagen del Hook Intro por otro tipo de clip.
              </div>
              <div className="rg-3" style={{ gap: 8 }}>
                {[
                  { id: "",       title: "Ninguno",         desc: "Imagen normal" },
                  { id: "motion", title: "Infografía",      desc: "Motion.so" },
                  { id: "pexels", title: "Clips de Stock",  desc: "Pexels" },
                ].map((o) => (
                  <div key={o.id || "none"} onClick={() => setHookMode(o.id)}
                    style={{
                      cursor: "pointer", padding: "8px 10px", borderRadius: 8, textAlign: "center",
                      border: hookMode === o.id ? "1.5px solid var(--accent)" : "1.5px solid var(--border-strong)",
                      background: hookMode === o.id ? "var(--accent-softer)" : "transparent",
                    }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-1)" }}>{o.title}</div>
                    <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 2 }}>{o.desc}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* ========= PASO 3: CONFIG ========= */}
        <div className="card card-pad">
          <StepHeader num="4" title="Configuración del video" desc="Ajustes finales antes de generar."/>

          <div className="rg-2" style={{ gap: 16, marginTop: 4 }}>
            <div>
              <label className="label">Modelo de generación</label>
              <div className="segmented" style={{ width: "100%" }}>
                {[["v1","v1"],["v2","v2"],["pro","Pro ✦"]].map(([val, label]) => (
                  <button key={val} className={nanoBananaVersion === val ? "on" : ""}
                    onClick={() => setNanoBananaVersion(val)}
                    style={{ flex: 1, justifyContent: "center" }}>{label}</button>
                ))}
              </div>
              <div className="help" style={{ marginTop: 4 }}>
                {nanoBananaVersion === "pro" ? "Máxima calidad · nano-banana-pro · 2K."
                  : nanoBananaVersion === "v2" ? "2K · alta calidad · modelo mejorado."
                  : "Calidad estándar · más rápido."}
              </div>
            </div>

            {!isAudioDriven && (
              <div style={{ gridColumn: "1 / -1" }}>
                <label className="label">Duración del video</label>
                <div className="rg-3" style={{ gap: 8 }}>
                  {DURATION_BUCKETS.map((b) => (
                    <button key={b.id}
                      onClick={() => setDurationBucket(b.id)}
                      style={{
                        background: durationBucket === b.id ? "var(--accent-softer)" : "var(--bg-card-2)",
                        border: "1px solid " + (durationBucket === b.id ? "rgba(124,92,255,0.45)" : "var(--border)"),
                        borderRadius: 9, padding: "10px 8px", cursor: "pointer",
                        color: durationBucket === b.id ? "var(--text)" : "var(--text-2)",
                        textAlign: "center",
                        boxShadow: durationBucket === b.id ? "0 0 0 3px rgba(124,92,255,0.12)" : "none",
                        transition: "all 140ms ease",
                      }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600 }}>{b.label}</div>
                      <div style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 2, fontFamily: "var(--font-mono)" }}>
                        {b.range}
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>

          <hr className="hr"/>

          <div className="rg-2" style={{ gap: 14 }}>
            <div style={{ fontSize: 12, color: "var(--text-4)", gridColumn: "1 / -1" }}>
              Subtítulos y marca de agua se configuran ahora en <b>Mis canales</b>:{" "}
              {selectedChannel ? (selectedChannel.subtitlesEnabled ? "subtítulos activados" : "subtítulos desactivados") : "—"}
              {" · "}
              {selectedChannel ? (selectedChannel.watermarkDefault ? "marca de agua activada" : "marca de agua desactivada") : "—"}.
            </div>
            <SwitchRow on={kenBurns} onToggle={() => setKenBurns(!kenBurns)}
              title="Animaciones Ken Burns"
              desc="Zoom y paneo suave sobre imágenes fijas."/>
            <SwitchRow
              on={loopImages && ["medium"].includes(durationBucket)}
              onToggle={() => { if (["medium"].includes(durationBucket)) setLoopImages(!loopImages); }}
              disabled={!["medium"].includes(durationBucket)}
              title="Loop de imágenes / vídeos"
              desc={["medium"].includes(durationBucket)
                ? "Se generan ~20 min de contenido y se reutiliza para el resto del vídeo."
                : "Solo disponible en duración Medio."}/>

            {!(scriptKind === "video" || (scriptKind === "script" && scriptAudio)) && (
              <div style={{ gridColumn: "1 / -1" }}>
                <label className="label">
                  Velocidad de la voz · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{voiceSpeed.toFixed(2)}x</span>
                </label>
                <input type="range" min="0.5" max="1.5" step="0.05" value={voiceSpeed}
                  onChange={(e) => setVoiceSpeed(+e.target.value)}
                  style={{ width: "100%", accentColor: "var(--accent)" }}/>
                <div className="help">Más lento ← 0.5x — 1.5x → más rápido (1.0x es el ritmo normal).</div>
              </div>
            )}
          </div>

          {narrationMode === "avatar" && heygenSubMode !== "split_screen" && (
            <>
              <hr className="hr"/>
              <div style={{
                padding: 12, borderRadius: 10,
                background: "var(--bg-card-2)", border: "1px solid var(--border)",
              }}>
                <div className="row" style={{ gap: 12 }}>
                  <div className="grow">
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Hook Intro Imagen</div>
                    <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2, lineHeight: 1.5 }}>
                      Inserta 1-3 imágenes del personaje sobre el Hook Intro (la 1ª entre el segundo 3 y 5, ~3s cada una), relacionadas con el título y con lo que se narra en ese momento.
                    </div>
                  </div>
                  <div className={"toggle" + (hookIntroImages ? " on" : "")} onClick={() => setHookIntroImages(!hookIntroImages)}/>
                </div>
                {hookIntroImages && (
                  <div style={{ marginTop: 10 }}>
                    <label className="label">Nº de imágenes</label>
                    <div className="segmented" style={{ width: "100%" }}>
                      {[1, 2, 3].map((n) => (
                        <button key={n} className={hookIntroImageCount === n ? "on" : ""}
                          onClick={() => setHookIntroImageCount(n)}
                          style={{ flex: 1, justifyContent: "center" }}>{n}</button>
                      ))}
                    </div>
                    <div style={{ marginTop: 10 }}>
                      <SwitchRow on={false} disabled title="FX Sonido en Imagen"
                        desc="Añade un sonido a cada imagen del Hook Intro. Próximamente — el sonido se configurará más adelante."/>
                    </div>
                  </div>
                )}
              </div>
            </>
          )}

          {narrationMode === "avatar" && heygenSubMode === "con_imagenes" && (
            <div style={{ marginTop: 14 }}>
              <SwitchRow on={zoomAvatarHookIntroFx} onToggle={() => setZoomAvatarHookIntroFx(!zoomAvatarHookIntroFx)}
                title="Zoom Avatar Hook Intro FX"
                desc="Zoom sobre el avatar en los primeros 10s: empieza al 140%, cae a 100% en medio segundo, sube hasta 115% en el segundo 5 y vuelve a 100% en el segundo 10."/>
            </div>
          )}

          <hr className="hr"/>

          <SwitchRow on={transitions} onToggle={() => setTransitions(!transitions)}
            title="Fundido cruzado entre cortes"
            desc="Fundido suave de 0.5s en cada cambio de imagen, clip o vídeo. Añade algo de tiempo de montaje."/>

          <hr className="hr"/>

          <SwitchRow on={musicEnabled} onToggle={() => setMusicEnabled(!musicEnabled)}
            title="Música de fondo"
            desc="Combina canciones de tus carpetas de forma continua y aleatoria a lo largo del vídeo."/>

          {musicEnabled && (
            <div style={{ marginTop: 12 }}>
              <div style={{ marginBottom: 14 }}>
                <label className="label">
                  Volumen de la música · <span style={{ color: "var(--text-4)", fontWeight: 400 }}>{musicVolumeDb}dB</span>
                </label>
                <input type="range" min="-35" max="-28" step="1" value={musicVolumeDb}
                  onChange={(e) => setMusicVolumeDb(+e.target.value)}
                  style={{ width: "100%", accentColor: "var(--accent)" }}/>
                <div className="help">Más baja ← -35dB — -28dB → más alta (bajo la narración).</div>
              </div>
              {availableMusicFolders.length === 0 && (
                <div style={{ fontSize: 12, color: "var(--text-4)" }}>
                  Todavía no tienes carpetas de música. Créalas en "Música de fondo" en el menú de la izquierda.
                </div>
              )}
              {availableMusicFolders.length > 0 && (
                <div className="col" style={{ gap: 6 }}>
                  <label className="label">Carpetas a usar</label>
                  {availableMusicFolders.map((f) => (
                    <label key={f.id} className="row" style={{ gap: 8, cursor: "pointer", fontSize: 13 }}>
                      <input type="checkbox" checked={selectedMusicFolderIds.includes(f.id)} onChange={() => toggleMusicFolder(f.id)}/>
                      {f.name}
                    </label>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* ============ RIGHT: pipeline ============ */}
      <div className="col create-layout-pipeline" style={{ gap: 16 }}>
        <div className="card card-pad">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
            <h3 className="card-title">Pipeline</h3>
            <span className="pill"><IconClock size={10}/> ~{steps.reduce((a, s) => a + s.dur, 0)}s</span>
          </div>
          <p className="card-sub">El orden de los pasos al generar. Antes del montaje podrás revisar y aprobar el contenido.</p>

          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 2 }}>
            {steps.map((s, i) => {
              const status = stepIdx === -1 ? "idle"
                : i < stepIdx ? "done"
                : i === stepIdx ? "active"
                : "queued";
              return <PipelineStep key={s.key} step={s} index={i} status={status} last={i === steps.length - 1}/>;
            })}
          </div>

          {generating && (
            <div style={{ marginTop: 18 }}>
              <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 12, color: "var(--text-3)" }}>Progreso total</span>
                <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--accent-2)" }}>
                  {Math.round(progress)}%
                </span>
              </div>
              <div className="progress-track"><div className="progress-fill" style={{ width: progress + "%" }}/></div>
            </div>
          )}

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

          <button className="btn btn-primary" style={{ width: "100%", marginTop: 18, justifyContent: "space-between", padding: "11px 14px" }}
            onClick={start}
            disabled={generating || !channelId || !promptTitle.trim()}>
            {generating
              ? uploadPct > 0
                ? <><AudioUploadCircle pct={uploadPct} size={16} strokeWidth={2}/> Subiendo audio… {uploadPct}%</>
                : <><IconClock size={15}/> Generando…</>
              : <>
                  <span className="row" style={{ gap: 7 }}><IconSparkle size={15}/> Generar video</span>
                  <span className="row" style={{ gap: 4, opacity: 0.75, fontFamily: "var(--font-mono)", fontSize: 12 }}>
                    <IconCoin size={13}/> {_videoCost.toLocaleString()}
                  </span>
                </>
            }
          </button>
        </div>

        {/* Resumen del video */}
        <div className="card card-pad" style={{ padding: "10px 14px" }}>
          <button
            onClick={() => setSummaryOpen(!summaryOpen)}
            style={{
              display: "flex", alignItems: "center", gap: 8,
              width: "100%", background: "none", border: "none",
              cursor: "pointer", color: "var(--text)", padding: 0,
            }}>
            <h3 className="card-title" style={{ margin: 0, flex: 1, textAlign: "left" }}>Resumen</h3>
            <IconChevronDown size={15} style={{ color: "var(--text-4)", transition: "transform 0.2s", transform: summaryOpen ? "none" : "rotate(-90deg)" }}/>
          </button>

          {summaryOpen && (
            <div style={{ marginTop: 12 }}>
              <MetaRow k="Narración" v={labelNarration(narrationMode, promptMode, scriptSource, heygenSubMode, stockClipsSubMode)}/>
              <MetaRow k="Montaje" v={narrationMode === "avatar" ? "Avatar + Imágenes" : narrationMode === "stock_clips" ? "Clips de stock" : labelAssembly(assemblyMode, false)}/>
              <MetaRow k="Canal" v={selectedChannel ? selectedChannel.name : "—"}/>
              <MetaRow k="Duración" v={isAudioDriven ? "Según audio" : DURATION_BUCKETS.find((b) => b.id === durationBucket).label}/>
              <MetaRow k="Modelo" v={nanoBananaVersion === "pro" ? "Nanobanana Pro" : nanoBananaVersion === "v2" ? "Nanobanana V2" : "Nanobanana V1"}/>
              <MetaRow k="Loop" v={loopImages && ["medium"].includes(durationBucket) ? "Activado" : "No"}/>
              <MetaRow k="Voz" v={selectedChannel ? (selectedChannel.voiceLabel || selectedChannel.voiceId || "—") : "—"}/>
              <MetaRow k="Subtítulos" v={selectedChannel ? (selectedChannel.subtitlesEnabled ? "Sí (según canal)" : "No (según canal)") : "—"}/>
              <MetaRow k="Ken Burns" v={kenBurns ? "Sí" : "No"}/>
              <MetaRow k="Marca de agua" v={selectedChannel ? (selectedChannel.watermarkDefault ? "Sí (según canal)" : "No (según canal)") : "—"}/>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ========== Datos ========== */

const DURATION_BUCKETS = [
  { id: "short",   label: "Corto",   range: "10–15 min" },
  { id: "regular", label: "Regular", range: "20–30 min" },
  { id: "medium",  label: "Medio",   range: "30–50 min" },
];

const ASSEMBLY_OPTIONS = [
  { id: "story_images",          title: "Historia de imágenes",
    desc: "Escenas montadas sólo con imágenes generadas.",
    Icon: (p) => <IconImage {...p}/> },
  { id: "long_1image",           title: "Historia larga · 1 imagen",
    desc: "Una sola imagen fija durante todo el vídeo.",
    Icon: (p) => <IconImage {...p}/> },
];

function labelNarration(m, promptMode, scriptSource, heygenSubMode, stockClipsSubMode) {
  if (m === "avatar") {
    if (heygenSubMode === "con_imagenes") return "Heygen Ready · Heygen con imágenes";
    if (heygenSubMode === "split_screen") return "Heygen Ready · Split Screen";
    return scriptSource === "own" ? "Heygen Ready · Nuevo Heygen con API · guion propio" : "Heygen Ready · Nuevo Heygen con API · IA";
  }
  if (m === "personaje") return "Imágenes Personaje";
  if (m === "stock_clips") {
    if (stockClipsSubMode === "split_avatar") return "Clips de stock · Split Avatar";
    if (scriptSource === "own") return "Clips de stock · guion propio";
    const sub = { creation: "creación", reference: "referencia", adaptation: "adaptación" }[promptMode];
    return `Clips de stock · ${sub}`;
  }
  if (m === "imagenes_ia") {
    if (scriptSource === "own") return "Imágenes IA · guion propio";
    const sub = { creation: "creación", reference: "referencia", adaptation: "adaptación" }[promptMode];
    return `Imágenes IA · ${sub}`;
  }
  return "—";
}
function labelAssembly(m, loop) {
  if (m === "stock_clips") return "Clips de stock";
  const base = (ASSEMBLY_OPTIONS.find((o) => o.id === m) || {}).title || "—";
  return loop ? `${base} · loop` : base;
}

function StepHeader({ num, title, desc }) {
  return (
    <div className="row" style={{ gap: 12, marginBottom: 14 }}>
      <div style={{
        width: 26, height: 26, borderRadius: 7,
        background: "var(--accent-softer)",
        border: "1px solid rgba(124,92,255,0.3)",
        color: "var(--accent-2)",
        display: "grid", placeItems: "center",
        fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600,
        flex: "0 0 26px",
      }}>{num}</div>
      <div className="grow">
        <h3 className="card-title" style={{ margin: 0 }}>{title}</h3>
        <p className="card-sub" style={{ margin: 0 }}>{desc}</p>
      </div>
    </div>
  );
}


function PromptModeCard({ active, onClick, title, desc }) {
  return (
    <button onClick={onClick} style={{
      textAlign: "left", padding: 12,
      background: active ? "var(--accent-softer)" : "var(--bg-card-2)",
      border: "1px solid " + (active ? "rgba(124,92,255,0.45)" : "var(--border)"),
      borderRadius: 10, cursor: "pointer", color: "var(--text)",
      transition: "all 140ms ease",
      boxShadow: active ? "0 0 0 3px rgba(124,92,255,0.12)" : "none",
    }}>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 3, color: active ? "var(--text)" : "var(--text-2)" }}>{title}</div>
      <div style={{ fontSize: 11, color: "var(--text-4)", lineHeight: 1.45 }}>{desc}</div>
    </button>
  );
}

function AssemblyCard({ active, onClick, title, desc, Icon }) {
  return (
    <button onClick={onClick} style={{
      textAlign: "left", padding: 14,
      background: active ? "var(--accent-softer)" : "var(--bg-card-2)",
      border: "1px solid " + (active ? "rgba(124,92,255,0.45)" : "var(--border)"),
      borderRadius: 10, cursor: "pointer", color: "var(--text)",
      transition: "all 140ms ease",
      boxShadow: active ? "0 0 0 3px rgba(124,92,255,0.12)" : "none",
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: active ? "linear-gradient(135deg,#8f72ff,#5b3dff)" : "var(--bg-card)",
        display: "grid", placeItems: "center",
        color: active ? "white" : "var(--text-2)",
        marginBottom: 10,
        boxShadow: active ? "0 4px 14px rgba(124,92,255,0.4)" : "none",
      }}>
        {Icon ? <Icon size={15}/> : null}
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 3 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: "var(--text-3)", lineHeight: 1.45 }}>{desc}</div>
    </button>
  );
}

function ModeCard({ active, onClick, Icon, title, desc, badge }) {
  return (
    <button onClick={onClick} style={{
      position: "relative",
      textAlign: "left", padding: 14,
      background: active ? "var(--accent-softer)" : "var(--bg-card-2)",
      border: "1px solid " + (active ? "rgba(124,92,255,0.45)" : "var(--border)"),
      borderRadius: 10, cursor: "pointer", color: "var(--text)",
      transition: "all 140ms ease",
      boxShadow: active ? "0 0 0 3px rgba(124,92,255,0.12)" : "none",
    }}>
      {badge && (
        <span style={{
          position: "absolute", top: 8, right: 8,
          background: "rgba(251,191,36,0.15)", color: "var(--yellow)",
          fontSize: 9, fontWeight: 700, padding: "1px 6px", borderRadius: 4,
          letterSpacing: "0.07em",
        }}>{badge}</span>
      )}
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: active ? "linear-gradient(135deg,#8f72ff,#5b3dff)" : "var(--bg-card)",
        display: "grid", placeItems: "center",
        color: active ? "white" : "var(--text-2)",
        marginBottom: 10,
        boxShadow: active ? "0 4px 14px rgba(124,92,255,0.4)" : "none",
      }}>
        <Icon size={15}/>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 3 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: "var(--text-3)", lineHeight: 1.45 }}>{desc}</div>
    </button>
  );
}


function ChannelSelect({ channels, value, onChange, showAvatar }) {
  const [open, setOpen] = React.useState(false);
  const chip = (c, size) => (
    <span style={{
      width: size, height: size, borderRadius: 5, background: c.tint,
      display: "grid", placeItems: "center", fontSize: 10, fontWeight: 700, color: "#00000099",
      overflow: "hidden", flex: `0 0 ${size}px`,
    }}>
      {showAvatar && c.avatarUrl
        ? <img src={c.avatarUrl} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
        : c.logo ? <img src={c.logo} style={{ width: "100%", height: "100%", objectFit: "cover" }}/> : c.initials}
    </span>
  );
  const sel = channels.find((c) => c.id === value) || null;
  const isEmpty = !sel;
  return (
    <div style={{ position: "relative" }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", background: "var(--bg-card-2)",
        border: "1px solid " + (isEmpty ? "rgba(248,113,113,0.4)" : "var(--border)"),
        borderRadius: 9, padding: "9px 12px", display: "flex", alignItems: "center", gap: 10,
        cursor: "pointer", color: isEmpty ? "var(--text-4)" : "var(--text)", fontSize: 13.5,
      }}>
        {sel ? chip(sel, 20) : (
          <span style={{ width: 20, height: 20, borderRadius: 5, background: "var(--border)", flex: "0 0 20px" }}/>
        )}
        <span className="grow" style={{ textAlign: "left" }}>
          {sel ? sel.name : "Selecciona un canal…"}
        </span>
        <IconChevronDown size={14}/>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0,
          background: "var(--bg-card)", border: "1px solid var(--border-strong)",
          borderRadius: 10, padding: 4, zIndex: 10,
          boxShadow: "0 12px 30px rgba(0,0,0,0.5)",
        }}>
          {channels.map((c) => (
            <button key={c.id} onClick={() => { onChange(c.id); setOpen(false); }} style={{
              width: "100%", background: "transparent", border: "none",
              color: "var(--text)", fontSize: 13, padding: "8px 10px",
              borderRadius: 7, cursor: "pointer", display: "flex", alignItems: "center", gap: 10,
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
              {chip(c, 20)}
              {c.name}
              {c.id === value && <IconCheck size={14} style={{ marginLeft: "auto", color: "var(--accent-2)" }}/>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function SwitchRow({ on, onToggle, title, desc, disabled }) {
  return (
    <div className="row" style={{
      padding: 12, background: "var(--bg-card-2)", border: "1px solid var(--border)",
      borderRadius: 10, gap: 12, opacity: disabled ? 0.5 : 1,
    }}>
      <div className="grow">
        <div style={{ fontSize: 12.5, fontWeight: 600 }}>{title}</div>
        <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 2 }}>{desc}</div>
      </div>
      <div className={"toggle" + (on ? " on" : "")}
        onClick={disabled ? undefined : onToggle}
        style={{ cursor: disabled ? "not-allowed" : "pointer" }}/>
    </div>
  );
}

function MetaRow({ k, v }) {
  return (
    <div className="row" style={{ justifyContent: "space-between", padding: "6px 0", borderBottom: "1px dashed var(--border)" }}>
      <span style={{ color: "var(--text-4)", fontSize: 11.5 }}>{k}</span>
      <span style={{ color: "var(--text-2)", fontFamily: "var(--font-mono)", fontSize: 11 }}>{v}</span>
    </div>
  );
}

function PipelineStep({ step, index, status, last }) {
  const colors = {
    idle:   { dot: "var(--border-strong)", line: "var(--border)", label: "var(--text-2)", tool: "var(--text-4)" },
    queued: { dot: "var(--border-strong)", line: "var(--border)", label: "var(--text-3)", tool: "var(--text-4)" },
    active: { dot: "var(--accent)",        line: "var(--accent)", label: "white",         tool: "var(--accent-2)" },
    done:   { dot: "var(--green)",         line: "var(--green)",  label: "var(--text)",   tool: "var(--text-3)" },
  }[status];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "22px 1fr", gap: 10, paddingBottom: last ? 0 : 14 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <div style={{
          width: 18, height: 18, borderRadius: "50%",
          background: status === "active" ? "transparent" : colors.dot,
          border: status === "active" ? "2px solid var(--accent)" : "none",
          display: "grid", placeItems: "center",
          color: "white", fontSize: 9, fontFamily: "var(--font-mono)",
          boxShadow: status === "active" ? "0 0 12px rgba(124,92,255,0.6)" : "none",
          flex: "0 0 18px",
        }}>
          {status === "done" ? <IconCheck size={11}/> : status === "active" ? (
            <span style={{ width: 8, height: 8, background: "var(--accent)", borderRadius: "50%",
              animation: "pulse 1.2s ease-in-out infinite" }}/>
          ) : index + 1}
        </div>
        {!last && <div style={{ flex: 1, width: 1.5, background: colors.line, marginTop: 2, borderRadius: 2 }}/>}
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 500, color: colors.label }}>{step.label}</div>
        <div style={{ fontSize: 11, color: colors.tool, fontFamily: "var(--font-mono)", marginTop: 2 }}>
          {step.tool}{step.dur ? ` · ${step.dur}s` : ""}
        </div>
      </div>
      <style>{`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }`}</style>
    </div>
  );
}

function AudioUploadCircle({ pct, size = 44, strokeWidth = 3 }) {
  const r = (size - strokeWidth * 2) / 2;
  const circ = 2 * Math.PI * r;
  const dash = circ * pct / 100;
  const cx = size / 2, cy = size / 2;
  return (
    <svg width={size} height={size} style={{ transform: "rotate(-90deg)", display: "block" }}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--border-strong)" strokeWidth={strokeWidth}/>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--accent)" strokeWidth={strokeWidth}
        strokeDasharray={`${dash} ${circ}`} strokeLinecap="round"
        style={{ transition: "stroke-dasharray 0.15s ease" }}/>
    </svg>
  );
}

Object.assign(window, { CreateVideoTab, ChannelSelect, SwitchRow, StepHeader, AudioUploadCircle, PipelineStep, MetaRow });