/* Tab: Música de fondo — biblioteca de carpetas + canciones para el montaje de vídeos */

const MUSIC_MAX_BYTES = 30 * 1024 * 1024;

function formatDuration(sec) {
  sec = Math.round(sec || 0);
  const m = Math.floor(sec / 60);
  const s = sec % 60;
  return `${m}:${String(s).padStart(2, "0")}`;
}

function NewMusicFolderModal({ onClose, onCreated }) {
  const [name, setName] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  async function handleCreate(e) {
    e.preventDefault();
    if (!name.trim()) { setError("El nombre es obligatorio"); return; }
    setLoading(true);
    setError("");
    try {
      const r = await fetch("/api/music/folders", {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim() }),
      });
      const d = await r.json();
      if (r.ok && d.success) { onCreated(d.folder); onClose(); }
      else setError(d.detail || "Error al crear la carpeta");
    } 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: 100, backdropFilter: "blur(4px)",
    }} onClick={onClose}>
      <div className="card card-pad" style={{ width: 380, maxWidth: "calc(100vw - 32px)" }} onClick={(e) => e.stopPropagation()}>
        <h3 className="card-title" style={{ marginBottom: 16 }}>Nueva carpeta</h3>
        <form onSubmit={handleCreate} className="col" style={{ gap: 14 }}>
          <div>
            <label className="label">Nombre de la carpeta</label>
            <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Lo-fi relajante" autoFocus/>
          </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, marginTop: 4, justifyContent: "flex-end" }}>
            <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? "Creando…" : <><IconPlus size={13}/> Crear carpeta</>}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function MusicLibraryTab() {
  const [folders, setFolders] = React.useState([]);
  const [selectedFolderId, setSelectedFolderId] = React.useState(null);
  const [tracks, setTracks] = React.useState([]);
  const [loadingTracks, setLoadingTracks] = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [uploadError, setUploadError] = React.useState("");
  const [showNewFolder, setShowNewFolder] = React.useState(false);
  const [playingId, setPlayingId] = React.useState(null);
  const audioRef = React.useRef(null);
  const fileInputRef = React.useRef(null);

  function fetchFolders() {
    fetch("/api/music/folders", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => {
        const list = d.folders || [];
        setFolders(list);
        setSelectedFolderId((prev) => prev && list.some((f) => f.id === prev) ? prev : (list[0]?.id || null));
      })
      .catch(() => {});
  }

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

  React.useEffect(() => {
    if (!selectedFolderId) { setTracks([]); return; }
    setLoadingTracks(true);
    fetch(`/api/music/tracks?folder_id=${selectedFolderId}`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setTracks(d.tracks || []))
      .catch(() => setTracks([]))
      .finally(() => setLoadingTracks(false));
  }, [selectedFolderId]);

  async function deleteFolder(folder) {
    if (!confirm(`¿Borrar la carpeta "${folder.name}" y todas sus canciones?`)) return;
    const r = await fetch(`/api/music/folders/${folder.id}`, { method: "DELETE", credentials: "same-origin" });
    if (r.ok) {
      const remaining = folders.filter((f) => f.id !== folder.id);
      setFolders(remaining);
      if (selectedFolderId === folder.id) setSelectedFolderId(remaining[0]?.id || null);
    }
  }

  async function deleteTrack(track) {
    if (!confirm(`¿Borrar "${track.original_name}"?`)) return;
    const r = await fetch(`/api/music/tracks/${track.id}`, { method: "DELETE", credentials: "same-origin" });
    if (r.ok) setTracks((prev) => prev.filter((t) => t.id !== track.id));
  }

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

  async function handleUpload(e) {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file || !selectedFolderId) return;
    setUploadError("");
    if (file.size > MUSIC_MAX_BYTES) {
      setUploadError("La canción no debe superar 30MB");
      return;
    }
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append("file", file);
      fd.append("folder_id", selectedFolderId);
      const r = await fetch("/api/music/tracks", { method: "POST", credentials: "same-origin", body: fd });
      const d = await r.json();
      if (r.ok && d.success) setTracks((prev) => [d.track, ...prev]);
      else setUploadError(d.detail || "Error al subir la canción");
    } catch {
      setUploadError("Error de conexión");
    } finally {
      setUploading(false);
    }
  }

  const selectedFolder = folders.find((f) => f.id === selectedFolderId) || null;

  return (
    <div className="music-layout">
      {showNewFolder && (
        <NewMusicFolderModal onClose={() => setShowNewFolder(false)} onCreated={(f) => { setFolders((prev) => [f, ...prev]); setSelectedFolderId(f.id); }}/>
      )}

      {/* Panel izquierdo: carpetas */}
      <div className="card card-pad music-folders-panel">
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
          <h3 className="card-title">Carpetas</h3>
          <button className="btn btn-ghost" style={{ padding: "5px 8px" }} onClick={() => setShowNewFolder(true)}>
            <IconPlus size={13}/>
          </button>
        </div>
        {folders.length === 0 && (
          <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>
            Aún no tienes carpetas. Crea una para empezar a subir música.
          </div>
        )}
        <div className="col" style={{ gap: 4 }}>
          {folders.map((f) => (
            <div key={f.id}
              onClick={() => setSelectedFolderId(f.id)}
              className="row"
              style={{
                justifyContent: "space-between", cursor: "pointer", padding: "8px 10px", borderRadius: 8,
                background: selectedFolderId === f.id ? "var(--accent-softer)" : "transparent",
                color: selectedFolderId === f.id ? "var(--text)" : "var(--text-2)",
              }}>
              <span style={{ fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.name}</span>
              <button className="btn btn-ghost" style={{ padding: "4px 6px", opacity: 0.6, flex: "0 0 auto" }}
                onClick={(e) => { e.stopPropagation(); deleteFolder(f); }}>
                <IconTrash size={13}/>
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Panel derecho: canciones de la carpeta activa */}
      <div className="card card-pad" style={{ flex: 1 }}>
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
          <h3 className="card-title">{selectedFolder ? selectedFolder.name : "Selecciona una carpeta"}</h3>
          {selectedFolder && (
            <>
              <input type="file" accept="audio/*" ref={fileInputRef} style={{ display: "none" }} onChange={handleUpload}/>
              <button className="btn btn-primary" disabled={uploading} onClick={() => fileInputRef.current && fileInputRef.current.click()}>
                {uploading ? "Subiendo…" : <><IconUpload size={13}/> Subir canción</>}
              </button>
            </>
          )}
        </div>

        {uploadError && (
          <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", marginBottom: 10 }}>
            {uploadError}
          </div>
        )}

        {!selectedFolder && (
          <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>Crea o elige una carpeta a la izquierda.</div>
        )}

        {selectedFolder && loadingTracks && (
          <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>Cargando…</div>
        )}

        {selectedFolder && !loadingTracks && tracks.length === 0 && (
          <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>
            Esta carpeta no tiene canciones todavía. Máximo 30MB por canción.
          </div>
        )}

        {selectedFolder && !loadingTracks && tracks.length > 0 && (
          <div className="col" style={{ gap: 4 }}>
            {tracks.map((t) => (
              <div key={t.id} className="row" style={{
                justifyContent: "space-between", padding: "8px 10px", borderRadius: 8,
                background: "var(--bg-card-2)", border: "1px solid var(--border)",
              }}>
                <div className="row" style={{ gap: 10, minWidth: 0 }}>
                  <button className="btn btn-ghost" style={{ padding: "5px 8px" }} onClick={() => playPreview(t.url, t.id)}>
                    {playingId === t.id ? <IconPause size={13}/> : <IconPlay size={13}/>}
                  </button>
                  <span style={{ fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {t.original_name}
                  </span>
                </div>
                <div className="row" style={{ gap: 12, flex: "0 0 auto" }}>
                  <span style={{ fontSize: 12, color: "var(--text-4)", fontFamily: "var(--font-mono)" }}>{formatDuration(t.duration)}</span>
                  <button className="btn btn-ghost" style={{ padding: "4px 6px", opacity: 0.6 }} onClick={() => deleteTrack(t)}>
                    <IconTrash size={13}/>
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { MusicLibraryTab });