"use client";

import { useEffect, type ReactNode } from "react";
import { X } from "lucide-react";

import PlayerDoCurso from "@/components/digitais/membros/PlayerDoCurso";

/*
 * A janela da prévia grátis do curso (apresentação ou aula aberta a quem
 * ainda não comprou), na página de venda dos três desenhos da loja. O vídeo
 * vem da rota da prévia, que só abre o que a loja marcou como grátis.
 */

export type PreviaEscolhida = { titulo: string; aulaId: string | null };

export default function JanelaDaPrevia({
  produtoId,
  previa,
  cor,
  aoFechar,
  rodape,
}: {
  produtoId: string;
  previa: PreviaEscolhida;
  cor: string;
  aoFechar: () => void;
  /* O convite para comprar, no desenho de cada página. */
  rodape?: ReactNode;
}) {
  useEffect(() => {
    const antes = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    function tecla(e: KeyboardEvent) {
      if (e.key === "Escape") aoFechar();
    }
    window.addEventListener("keydown", tecla);
    return () => {
      document.body.style.overflow = antes;
      window.removeEventListener("keydown", tecla);
    };
  }, [aoFechar]);

  const fonteEm = previa.aulaId
    ? `/api/digitais/previa-gratis?produto=${encodeURIComponent(produtoId)}&aula=${encodeURIComponent(previa.aulaId)}`
    : `/api/digitais/previa-gratis?produto=${encodeURIComponent(produtoId)}&apresentacao=1`;

  return (
    <div className="fixed inset-0 z-[95] flex items-center justify-center bg-black/85 p-0 sm:p-6" role="dialog" aria-modal="true" aria-label={previa.titulo} onClick={aoFechar}>
      <div className="w-full max-w-[1000px]" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between gap-3 px-4 pb-3 text-white sm:px-0">
          <div className="min-w-0">
            <div className="text-[11.5px] font-bold uppercase tracking-[0.14em] text-white/60">{previa.aulaId ? "Prévia grátis" : "Apresentação"}</div>
            <div className="truncate text-[16px] font-bold sm:text-[18px]">{previa.titulo}</div>
          </div>
          <button type="button" onClick={aoFechar} className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20" aria-label="Fechar">
            <X className="h-5 w-5" />
          </button>
        </div>
        <PlayerDoCurso key={fonteEm} fonteEm={fonteEm} cor={cor} autoplay />
        {rodape ? <div className="px-4 pt-4 sm:px-0">{rodape}</div> : null}
      </div>
    </div>
  );
}