"use client";

import { useEffect, useState, type CSSProperties } from "react";
import {
  CalendarPlus,
  ChatsCircle,
  CheckCircle,
  Clock,
  EnvelopeSimple,
  FilmReel,
  LockSimple,
  Ticket,
  Users,
  WhatsappLogo,
  Broadcast,
} from "@phosphor-icons/react";

import { getReadableTextColor } from "@/lib/color-contrast";
import type { AcaoDaLive } from "@/lib/live/venda";

import "./venda-da-live.css";

export type InfoDaLive = {
  comecaEm: string;
  duracaoMin: number;
  esperaMin: number;
  acesso: "paga" | "cadastro" | "aberta";
  momento: "cedo" | "espera" | "ao_vivo" | "encerrada" | "cancelada";
  gravacaoParaQuemComprou: boolean;
  apresentador: { nome: string | null; bio: string | null; foto: string | null };
  aprender: string[];
  vagas: number;
  limiteVagas: number | null;
  agenda: string;
  acao: AcaoDaLive;
};

const moeda = (valor: number) => new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(valor || 0);

function quandoPorExtenso(iso: string) {
  try {
    const texto = new Intl.DateTimeFormat("pt-BR", { weekday: "long", day: "2-digit", month: "long", hour: "2-digit", minute: "2-digit", timeZone: "America/Sao_Paulo" }).format(
      new Date(iso),
    );
    return texto.charAt(0).toUpperCase() + texto.slice(1);
  } catch {
    return iso;
  }
}

function duracao(min: number) {
  const h = Math.floor(min / 60);
  const m = min % 60;
  return h ? `${h} h${m ? ` ${m} min` : ""}` : `${m} min`;
}

function iniciais(nome: string) {
  const partes = nome.trim().split(/\s+/);
  return ((partes[0]?.[0] ?? "") + (partes.length > 1 ? partes[partes.length - 1][0] : "")).toUpperCase() || "?";
}

function Relogio({ ate }: { ate: number }) {
  const [agora, setAgora] = useState<number | null>(null);
  useEffect(() => {
    const primeiro = setTimeout(() => setAgora(Date.now()), 0);
    const t = setInterval(() => setAgora(Date.now()), 1000);
    return () => {
      clearTimeout(primeiro);
      clearInterval(t);
    };
  }, []);
  if (agora === null || ate <= agora) return null;
  const total = Math.floor((ate - agora) / 1000);
  const partes = [
    { v: Math.floor(total / 86400), r: "dias" },
    { v: Math.floor((total % 86400) / 3600), r: "horas" },
    { v: Math.floor((total % 3600) / 60), r: "min" },
    { v: total % 60, r: "seg" },
  ].filter((p, i) => i > 0 || p.v > 0);
  return (
    <div className="vl-relogio" aria-label="Contagem para a live">
      {partes.map((p) => (
        <div key={p.r}>
          <b>{String(p.v).padStart(2, "0")}</b>
          <span>{p.r}</span>
        </div>
      ))}
    </div>
  );
}

