/* ClonarVozTab — v2 */

// ── Helpers outside component ─────────────────────────────────────────────

function CvStepBadge({ n, done, active }) {
  return (
    <div style={{
      width: 28, height: 28, borderRadius: "50%", flexShrink: 0,
      display: "grid", placeItems: "center",
      background: done ? "var(--accent)" : active ? "var(--accent-soft)" : "var(--bg-3)",
      color: done ? "white" : active ? "var(--accent)" : "var(--text-3)",
      fontSize: 13, fontWeight: 700,
    }}>
      {done ? <IconCheck size={13}/> : n}
    </div>
  );
}

function CvMic({ size = 18, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
      stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="2" width="6" height="11" rx="3"/>
      <path d="M5 10v2a7 7 0 0 0 14 0v-2"/>
      <path d="M12 19v3M8 22h8"/>
    </svg>
  );
}

function CvStop({ size = 24 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="white">
      <rect x="5" y="5" width="14" height="14" rx="3"/>
    </svg>
  );
}

const CV_PROMPTS = [
  "El zumbido apagado de la ciudad parecía distinto esta noche — un poco más suave, un poco más paciente, como si también hubiera decidido bajar el ritmo y escuchar.",
  "La primera luz de la mañana entraba por las persianas dibujando franjas doradas sobre el suelo. Todo estaba quieto, casi como si el mundo esperara una señal.",
  "Cuando el tren se detuvo, nadie bajó. Las puertas se abrieron y volvieron a cerrarse en silencio, llevándose consigo el eco de pasos que quizás nunca existieron.",
];

const CV_LANGS = {
  Spanish: "Español", English: "English", Chinese: "中文",
  French: "Français", German: "Deutsch", Japanese: "日本語", Korean: "한국어",
};

const CV_GUIDE = [
  { label: "Sube tu audio",   sub: "MP3 / WAV, 3-30s limpia" },
  { label: "Detalles",        sub: "Nombre, género, idioma" },
  { label: "Entrenamiento",   sub: "≈ 60s" },
  { label: "Lista para usar", sub: null },
];

function fmtTime(s) {
  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
}


// ── Main component ────────────────────────────────────────────────────────

