/* MisVocesTab — v3 — Biblioteca con sidebar + tarjetas grandes */

// ── module-level helpers ──────────────────────────────────────────────────────

const _MV_PALETTES = [
  ["#7c5cff","#3a1fd1"],["#f87171","#b91c1c"],["#60a5fa","#1d4ed8"],
  ["#4ade80","#15803d"],["#fbbf24","#b45309"],["#a78bfa","#6d28d9"],
  ["#fb923c","#c2410c"],["#34d399","#065f46"],["#f472b6","#9d174d"],
];

function mvGradient(name) {
  let h = 0;
  for (let i = 0; i < (name || "").length; i++) h = (h * 31 + (name || "").charCodeAt(i)) & 0x7fffffff;
  const [c1, c2] = _MV_PALETTES[h % _MV_PALETTES.length];
  return `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`;
}

const _MV_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 mvLangBadges(tags) {
  return [...new Set((tags || []).map(t => _MV_LANG[(t || "").toLowerCase().trim()]).filter(Boolean))];
}

const MV_FOLDERS = [
  { key: "all",     label: "Todas las voces" },
  { key: "clones",  label: "Mis clones" },
  { key: "narr",    label: "Narradores",           match: ["narration","narrator","narrador"] },
  { key: "cine",    label: "Cine & Tráiler",        match: ["cinema","cine","trailer","dramatic","film"] },
  { key: "podcast", label: "Podcast & Meditación",  match: ["podcast","meditation","meditative","calm","relax"] },
  { key: "favs",    label: "Favoritos" },
];

function mvInFolder(voice, key) {
  if (key === "all")    return true;
  if (key === "clones") return !!voice.is_clone;
  if (key === "favs")   return !!voice.is_favorite;
  const f = MV_FOLDERS.find(x => x.key === key);
  return f && f.match ? (voice.tags || []).some(t => f.match.includes((t || "").toLowerCase().trim())) : true;
}

function MvHeart({ filled, size = 14 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
      fill={filled ? "currentColor" : "none"} stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
    </svg>
  );
}

// ── VoiceCard ─────────────────────────────────────────────────────────────────

