/* Tab: Generar Clips (workspace) — kie.ai Gemini Omni */

function GenerateClipsTab() {
  const [prompt, setPrompt]             = React.useState("");
  const [duration, setDuration]         = React.useState(8);
  const [aspectRatio, setAspectRatio]   = React.useState("16:9");
  const [generateAudio, setGenAudio]    = React.useState(true);
  const [generating, setGenerating]     = React.useState(false);
  const [clips, setClips]               = React.useState([]);
  const [loading, setLoading]           = React.useState(true);
  const [preview, setPreview]           = React.useState(null);
  const [genError, setGenError]         = React.useState("");

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

  React.useEffect(() => {
    const hasProcessing = clips.some((c) => c.status === "processing");
    if (!hasProcessing) return;
    const id = setInterval(fetchClips, 4000);
    return () => clearInterval(id);
  }, [clips]);

  async function fetchClips() {
    try {
      const r = await fetch("/api/workspace/clips", { credentials: "same-origin" });
      if (r.ok) { const d = await r.json(); setClips(d.clips || []); }
    } finally { setLoading(false); }
  }

  async function handleGenerate() {
    if (!prompt.trim() || generating) return;
    setGenerating(true);
    setGenError("");
    try {
      const r = await fetch("/api/workspace/clips/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ prompt: prompt.trim(), duration, aspect_ratio: aspectRatio, generate_audio: generateAudio }),
      });
      const d = await r.json();
      if (r.ok && d.success) {
        setClips((prev) => [d.clip, ...prev]);
      } else {
        setGenError(d.detail || "Error al iniciar la generación");
      }
    } catch { setGenError("Error de conexión"); }
    finally { setGenerating(false); }
  }

  async function handleDelete(id) {
    const r = await fetch(`/api/workspace/clips/${id}`, { method: "DELETE", credentials: "same-origin" });
    if (r.ok) {
      setClips((prev) => prev.filter((c) => c.id !== id));
      if (preview && preview.id === id) setPreview(null);
    }
  }

  function handleKeyDown(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") handleGenerate();
  }

  const processing = clips.filter((c) => c.status === "processing").length;

  return (
    <div className="tab-enter workspace-layout">

      {/* ── Left panel ── */}
      <div style={{ width: 360, flexShrink: 0 }}>
        <div className="card card-pad" style={{ display: "flex", flexDirection: "column", gap: 14 }}>

          <div>
            <label className="label">Prompt</label>
            <textarea
              className="input"
              rows={7}
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Describe el clip que quieres generar…"
              style={{ resize: "vertical", fontFamily: "inherit", lineHeight: 1.55 }}
            />
            <div className="help" style={{ marginTop: 4 }}>⌘↵ para generar</div>
          </div>

          <div>
            <label className="label">Duración</label>
            <div className="segmented" style={{ width: "100%" }}>
              {[6, 8, 10].map((d) => (
                <button key={d} className={duration === d ? "on" : ""} onClick={() => setDuration(d)} style={{ flex: 1 }}>
                  {d}s
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="label">Formato</label>
            <div className="segmented" style={{ width: "100%" }}>
              <button className={aspectRatio === "16:9" ? "on" : ""} onClick={() => setAspectRatio("16:9")} style={{ flex: 1 }}>
                16:9 — Horizontal
              </button>
              <button className={aspectRatio === "9:16" ? "on" : ""} onClick={() => setAspectRatio("9:16")} style={{ flex: 1 }}>
                9:16 — Vertical
              </button>
            </div>
          </div>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <label className="label" style={{ margin: 0 }}>Generar audio</label>
            <div className="segmented">
              <button className={generateAudio ? "on" : ""} onClick={() => setGenAudio(true)}>Sí</button>
              <button className={!generateAudio ? "on" : ""} onClick={() => setGenAudio(false)}>No</button>
            </div>
          </div>

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

          <button
            className="btn btn-primary"
            style={{ justifyContent: "center", padding: "11px 14px" }}
            onClick={handleGenerate}
            disabled={generating || !prompt.trim()}
          >
            {generating
              ? <><ClipSpinner size={14}/> Iniciando…</>
              : <><IconClap size={14}/> Generar clip</>
            }
          </button>

          <div className="help" style={{ fontSize: 11, lineHeight: 1.5 }}>
            Modelo: kie.ai · Gemini Omni · 720p<br/>
            La generación tarda 1–3 minutos.
          </div>
        </div>
      </div>

      {/* ── Right panel ── */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontWeight: 600, fontSize: 14 }}>Historial</span>
            {clips.length > 0 && (
              <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 20, background: "var(--bg-card-2)", color: "var(--text-3)" }}>
                {clips.length}
              </span>
            )}
            {processing > 0 && (
              <span style={{
                fontSize: 11, padding: "2px 8px", borderRadius: 20,
                background: "var(--accent-soft)", color: "var(--accent)",
                display: "flex", alignItems: "center", gap: 5,
              }}>
                <ClipSpinner size={10}/> {processing} generando
              </span>
            )}
          </div>
          <span className="help" style={{ fontSize: 11 }}>Eliminación automática a las 48h</span>
        </div>

        {loading ? (
          <div style={{ padding: 60, textAlign: "center", color: "var(--text-4)" }}>Cargando…</div>
        ) : clips.length === 0 ? (
          <div className="card" style={{ padding: 60, textAlign: "center" }}>
            <div style={{
              width: 48, height: 48, margin: "0 auto 12px",
              borderRadius: 12, background: "var(--bg-card-2)",
              display: "grid", placeItems: "center", color: "var(--text-4)",
            }}>
              <IconClap size={20}/>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Sin clips generados</div>
            <div className="help" style={{ marginTop: 4 }}>
              Escribe un prompt y pulsa Generar clip para empezar.
            </div>
          </div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 14 }}>
            {clips.map((clip) => (
              <ClipCard key={clip.id} clip={clip}
                onDelete={() => handleDelete(clip.id)}
                onPreview={() => setPreview(clip)}
              />
            ))}
          </div>
        )}
      </div>

      {preview && (
        <ClipLightbox clip={preview} onClose={() => setPreview(null)} onDelete={() => handleDelete(preview.id)}/>
      )}
    </div>
  );
}