function ClonarVozTab() {
  const [origin, setOrigin] = React.useState("upload");

  // Recording
  const [recState, setRecState] = React.useState("idle"); // idle | recording | done
  const [timer, setTimer]       = React.useState(0);
  const [recordedBlob, setRecordedBlob] = React.useState(null);
  const [bars, setBars]         = React.useState(new Array(48).fill(0.06));
  const [promptIdx, setPromptIdx] = React.useState(0);

  // Upload
  const [uploadedFile, setUploadedFile] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(false);

  // Details
  const [voiceName, setVoiceName]         = React.useState("");
  const [gender, setGender]               = React.useState("male");
  const [language, setLanguage]           = React.useState("Spanish");
  const [noiseReduction, setNoiseReduction] = React.useState(true);

  // Submit
  const [cloning, setCloning]     = React.useState(false);
  const [cloneError, setCloneError] = React.useState(null);
  const [cloneSuccess, setCloneSuccess] = React.useState(false);

  // Refs
  const mediaRecRef  = React.useRef(null);
  const streamRef    = React.useRef(null);
  const audioCtxRef  = React.useRef(null);
  const analyserRef  = React.useRef(null);
  const rafRef       = React.useRef(null);
  const timerRef     = React.useRef(null);
  const fileInputRef = React.useRef(null);

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

  function cleanup() {
    if (rafRef.current)   cancelAnimationFrame(rafRef.current);
    if (timerRef.current) clearInterval(timerRef.current);
    if (streamRef.current) streamRef.current.getTracks().forEach(t => t.stop());
    if (audioCtxRef.current && audioCtxRef.current.state !== "closed") audioCtxRef.current.close();
  }

  async function startRecording() {
    setCloneError(null);
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      streamRef.current = stream;

      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      audioCtxRef.current = ctx;
      const src = ctx.createMediaStreamSource(stream);
      const analyser = ctx.createAnalyser();
      analyser.fftSize = 128;
      src.connect(analyser);
      analyserRef.current = analyser;

      const mr = new MediaRecorder(stream);
      mediaRecRef.current = mr;
      const chunks = [];
      mr.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
      mr.onstop = () => {
        setRecordedBlob(new Blob(chunks, { type: "audio/webm" }));
        setRecState("done");
        setBars(new Array(48).fill(0.06));
        cancelAnimationFrame(rafRef.current);
      };
      mr.start(100);
      setRecState("recording");
      setTimer(0);
      setRecordedBlob(null);

      function drawLoop() {
        const data = new Uint8Array(analyserRef.current.frequencyBinCount);
        analyserRef.current.getByteTimeDomainData(data);
        const samples = [];
        const step = Math.floor(data.length / 48);
        for (let i = 0; i < 48; i++) {
          const v = Math.abs(data[Math.min(i * step, data.length - 1)] - 128) / 128;
          samples.push(Math.max(0.06, v));
        }
        setBars(samples);
        rafRef.current = requestAnimationFrame(drawLoop);
      }
      drawLoop();

      timerRef.current = setInterval(() => {
        setTimer(prev => {
          if (prev >= 30) { stopRecording(); return 30; }
          return prev + 1;
        });
      }, 1000);

    } catch (e) {
      setCloneError("No se pudo acceder al micrófono: " + e.message);
    }
  }

  function stopRecording() {
    if (mediaRecRef.current && mediaRecRef.current.state !== "inactive") mediaRecRef.current.stop();
    if (streamRef.current) streamRef.current.getTracks().forEach(t => t.stop());
    if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
    if (rafRef.current)   { cancelAnimationFrame(rafRef.current); rafRef.current = null; }
  }

  function resetRecording() {
    stopRecording();
    setRecState("idle"); setTimer(0); setRecordedBlob(null);
    setBars(new Array(48).fill(0.06));
  }

  function switchOrigin(o) {
    resetRecording(); setUploadedFile(null); setOrigin(o);
  }

  function handleFileDrop(e) {
    e.preventDefault(); setDragOver(false);
    const f = e.dataTransfer.files[0]; if (f) acceptFile(f);
  }

  function acceptFile(f) {
    setCloneError(null);
    const MAX_BYTES = 10 * 1024 * 1024;
    if (f.size > MAX_BYTES) {
      setCloneError(`El archivo pesa ${(f.size / (1024 * 1024)).toFixed(1)}MB — el máximo son 10MB.`);
      return;
    }
    const url = URL.createObjectURL(f);
    const probe = new Audio(url);
    probe.onloadedmetadata = () => {
      const dur = probe.duration;
      URL.revokeObjectURL(url);
      if (isFinite(dur) && (dur < 3 || dur > 30)) {
        setCloneError(`El audio dura ${dur.toFixed(1)}s — tiene que durar entre 3 y 30 segundos.`);
        return;
      }
      setUploadedFile(f);
    };
    probe.onerror = () => {
      URL.revokeObjectURL(url);
      setUploadedFile(f); // no se pudo medir la duración en el navegador; se deja pasar y que lo valide el servidor
    };
  }

  async function handleClone() {
    if (!canClone || cloning) return;
    setCloning(true); setCloneError(null); setCloneSuccess(false);
    const fd = new FormData();
    const file = recordedBlob
      ? new File([recordedBlob], "grabacion.webm", { type: recordedBlob.type })
      : uploadedFile;
    fd.append("file", file);
    fd.append("voice_name", voiceName.trim());
    fd.append("language_tag", language);
    fd.append("gender_tag", gender);
    fd.append("need_noise_reduction", noiseReduction ? "true" : "false");
    try {
      const r = await fetch("/api/voice/clones", { method: "POST", credentials: "same-origin", body: fd });
      const d = await r.json();
      if (!r.ok) { setCloneError(d.detail || "Error al clonar"); return; }
      setCloneSuccess(true);
      resetRecording(); setUploadedFile(null); setVoiceName("");
    } catch (e) {
      setCloneError(e.message || "Error de red");
    } finally {
      setCloning(false);
    }
  }

  const hasAudio  = !!(recordedBlob || uploadedFile);
  const canClone  = hasAudio && voiceName.trim().length > 0;
  const guideStep = cloneSuccess ? 4 : hasAudio && voiceName.trim() ? 3 : hasAudio ? 2 : 1;

  const recIsRecording = recState === "recording";
  const recIsDone      = recState === "done";

  return (
    <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>

      {/* ── Left: wizard steps ── */}
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 12 }}>

        {/* ── Step 2a: Grabación (deshabilitado — solo se permite subir audio) ── */}
        {origin === "record" && (
          <div className="card card-pad">
            <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 20 }}>
              <CvStepBadge n={2} done={recIsDone} active={!recIsDone}/>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)", marginBottom: 2 }}>Grabación</div>
                <div style={{ fontSize: 13, color: "var(--text-3)" }}>Lee el prompt en un sitio silencioso, sin reverberación.</div>
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
              {/* Big button */}
              <button onClick={recIsRecording ? stopRecording : (recIsDone ? null : startRecording)}
                disabled={recIsDone}
                style={{
                  width: 84, height: 84, borderRadius: "50%", border: "none",
                  cursor: recIsDone ? "default" : "pointer",
                  background: recIsRecording ? "#ef4444" : recIsDone ? "#4ade80" : "var(--accent)",
                  display: "grid", placeItems: "center", color: "white",
                  boxShadow: recIsRecording
                    ? "0 0 0 10px rgba(239,68,68,0.14), 0 0 0 20px rgba(239,68,68,0.06)"
                    : recIsDone ? "0 0 0 10px rgba(74,222,128,0.14)" : "var(--accent-glow)",
                  transition: "all 0.3s",
                  animation: recIsRecording ? "cvPulse 1.5s ease-in-out infinite" : "none",
                }}>
                {recIsRecording
                  ? <CvStop size={30}/>
                  : recIsDone
                    ? <IconCheck size={30}/>
                    : <CvMic size={30} color="white"/>
                }
              </button>

              <div style={{ fontSize: 13, color: "var(--text-3)", fontWeight: 500, textAlign: "center" }}>
                {recState === "idle" ? "Toca para empezar"
                  : recIsRecording ? "Grabando… toca para detener"
                  : "Grabación completa"}
              </div>

              {/* Timer */}
              <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                <span style={{ fontSize: 28, fontWeight: 700, fontFamily: "var(--font-mono)", color: "var(--text)", letterSpacing: 2 }}>
                  {fmtTime(timer)}
                </span>
                <span style={{ fontSize: 16, color: "var(--text-4)", fontFamily: "var(--font-mono)" }}>/ 0:30</span>
              </div>

              {/* Progress bar */}
              <div style={{ width: "100%", maxWidth: 380, height: 3, borderRadius: 2, background: "var(--border)" }}>
                <div style={{
                  height: "100%", borderRadius: 2,
                  width: `${Math.min((timer / 30) * 100, 100)}%`,
                  background: recIsRecording ? "#ef4444" : recIsDone ? "#4ade80" : "var(--accent)",
                  transition: "width 1s linear, background 0.3s",
                }}/>
              </div>

              {/* Waveform */}
              <div style={{ display: "flex", alignItems: "center", gap: 3, height: 44, width: "100%", maxWidth: 380, justifyContent: "center" }}>
                {bars.map((h, i) => (
                  <div key={i} style={{
                    width: 5, flexShrink: 0, borderRadius: 3,
                    height: Math.max(5, h * 44),
                    background: recIsRecording ? "var(--accent)" : recIsDone ? "#4ade80" : "var(--border)",
                    opacity: recIsRecording ? 0.55 + h * 0.45 : 0.4,
                    transition: recIsRecording ? "height 0.06s" : "none",
                  }}/>
                ))}
              </div>

              {recIsDone && (
                <button onClick={resetRecording} style={{
                  fontSize: 12, color: "var(--text-3)", background: "none", border: "none",
                  cursor: "pointer", padding: "4px 8px",
                }}>
                  ↩ Grabar de nuevo
                </button>
              )}
            </div>

            {/* Prompt card */}
            {!recIsDone && (
              <div style={{
                marginTop: 20, padding: "16px 18px", borderRadius: "var(--radius)",
                border: "1px dashed var(--border)", background: "var(--bg-card-2)",
              }}>
                <div style={{ fontSize: 10, fontWeight: 700, color: "var(--accent)", letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 10 }}>
                  Lee el prompt
                </div>
                <div style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.75 }}>
                  {CV_PROMPTS[promptIdx]}
                </div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 14 }}>
                  <span style={{ fontSize: 12, color: "var(--text-4)" }}>Prompt {promptIdx + 1} / {CV_PROMPTS.length}</span>
                  <button onClick={() => setPromptIdx((promptIdx + 1) % CV_PROMPTS.length)} style={{
                    fontSize: 12, color: "var(--accent)", background: "none", border: "none",
                    cursor: "pointer", display: "flex", alignItems: "center", gap: 4, padding: 0,
                  }}>
                    Otro prompt <IconChevronRight size={13}/>
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        {/* ── Step 1: Subir audio ── */}
        {origin === "upload" && (
          <div className="card card-pad">
            <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 16 }}>
              <CvStepBadge n={1} done={!!uploadedFile} active={!uploadedFile}/>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)", marginBottom: 2 }}>Subir audio</div>
                <div style={{ fontSize: 13, color: "var(--text-3)" }}>MP3 / WAV · 3s a 30s · máx. 10MB · sin música de fondo.</div>
              </div>
            </div>

            <div
              onDragOver={e => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={handleFileDrop}
              onClick={() => fileInputRef.current && fileInputRef.current.click()}
              style={{
                border: `2px dashed ${dragOver ? "var(--accent)" : "var(--border)"}`,
                borderRadius: "var(--radius)", padding: "40px 20px", textAlign: "center",
                cursor: "pointer", background: dragOver ? "var(--accent-softer)" : "transparent",
                transition: "all 0.2s",
              }}>
              <input ref={fileInputRef} type="file" accept="audio/*,.mp3,.wav" style={{ display: "none" }}
                onChange={e => { const f = e.target.files[0]; if (f) acceptFile(f); }}/>
              {uploadedFile ? (
                <div>
                  <CvMic size={36} color="var(--accent)"/>
                  <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)", marginTop: 10 }}>{uploadedFile.name}</div>
                  <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 4 }}>
                    {(uploadedFile.size / (1024 * 1024)).toFixed(2)} MB · Haz clic para cambiar
                  </div>
                </div>
              ) : (
                <div>
                  <IconUpload size={34} style={{ color: "var(--text-4)", display: "block", margin: "0 auto 10px" }}/>
                  <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)", marginBottom: 6 }}>Arrastra tu audio aquí</div>
                  <div style={{ fontSize: 12, color: "var(--text-3)" }}>o haz clic para seleccionar · MP3, WAV · 3-30s · Máx. 10MB</div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* ── Step 2: Detalles ── */}
        {hasAudio && (
          <div className="card card-pad">
            <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 16 }}>
              <CvStepBadge n={2} done={voiceName.trim().length > 0} active={!voiceName.trim()}/>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)", marginBottom: 2 }}>Detalles</div>
                <div style={{ fontSize: 13, color: "var(--text-3)" }}>Nombre, género, idioma y ajustes.</div>
              </div>
            </div>

            <div style={{ marginBottom: 14 }}>
              <label style={{ display: "block", fontSize: 11, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 8 }}>
                Nombre de la voz *
              </label>
              <input className="input" style={{ width: "100%" }}
                placeholder="Mi voz personalizada"
                value={voiceName}
                onChange={e => setVoiceName(e.target.value)}
                autoFocus/>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 16 }}>
              <div>
                <label style={{ display: "block", fontSize: 11, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 8 }}>Género</label>
                <div className="segmented" style={{ width: "100%" }}>
                  <button className={gender === "female" ? "on" : ""} onClick={() => setGender("female")} style={{ flex: 1 }}>Femenino</button>
                  <button className={gender === "male"   ? "on" : ""} onClick={() => setGender("male")}   style={{ flex: 1 }}>Masculino</button>
                </div>
              </div>
              <div>
                <label style={{ display: "block", fontSize: 11, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 8 }}>Idioma</label>
                <select className="input" style={{ width: "100%" }} value={language} onChange={e => setLanguage(e.target.value)}>
                  {Object.entries(CV_LANGS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </select>
              </div>
            </div>

            <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", userSelect: "none" }}>
              <div onClick={() => setNoiseReduction(!noiseReduction)} style={{
                width: 40, height: 22, borderRadius: 11, position: "relative",
                background: noiseReduction ? "var(--accent)" : "var(--border-strong)",
                transition: "background 0.2s", cursor: "pointer", flexShrink: 0,
              }}>
                <div style={{
                  position: "absolute", top: 3, left: noiseReduction ? 21 : 3,
                  width: 16, height: 16, borderRadius: "50%", background: "white", transition: "left 0.2s",
                }}/>
              </div>
              <span style={{ fontSize: 13, color: "var(--text-2)" }}>Reducción de ruido</span>
            </label>
          </div>
        )}

        {/* Feedback */}
        {cloneError && (
          <div style={{ padding: "10px 14px", borderRadius: "var(--radius)", background: "rgba(248,113,113,0.12)", border: "1px solid rgba(248,113,113,0.3)", color: "#fca5a5", fontSize: 13 }}>
            {cloneError}
          </div>
        )}
        {cloneSuccess && (
          <div style={{ padding: "10px 14px", borderRadius: "var(--radius)", background: "rgba(74,222,128,0.12)", border: "1px solid rgba(74,222,128,0.3)", color: "#4ade80", fontSize: 13, display: "flex", gap: 8, alignItems: "center" }}>
            <IconCheck size={14}/> ¡Voz clonada con éxito! Ya disponible en <strong>Mis Voces</strong>.
          </div>
        )}

      </div>

      {/* ── Right sidebar ── */}
      <div style={{ width: 256, flexShrink: 0, display: "flex", flexDirection: "column", gap: 12, position: "sticky", top: 0 }}>

        {/* Cómo funciona */}
        <div className="card card-pad">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
            <span style={{ fontWeight: 600, fontSize: 13, color: "var(--text)" }}>Cómo funciona</span>
            <span style={{ fontSize: 11, color: "var(--text-4)" }}>5 pasos</span>
          </div>
          {CV_GUIDE.map((s, i) => {
            const n = i + 1;
            const done   = guideStep > n;
            const active = guideStep === n;
            return (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", marginBottom: i < CV_GUIDE.length - 1 ? 14 : 0 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: "50%", flexShrink: 0,
                  display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700,
                  background: done ? "var(--accent)" : active ? "var(--accent-soft)" : "var(--bg-3)",
                  color: done ? "white" : active ? "var(--accent)" : "var(--text-4)",
                }}>
                  {done ? <IconCheck size={10}/> : n}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: active || done ? 600 : 400, color: active || done ? "var(--text)" : "var(--text-3)", lineHeight: 1.3 }}>
                    {s.label}
                  </div>
                  {s.sub && <div style={{ fontSize: 11, color: "var(--text-4)", marginTop: 1 }}>{s.sub}</div>}
                </div>
              </div>
            );
          })}
        </div>

        {/* Resumen */}
        <div className="card card-pad">
          <div style={{ fontWeight: 600, fontSize: 13, color: "var(--text)", marginBottom: 14 }}>Resumen</div>

          {[
            { label: "Endpoint", value: "/v1m/voice/clone", mono: true },
            { label: "Nombre",   value: voiceName.trim() || "—" },
            { label: "Género",   value: gender },
            { label: "Idioma",   value: CV_LANGS[language] || language },
            { label: "Tags",     value: "2 tags" },
            { label: "Noise red.", value: noiseReduction ? "true" : "false" },
          ].map(row => (
            <div key={row.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10, fontSize: 12 }}>
              <span style={{ color: "var(--text-3)" }}>{row.label}</span>
              <span style={{
                color: "var(--text)", fontWeight: 500,
                fontFamily: row.mono ? "var(--font-mono)" : "inherit",
                fontSize: row.mono ? 10.5 : 12, maxWidth: 120, textAlign: "right",
                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
              }}>
                {row.value}
              </span>
            </div>
          ))}

          {/* Cost */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, fontSize: 12, paddingTop: 8, borderTop: "1px solid var(--border)" }}>
            <span style={{ color: "var(--text-3)" }}>Coste</span>
            <span style={{ color: "var(--accent)", fontWeight: 700, display: "flex", alignItems: "center", gap: 4 }}>
              <IconCoin size={13}/> 1
            </span>
          </div>

          {/* Legal */}
          <div style={{
            padding: "9px 11px", borderRadius: "var(--radius)",
            background: "var(--bg-card-2)", border: "1px solid var(--border)",
            fontSize: 11, color: "var(--text-3)", lineHeight: 1.5, marginBottom: 14,
            display: "flex", gap: 7, alignItems: "flex-start",
          }}>
            <svg viewBox="0 0 24 24" width={13} height={13} fill="none" stroke="currentColor" strokeWidth="1.8"
              strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 1, color: "var(--text-4)" }}>
              <circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            Al clonar confirmas que eres titular de los derechos sobre esta voz o que tienes consentimiento explícito.
          </div>

          <button
            className="btn btn-primary"
            style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}
            disabled={!canClone || cloning}
            onClick={handleClone}>
            {cloning
              ? <><div style={{ width: 14, height: 14, borderRadius: "50%", border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "white", animation: "spin 1s linear infinite" }}/> Clonando…</>
              : <><CvMic size={14} color="white"/> Entrenar voz (<IconCoin size={12}/> 1)</>
            }
          </button>
        </div>

      </div>

      <style>{`
        @keyframes spin    { to { transform: rotate(360deg); } }
        @keyframes cvPulse { 0%,100% { box-shadow: 0 0 0 8px rgba(239,68,68,0.14), 0 0 0 18px rgba(239,68,68,0.06); } 50% { box-shadow: 0 0 0 14px rgba(239,68,68,0.18), 0 0 0 28px rgba(239,68,68,0.08); } }
      `}</style>
    </div>
  );
}

Object.assign(window, { ClonarVozTab });