"use client";

import { useState } from "react";
import { FilmStrip } from "@phosphor-icons/react";

import type { GravacaoNaTela } from "@/lib/live/servidor/gravacoes";

import "./live.css";

function duracao(segundos: number | null) {
  if (!segundos) return "";
  const h = Math.floor(segundos / 3600);
  const m = Math.round((segundos % 3600) / 60);
  return h ? `${h} h ${m} min` : `${m} min`;
}

/* A live que já aconteceu: a gravação (em partes, se quem apresenta saiu e voltou ao ar). */
export default function GravacaoDaLive({
  titulo,
  loja,
  quando,
  gravacoes,
  linkDeVolta,
}: {
  titulo: string;
  loja: string;
  quando: string;
  gravacoes: GravacaoNaTela[];
  linkDeVolta: string;
}) {
  const [atual, setAtual] = useState(0);
  const gravacao = gravacoes[atual];
  return (
    <main className="lv-replay">
      <a href={linkDeVolta} className="lv-botao leve" style={{ height: 38, marginBottom: 18 }}>
        ← Voltar
      </a>
      <small className="lv-sobre" style={{ display: "block", fontSize: 11.5, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--m-acento)" }}>
        {loja} · gravação da live
      </small>
      <h1 className="mb-titulo" style={{ fontSize: "clamp(28px,4vw,46px)", margin: "8px 0 4px" }}>
        {titulo}
      </h1>
      <p style={{ margin: "0 0 20px", color: "var(--m-texto-2)" }}>{quando}</p>
      {gravacao ? (
        <>
          <video
            key={gravacao.id}
            src={gravacao.url}
            controls
            playsInline
            preload="metadata"
            controlsList="nodownload"
            onEnded={() => {
              if (atual < gravacoes.length - 1) setAtual(atual + 1);
            }}
          />
          {gravacoes.length > 1 ? (
            <div className="lv-partes">
              {gravacoes.map((g, i) => (
                <button key={g.id} type="button" className={`lv-botao${i === atual ? "" : " leve"}`} style={{ height: 38 }} onClick={() => setAtual(i)}>
                  <FilmStrip weight="fill" /> Parte {g.parte}
                  {g.segundos ? ` · ${duracao(g.segundos)}` : ""}
                </button>
              ))}
            </div>
          ) : null}
        </>
      ) : (
        <div className="lv-caixa" style={{ width: "100%", maxWidth: 560 }}>
          <h3>A gravação ainda está sendo preparada</h3>
          <p>Volte daqui a alguns minutos. Se a live acabou de terminar, ela aparece aqui sozinha.</p>
        </div>
      )}
    </main>
  );
}