function ClipSpinner({ size = 16 }) {
  return (
    <span style={{
      display: "inline-block", width: size, height: size, borderRadius: "50%",
      border: `${Math.max(1.5, size / 8)}px solid rgba(255,255,255,0.15)`,
      borderTopColor: "var(--accent)", animation: "spin 0.75s linear infinite", flexShrink: 0,
    }}/>
  );
}

function ClipCard({ clip, onDelete, onPreview }) {
  const videoRef   = React.useRef(null);
  const [hovered, setHovered] = React.useState(false);
  const warn = (() => {
    const expires = new Date(clip.created_at).getTime() + 48 * 3600000;
    const h = Math.floor((expires - Date.now()) / 3600000);
    return h > 0 && h < 6 ? `expira en ${h}h` : null;
  })();
  const ago = (() => {
    const diff = Date.now() - new Date(clip.created_at).getTime();
    const m = Math.floor(diff / 60000), h = Math.floor(diff / 3600000), d = Math.floor(diff / 86400000);
    return d > 0 ? `hace ${d}d` : h > 0 ? `hace ${h}h` : m > 0 ? `hace ${m}m` : "ahora";
  })();

  function onMouseEnter() {
    setHovered(true);
    if (videoRef.current && clip.status === "done") videoRef.current.play().catch(() => {});
  }
  function onMouseLeave() {
    setHovered(false);
    if (videoRef.current) { videoRef.current.pause(); videoRef.current.currentTime = 0; }
  }
  function handleDownload(e) {
    e.stopPropagation();
    const a = document.createElement("a");
    a.href = `/workspace-clips/${clip.filename}`;
    a.download = `${clip.id}.mp4`;
    a.click();
  }

  return (
    <div
      style={{
        borderRadius: "var(--radius)", overflow: "hidden",
        background: "var(--bg-card)", border: "1px solid var(--border)",
        cursor: clip.status === "done" ? "pointer" : "default",
        transform: hovered && clip.status === "done" ? "translateY(-2px)" : "none",
        boxShadow: hovered && clip.status === "done" ? "0 8px 24px rgba(0,0,0,0.35)" : "none",
        transition: "transform 0.12s, box-shadow 0.12s",
        position: "relative",
      }}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onClick={() => clip.status === "done" && onPreview()}
    >
      {/* Thumbnail / video area */}
      <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden", background: "var(--bg-card-2)" }}>
        {clip.status === "processing" && (
          <div style={{
            width: "100%", height: "100%",
            background: "linear-gradient(135deg, var(--accent-softer), var(--bg-card-2))",
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10,
          }}>
            <ClipSpinner size={28}/>
            <span style={{ fontSize: 11, color: "var(--text-4)" }}>Generando · {clip.duration}s</span>
          </div>
        )}
        {clip.status === "failed" && (
          <div style={{
            width: "100%", height: "100%", background: "rgba(248,113,113,0.08)",
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, padding: 12,
          }}>
            <IconX size={22} style={{ color: "var(--red)", opacity: 0.7 }}/>
            <span style={{ fontSize: 11, color: "#fca5a5", textAlign: "center", lineHeight: 1.4 }}>
              {(clip.error || "Error desconocido").slice(0, 80)}
            </span>
          </div>
        )}
        {clip.status === "done" && (
          <>
            <video
              ref={videoRef}
              src={`/workspace-clips/${clip.filename}`}
              preload="none"
              muted
              loop
              playsInline
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
            {!hovered && (
              <div style={{
                position: "absolute", inset: 0, display: "grid", placeItems: "center",
                background: "rgba(0,0,0,0.25)",
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: "rgba(255,255,255,0.15)", backdropFilter: "blur(4px)",
                  display: "grid", placeItems: "center",
                }}>
                  <IconPlay size={14} style={{ marginLeft: 2 }}/>
                </div>
              </div>
            )}
          </>
        )}

        {/* Hover actions */}
        {hovered && clip.status === "done" && (
          <div style={{
            position: "absolute", top: 8, right: 8, display: "flex", gap: 6,
          }}>
            <button className="icon-btn"
              style={{ width: 30, height: 30, background: "rgba(0,0,0,0.6)", borderRadius: 8 }}
              onClick={handleDownload} title="Descargar">
              <IconDownload size={14}/>
            </button>
            <button className="icon-btn"
              style={{ width: 30, height: 30, background: "rgba(0,0,0,0.6)", borderRadius: 8, color: "var(--red)" }}
              onClick={(e) => { e.stopPropagation(); onDelete(); }} title="Eliminar">
              <IconTrash size={14}/>
            </button>
          </div>
        )}

        {/* Delete for failed */}
        {clip.status === "failed" && (
          <button className="icon-btn"
            style={{ position: "absolute", top: 6, right: 6, width: 26, height: 26, color: "var(--red)" }}
            onClick={(e) => { e.stopPropagation(); onDelete(); }}>
            <IconTrash size={13}/>
          </button>
        )}

        {/* Duration badge */}
        {clip.status === "done" && (
          <div style={{
            position: "absolute", bottom: 6, right: 6,
            fontSize: 10, padding: "2px 6px", borderRadius: 4,
            background: "rgba(0,0,0,0.65)", color: "#fff", fontFamily: "var(--font-mono)",
          }}>{clip.duration}s</div>
        )}
      </div>

      {/* Footer */}
      <div style={{ padding: "8px 10px", display: "flex", flexDirection: "column", gap: 4 }}>
        <div style={{ fontSize: 11.5, color: "var(--text-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
          title={clip.prompt}>{clip.prompt}</div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{
            fontSize: 10, padding: "1px 6px", borderRadius: 4,
            background: "var(--accent-softer)", color: "var(--accent-2)", fontWeight: 600,
          }}>
            {clip.aspect_ratio} · LTX
          </span>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            {warn && <span style={{ fontSize: 10, color: "var(--yellow)" }}>{warn}</span>}
            <span style={{ fontSize: 11, color: "var(--text-4)" }}>{ago}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ClipLightbox({ clip, onClose, onDelete }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  function handleDownload() {
    const a = document.createElement("a");
    a.href = `/workspace-clips/${clip.filename}`;
    a.download = `${clip.id}.mp4`;
    a.click();
  }

  const isVertical = clip.aspect_ratio === "9:16";

  return (
    <div
      style={{
        position: "fixed", inset: 0, background: "rgba(0,0,0,0.9)",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        zIndex: 1000, padding: 24, backdropFilter: "blur(4px)",
      }}
      onClick={(e) => e.target === e.currentTarget && onClose()}
    >
      {/* Top bar */}
      <div style={{ width: "100%", maxWidth: isVertical ? 500 : 960, display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
        <span style={{ flex: 1, fontSize: 13, color: "var(--text-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
          title={clip.prompt}>{clip.prompt}</span>
        <span style={{
          fontSize: 10, padding: "2px 7px", borderRadius: 4,
          background: "var(--accent-softer)", color: "var(--accent-2)", fontWeight: 600, flexShrink: 0,
        }}>
          {clip.aspect_ratio} · {clip.duration}s · LTX
        </span>
        <button className="btn" style={{ gap: 6, flexShrink: 0 }} onClick={handleDownload}>
          <IconDownload size={13}/> Descargar
        </button>
        <button className="btn"
          style={{ gap: 6, flexShrink: 0, color: "var(--red)", borderColor: "rgba(248,113,113,0.25)" }}
          onClick={() => { onDelete(); onClose(); }}>
          <IconTrash size={13}/> Eliminar
        </button>
        <button className="icon-btn" style={{ width: 32, height: 32, flexShrink: 0 }} onClick={onClose}>
          <IconX size={16}/>
        </button>
      </div>

      {/* Video player */}
      <video
        src={`/workspace-clips/${clip.filename}`}
        controls
        autoPlay
        style={{
          maxWidth: isVertical ? "min(400px, 90vw)" : "min(960px, 90vw)",
          maxHeight: "75vh",
          borderRadius: "var(--radius-lg)",
          boxShadow: "0 24px 80px rgba(0,0,0,0.7)",
        }}
      />

      <div style={{ marginTop: 12, fontSize: 11, color: "var(--text-4)" }}>
        Pulsa Esc para cerrar · Expira 48h desde la creación
      </div>
    </div>
  );
}

Object.assign(window, { GenerateClipsTab });