export default function VendaDaLive({
  produto,
  live,
  cor,
  mostrarPreco,
  textoSemPreco,
  descricaoHtml,
}: {
  produto: { id: string; nome: string; preco: number; imagem: string | null };
  live: InfoDaLive;
  cor: string;
  mostrarPreco: boolean;
  textoSemPreco: string;
  descricaoHtml: string;
}) {
  const aoVivo = live.momento === "ao_vivo";
  const acabou = live.momento === "encerrada";
  const comeca = new Date(live.comecaEm).getTime();
  const estilo = { "--vl-acento": cor, "--vl-acento-texto": getReadableTextColor(cor) } as CSSProperties;
  const acao = live.acao;
  const nomeDeQuemApresenta = live.apresentador.nome;

  return (
    <div className="vl-raiz" style={estilo}>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap" precedence="default" />
      <section className="vl-heroi">
        {produto.imagem ? <div className="vl-foto" style={{ backgroundImage: `url("${produto.imagem}")` }} /> : <div className="vl-sem-foto" />}
        <div className="vl-conteudo">
          <span className={`vl-etiqueta${aoVivo ? " ao-vivo" : ""}`}>
            <span className="vl-ponto" />
            {aoVivo ? "Ao vivo agora" : acabou ? "Live gravada" : `Live · ${quandoPorExtenso(live.comecaEm)}`}
          </span>
          <h1 className="vl-titulo">{produto.nome}</h1>
          <div className="vl-quando">
            <span>
              <Clock weight="fill" size={18} />
              {duracao(live.duracaoMin)} ao vivo
            </span>
            <span>
              <ChatsCircle weight="fill" size={18} />
              Bate-papo e perguntas
            </span>
            {live.gravacaoParaQuemComprou ? (
              <span>
                <FilmReel weight="fill" size={18} />
                Gravação para quem garantir a vaga
              </span>
            ) : null}
          </div>
          {!aoVivo && !acabou ? <Relogio ate={comeca} /> : null}

          {mostrarPreco && live.acesso !== "aberta" && acao.tipo !== "entrar" ? (
            <div className="vl-preco">
              {produto.preco > 0 ? <b>{moeda(produto.preco)}</b> : <b>Grátis</b>}
              {produto.preco > 0 ? null : <span className="vl-gratis">só o seu nome e e-mail</span>}
            </div>
          ) : !mostrarPreco && live.acesso === "paga" ? (
            <div className="vl-preco">
              <b style={{ fontSize: 18 }}>{textoSemPreco}</b>
            </div>
          ) : null}

          {acao.tipo === "fechado" ? (
            <div className="vl-fechado">{acao.motivo}</div>
          ) : (
            <div className="vl-acoes">
              <a className="vl-botao principal" href={acao.href ?? "#"} target={acao.tipo === "whatsapp" ? "_blank" : undefined} rel="noreferrer">
                {acao.tipo === "entrar" ? <Broadcast weight="fill" size={20} /> : acao.tipo === "whatsapp" ? <WhatsappLogo weight="fill" size={20} /> : <Ticket weight="fill" size={20} />}
                {acao.rotulo}
              </a>
              {!acabou ? (
                <a className="vl-botao vidro" href={live.agenda} target="_blank" rel="noreferrer">
                  <CalendarPlus weight="fill" size={20} />
                  Pôr na agenda
                </a>
              ) : null}
            </div>
          )}
          {live.acesso !== "aberta" && acao.tipo === "garantir" ? (
            <div className="vl-garantias">
              <span>
                <LockSimple weight="fill" /> Pix ou cartão, na mesma tela
              </span>
              <span>
                <EnvelopeSimple weight="fill" /> O link chega no seu e-mail
              </span>
              {live.vagas >= 10 ? (
                <span>
                  <Users weight="fill" /> {live.vagas} vagas garantidas
                </span>
              ) : null}
            </div>
          ) : null}
        </div>
      </section>

      <div className="vl-corpo">
        <section>
          {live.aprender.length ? (
            <>
              <h2>Nesta live você vai</h2>
              <div className="vl-aprender">
                {live.aprender.map((linha) => (
                  <div key={linha}>
                    <CheckCircle weight="fill" size={22} />
                    {linha}
                  </div>
                ))}
              </div>
            </>
          ) : null}
          {descricaoHtml ? <div className="vl-sobre" dangerouslySetInnerHTML={{ __html: descricaoHtml }} /> : null}
        </section>
        <aside>
          {nomeDeQuemApresenta ? (
            <div className="vl-caixa">
              <h4>Quem apresenta</h4>
              <div className="vl-quem">
                <span className="vl-av" style={live.apresentador.foto ? { backgroundImage: `url("${live.apresentador.foto}")` } : undefined}>
                  {live.apresentador.foto ? "" : iniciais(nomeDeQuemApresenta)}
                </span>
                <div>
                  <b>{nomeDeQuemApresenta}</b>
                  {live.apresentador.bio ? <span>{live.apresentador.bio}</span> : null}
                </div>
              </div>
              {live.vagas >= 3 && live.acesso !== "aberta" ? (
                <div className="vl-ja">
                  <Users weight="fill" size={18} />
                  {live.vagas} pessoas já garantiram
                  {live.limiteVagas ? ` · ${Math.max(0, live.limiteVagas - live.vagas)} vagas sobrando` : ""}
                </div>
              ) : null}
            </div>
          ) : null}
          {!acabou ? (
            <div className="vl-caixa">
              <h4>Lembrar de mim</h4>
              <div className="vl-lembrar">
                {live.acesso !== "aberta" ? (
                  <div>
                    <EnvelopeSimple weight="fill" size={19} />
                    E-mail 1 dia antes e 15 min antes
                    <CheckCircle weight="fill" className="vl-ok" size={18} />
                  </div>
                ) : null}
                <a href={live.agenda} target="_blank" rel="noreferrer">
                  <CalendarPlus weight="fill" size={19} />
                  Google Agenda
                </a>
                {live.esperaMin > 0 ? (
                  <div>
                    <Clock weight="fill" size={19} />
                    A sala de espera abre {live.esperaMin} min antes
                  </div>
                ) : null}
              </div>
            </div>
          ) : null}
        </aside>
      </div>
    </div>
  );
}