"use client";

import Link from "next/link";
import { useState, type ReactNode } from "react";
import { ChevronDown, Download, Infinity as Infinito, Lock, MessageCircle, X, Zap } from "lucide-react";

import { ensureColorContrast, getReadableTextColor, withAlpha } from "@/lib/color-contrast";
import {
  ENTREGA_NA_HORA,
  NOME_DA_LICENCA,
  RESUMO_DA_LICENCA,
  corDoSelo,
  formatosDoQueRecebe,
  passosDaEntrega,
  textoDoPrazoDoTipo,
  textosDaEntrega,
  type ConfigDigitalDaLoja,
  type EntregaNaVitrine,
} from "@/lib/digitais/produto";

/*
 * A página do produto digital nos templates Padrão e Vitrine (prévia 1).
 *
 * Nada aqui entra no carrinho: o botão leva à compra rápida, que cobra e
 * entrega na mesma tela. Sem Pix nem cartão online na loja, o botão vira a
 * conversa no WhatsApp. O Vendor tem a página dele (templates/vendor).
 */

export type AcaoDeCompra =
  | { tipo: "comprar"; href: string }
  | { tipo: "entrar"; href: string }
  | { tipo: "whatsapp"; href: string | null }
  | { tipo: "fechado"; motivo: string | null };

type Props = {
  slug: string;
  produto: { id: string; nome: string; preco: number; imagens: string[]; descricaoHtml: string };
  /* Na hora, sob encomenda ou na pré-venda (o servidor decide pela data). */
  entrega?: EntregaNaVitrine;
  categoria: { nome: string; slug: string | null } | null;
  config: ConfigDigitalDaLoja;
  prazoDias: number | null;
  meios: Array<"pix" | "cartao">;
  acao: AcaoDeCompra;
  mostrarPreco: boolean;
  textoSemPreco: string;
  corDaMarca: string;
  barra?: { bg?: string | null; text?: string | null } | null;
  notaMedia: number;
  quantasAvaliacoes: number;
  isVitrine: boolean;
  avaliacoes?: ReactNode;
};

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

function Selo({ selo }: { selo: string }) {
  return (
    <span
      className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[10px] font-extrabold tracking-wide text-white"
      style={{ backgroundColor: corDoSelo(selo) }}
    >
      {selo.slice(0, 5)}
    </span>
  );
}

export function BotaoDeCompra({
  acao,
  corDaMarca,
  rotulo = "Comprar e receber agora",
  className = "",
}: {
  acao: AcaoDeCompra;
  corDaMarca: string;
  rotulo?: string;
  className?: string;
}) {
  const estilo = { backgroundColor: corDaMarca, color: getReadableTextColor(corDaMarca) };
  const base = `inline-flex h-12 items-center justify-center gap-2 rounded-2xl px-6 text-[15px] font-bold shadow-sm transition hover:opacity-90 ${className}`;
  if (acao.tipo === "comprar") {
    return (
      <Link href={acao.href} className={base} style={estilo}>
        {rotulo}
      </Link>
    );
  }
  if (acao.tipo === "entrar") {
    return (
      <Link href={acao.href} className={base} style={estilo}>
        Entrar para comprar
      </Link>
    );
  }
  if (acao.tipo === "whatsapp") {
    return acao.href ? (
      <a href={acao.href} target="_blank" rel="noreferrer" className={base} style={estilo}>
        <MessageCircle className="h-4 w-4" />
        Comprar pelo WhatsApp
      </a>
    ) : (
      <span className={`${base} cursor-not-allowed opacity-60`} style={estilo}>
        Fale com a loja para comprar
      </span>
    );
  }
  return (
    <span className={`${base} cursor-not-allowed opacity-60`} style={estilo}>
      {acao.motivo || "Indisponível agora"}
    </span>
  );
}

