/* GenVozTab — v6 */

// ── VoicePicker modal ─────────────────────────────────────────────────────

const _VP_PALETTES = [
  ["#7c5cff","#3a1fd1"],["#f87171","#b91c1c"],["#60a5fa","#1d4ed8"],
  ["#4ade80","#15803d"],["#fbbf24","#b45309"],["#a78bfa","#6d28d9"],
  ["#fb923c","#c2410c"],["#34d399","#065f46"],["#f472b6","#9d174d"],
];
const _VP_LANG = {
  spanish:"ES", español:"ES", english:"EN", inglés:"EN",
  portuguese:"PT", português:"PT", french:"FR", français:"FR",
  german:"DE", deutsch:"DE", japanese:"JP", japonés:"JP",
  chinese:"ZH", chino:"ZH", korean:"KR", coreano:"KR", italian:"IT", italiano:"IT",
};
function vpGrad(name) {
  let h = 0;
  for (let i = 0; i < (name || "").length; i++) h = (h * 31 + (name || "").charCodeAt(i)) & 0x7fffffff;
  const [c1, c2] = _VP_PALETTES[h % _VP_PALETTES.length];
  return `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`;
}
function vpLangs(tags) {
  return [...new Set((tags || []).map(t => _VP_LANG[(t || "").toLowerCase().trim()]).filter(Boolean))];
}

