import Link from "next/link";
import { CaretDown, ChatCircleDots, CheckCircle, Clock, LockSimple, Paperclip, Play, PlayCircle } from "@phosphor-icons/react/dist/ssr";

import { nomeLongo } from "@/lib/digitais/aparencia";
import { duracaoLegivel, type ProfessorDoCurso } from "@/lib/digitais/curso";
import type { ContagemDoCurso, Continuar } from "@/lib/digitais/progresso-do-curso";
import type { ModuloDoAluno } from "@/lib/digitais/servidor/curso";

import CabecalhoDosMembros from "./CabecalhoDosMembros";
import { IconeDaAula, rotuloDoTipo } from "./IconeDaAula";

/*
 * A página do curso na área de membros (prévias 15 e 16): a foto grande com
 * quanto já foi e o botão na aula certa, os módulos como pôsteres e, embaixo,
 * as aulas de cada módulo, com o que está concluído, pela metade ou ainda vai
 * abrir. A aparência vem do invólucro (MoldeDosMembros).
 */

export type MarcaNaTela = { concluida: boolean; posicaoS: number; duracaoS: number | null };

export default function PaginaDoCurso({
  slug,
  nomeDaArea,
  nomeDaLoja,
  pessoa,
  previa,
  foto = null,
  curso,
  modulos,
  marcas,
  contagem,
  continuar,
  proximaAbre,
  expiraEm,
  whatsapp,
}: {
  slug: string;
  nomeDaArea: string;
  nomeDaLoja: string;
  cor?: string;
  escuro?: boolean;
  pessoa: { nome: string } | null;
  previa: boolean;
  /* A foto de destaque da área (Configurações > Aparência); sem ela, a capa do curso borrada. */
  foto?: string | null;
  curso: { id: string; nome: string; capa: string | null; professor: ProfessorDoCurso | null; duracaoS: number; materiais: number };
  modulos: ModuloDoAluno[];
  marcas: Record<string, MarcaNaTela>;
  contagem: ContagemDoCurso;
  continuar: (Continuar & { titulo: string }) | null;
  proximaAbre: string | null;
  expiraEm: string | null;
  whatsapp: string | null;
}) {
  const textoDoBotao = (() => {
    if (!continuar) return null;
    if (previa) return "Ver o primeiro vídeo";
    if (continuar.modo === "comecar") return "Começar a assistir";
    if (continuar.modo === "rever") return "Rever o conteúdo";
    return `Continuar: ${continuar.titulo}`;
  })();
  const moduloAtual = continuar ? modulos.find((m) => m.aulas.some((a) => a.id === continuar.id))?.id ?? null : null;
  const prazo = (() => {
    if (!expiraEm) return "Acesso sem prazo";
    const data = new Date(expiraEm);
    return Number.isNaN(data.getTime()) ? null : `Acesso até ${data.toLocaleDateString("pt-BR", { timeZone: "America/Sao_Paulo" })}`;
  })();
  const numeroDaAula = new Map(modulos.flatMap((m) => m.aulas).map((a, i) => [a.id, i + 1]));
  const professor = curso.professor;

  return (
    <div className="flex min-h-screen flex-col">
      <CabecalhoDosMembros slug={slug} nomeDaArea={nomeDaArea} pessoa={pessoa} previa={previa} ativo="curso" sobreFoto />

      <section className="mb-heroi mb-baixo">
        {foto || curso.capa ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img src={(foto || curso.capa) as string} alt="" aria-hidden className={`mb-heroi-foto ${foto ? "" : "mb-borrada"}`} />
        ) : null}
        <div className="mb-heroi-conteudo">
          <span className="mb-etiqueta">
            <span className="mb-ponto" />
            Conteúdo em vídeo{professor ? ` · com ${professor.nome}` : ""}
          </span>
          <h1 className="mb-titulo">{curso.nome}</h1>
          <div className="mb-metas">
            <span>
              <PlayCircle size={17} weight="fill" />
              {contagem.total} {contagem.total === 1 ? "vídeo" : "vídeos"}
            </span>
            {curso.duracaoS ? (
              <span>
                <Clock size={17} weight="fill" />
                {duracaoLegivel(curso.duracaoS)} de vídeo
              </span>
            ) : null}
            {curso.materiais ? (
              <span>
                <Paperclip size={17} weight="bold" />
                {curso.materiais} {curso.materiais === 1 ? "material" : "materiais"}
              </span>
            ) : null}
            {prazo && !previa ? <span>{prazo}</span> : null}
          </div>
          {!previa ? (
            <div className="mb-progresso">
              <div className={`mb-trilho ${contagem.percentual >= 100 ? "mb-ok" : ""}`}>
                <b style={{ width: `${contagem.percentual}%` }} />
              </div>
              <span>
                {contagem.percentual}% · {contagem.concluidas} de {contagem.total}
              </span>
            </div>
          ) : null}
          <div className="mb-acoes">
            {continuar && textoDoBotao ? (
              <Link href={`/${slug}/membros/aula/${continuar.id}`} className="mb-botao mb-principal">
                <Play size={20} weight="fill" />
                <span>{textoDoBotao}</span>
              </Link>
            ) : proximaAbre ? (
              <span className="mb-botao mb-vidro">
                <span>
                  Você está em dia · o próximo vídeo {proximaAbre}
                </span>
              </span>
            ) : null}
          </div>
        </div>
      </section>

      <main className="mb-miolo flex-1">
        {modulos.length > 1 ? (
          <section className="mb-fileira">
            <div className="mb-fileira-topo">
              <h2>Módulos</h2>
              <span className="mb-sub">
                {modulos.length} módulos · {contagem.total} {contagem.total === 1 ? "vídeo" : "vídeos"}
              </span>
            </div>
            <div className="mb-trilha">
              {modulos.map((modulo, indice) => {
                const feitas = modulo.aulas.filter((a) => marcas[a.id]?.concluida).length;
                const destino = modulo.aulas.find((a) => a.aberta && !marcas[a.id]?.concluida) ?? modulo.aulas.find((a) => a.aberta) ?? null;
                const conteudo = (
                  <div className="mb-capa">
                    {modulo.capa ? (
                      /* eslint-disable-next-line @next/next/no-img-element */
                      <img src={modulo.capa} alt="" loading="lazy" />
                    ) : (
                      <span className="mb-gerada" data-numero={String(indice + 1).padStart(2, "0")} />
                    )}
                    <span className="mb-num">{String(indice + 1).padStart(2, "0")}</span>
                    {!modulo.aberto ? (
                      <span className="mb-cadeado">
                        <span>
                          <LockSimple size={14} weight="fill" />
                          {modulo.abre ? `Abre ${modulo.abre.replace(/^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">
                      {previa || !modulo.aberto ? (
                        `${modulo.aulas.length} ${modulo.aulas.length === 1 ? "vídeo" : "vídeos"}`
                      ) : feitas === modulo.aulas.length ? (
                        <>
                          <CheckCircle size={16} weight="fill" className="mb-feito" />
                          {feitas} de {modulo.aulas.length}
                        </>
                      ) : (
                        <>
                          <span className="mb-trilho">
                            <b style={{ width: `${Math.round((feitas / Math.max(1, modulo.aulas.length)) * 100)}%` }} />
                          </span>
                          {feitas}/{modulo.aulas.length}
                        </>
                      )}
                    </span>
                  </div>
                );
                return modulo.aberto && destino ? (
                  <Link key={modulo.id} href={`/${slug}/membros/aula/${destino.id}`} className="mb-poster">
                    {conteudo}
                  </Link>
                ) : (
                  <div key={modulo.id} className="mb-poster mb-travado">
                    {conteudo}
                  </div>
                );
              })}
            </div>
          </section>
        ) : null}

        <div className="mb-fileira mb-curso-corpo">
          <section className="min-w-0">
            <div className="mb-fileira-topo">
              <h2>Vídeos</h2>
            </div>
            {modulos.map((modulo, indice) => {
              const feitas = modulo.aulas.filter((a) => marcas[a.id]?.concluida).length;
              const aberto = moduloAtual ? moduloAtual === modulo.id : indice === 0;
              return (
                <details key={modulo.id} open={aberto || modulos.length <= 2} className="mb-modulo">
                  <summary>
                    <span className="mb-modulo-mini">
                      {modulo.capa ? (
                        /* eslint-disable-next-line @next/next/no-img-element */
                        <img src={modulo.capa} alt="" loading="lazy" />
                      ) : (
                        <span className="mb-gerada" />
                      )}
                    </span>
                    <span className="min-w-0">
                      <span className="mb-modulo-rotulo block">Módulo {indice + 1}</span>
                      <span className="mb-modulo-titulo mb-titulo block">{modulo.titulo}</span>
                      <span className="mb-modulo-info block">
                        {modulo.aberto
                          ? previa
                            ? `${modulo.aulas.length} ${modulo.aulas.length === 1 ? "vídeo" : "vídeos"}`
                            : `${feitas} de ${modulo.aulas.length} ${modulo.aulas.length === 1 ? "vídeo" : "vídeos"}`
                          : modulo.abre
                            ? `O módulo ${modulo.abre}`
                            : "Ainda não abriu"}
                      </span>
                    </span>
                    <CaretDown size={20} weight="bold" className="mb-seta" />
                  </summary>
                  {modulo.descricao ? <p className="-mt-1 mb-2 px-1 text-[13.5px] leading-6 text-[var(--m-texto-2)]">{modulo.descricao}</p> : null}
                  <div className="pb-3">
                    {modulo.aulas.map((aula) => {
                      const marca = marcas[aula.id];
                      const duracao = Number(marca?.duracaoS || aula.duracaoS) || 0;
                      const metade = marca && !marca.concluida && marca.posicaoS > 5 && duracao ? Math.min(100, Math.round((marca.posicaoS / duracao) * 100)) : 0;
                      const agora = continuar?.id === aula.id && !previa;
                      const conteudo = (
                        <>
                          <span className={`mb-aula-icone ${marca?.concluida ? "mb-feita" : ""}`}>
                            {!aula.aberta ? (
                              <LockSimple size={16} weight="fill" />
                            ) : marca?.concluida ? (
                              <CheckCircle size={19} weight="fill" />
                            ) : (
                              <IconeDaAula tipo={aula.tipo} className="h-[18px] w-[18px]" />
                            )}
                          </span>
                          <span className="mb-aula-texto">
                            <b>
                              <span className="text-[var(--m-texto-3)]">{numeroDaAula.get(aula.id)}. </span>
                              {aula.titulo}
                            </b>
                            <span>
                              {aula.aberta ? rotuloDoTipo(aula.tipo, aula.duracaoS) : aula.abre ? `Este vídeo ${aula.abre}` : "Ainda não abriu"}
                              {aula.aberta && aula.materiais ? ` · ${aula.materiais} ${aula.materiais === 1 ? "material" : "materiais"}` : ""}
                            </span>
                            {metade > 0 ? (
                              <span className="mb-trilho">
                                <b style={{ width: `${metade}%` }} />
                              </span>
                            ) : null}
                          </span>
                          {agora ? <span className="mb-pilula">{continuar?.modo === "comecar" ? "Comece aqui" : "Parou aqui"}</span> : null}
                        </>
                      );
                      return aula.aberta ? (
                        <Link key={aula.id} href={`/${slug}/membros/aula/${aula.id}`} className={`mb-aula ${agora ? "mb-agora" : ""}`}>
                          {conteudo}
                        </Link>
                      ) : (
                        <div key={aula.id} className="mb-aula mb-fechada">
                          {conteudo}
                        </div>
                      );
                    })}
                  </div>
                </details>
              );
            })}
            {!modulos.length ? <div className="mb-vazio">Os vídeos deste conteúdo ainda estão sendo preparados. Volte daqui a pouco.</div> : null}
          </section>

          <aside className="mb-lado">
            {professor ? (
              <div className="mb-caixa">
                <h4>Quem apresenta</h4>
                <div className="mb-professora">
                  {professor.foto ? (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img src={professor.foto} alt="" />
                  ) : (
                    <span className="mb-inicial">{professor.nome.charAt(0).toUpperCase()}</span>
                  )}
                  <span className="min-w-0">
                    <b className="block truncate text-[15px]">{professor.nome}</b>
                    {professor.destaque ? <span className="block text-[12.5px] leading-5">{professor.destaque}</span> : null}
                  </span>
                </div>
              </div>
            ) : null}
            <div className="mb-caixa">
              <h4>Como funciona</h4>
              <p>O vídeo volta de onde você parou e fica marcado como concluído quando você chega ao fim.</p>
              <p>Dúvidas sobre o vídeo? Deixe um comentário embaixo dele: a {nomeDaLoja} responde ali.</p>
              {whatsapp ? (
                <a href={`https://wa.me/${whatsapp}?text=${encodeURIComponent(`Olá! Tenho uma dúvida sobre o conteúdo ${curso.nome}.`)}`} target="_blank" rel="noopener noreferrer">
                  <ChatCircleDots size={17} weight="fill" />
                  Falar com a loja
                </a>
              ) : null}
            </div>
          </aside>
        </div>
      </main>

      <footer className="mb-rodape">{nomeDaArea === nomeDaLoja ? nomeDaLoja : `${nomeDaArea} · uma área da ${nomeDaLoja}`}</footer>
    </div>
  );
}