"use client";

import { useRef } from "react";
import Image from "next/image";
import { SealCheck } from "@phosphor-icons/react";
import { CURVA, gsap, SplitText, useGSAP } from "../gsap";
import { TELAS } from "../data/telas";
import Telas from "./Telas";
import type { Parceira } from "../parceiras";

/*
  A capa: o que é o sistema e para quem, com a prova logo abaixo dos
  botões. Ao lado, a cena: uma forma de cor cheia atrás e as telas de verdade
  na frente, soltas, passando uma atrás da outra: painel, orçamento, pedido,
  produção e caixa.

  O título sobe por linhas uma vez, no carregamento. A cena chega depois.
*/

const LEGENDAS = [
  "O painel mostra como está o dia da gráfica.",
  "O orçamento sai com o custo real de cada item.",
  "O cliente aprova pelo link e vira pedido na hora.",
  "A produção anda no quadro, etapa por etapa.",
  "O pagamento entra no caixa e o mês fecha certo.",
];

function quadrosDaCapa() {
  const painel = TELAS.painel?.[0];
  const orcamento = TELAS.vender?.[0];
  const pedido = TELAS.vender?.[1];
  const producao = TELAS.produzir?.[0];
  const caixa = TELAS.cobrar?.[0];
  const lista = [painel, orcamento, pedido, producao, caixa];
  const quadros = lista.filter((q): q is NonNullable<typeof q> => Boolean(q));
  const legendas = LEGENDAS.filter((_, i) => Boolean(lista[i]));
  return { quadros, legendas };
}