function VoicePicker({ onSelect, onClose }) {
  const [tab,          setTab]          = React.useState("biblioteca");
  const [presetVoices, setPresetVoices] = React.useState([]);
  const [cloneVoices,  setCloneVoices]  = React.useState([]);
  const [loading,      setLoading]      = React.useState(true);
  const [search,       setSearch]       = React.useState("");
  const [playingId,    setPlayingId]    = React.useState(null);
  const audioRef = React.useRef(null);

  React.useEffect(() => {
    (async () => {
      setLoading(true);
      try {
        const [pr, cr] = await Promise.all([
          fetch("/api/public-voices", { credentials: "same-origin" }).then(r => r.json()),
          fetch("/api/voice/clones",  { credentials: "same-origin" }).then(r => r.json()).catch(() => ({})),
        ]);
        setPresetVoices(pr.voices || []);
        const raw = cr.voice_list || cr.data || cr.voices || cr.clones || [];
        setCloneVoices(raw.map(c => ({
          id:          c.voice_id || c.id,
          voice_id:    c.voice_id || c.id,
          voice_name:  c.voice_name || c.name || "Clon sin nombre",
          description: [c.gender, c.language].filter(Boolean).join(" · "),
          cover_url:   null,
          sample_url:  c.demo_audio || c.sample_url || null,
          tags:        [c.language, c.gender].filter(Boolean),
          is_clone:    true,
        })));
      } catch (e) { console.error(e); }
      finally { setLoading(false); }
    })();
  }, []);

  function playPreview(url, id) {
    if (audioRef.current) audioRef.current.pause();
    if (playingId === id) { setPlayingId(null); return; }
    const a = new Audio(url);
    audioRef.current = a;
    a.play().catch(() => {});
    setPlayingId(id);
    a.onended = () => setPlayingId(null);
  }

  function handleSelect(v) {
    if (audioRef.current) audioRef.current.pause();
    onSelect(v);
  }

  const rawList = tab === "biblioteca" ? presetVoices : cloneVoices;
  const displayList = search.trim()
    ? rawList.filter(v => {
        const q = search.toLowerCase();
        return (v.voice_name || "").toLowerCase().includes(q) ||
               (v.description || "").toLowerCase().includes(q) ||
               (v.tags || []).some(t => (t || "").toLowerCase().includes(q));
      })
    : rawList;

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 1000,
      background: "rgba(0,0,0,0.75)", backdropFilter: "blur(6px)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div style={{
        background: "var(--bg-2)", border: "1px solid var(--border)",
        borderRadius: "var(--radius-lg)",
        width: "min(900px, 94vw)", maxHeight: "85vh",
        display: "flex", flexDirection: "column", overflow: "hidden",
        boxShadow: "0 24px 64px rgba(0,0,0,0.55)",
      }}>

        {/* ── Header ── */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "15px 20px", borderBottom: "1px solid var(--border)", flexShrink: 0 }}>
          <span style={{ fontWeight: 700, fontSize: 15, color: "var(--text)", marginRight: "auto" }}>Seleccionar Voz</span>
          <div className="segmented">
            <button className={tab === "biblioteca" ? "on" : ""} onClick={() => setTab("biblioteca")}>Biblioteca</button>
            <button className={tab === "clones"    ? "on" : ""} onClick={() => setTab("clones")}>Mis Clones</button>
          </div>
          <div style={{ position: "relative" }}>
            <IconSearch size={13} style={{ position: "absolute", left: 9, top: "50%", transform: "translateY(-50%)", color: "var(--text-3)", pointerEvents: "none" }}/>
            <input className="input" style={{ paddingLeft: 30, width: 190, height: 34, fontSize: 13 }}
              placeholder="Buscar…" value={search} onChange={e => setSearch(e.target.value)} autoFocus/>
          </div>
          <button className="icon-btn" onClick={onClose}><IconX size={16}/></button>
        </div>

        {/* ── Body ── */}
        <div style={{ flex: 1, overflowY: "auto", padding: "16px 20px" }}>

          {loading && (
            <div style={{ textAlign: "center", padding: 48, color: "var(--text-3)" }}>
              <div style={{ width: 28, height: 28, border: "2.5px solid var(--border)", borderTopColor: "var(--accent)", borderRadius: "50%", animation: "spin 0.8s linear infinite", margin: "0 auto 12px" }}/>
              Cargando voces…
            </div>
          )}

          {!loading && displayList.length === 0 && (
            <div style={{ textAlign: "center", padding: 48, color: "var(--text-3)", fontSize: 13 }}>
              {tab === "clones" ? "No tienes voces clonadas aún" : "No se encontraron voces"}
            </div>
          )}

          {!loading && displayList.length > 0 && (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(176px, 1fr))", gap: 12 }}>
              {displayList.map(v => {
                const vid      = v.voice_id || v.id;
                const langs    = vpLangs(v.tags);
                const bg       = vpGrad(v.voice_name);
                const playing  = playingId === vid;

                return (
                  <div key={vid}
                    className="card"
                    onClick={() => handleSelect(v)}
                    style={{ overflow: "hidden", cursor: "pointer", display: "flex", flexDirection: "column", transition: "transform 0.12s, box-shadow 0.12s" }}
                    onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 28px rgba(0,0,0,0.3)"; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}>

                    {/* Cover */}
                    <div style={{ position: "relative", height: 112, flexShrink: 0 }}>
                      {v.cover_url
                        ? <img src={v.cover_url} alt={v.voice_name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                        : <div style={{ width: "100%", height: "100%", background: bg }}/>
                      }
                      {v.sample_url && (
                        <button
                          onClick={e => { e.stopPropagation(); playPreview(v.sample_url, vid); }}
                          style={{
                            position: "absolute", bottom: 7, right: 7,
                            width: 28, height: 28, borderRadius: "50%",
                            background: playing ? "var(--accent)" : "rgba(255,255,255,0.9)",
                            border: "none", cursor: "pointer",
                            display: "flex", alignItems: "center", justifyContent: "center",
                            boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
                          }}>
                          <IconPlay size={10} style={{ color: playing ? "#fff" : "#111", marginLeft: 1 }}/>
                        </button>
                      )}
                      {v.is_clone && (
                        <span style={{ position: "absolute", top: 6, left: 6, background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)", borderRadius: 20, padding: "2px 8px", fontSize: 9, fontWeight: 700, color: "var(--accent-2)", letterSpacing: "0.05em" }}>TÚ</span>
                      )}
                    </div>

                    {/* Body */}
                    <div style={{ padding: "10px 12px 12px" }}>
                      <div style={{ display: "flex", alignItems: "baseline", gap: 5, flexWrap: "wrap", marginBottom: v.description ? 4 : 0 }}>
                        <span style={{ fontWeight: 700, fontSize: 12.5, color: "var(--text)" }}>{v.voice_name}</span>
                        {langs.map(l => (
                          <span key={l} style={{ fontSize: 9.5, fontWeight: 700, padding: "1px 4px", borderRadius: 3, background: "var(--bg-3)", color: "var(--text-3)", letterSpacing: "0.05em" }}>{l}</span>
                        ))}
                      </div>
                      {v.description && (
                        <div style={{ fontSize: 11, color: "var(--text-3)", lineHeight: 1.4, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>
                          {v.description}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}


// ── Toggle helper ─────────────────────────────────────────────────────────

function GvToggle({ value, onChange }) {
  return (
    <button onClick={() => onChange(!value)} style={{
      width: 36, height: 20, borderRadius: 10, border: "none", cursor: "pointer",
      background: value ? "var(--accent)" : "var(--border)",
      position: "relative", flexShrink: 0, transition: "background 0.2s", padding: 0,
    }}>
      <span style={{
        position: "absolute", top: 2, left: value ? 18 : 2, width: 16, height: 16,
        borderRadius: "50%", background: "white", transition: "left 0.2s", display: "block",
      }}/>
    </button>
  );
}


// ── Section label ─────────────────────────────────────────────────────────

function GvLabel({ children }) {
  return (
    <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 10 }}>
      {children}
    </div>
  );
}

function GvDivider() {
  return <div style={{ height: 1, background: "var(--border)", margin: "18px 0" }}/>;
}


// ── GenVozTab ─────────────────────────────────────────────────────────────

function GenVozTab({ onNavigate }) {
  const [text, setText] = React.useState("");
  const [engine, setEngine] = React.useState("minimax");
  const [voiceId, setVoiceId] = React.useState("");
  const [voiceName, setVoiceName] = React.useState("");
  const [voiceCover, setVoiceCover] = React.useState(null);
  const [model, setModel] = React.useState("speech-2.8-hd");
  const [speed, setSpeed] = React.useState(0.95);
  const [pitch, setPitch] = React.useState(0);
  const [vol, setVol] = React.useState(1.0);
  const [langBoost, setLangBoost] = React.useState("Spanish");
  const [loudness, setLoudness] = React.useState(false);
  const [exportTranscript, setExportTranscript] = React.useState(true);
  const [pickerOpen, setPickerOpen] = React.useState(false);
  const [generating, setGenerating] = React.useState(false);
  const [audioUrl, setAudioUrl] = React.useState(null);
  const [error, setError] = React.useState(null);
  const pollRef = React.useRef(null);

  const MAX_CHARS = 1455849;

  const MODELS = {
    minimax: [
      { value: "speech-2.8-hd",   label: "speech-2.8-hd — Alta calidad" },
      { value: "speech-2.6-hd",   label: "speech-2.6-hd — Equilibrado"  },
      { value: "speech-01-turbo", label: "speech-01-turbo — Rápido"      },
    ],
    elevenlabs: [
      { value: "eleven_multilingual_v2", label: "Multilingual v2 — Mejor calidad" },
      { value: "eleven_turbo_v2_5",      label: "Turbo v2.5 — Rápido"             },
      { value: "eleven_flash_v2_5",      label: "Flash v2.5 — Más rápido"         },
    ],
  };

  const LANGS = ["Auto", "Spanish", "English", "Chinese", "French", "German", "Japanese", "Korean", "Portuguese", "Italian"];

  React.useEffect(() => {
    setModel(engine === "minimax" ? "speech-2.8-hd" : "eleven_multilingual_v2");
    setVoiceId(""); setVoiceName(""); setVoiceCover(null);
    setAudioUrl(null); setError(null);
  }, [engine]);

  function handleVoiceSelect(v) {
    setVoiceId(v.voice_id || v.id || "");
    setVoiceName(v.voice_name || "");
    setVoiceCover(v.cover_url || v.avatar_url || null);
    setPickerOpen(false);
  }

  function stopPolling() {
    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
  }

  React.useEffect(() => () => stopPolling(), []);

  function handleReset() {
    setSpeed(0.95); setPitch(0); setVol(1.0);
    setLoudness(false); setExportTranscript(true);
  }

  async function handleGenerate() {
    if (!text.trim() || !voiceId || generating) return;
    setGenerating(true); setError(null); setAudioUrl(null); stopPolling();
    try {
      const r = await fetch("/api/voice/tts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ text: text.trim(), voice_id: voiceId, voice_name: voiceName, model, speed, pitch: Math.round(pitch), vol, language_boost: langBoost, engine }),
      });
      const d = await r.json();
      if (!r.ok) { setError(d.detail || "Error al iniciar generación"); setGenerating(false); return; }
      const tid = d.task_id || d.id;
      if (!tid) { setError("No se recibió task_id"); setGenerating(false); return; }
      let tries = 0;
      pollRef.current = setInterval(async () => {
        tries++;
        if (tries > 60) { stopPolling(); setGenerating(false); setError("Tiempo de espera agotado"); return; }
        try {
          const pr = await fetch(`/api/voice/task/${tid}`, { credentials: "same-origin" });
          const pd = await pr.json();
          const done = ["done", "Success", "success", "completed"].includes(pd.status);
          const failed = ["error", "failed"].includes(pd.status);
          if (done) {
            stopPolling(); setGenerating(false);
            const url = (pd.metadata && pd.metadata.audio_url) || pd.audio_url || (pd.data && pd.data.audio_url) || null;
            if (url) setAudioUrl(url); else setError("Audio generado pero URL no encontrada");
          } else if (failed) {
            stopPolling(); setGenerating(false);
            setError(pd.error_message || pd.message || "Error en la generación");
          }
        } catch (_) {}
      }, 3000);
    } catch (e) {
      setError(e.message || "Error de red"); setGenerating(false);
    }
  }

  function handleDrop(e) {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => setText(ev.target.result.slice(0, MAX_CHARS));
    reader.readAsText(file);
  }

  const canGenerate = text.trim().length > 0 && voiceId && !generating;
  const currentModels = MODELS[engine] || MODELS.minimax;

  // topbar ≈ 64px, page padding top 28 + bottom 48 = 76px → 140px total
  const panelH = "calc(100vh - 140px)";

  const cardBox = {
    background: "var(--bg-card)",
    border: "1px solid var(--border)",
    borderRadius: "var(--radius-lg)",
    boxShadow: "var(--shadow-card)",
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
  };

  return (
    <div style={{ display: "flex", gap: 16, height: panelH, minHeight: 420, width: "100%" }}>

      {/* ── RIGHT: Controls box ── */}
      <div style={{ ...cardBox, width: 340, flexShrink: 0, order: 2 }}>

        {/* Header */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "11px 16px", borderBottom: "1px solid var(--border)", flexShrink: 0,
        }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text)" }}>Generar Voz</span>
          <button className="btn btn-ghost" style={{ fontSize: 12, height: 28, padding: "0 10px", gap: 5 }}
            onClick={() => onNavigate && onNavigate("voice_history")}>
            <IconClock size={12}/> Historial
          </button>
        </div>

        {/* Scrollable body */}
        <div style={{ flex: 1, overflowY: "auto", padding: "18px 16px" }}>

          {/* Engine */}
          <GvLabel>Motor TTS</GvLabel>
          <div className="segmented" style={{ width: "100%", marginBottom: 0 }}>
            <button className={engine === "minimax" ? "on" : ""} onClick={() => setEngine("minimax")} style={{ flex: 1 }}>Minimax</button>
            <button className={engine === "elevenlabs" ? "on" : ""} onClick={() => setEngine("elevenlabs")} style={{ flex: 1 }}>ElevenLabs</button>
          </div>

          <GvDivider/>

          {/* Voice */}
          <GvLabel>Voz</GvLabel>
          <button onClick={() => setPickerOpen(true)} style={{
            width: "100%", display: "flex", alignItems: "center", gap: 8,
            padding: "9px 12px", borderRadius: "var(--radius)", border: "1px solid var(--border)",
            background: "var(--bg-card-2)", cursor: "pointer",
            color: voiceId ? "var(--text)" : "var(--text-3)",
            fontSize: 13, fontWeight: voiceId ? 500 : 400, textAlign: "left",
            marginBottom: 12,
          }}>
            {voiceCover
              ? <img src={voiceCover} alt="" style={{ width: 22, height: 22, borderRadius: 5, objectFit: "cover", flexShrink: 0 }}/>
              : <div style={{ width: 22, height: 22, borderRadius: 5, background: "var(--accent-softer)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <IconUser size={12} style={{ color: "var(--accent)" }}/>
                </div>
            }
            <span style={{ flex: 1 }}>{voiceName || "Seleccionar voz…"}</span>
            <IconChevronRight size={14} style={{ color: "var(--text-4)", flexShrink: 0 }}/>
          </button>

          {/* Language */}
          <GvLabel>Idioma</GvLabel>
          <select className="input" value={langBoost} onChange={e => setLangBoost(e.target.value)}
            style={{ width: "100%", fontSize: 13, padding: "8px 12px", height: 38 }}>
            {LANGS.map(l => <option key={l} value={l}>{l}</option>)}
          </select>

          <GvDivider/>

          {/* Model */}
          <GvLabel>Modelo</GvLabel>
          <select className="input" value={model} onChange={e => setModel(e.target.value)}
            style={{ width: "100%", fontSize: 13, padding: "8px 12px", height: 38 }}>
            {currentModels.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
          </select>

          <GvDivider/>

          {/* Sliders */}
          <GvLabel>Parámetros</GvLabel>

          {[
            { label: "Velocidad", value: speed, display: speed.toFixed(2), min: 0.5, max: 2, step: 0.05, set: setSpeed, marks: ["Lenta", "Rápida"] },
            { label: "Tono",      value: pitch, display: pitch >= 0 ? `+${pitch}` : String(pitch), min: -12, max: 12, step: 1, set: v => setPitch(parseInt(v)), marks: null },
            { label: "Volumen",   value: vol,   display: vol.toFixed(2), min: 0.1, max: 2, step: 0.05, set: setVol, marks: null },
          ].map(s => (
            <div key={s.label} style={{ marginBottom: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
                <span style={{ fontSize: 13, color: "var(--text-2)", fontWeight: 500 }}>{s.label}</span>
                <span style={{ fontSize: 13, color: "var(--accent)", fontWeight: 700, fontFamily: "var(--font-mono)" }}>{s.display}</span>
              </div>
              <input type="range" min={s.min} max={s.max} step={s.step} value={s.value}
                onChange={e => s.set(parseFloat(e.target.value))}
                style={{ width: "100%", accentColor: "var(--accent)", display: "block", margin: 0 }}/>
              {s.marks && (
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--text-4)", marginTop: 2 }}>
                  {s.marks.map(m => <span key={m}>{m}</span>)}
                </div>
              )}
            </div>
          ))}

          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 4 }}>
            <button onClick={handleReset} style={{
              display: "flex", alignItems: "center", gap: 5, background: "none", border: "none",
              cursor: "pointer", color: "var(--text-4)", fontSize: 12, padding: "2px 0",
            }}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 12, height: 12 }}>
                <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>
              </svg>
              Restablecer
            </button>
          </div>

          <GvDivider/>

          {/* Toggles */}
          <GvLabel>Opciones</GvLabel>

          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <GvToggle value={loudness} onChange={setLoudness}/>
            <span style={{ fontSize: 13, color: "var(--text-2)", flex: 1 }}>Normalización de loudness</span>
            <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 20, background: "rgba(96,165,250,0.12)", color: "#60a5fa", fontWeight: 600 }}>Beta</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
            <GvToggle value={exportTranscript} onChange={setExportTranscript}/>
            <span style={{ fontSize: 13, color: "var(--text-2)", flex: 1 }}>Exportar transcripción</span>
            <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 20, background: "rgba(251,191,36,0.12)", color: "#fbbf24", fontWeight: 600 }}>+15%</span>
          </div>

          {/* Warning */}
          <div style={{
            display: "flex", alignItems: "flex-start", gap: 8, padding: "10px 12px",
            borderRadius: "var(--radius)", background: "rgba(251,191,36,0.06)",
            border: "1px solid rgba(251,191,36,0.15)", fontSize: 11.5, color: "rgba(251,191,36,0.8)",
          }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 13, height: 13, flexShrink: 0, marginTop: 1 }}>
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
              <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
            La velocidad puede ser lenta con texto corto y rápida con texto largo.
          </div>

        </div>
      </div>

      {/* ── LEFT: Textarea box ── */}
      <div style={{ ...cardBox, flex: 1, minWidth: 0, order: 1 }}>

        <textarea
          autoFocus
          value={text}
          onChange={e => setText(e.target.value.slice(0, MAX_CHARS))}
          onDragOver={e => e.preventDefault()}
          onDrop={handleDrop}
          placeholder={"Escribe aquí tu texto…\n\nUsa etiquetas como {happy}texto{/happy} para añadir expresividad.\nEl modelo 2.8 soporta etiquetas de sonido como {laughs}.\n\nInserta <#0.5#> para hacer una pausa de 0.5 s.\nArrastra y suelta archivos .txt o .srt aquí."}
          style={{
            flex: 1, resize: "none", border: "none", outline: "none",
            background: "transparent", color: "var(--text)", fontSize: 14,
            lineHeight: 1.8, padding: "24px 28px", fontFamily: "inherit",
            boxSizing: "border-box", width: "100%",
          }}
        />

        {/* Audio result */}
        {audioUrl && (
          <div style={{ padding: "0 20px 8px", display: "flex", alignItems: "center", gap: 10 }}>
            <audio controls src={audioUrl} style={{ flex: 1, height: 36 }}/>
            <a href={audioUrl} download="voz_generada.mp3" className="btn btn-ghost" style={{ fontSize: 12, whiteSpace: "nowrap" }}>
              <IconDownload size={13}/> Descargar
            </a>
          </div>
        )}

        {/* Error */}
        {error && (
          <div style={{ margin: "0 20px 8px", padding: "8px 12px", borderRadius: 8, background: "rgba(248,113,113,0.12)", border: "1px solid rgba(248,113,113,0.3)", color: "#fca5a5", fontSize: 12 }}>
            {error}
          </div>
        )}

        {/* Bottom bar */}
        <div style={{
          display: "flex", alignItems: "center", gap: 12, flexShrink: 0,
          padding: "10px 20px", borderTop: "1px solid var(--border)",
          background: "var(--bg-card)",
        }}>
          <span style={{ fontSize: 12, color: "var(--text-4)", fontFamily: "var(--font-mono)" }}>
            {text.length.toLocaleString()} caracteres
          </span>
          <div style={{ flex: 1 }}/>
          {!voiceId && (
            <span style={{ fontSize: 12, color: "var(--text-3)" }}>Selecciona una voz primero</span>
          )}
          <button
            onClick={handleGenerate}
            disabled={!canGenerate}
            title={!voiceId ? "Selecciona una voz primero" : "Generar voz"}
            style={{
              width: 44, height: 44, borderRadius: "50%", flexShrink: 0,
              background: canGenerate ? "var(--accent)" : "var(--border)",
              border: "none", cursor: canGenerate ? "pointer" : "not-allowed",
              display: "grid", placeItems: "center", color: "white",
              boxShadow: canGenerate ? "var(--accent-glow)" : "none",
              transition: "all 0.2s",
            }}>
            {generating
              ? <div style={{ width: 18, height: 18, borderRadius: "50%", border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "white", animation: "spin 1s linear infinite" }}/>
              : <IconPlay size={16} style={{ marginLeft: 2 }}/>
            }
          </button>
        </div>
      </div>

      {pickerOpen && <VoicePicker onSelect={handleVoiceSelect} onClose={() => setPickerOpen(false)}/>}
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

Object.assign(window, { GenVozTab });