"use client";

import Link from "next/link";
import { useMemo } from "react";
import {
  Broadcast,
  CalendarBlank,
  CaretRight,
  ChatCircleDots,
  CheckCircle,
  Clock,
  DownloadSimple,
  FilmReel,
  LinkedinLogo,
  LockSimple,
  Medal,
  Play,
  PlayCircle,
  SealCheck,
} from "@phosphor-icons/react";

import ListaDeAcessos, { textoDaLiveNaLista } from "@/components/digitais/ListaDeAcessos";
import { nomeLongo } from "@/lib/digitais/aparencia";
import { duracaoLegivel, relogio } from "@/lib/digitais/curso";
import type { AcessoNaTela } from "@/lib/digitais/servidor/acessos";
import type { AssistindoNaArea, ContinuarNaArea, CursoNaArea, ModuloNaArea } from "@/lib/digitais/servidor/curso";

import CabecalhoDosMembros from "./CabecalhoDosMembros";

/*
 * A área de membros da loja (prévias 15 e 16): a foto grande com o curso
 * para continuar, "Continue assistindo", os módulos como pôsteres, os
 * cursos, os downloads, os certificados e o que mais a loja vende. A cor, o
 * fundo, a letra e o formato das capas vêm do invólucro (MoldeDosMembros).
 */

/* "abre em 3 dias" → "Abre em 3 dias". */
const comMaiuscula = (texto: string) => texto.charAt(0).toUpperCase() + texto.slice(1);

type OutroProduto = { id: string; nome: string; preco: number | null; imagem: string | null };

export type CertificadoNaArea = { codigo: string; curso: string; emitidoEm: string; cargaHoraria: string };

/* O pôster de um módulo ou curso: a foto da loja ou a capa feita com a cor e o número. */
function Capa({ foto, numero }: { foto: string | null; numero: number }) {
  return foto ? (
    /* eslint-disable-next-line @next/next/no-img-element */
    <img src={foto} alt="" loading="lazy" />
  ) : (
    <span className="mb-gerada" data-numero={String(numero).padStart(2, "0")} />
  );
}