export default function Capa({ parceira }: { parceira?: Parceira }) {
  const raiz = useRef<HTMLElement | null>(null);
  const { quadros, legendas } = quadrosDaCapa();
  const celular = TELAS.celular?.[0];

  useGSAP(
    () => {
      const mm = gsap.matchMedia();
      mm.add("(prefers-reduced-motion: no-preference)", () => {
        const escopo = raiz.current;
        const h1 = escopo?.querySelector("h1");
        if (!escopo || !h1) return;

        let titulo: ReturnType<typeof SplitText.create> | null = null;
        let tl: gsap.core.Timeline | null = null;

        const montar = () => {
          const partes = SplitText.create(h1, { type: "lines", linesClass: "lp-linha", mask: "lines" });
          titulo = partes;
          tl = gsap.timeline({ defaults: { ease: CURVA, duration: 0.6 } });
          tl.from(".lp-capa .lp-rotulo", { autoAlpha: 0, y: 10 })
            .from(partes.lines, { yPercent: 108, duration: 0.9, stagger: 0.09, onComplete: () => partes.revert() }, "-=0.3")
            .from(".lp-capa .lp-lede, .lp-capa .lp-acoes", { autoAlpha: 0, y: 12, stagger: 0.1 }, "-=0.55")
            .from(".lp-cena-forma", { autoAlpha: 0, x: 40, duration: 0.8 }, "-=0.5")
            .from(".lp-cena-tela", { autoAlpha: 0, y: 30, duration: 0.8 }, "-=0.55")
            .from(".lp-cena-tela-2", { autoAlpha: 0, y: 24, duration: 0.7 }, "-=0.45")
            .from(".lp-cena-legenda", { autoAlpha: 0, y: 10 }, "-=0.35");
          /* As parceiras sobem de dentro da forma, que corta embaixo. */
          if (escopo.querySelector(".lp-parceiras")) {
            tl.from(".lp-parceiras-foto img", { yPercent: 35, autoAlpha: 0, duration: 1.1, ease: "power3.out" }, "-=0.6")
              .from(".lp-parceiras-logo", { autoAlpha: 0, scale: 0.6, y: 20, duration: 0.7, ease: "back.out(1.8)" }, "-=0.55")
              .from(".lp-parceiras-cartao", { autoAlpha: 0, y: 16, duration: 0.6 }, "-=0.4");
          }
        };

        /* Numa aba escondida o relógio do navegador quase para, e a capa
           ficaria em branco até a pessoa voltar. A animação só nasce com a
           aba à vista. */
        if (document.visibilityState === "visible") {
          montar();
        } else {
          const aoAparecer = () => {
            if (document.visibilityState !== "visible") return;
            document.removeEventListener("visibilitychange", aoAparecer);
            montar();
          };
          document.addEventListener("visibilitychange", aoAparecer);
          return () => {
            document.removeEventListener("visibilitychange", aoAparecer);
            tl?.kill();
            titulo?.revert();
          };
        }
        return () => {
          tl?.kill();
          titulo?.revert();
        };
      });
      return () => mm.revert();
    },
    { scope: raiz }
  );

  return (
    <section id="topo" ref={raiz} className="lp-capa">
      <div className="lp-wrap lp-capa-grade">
        <div>
          <p className="lp-rotulo" style={{ "--cor": "var(--ciano)" } as React.CSSProperties}>
            Gráficas, brindes, personalizados, sublimação e comunicação visual
          </p>
          <h1 className="lp-titulo lp-titulo--h1">Do orçamento no WhatsApp até o dinheiro no caixa.</h1>
          <p className="lp-lede">
            Você faz o orçamento com o custo certo, acompanha a produção num quadro, controla o financeiro e
            ainda vende pela sua loja virtual. Serve pra caneca, camiseta, cartão de visita, lona e fachada.
          </p>
          <div className="lp-acoes">
            <a href="#preco" className="lp-btn lp-btn--especial">
              Criar minha conta
            </a>
            <a href="#sistema" className="lp-btn lp-btn--linha">
              Ver como funciona
            </a>
          </div>
        </div>

        {parceira?.capa ? (
          /* Na página da parceira a cena é delas: a mesma forma inclinada, com
             as quatro na frente e as cabeças passando da borda de cima. As
             telas do sistema seguem nas seções abaixo. */
          <div
            className={`lp-cena lp-cena--parceiras${parceira.capa.logo ? "" : " lp-cena--sem-logo"}`}
            style={
              {
                "--razao": `${parceira.capa.largura} / ${parceira.capa.altura}`,
                "--proporcao": parceira.capa.altura / parceira.capa.largura,
                "--topo": parceira.capa.topo,
                /* a logo da Papo (562 × 640) é a medida: toda logo ocupa a
                   mesma área, então uma larga sai mais larga e mais baixa */
                ...(parceira.capa.logo
                  ? {
                      "--logo-proporcao": parceira.capa.logo.altura / parceira.capa.logo.largura,
                      "--logo-fator": Math.sqrt(640 / 562 / (parceira.capa.logo.altura / parceira.capa.logo.largura)),
                      ...(parceira.capa.logo.desce !== undefined ? { "--logo-desce": parceira.capa.logo.desce } : {}),
                    }
                  : {}),
                ...(parceira.capa.tarja ? { "--tarja": parceira.capa.tarja } : {}),
                ...(parceira.capa.sombra ? { "--tarja-sombra": parceira.capa.sombra } : {}),
              } as React.CSSProperties
            }
          >
            <div className="lp-cena-forma" aria-hidden="true" />
            <figure className="lp-parceiras">
              {/* a logo delas no alto, no centro, entrando no vão entre as cabeças */}
              {parceira.capa.logo ? (
                <Image
                  className="lp-parceiras-logo"
                  src={parceira.capa.logo.src}
                  alt={parceira.nome}
                  width={parceira.capa.logo.largura}
                  height={parceira.capa.logo.altura}
                  sizes="160px"
                  priority
                />
              ) : null}
              <div className="lp-parceiras-foto">
                <Image
                  src={parceira.capa.foto}
                  alt={parceira.capa.alt}
                  width={parceira.capa.largura}
                  height={parceira.capa.altura}
                  sizes="(max-width: 1024px) 100vw, 760px"
                  quality={90}
                  priority
                />
              </div>
              <figcaption className="lp-parceiras-cartao">
                <span className="lp-parceiras-selo">
                  <SealCheck size={16} weight="fill" aria-hidden="true" />
                  {parceira.capa.selo}
                </span>
                <strong>{parceira.capa.titulo}</strong>
              </figcaption>
            </figure>
          </div>
        ) : quadros.length ? (
          <div className="lp-cena">
            <div className="lp-cena-forma" aria-hidden="true" />
            <div className="lp-cena-tela">
              <Telas
                quadros={quadros}
                legendas={legendas}
                classeDaLegenda="lp-cena-legenda"
                alt="O painel do Ktalogu mostrando o dia da gráfica"
                intervalo={3400}
                prioridade
                tamanhos="(max-width: 1024px) 100vw, 680px"
              />
            </div>
            {celular ? (
              <div className="lp-cena-tela-2" aria-hidden="true">
                {/* um celular desenhado em CSS: corpo, ilha e a tela de verdade dentro */}
                <div className="lp-fone">
                  <span className="lp-fone-ilha" />
                  <div className="lp-fone-tela">
                    <Image src={celular} alt="" sizes="(max-width: 1024px) 30vw, 160px" quality={88} />
                  </div>
                </div>
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}