export default function ProdutoDigital(props: Props) {
  const { slug, produto, categoria, config, prazoDias, meios, acao, mostrarPreco, textoSemPreco, corDaMarca, barra, isVitrine } = props;
  const entrega = props.entrega ?? ENTREGA_NA_HORA;
  const promessa = textosDaEntrega(entrega);
  const [fotoAtual, setFotoAtual] = useState(0);
  const [ampliada, setAmpliada] = useState<string | null>(null);
  const destaque = ensureColorContrast(corDaMarca, "#FFFFFF", { dark: "#111827", light: "#FFFFFF", minRatio: 4.5 });
  const imagens = produto.imagens.length ? produto.imagens : [];
  const formatos = formatosDoQueRecebe(config.recebe);
  const quantos = config.recebe.length;
  const licenca = config.licenca;
  const precoTexto = mostrarPreco ? moeda(produto.preco) : textoSemPreco;
  const gratis = mostrarPreco && produto.preco <= 0;

  return (
    <div className="pb-6">
      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:gap-12">
        {/* Galeria */}
        <div>
          <div className="relative aspect-square overflow-hidden rounded-[28px] border border-zinc-100 bg-zinc-50">
            {imagens[fotoAtual] ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={imagens[fotoAtual]} alt={produto.nome} className="h-full w-full object-cover" />
            ) : (
              <div className="flex h-full w-full items-center justify-center text-zinc-300">
                <Download className="h-12 w-12" />
              </div>
            )}
          </div>
          {imagens.length > 1 ? (
            <div className="mt-3 grid grid-cols-5 gap-2">
              {imagens.slice(0, 10).map((src, indice) => (
                <button
                  key={`${src}-${indice}`}
                  type="button"
                  onClick={() => setFotoAtual(indice)}
                  aria-label={`Foto ${indice + 1}`}
                  className="aspect-square overflow-hidden rounded-xl border-2 bg-zinc-50 transition"
                  style={{ borderColor: indice === fotoAtual ? corDaMarca : "transparent" }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={src} alt="" className="h-full w-full object-cover" loading="lazy" />
                </button>
              ))}
            </div>
          ) : null}
        </div>

        {/* Compra */}
        <div className="min-w-0">
          <nav aria-label="Você está em" className="mb-2 flex min-w-0 items-center gap-1.5 text-[12px] text-zinc-500">
            <Link href={`/${slug}`} className="shrink-0 transition-colors hover:text-zinc-900">
              Início
            </Link>
            {categoria ? (
              <>
                <span className="shrink-0 text-zinc-300">›</span>
                {categoria.slug ? (
                  <Link href={`/${slug}/c/${categoria.slug}`} className="shrink-0 transition-colors hover:text-zinc-900">
                    {categoria.nome}
                  </Link>
                ) : (
                  <span className="shrink-0">{categoria.nome}</span>
                )}
              </>
            ) : null}
            <span className="shrink-0 text-zinc-300">›</span>
            <span className="min-w-0 truncate font-medium text-zinc-700">{produto.nome}</span>
          </nav>

          <h1
            className={
              isVitrine
                ? "text-[2rem] font-semibold leading-[1.02] tracking-[-0.04em] text-gray-950 sm:text-[2.6rem]"
                : "text-3xl font-black leading-tight text-gray-900 md:text-4xl"
            }
            style={isVitrine ? { fontFamily: "var(--ks-catalog-font-heading, var(--ks-font-editorial))" } : undefined}
          >
            {produto.nome}
          </h1>
          {config.resumo ? <p className="mt-2 text-[15px] leading-6 text-zinc-600">{config.resumo}</p> : null}

          {props.quantasAvaliacoes > 0 ? (
            <div className="mt-2 flex items-center gap-2 text-sm">
              <span className="text-yellow-500">{"★".repeat(Math.max(1, Math.round(props.notaMedia)))}</span>
              <span className="text-zinc-500">
                {props.notaMedia.toFixed(1).replace(".", ",")} · {props.quantasAvaliacoes}{" "}
                {props.quantasAvaliacoes === 1 ? "avaliação" : "avaliações"}
              </span>
            </div>
          ) : null}

          <div className="mt-4 flex flex-wrap gap-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
              <Download className="h-3 w-3" strokeWidth={2.5} />
              Produto digital
            </span>
            {promessa ? <span className="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-900">{promessa.chip}</span> : null}
            {formatos ? (
              <span className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-600">{formatos}</span>
            ) : null}
            {quantos > 0 ? (
              <span className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-600">
                {quantos} {quantos === 1 ? "item" : "itens"}
              </span>
            ) : null}
          </div>

          <div className="mt-6 flex items-end justify-between gap-4 border-b border-zinc-200 pb-5">
            <span className="text-sm text-zinc-500">{gratis ? "Total" : "Pagamento único"}</span>
            <span className="text-3xl font-bold tracking-[-0.03em]" style={{ color: mostrarPreco ? destaque : undefined }}>
              {gratis ? "Grátis" : precoTexto}
            </span>
          </div>

          {licenca ? (
            <div className="mt-5 rounded-2xl border px-4 py-3" style={{ borderColor: withAlpha(corDaMarca, 0.3), backgroundColor: withAlpha(corDaMarca, 0.06) }}>
              <div className="text-sm font-semibold text-zinc-900">{NOME_DA_LICENCA[licenca.tipo]}</div>
              <div className="mt-0.5 text-xs leading-5 text-zinc-600">{licenca.texto || RESUMO_DA_LICENCA[licenca.tipo]}</div>
            </div>
          ) : null}

          <BotaoDeCompra acao={acao} corDaMarca={corDaMarca} rotulo={promessa?.botao ?? (gratis ? "Receber agora" : undefined)} className="mt-5 w-full" />

          <ul className="mt-5 space-y-3 text-[13px] text-zinc-600">
            <li className="flex items-start gap-3">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: withAlpha(corDaMarca, 0.1), color: destaque }}>
                <Zap className="h-3.5 w-3.5" />
              </span>
              <span className="pt-1">
                {promessa
                  ? promessa.linha
                  : acao.tipo === "whatsapp" && !gratis
                    ? "Entrega no seu e-mail assim que a loja confirmar o pagamento."
                    : "Entrega na hora: na tela e no seu e-mail, assim que o pagamento cair."}
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: withAlpha(corDaMarca, 0.1), color: destaque }}>
                <Infinito className="h-3.5 w-3.5" />
              </span>
              <span className="pt-1">{textoDoPrazoDoTipo(config.tipo, prazoDias)}</span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: withAlpha(corDaMarca, 0.1), color: destaque }}>
                <Lock className="h-3.5 w-3.5" />
              </span>
              <span className="pt-1">
                {config.tipo === "codigo"
                  ? "Pagamento seguro. O seu código fica guardado em Minhas compras."
                  : "Pagamento seguro. Seus arquivos ficam guardados em Minhas compras."}
              </span>
            </li>
          </ul>

          {meios.length && acao.tipo === "comprar" && !gratis ? (
            <div className="mt-4 flex flex-wrap gap-2">
              {meios.map((meio) => (
                <span key={meio} className="rounded-md border border-zinc-200 bg-white px-2.5 py-1 text-[11px] font-medium text-zinc-600">
                  {meio === "pix" ? "Pix" : "Cartão de crédito"}
                </span>
              ))}
            </div>
          ) : null}
        </div>
      </div>

      {config.recebe.length ? (
        <section className="mt-14">
          <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">O que você recebe</h2>
          <p className="mt-1 text-sm text-zinc-500">Tudo o que chega para você logo depois do pagamento.</p>
          <ul className="mt-4 border-t border-zinc-200">
            {config.recebe.map((item, indice) => (
              <li key={`${item.titulo}-${indice}`} className="flex items-center gap-4 border-b border-zinc-200 py-3.5">
                <Selo selo={item.selo} />
                <div className="min-w-0">
                  <div className="text-[15px] font-semibold text-zinc-900">{item.titulo}</div>
                  {item.detalhe ? <div className="mt-0.5 text-[13px] text-zinc-500">{item.detalhe}</div> : null}
                </div>
              </li>
            ))}
          </ul>
        </section>
      ) : null}

      {config.amostras.length ? (
        <section className="mt-14">
          <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">Veja por dentro</h2>
          <p className="mt-1 text-sm text-zinc-500">Algumas páginas do que você recebe.</p>
          <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
            {config.amostras.map((src, indice) => (
              <button
                key={`${src}-${indice}`}
                type="button"
                onClick={() => setAmpliada(src)}
                className="aspect-[3/4] overflow-hidden rounded-2xl border border-zinc-100 bg-zinc-50"
                aria-label={`Ampliar amostra ${indice + 1}`}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={src} alt="" className="h-full w-full object-cover" loading="lazy" />
              </button>
            ))}
          </div>
        </section>
      ) : null}

      <section className="mt-14">
        <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">Como funciona a entrega</h2>
        <p className="mt-1 text-sm text-zinc-500">Sem frete e sem espera.</p>
        <div className="mt-4 grid gap-3 md:grid-cols-3">
          {passosDaEntrega({ jeito: acao.tipo, gratis, meios, prazoDias, codigo: config.tipo === "codigo", entrega }).map((passo, indice) => (
            <div key={passo.titulo} className="relative rounded-2xl bg-zinc-50 p-4 pl-14">
              <span
                className="absolute left-4 top-4 flex h-7 w-7 items-center justify-center rounded-full text-[13px] font-bold"
                style={{ backgroundColor: corDaMarca, color: getReadableTextColor(corDaMarca) }}
              >
                {indice + 1}
              </span>
              <div className="text-sm font-semibold text-zinc-900">{passo.titulo}</div>
              <div className="mt-1 text-[13px] leading-5 text-zinc-500">{passo.texto}</div>
            </div>
          ))}
        </div>
      </section>

      {config.funcionaCom.length || licenca || config.perguntas.length ? (
        <div className="mt-14 grid gap-10 md:grid-cols-2">
          <div className="space-y-10">
            {config.funcionaCom.length ? (
              <section>
                <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">Funciona com</h2>
                <div className="mt-3 flex flex-wrap gap-2">
                  {config.funcionaCom.map((item) => (
                    <span key={item} className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-600">
                      {item}
                    </span>
                  ))}
                </div>
              </section>
            ) : null}
            {licenca ? (
              <section>
                <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">Licença de uso</h2>
                <div className="mt-3 rounded-2xl bg-zinc-50 p-4">
                  <div className="text-sm font-semibold text-zinc-900">{NOME_DA_LICENCA[licenca.tipo]}</div>
                  <p className="mt-1 whitespace-pre-line text-[13px] leading-6 text-zinc-600">{licenca.texto || RESUMO_DA_LICENCA[licenca.tipo]}</p>
                </div>
              </section>
            ) : null}
          </div>
          {config.perguntas.length ? (
            <section>
              <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">Perguntas frequentes</h2>
              <div className="mt-2">
                {config.perguntas.map((item) => (
                  <details key={item.pergunta} className="group border-b border-zinc-200 py-3.5">
                    <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold text-zinc-900">
                      {item.pergunta}
                      <ChevronDown className="h-4 w-4 shrink-0 text-zinc-400 transition group-open:rotate-180" />
                    </summary>
                    <p className="mt-2 whitespace-pre-line text-[13px] leading-6 text-zinc-600">{item.resposta}</p>
                  </details>
                ))}
              </div>
            </section>
          ) : null}
        </div>
      ) : null}

      {produto.descricaoHtml ? (
        <section className="mt-14 border-t border-zinc-200 pt-8">
          <h2 className="text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950">Detalhes</h2>
          <div
            className="mt-4 max-w-none text-[15px] leading-7 text-zinc-700 [&_a]:underline [&_h2]:mt-6 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:mt-5 [&_h3]:font-semibold [&_li]:mt-1 [&_ol]:mt-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+*]:mt-3 [&_strong]:font-semibold [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:pl-5"
            dangerouslySetInnerHTML={{ __html: produto.descricaoHtml }}
          />
        </section>
      ) : null}

      {props.avaliacoes ? <div className="mt-10">{props.avaliacoes}</div> : null}

      {/* A barra fixa de compra, igual à dos outros produtos: no celular ela
          sobe a altura do menu inferior. */}
      {acao.tipo !== "fechado" ? (
        <div
          className="fixed inset-x-0 bottom-[calc(4rem+env(safe-area-inset-bottom))] z-40 border-t border-zinc-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/85 md:bottom-0"
          style={barra?.bg ? { backgroundColor: barra.bg } : undefined}
        >
          <div className="mx-auto flex w-full max-w-[1440px] items-center justify-center gap-4 px-4 py-3 md:px-6">
            <div className="min-w-0 max-w-[46vw] md:max-w-none">
              <div className="truncate text-sm font-medium text-zinc-700" style={barra?.text ? { color: barra.text } : undefined}>
                {produto.nome}
              </div>
              <div className="mt-0.5 flex items-center gap-2">
                <span className="text-[11px] uppercase tracking-[0.08em] text-zinc-500" style={barra?.text ? { color: withAlpha(barra.text, 0.72) } : undefined}>
                  Total
                </span>
                <span className="text-xl font-semibold tracking-[-0.03em]" style={{ color: barra?.text || destaque }}>
                  {gratis ? "Grátis" : precoTexto}
                </span>
              </div>
            </div>
            <BotaoDeCompra acao={acao} corDaMarca={corDaMarca} rotulo={promessa?.botao ?? (gratis ? "Receber agora" : "Comprar agora")} className="shrink-0" />
          </div>
        </div>
      ) : null}

      {ampliada ? (
        <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/80 p-4" role="dialog" aria-modal="true" onClick={() => setAmpliada(null)}>
          <button
            type="button"
            onClick={() => setAmpliada(null)}
            className="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/90 text-zinc-900"
            aria-label="Fechar"
          >
            <X className="h-5 w-5" />
          </button>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={ampliada} alt="" className="max-h-[88vh] max-w-full rounded-2xl object-contain" onClick={(e) => e.stopPropagation()} />
        </div>
      ) : null}
    </div>
  );
}