export default function AreaDeMembros({
  slug,
  nomeDaArea,
  nomeDaLoja,
  escuro,
  banner,
  cliente,
  acessos,
  cursos,
  continuar,
  assistindo,
  modulos,
  certificados = [],
  outros,
  whatsapp,
}: {
  slug: string;
  nomeDaArea: string;
  nomeDaLoja: string;
  cor?: string;
  escuro: boolean;
  banner: string | null;
  cliente: { nome: string };
  acessos: AcessoNaTela[];
  cursos: CursoNaArea[];
  continuar: ContinuarNaArea | null;
  assistindo: AssistindoNaArea[];
  modulos: ModuloNaArea[];
  certificados?: CertificadoNaArea[];
  outros: OutroProduto[];
  whatsapp: string | null;
}) {
  const primeiroNome = cliente.nome.trim().split(/\s+/)[0] || "";

  /* Os downloads (tudo que não é curso), agrupados pelo produto, na ordem da compra. */
  const porProduto = useMemo(() => {
    const grupos = new Map<string, { produto: string; capa: string | null; itens: AcessoNaTela[] }>();
    for (const acesso of acessos) {
      if (acesso.tipo === "curso" || acesso.tipo === "live") continue;
      const grupo = grupos.get(acesso.produtoId) ?? { produto: acesso.produto, capa: acesso.capa, itens: [] };
      grupo.itens.push(acesso);
      grupos.set(acesso.produtoId, grupo);
    }
    return Array.from(grupos.entries()).map(([id, grupo]) => ({ id, ...grupo }));
  }, [acessos]);

  /* As lives (uma por produto): a próxima primeiro, as que aconteceram depois. */
  const lives = useMemo(() => {
    const vistas = new Set<string>();
    const lista = acessos.filter((a) => a.tipo === "live" && a.live && !vistas.has(a.produtoId) && (vistas.add(a.produtoId), true));
    const peso = (a: AcessoNaTela) => (a.live?.status === "ao_vivo" ? 0 : a.live?.status === "agendada" ? 1 : 2);
    return lista.sort((a, b) => peso(a) - peso(b) || String(a.live?.comecaEm).localeCompare(String(b.live?.comecaEm)));
  }, [acessos]);

  const destaque = (() => {
    if (!continuar) return null;
    const doCurso = `/${slug}/membros/curso/${continuar.produtoId}`;
    if (continuar.modo === "em_dia") {
      return { olho: "Você está em dia", botao: "Ver o conteúdo", href: doCurso, linha: continuar.proximaAbre ? `O próximo vídeo ${continuar.proximaAbre}.` : null };
    }
    const href = continuar.aula ? `/${slug}/membros/aula/${continuar.aula.id}` : doCurso;
    if (continuar.modo === "comecar") return { olho: "Comece agora", botao: "Começar a assistir", href, linha: continuar.aula ? `Primeiro vídeo: ${continuar.aula.titulo}` : null };
    if (continuar.modo === "rever") return { olho: "Conteúdo concluído", botao: "Rever o conteúdo", href, linha: "Você terminou todos os vídeos. Reveja quando quiser." };
    return { olho: "Continue de onde parou", botao: continuar.aula ? `Continuar: ${continuar.aula.titulo}` : "Continuar", href, linha: null };
  })();
  const fotoDoTopo = banner || continuar?.capa || null;

  return (
    <div className="flex min-h-screen flex-col">
      <CabecalhoDosMembros slug={slug} nomeDaArea={nomeDaArea} pessoa={{ nome: cliente.nome }} ativo="inicio" sobreFoto={Boolean(continuar && destaque)} />

      {continuar && destaque ? (
        <section className="mb-heroi">
          {fotoDoTopo ? (
            /* eslint-disable-next-line @next/next/no-img-element */
            <img src={fotoDoTopo} alt="" aria-hidden className={`mb-heroi-foto ${banner ? "" : "mb-borrada"}`} />
          ) : null}
          <div className="mb-heroi-conteudo">
            <span className="mb-etiqueta">
              <span className="mb-ponto" />
              {primeiroNome ? `Olá, ${primeiroNome} · ` : ""}
              {destaque.olho}
            </span>
            <h1 className="mb-titulo">{continuar.curso}</h1>
            <div className="mb-metas">
              {continuar.aulas ? (
                <span>
                  <PlayCircle size={17} weight="fill" />
                  {continuar.aulas} {continuar.aulas === 1 ? "vídeo" : "vídeos"}
                </span>
              ) : null}
              {continuar.duracaoS >= 60 ? (
                <span>
                  <Clock size={17} weight="fill" />
                  {duracaoLegivel(continuar.duracaoS)}
                </span>
              ) : null}
              {continuar.certificado ? (
                <span>
                  <SealCheck size={17} weight="fill" />
                  Certificado
                </span>
              ) : null}
            </div>
            {destaque.linha ? <p className="mt-4 max-w-[560px] text-[15px] leading-6 text-[var(--m-texto-2)]">{destaque.linha}</p> : null}
            <div className="mb-progresso">
              <div className={`mb-trilho ${continuar.percentual >= 100 ? "mb-ok" : ""}`}>
                <b style={{ width: `${continuar.percentual}%` }} />
              </div>
              <span>{continuar.percentual}% concluído</span>
            </div>
            <div className="mb-acoes">
              <Link href={destaque.href} className="mb-botao mb-principal">
                <Play size={20} weight="fill" />
                <span>{destaque.botao}</span>
              </Link>
              {continuar.modo !== "em_dia" ? (
                <Link href={`/${slug}/membros/curso/${continuar.produtoId}`} className="mb-botao mb-vidro">
                  Ver todos os vídeos
                </Link>
              ) : null}
            </div>
          </div>
        </section>
      ) : (
        <section className="mb-heroi mb-baixo">
          {banner ? (
            /* eslint-disable-next-line @next/next/no-img-element */
            <img src={banner} alt="" aria-hidden className="mb-heroi-foto" />
          ) : null}
          <div className="mb-heroi-conteudo">
            <span className="mb-etiqueta">
              <span className="mb-ponto" />
              {primeiroNome ? `Olá, ${primeiroNome}` : "Olá"}
            </span>
            <h1 className="mb-titulo">Tudo o que você comprou, num lugar só</h1>
            <p className="mt-4 max-w-[560px] text-[15px] leading-6 text-[var(--m-texto-2)]">Baixe quando quiser. Cada download fica registrado e o acesso segue as regras de cada produto.</p>
          </div>
        </section>
      )}

      <main className="mb-miolo flex-1">
        {assistindo.length ? (
          <section className="mb-fileira">
            <div className="mb-fileira-topo">
              <h2>Continue assistindo</h2>
              <span className="mb-sub">de onde você parou</span>
            </div>
            <div className="mb-trilha">
              {assistindo.map((item) => (
                <Link key={item.aulaId} href={`/${slug}/membros/aula/${item.aulaId}`} className="mb-continuar">
                  <div className="mb-quadro">
                    {item.capa ? (
                      /* eslint-disable-next-line @next/next/no-img-element */
                      <img src={item.capa} alt="" loading="lazy" />
                    ) : null}
                    <span className="mb-play">
                      <Play size={18} weight="fill" />
                    </span>
                    {item.restanteS ? <span className="mb-tempo">{relogio(item.restanteS)} restantes</span> : null}
                    <span className="mb-visto">
                      <b style={{ width: `${item.percentual}%` }} />
                    </span>
                  </div>
                  <div className="mb-legenda">
                    <small>
                      Módulo {item.moduloNumero} · Vídeo {item.numero}
                    </small>
                    <b>{item.titulo}</b>
                  </div>
                </Link>
              ))}
            </div>
          </section>
        ) : null}

        {continuar && modulos.length ? (
          <section className="mb-fileira">
            <div className="mb-fileira-topo">
              <h2>Módulos</h2>
              <span className="mb-sub">{continuar.curso}</span>
              <Link href={`/${slug}/membros/curso/${continuar.produtoId}`} className="mb-ver">
                <span>Ver todos</span>
                <CaretRight size={14} weight="bold" />
              </Link>
            </div>
            <div className="mb-trilha">
              {modulos.map((modulo) => {
                const completo = modulo.aulas > 0 && modulo.concluidas === modulo.aulas;
                const conteudo = (
                  <div className="mb-capa">
                    <Capa foto={modulo.capa} numero={modulo.numero} />
                    <span className="mb-num">{String(modulo.numero).padStart(2, "0")}</span>
                    {!modulo.aberto ? (
                      <span className="mb-cadeado">
                        <span>
                          <LockSimple size={14} weight="fill" />
                          {modulo.abre ? comMaiuscula(modulo.abre) : "Ainda não abriu"}
                        </span>
                      </span>
                    ) : null}
                    <span className={`mb-nome mb-titulo ${nomeLongo(modulo.titulo) ? "mb-longo" : ""}`}>{modulo.titulo}</span>
                    <span className="mb-rodape-capa">
                      {!modulo.aberto ? (
                        `${modulo.aulas} ${modulo.aulas === 1 ? "vídeo" : "vídeos"}${modulo.duracaoS >= 60 ? ` · ${duracaoLegivel(modulo.duracaoS)}` : ""}`
                      ) : completo ? (
                        <>
                          <CheckCircle size={16} weight="fill" className="mb-feito" />
                          {modulo.aulas} de {modulo.aulas} {modulo.aulas === 1 ? "vídeo" : "vídeos"}
                        </>
                      ) : (
                        <>
                          <span className="mb-trilho">
                            <b style={{ width: `${modulo.aulas ? Math.round((modulo.concluidas / modulo.aulas) * 100) : 0}%` }} />
                          </span>
                          {modulo.concluidas}/{modulo.aulas}
                        </>
                      )}
                    </span>
                  </div>
                );
                return modulo.aberto && modulo.aulaId ? (
                  <Link key={modulo.id} href={`/${slug}/membros/aula/${modulo.aulaId}`} className="mb-poster">
                    {conteudo}
                  </Link>
                ) : (
                  <div key={modulo.id} className="mb-poster mb-travado">
                    {conteudo}
                  </div>
                );
              })}
            </div>
          </section>
        ) : null}

        {lives.length ? (
          <section id="lives" className="mb-fileira scroll-mt-24">
            <div className="mb-fileira-topo">
              <h2>Suas lives</h2>
              <span className="mb-sub">
                {lives.length} {lives.length === 1 ? "live" : "lives"}
              </span>
            </div>
            <div className="mb-trilha">
              {lives.map((acesso, i) => {
                const live = acesso.live!;
                const aberta = acesso.situacao === "liberado" && live.status !== "cancelada" && (live.status !== "encerrada" || live.gravacao);
                const conteudo = (
                  <div className="mb-capa">
                    <Capa foto={acesso.capa} numero={i + 1} />
                    <span className="mb-cadeado" style={live.status === "ao_vivo" ? { background: "transparent" } : undefined}>
                      <span style={live.status === "ao_vivo" ? { background: "#ff2d46", color: "#fff" } : undefined}>
                        {live.status === "ao_vivo" ? <Broadcast size={14} weight="fill" /> : live.status === "encerrada" ? <FilmReel size={14} weight="fill" /> : <CalendarBlank size={14} weight="fill" />}
                        {live.status === "ao_vivo" ? "Ao vivo agora" : live.status === "encerrada" ? (live.gravacao ? "Gravação" : "Aconteceu") : live.status === "cancelada" ? "Cancelada" : "Live"}
                      </span>
                    </span>
                    <span className={`mb-nome mb-titulo ${nomeLongo(acesso.produto) ? "mb-longo" : ""}`}>{acesso.produto}</span>
                    <span className="mb-rodape-capa">
                      <span className="line-clamp-1">{acesso.situacao === "liberado" ? textoDaLiveNaLista(live) : acesso.motivo}</span>
                    </span>
                  </div>
                );
                return aberta ? (
                  <Link key={acesso.id} href={`/${slug}/live/${live.salaId}`} className="mb-poster mb-curso">
                    {conteudo}
                  </Link>
                ) : (
                  <div key={acesso.id} className="mb-poster mb-curso mb-travado">
                    {conteudo}
                  </div>
                );
              })}
            </div>
          </section>
        ) : null}

        {cursos.length ? (
          <section id="cursos" className="mb-fileira scroll-mt-24">
            <div className="mb-fileira-topo">
              <h2>Seus conteúdos</h2>
              <span className="mb-sub">
                {cursos.length} {cursos.length === 1 ? "conteúdo" : "conteúdos"}
              </span>
            </div>
            <div className="mb-trilha">
              {cursos.map((curso, i) => {
                const liberado = curso.situacao === "liberado";
                const feito = liberado && curso.total > 0 && curso.concluidas === curso.total;
                const conteudo = (
                  <div className="mb-capa">
                    <Capa foto={curso.capa} numero={i + 1} />
                    {!liberado ? (
                      <span className="mb-cadeado">
                        <span>
                          <LockSimple size={14} weight="fill" />
                          {curso.situacao === "preparando" ? "Em preparo" : "Fechado"}
                        </span>
                      </span>
                    ) : null}
                    <span className={`mb-nome mb-titulo ${nomeLongo(curso.nome) ? "mb-longo" : ""}`}>{curso.nome}</span>
                    <span className="mb-rodape-capa">
                      {!liberado ? (
                        <span className="line-clamp-1">{curso.motivo}</span>
                      ) : feito ? (
                        <>
                          <CheckCircle size={16} weight="fill" className="mb-feito" />
                          Concluído
                        </>
                      ) : curso.total ? (
                        <>
                          <span className="mb-trilho">
                            <b style={{ width: `${curso.percentual}%` }} />
                          </span>
                          {curso.percentual}%
                        </>
                      ) : (
                        "Vídeos chegando"
                      )}
                    </span>
                  </div>
                );
                return liberado ? (
                  <Link key={curso.produtoId} href={`/${slug}/membros/curso/${curso.produtoId}`} className="mb-poster mb-curso">
                    {conteudo}
                  </Link>
                ) : (
                  <div key={curso.produtoId} className="mb-poster mb-curso mb-travado">
                    {conteudo}
                  </div>
                );
              })}
            </div>
          </section>
        ) : null}

        {porProduto.length || certificados.length || !cursos.length ? (
          <section className="mb-fileira">
            <div className={porProduto.length && certificados.length ? "mb-duas" : "px-[clamp(16px,4vw,56px)]"}>
              {porProduto.length || !cursos.length ? (
                <div id="downloads" className="min-w-0 scroll-mt-24">
                  <div className="mb-fileira-topo">
                    <h2>Seus downloads</h2>
                    {porProduto.length ? (
                      <span className="mb-sub">
                        {porProduto.length} {porProduto.length === 1 ? "produto" : "produtos"}
                      </span>
                    ) : null}
                  </div>
                  {porProduto.length ? (
                    porProduto.map((grupo) => (
                      <div key={grupo.id} className="mb-grupo">
                        <div className="mb-grupo-nome">
                          {grupo.capa ? (
                            /* eslint-disable-next-line @next/next/no-img-element */
                            <img src={grupo.capa} alt="" />
                          ) : (
                            <DownloadSimple size={18} weight="bold" />
                          )}
                          <span className="truncate">{grupo.produto}</span>
                        </div>
                        <ListaDeAcessos acessos={grupo.itens} prova={{ tipo: "membros", slug }} corDoBotao="var(--m-acento)" escuro={escuro} />
                      </div>
                    ))
                  ) : (
                    <div className="mb-vazio">Você ainda não tem compras digitais aqui. Quando comprar, elas aparecem nesta página.</div>
                  )}
                </div>
              ) : null}

              {certificados.length ? (
                <div id="certificados" className="min-w-0 scroll-mt-24">
                  <div className="mb-fileira-topo">
                    <h2>Certificados</h2>
                  </div>
                  {certificados.map((certificado) => {
                    const endereco = `/${slug}/certificado/${encodeURIComponent(certificado.codigo)}`;
                    return (
                      <div key={certificado.codigo} className="mb-certificado">
                        <span className="mb-medalha">
                          <Medal size={28} weight="fill" />
                        </span>
                        <h3>{certificado.curso}</h3>
                        <p>
                          Emitido em {new Date(certificado.emitidoEm).toLocaleDateString("pt-BR", { timeZone: "America/Sao_Paulo" })} · {certificado.cargaHoraria}
                        </p>
                        <div className="mb-codigo">{certificado.codigo}</div>
                        <div className="mb-acoes">
                          <a href={`/api/digitais/certificado/${encodeURIComponent(certificado.codigo)}?slug=${encodeURIComponent(slug)}`} className="mb-botao mb-principal mb-pequeno">
                            <DownloadSimple size={17} weight="bold" />
                            Baixar PDF
                          </a>
                          <Link href={endereco} className="mb-botao mb-vidro mb-pequeno">
                            <LinkedinLogo size={17} weight="fill" />
                            Ver e compartilhar
                          </Link>
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : null}
            </div>
          </section>
        ) : null}

        {outros.length ? (
          <section className="mb-fileira">
            <div className="mb-fileira-topo">
              <h2>Mais da {nomeDaArea}</h2>
              <span className="mb-sub">para continuar aprendendo</span>
            </div>
            <div className="mb-trilha">
              {outros.map((produto, i) => (
                <Link key={produto.id} href={`/${slug}/p/${produto.id}`} className="mb-top" title={produto.nome}>
                  <span className="mb-n" aria-hidden>
                    {i + 1}
                  </span>
                  <span className="mb-poster">
                    <span className="mb-capa block">
                      <Capa foto={produto.imagem} numero={i + 1} />
                      <span className={`mb-nome mb-titulo ${nomeLongo(produto.nome) ? "mb-longo" : ""}`}>{produto.nome}</span>
                    </span>
                  </span>
                </Link>
              ))}
            </div>
          </section>
        ) : null}
      </main>

      <footer className="mb-rodape">
        <span>{nomeDaArea === nomeDaLoja ? nomeDaLoja : `${nomeDaArea} · uma área da ${nomeDaLoja}`}</span>
        {whatsapp ? (
          <>
            <span>·</span>
            <a href={`https://wa.me/${whatsapp}?text=${encodeURIComponent("Olá! Tenho uma dúvida sobre uma compra.")}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5">
              <ChatCircleDots size={16} weight="fill" />
              Dúvidas? Fale com a loja pelo WhatsApp
            </a>
          </>
        ) : null}
      </footer>
    </div>
  );
}