function VoiceCard({ voice, isAdmin, onFavorite, onDelete, onPlay, onUse, playingId }) {
  const vid    = voice.voice_id;
  const active = playingId === vid;
  const isFav  = !!voice.is_favorite;
  const langs  = mvLangBadges(voice.tags);
  const bg     = mvGradient(voice.voice_name);
  const canDel = isAdmin || !!voice.is_clone;
  const showFav = true;

  return (
    <div className="card" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>

      {/* ── Cover ── */}
      <div style={{ position: "relative", height: 148, flexShrink: 0 }}>
        {voice.cover_url
          ? <img src={voice.cover_url} alt={voice.voice_name}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          : <div style={{ width: "100%", height: "100%", background: bg }}/>
        }

        {voice.sample_url && (
          <button
            onClick={() => onPlay(voice.sample_url, vid)}
            style={{
              position: "absolute", bottom: 10, right: 10,
              width: 36, height: 36, borderRadius: "50%",
              background: active ? "var(--accent)" : "rgba(255,255,255,0.9)",
              border: "none", cursor: "pointer",
              display: "flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 2px 10px rgba(0,0,0,0.4)",
              transition: "all 0.15s",
            }}>
            <IconPlay size={12} style={{ color: active ? "#fff" : "#111", marginLeft: 2 }}/>
          </button>
        )}

        {voice.is_clone && (
          <span style={{
            position: "absolute", top: 8, left: 8,
            background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)",
            borderRadius: 20, padding: "2px 9px",
            fontSize: 10, fontWeight: 700, color: "var(--accent-2)", letterSpacing: "0.06em",
          }}>TÚ</span>
        )}
      </div>

      {/* ── Body ── */}
      <div style={{ padding: "12px 14px 14px", flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>

        {/* Name + lang badges */}
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, flexWrap: "wrap" }}>
          <span style={{ fontWeight: 700, fontSize: 13.5, color: "var(--text)" }}>{voice.voice_name}</span>
          {langs.map(l => (
            <span key={l} style={{
              fontSize: 10, fontWeight: 700, padding: "2px 5px", borderRadius: 4,
              background: "var(--bg-3)", color: "var(--text-3)", letterSpacing: "0.06em",
            }}>{l}</span>
          ))}
        </div>

        {/* Description */}
        {voice.description && (
          <div style={{
            fontSize: 11.5, color: "var(--text-3)", lineHeight: 1.45,
            overflow: "hidden", display: "-webkit-box",
            WebkitLineClamp: 2, WebkitBoxOrient: "vertical",
          }}>{voice.description}</div>
        )}

        {/* Actions */}
        <div style={{ display: "flex", gap: 6, marginTop: "auto", paddingTop: 4 }}>
          <button
            className="btn btn-ghost"
            style={{ flex: 1, justifyContent: "center", fontSize: 12, padding: "6px 8px", gap: 5 }}
            onClick={() => onUse(voice)}>
            <IconWave size={12}/>
            Usar voz
          </button>

          {showFav && (
            <button
              onClick={() => onFavorite(voice)}
              title={isFav ? "Quitar de favoritos" : "Añadir a favoritos"}
              style={{
                width: 32, height: 32, borderRadius: "var(--radius)",
                flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center",
                background: isFav ? "rgba(248,113,113,0.12)" : "var(--bg-3)",
                border: "1px solid " + (isFav ? "rgba(248,113,113,0.35)" : "var(--border)"),
                color: isFav ? "#f87171" : "var(--text-3)",
                cursor: "pointer", transition: "all 0.15s",
              }}>
              <MvHeart filled={isFav} size={13}/>
            </button>
          )}

          {canDel && (
            <button
              onClick={() => onDelete(voice)}
              title="Eliminar voz"
              style={{
                width: 32, height: 32, borderRadius: "var(--radius)",
                flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center",
                background: "var(--bg-3)", border: "1px solid var(--border)",
                color: "var(--text-3)", cursor: "pointer", transition: "all 0.15s",
              }}
              onMouseEnter={e => { e.currentTarget.style.color="#f87171"; e.currentTarget.style.borderColor="rgba(248,113,113,0.35)"; }}
              onMouseLeave={e => { e.currentTarget.style.color="var(--text-3)"; e.currentTarget.style.borderColor="var(--border)"; }}>
              <IconTrash size={13}/>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// ── AddVoiceModal (admin only) ────────────────────────────────────────────────

function AddVoiceModal({ onClose, onAdded }) {
  const [voiceId,     setVoiceId]     = React.useState("");
  const [voiceName,   setVoiceName]   = React.useState("");
  const [coverUrl,    setCoverUrl]    = React.useState("");
  const [sampleUrl,   setSampleUrl]   = React.useState("");
  const [description, setDescription] = React.useState("");
  const [tagsInput,   setTagsInput]   = React.useState("");
  const [loading,     setLoading]     = React.useState(false);
  const [error,       setError]       = React.useState("");

  async function handleAdd(e) {
    e.preventDefault();
    if (!voiceId.trim() || !voiceName.trim()) { setError("Voice ID y nombre son obligatorios"); return; }
    setLoading(true); setError("");
    const tags = tagsInput.split(",").map(t => t.trim()).filter(Boolean);
    try {
      const r = await fetch("/api/public-voices", {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ voice_id: voiceId.trim(), voice_name: voiceName.trim(),
          cover_url: coverUrl.trim(), sample_url: sampleUrl.trim(), description: description.trim(), tags }),
      });
      const d = await r.json();
      if (r.ok && d.success) { onAdded(); onClose(); }
      else setError(d.detail || "Error al añadir voz");
    } catch { setError("Error de conexión"); }
    finally { setLoading(false); }
  }

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", display: "grid",
      placeItems: "center", zIndex: 200, backdropFilter: "blur(4px)",
    }} onClick={onClose}>
      <div className="card card-pad" style={{ width: 440, maxWidth: "calc(100vw - 32px)" }} onClick={e => e.stopPropagation()}>
        <h3 className="card-title" style={{ marginBottom: 16 }}>Añadir voz pública</h3>
        <form onSubmit={handleAdd} className="col" style={{ gap: 12 }}>
          <div className="rg-2" style={{ gap: 12 }}>
            <div>
              <label className="label">Voice ID *</label>
              <input className="input" value={voiceId} onChange={e => setVoiceId(e.target.value)}
                placeholder="ai33_voice_xxx" style={{ fontFamily: "var(--font-mono)", fontSize: 12 }} autoFocus/>
            </div>
            <div>
              <label className="label">Nombre *</label>
              <input className="input" value={voiceName} onChange={e => setVoiceName(e.target.value)} placeholder="Narrador masculino"/>
            </div>
          </div>
          <div>
            <label className="label">URL de portada <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· opcional</span></label>
            <input className="input" value={coverUrl} onChange={e => setCoverUrl(e.target.value)} placeholder="https://…"/>
          </div>
          <div>
            <label className="label">URL de muestra <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· opcional</span></label>
            <input className="input" value={sampleUrl} onChange={e => setSampleUrl(e.target.value)} placeholder="https://…/sample.mp3"/>
          </div>
          <div>
            <label className="label">Descripción <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· opcional</span></label>
            <input className="input" value={description} onChange={e => setDescription(e.target.value)} placeholder="Voz masculina grave, tono cinematográfico"/>
          </div>
          <div>
            <label className="label">Etiquetas <span style={{ color: "var(--text-4)", fontWeight: 400 }}>· separadas por comas</span></label>
            <input className="input" value={tagsInput} onChange={e => setTagsInput(e.target.value)} placeholder="Spanish, Male, Narration"/>
          </div>
          {error && (
            <div style={{ background: "rgba(248,113,113,0.12)", border: "1px solid rgba(248,113,113,0.3)", borderRadius: 8, padding: "10px 12px", fontSize: 12.5, color: "#fca5a5" }}>
              {error}
            </div>
          )}
          <div className="row" style={{ gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
            <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? "Añadiendo…" : <><IconPlus size={13}/> Añadir voz</>}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ── MisVocesTab ───────────────────────────────────────────────────────────────

function MisVocesTab({ currentUser, onNavigate }) {
  const [presetVoices, setPresetVoices] = React.useState([]);
  const [cloneVoices,  setCloneVoices]  = React.useState([]);
  const [loading,   setLoading]   = React.useState(true);
  const [folder,    setFolder]    = React.useState("all");
  const [search,    setSearch]    = React.useState("");
  const [playingId, setPlayingId] = React.useState(null);
  const [copied,    setCopied]    = React.useState(false);
  const [showAdd,   setShowAdd]   = React.useState(false);
  const audioRef = React.useRef(null);

  const isAdmin = !!currentUser?.is_admin;

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

  async function loadAll() {
    setLoading(true);
    try {
      const [pr, cr, fr] = 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(() => ({})),
        fetch("/api/user/voice-favorites", { credentials: "same-origin" }).then(r => r.json()).catch(() => ({})),
      ]);
      const favIds = new Set((fr.voices || []).map(v => v.voice_id));
      setPresetVoices((pr.voices || []).map(v => ({ ...v, is_clone: false, is_favorite: v.is_favorite || favIds.has(v.voice_id) })));
      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(" · ") || "Voz clonada",
        cover_url:   null,
        sample_url:  c.demo_audio || c.sample_url || c.preview_url || null,
        tags:        [c.language, c.gender].filter(Boolean),
        is_favorite: favIds.has(c.voice_id || c.id),
        is_clone:    true,
      })));
    } catch (e) {
      console.error("Error cargando voces", e);
    } finally {
      setLoading(false);
    }
  }

  const allVoices = React.useMemo(() => [...presetVoices, ...cloneVoices], [presetVoices, cloneVoices]);

  const folderCounts = React.useMemo(() => {
    const out = {};
    for (const f of MV_FOLDERS) out[f.key] = allVoices.filter(v => mvInFolder(v, f.key)).length;
    return out;
  }, [allVoices]);

  const filtered = React.useMemo(() => {
    let list = allVoices.filter(v => mvInFolder(v, folder));
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter(v =>
        (v.voice_name || "").toLowerCase().includes(q) ||
        (v.description || "").toLowerCase().includes(q) ||
        (v.tags || []).some(t => (t || "").toLowerCase().includes(q))
      );
    }
    return list;
  }, [allVoices, folder, search]);

  async function handleFavorite(voice) {
    const voiceId = voice.voice_id;
    try {
      const r = await fetch(`/api/public-voices/${voiceId}/favorite`, {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ voice_name: voice.voice_name, is_clone: !!voice.is_clone }),
      });
      const d = await r.json();
      if (voice.is_clone) {
        setCloneVoices(prev => prev.map(v => v.voice_id === voiceId ? { ...v, is_favorite: d.favorited } : v));
      } else {
        setPresetVoices(prev => prev.map(v => v.voice_id === voiceId ? { ...v, is_favorite: d.favorited } : v));
      }
    } catch (e) { console.error(e); }
  }

  async function handleDelete(voice) {
    if (!confirm(`¿Eliminar la voz "${voice.voice_name}"?`)) return;
    try {
      if (voice.is_clone) {
        await fetch(`/api/voice/clones/${voice.voice_id}`, { method: "DELETE", credentials: "same-origin" });
        setCloneVoices(prev => prev.filter(v => v.voice_id !== voice.voice_id));
      } else {
        await fetch(`/api/public-voices/${voice.id}`, { method: "DELETE", credentials: "same-origin" });
        setPresetVoices(prev => prev.filter(v => v.id !== voice.id));
      }
    } catch (e) { console.error(e); }
  }

  function handleUse(voice) {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(voice.voice_id).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      });
    }
  }

  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);
  }

  return (
    <div className="tab-enter" style={{ display: "flex", gap: 0 }}>

      {/* ── Sidebar ── */}
      <div style={{
        width: 216, flexShrink: 0,
        borderRight: "1px solid var(--border)",
        paddingRight: 16, marginRight: 28,
        display: "flex", flexDirection: "column",
      }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: "var(--text-4)", letterSpacing: "0.1em", marginBottom: 6 }}>
          CARPETAS
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 1, flex: 1 }}>
          {MV_FOLDERS.map(f => {
            const n = folderCounts[f.key] || 0;
            const on = folder === f.key;
            return (
              <button key={f.key} onClick={() => setFolder(f.key)} style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "7px 10px", borderRadius: "var(--radius)", border: "none",
                background: on ? "var(--accent-soft)" : "transparent",
                color: on ? "var(--accent)" : "var(--text-2)",
                fontWeight: on ? 600 : 400, fontSize: 13,
                cursor: "pointer", textAlign: "left", transition: "all 0.12s",
              }}>
                <span>{f.label}</span>
                {n > 0 && (
                  <span style={{
                    fontSize: 11, minWidth: 20, textAlign: "center",
                    borderRadius: 20, padding: "1px 6px",
                    background: on ? "var(--accent-softer)" : "var(--bg-3)",
                    color: on ? "var(--accent)" : "var(--text-4)",
                  }}>{n}</span>
                )}
              </button>
            );
          })}
        </div>

        <button
          className="btn btn-ghost"
          style={{ width: "100%", justifyContent: "center", marginTop: 16, fontSize: 12.5 }}
          onClick={() => onNavigate && onNavigate("clonar_voz")}>
          <IconPlus size={13}/> Clonar nueva voz
        </button>
      </div>

      {/* ── Main ── */}
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 16 }}>

        {/* Top bar */}
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ position: "relative", flex: 1 }}>
            <IconSearch size={14} style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--text-3)", pointerEvents: "none" }}/>
            <input className="input" style={{ paddingLeft: 32, height: 36, width: "100%" }}
              placeholder="Buscar voces…" value={search} onChange={e => setSearch(e.target.value)}/>
          </div>
          <span style={{ fontSize: 12, color: "var(--text-4)", whiteSpace: "nowrap", flexShrink: 0 }}>
            {loading ? "…" : `${filtered.length} ${filtered.length === 1 ? "voz" : "voces"}`}
          </span>
          {isAdmin && (
            <button className="btn btn-primary" style={{ padding: "6px 14px", whiteSpace: "nowrap" }} onClick={() => setShowAdd(true)}>
              <IconPlus size={13}/> Añadir voz
            </button>
          )}
        </div>

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

        {/* Empty library */}
        {!loading && allVoices.length === 0 && (
          <div className="card card-pad" style={{ textAlign: "center", padding: 60 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>
              {isAdmin ? "No hay voces en la biblioteca" : "Biblioteca vacía"}
            </div>
            <div style={{ fontSize: 13, color: "var(--text-3)", marginBottom: isAdmin ? 16 : 0 }}>
              {isAdmin ? "Añade voces para que los usuarios puedan utilizarlas" : "El administrador aún no ha añadido voces"}
            </div>
            {isAdmin && (
              <button className="btn btn-primary" style={{ marginTop: 8 }} onClick={() => setShowAdd(true)}>
                <IconPlus size={13}/> Añadir primera voz
              </button>
            )}
          </div>
        )}

        {/* No results */}
        {!loading && allVoices.length > 0 && filtered.length === 0 && (
          <div style={{ textAlign: "center", padding: 40, color: "var(--text-3)", fontSize: 14 }}>
            No se encontraron voces
          </div>
        )}

        {/* Grid */}
        {!loading && filtered.length > 0 && (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 14 }}>
            {filtered.map(v => (
              <VoiceCard
                key={v.voice_id || v.id}
                voice={v}
                isAdmin={isAdmin}
                onFavorite={handleFavorite}
                onDelete={handleDelete}
                onPlay={playPreview}
                onUse={handleUse}
                playingId={playingId}
              />
            ))}
          </div>
        )}
      </div>

      {/* Modals */}
      {showAdd && <AddVoiceModal onClose={() => setShowAdd(false)} onAdded={loadAll}/>}

      {/* Copy toast */}
      {copied && (
        <div style={{
          position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)",
          background: "var(--bg-card)", border: "1px solid var(--border)",
          borderRadius: "var(--radius)", padding: "8px 16px", fontSize: 13,
          color: "var(--text)", boxShadow: "var(--shadow-card)", zIndex: 400,
          display: "flex", alignItems: "center", gap: 8, whiteSpace: "nowrap",
        }}>
          <IconCheck size={14} style={{ color: "#4ade80" }}/> Voice ID copiado al portapapeles
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MisVocesTab });