"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { CheckCircle2, ChevronDown, ChevronRight, Download, Lock, MessageCircle, Star, X, Zap } from "lucide-react";

import {
  ENTREGA_NA_HORA,
  NOME_DA_LICENCA,
  RESUMO_DA_LICENCA,
  corDoSelo,
  formatosDoQueRecebe,
  passosDaEntrega,
  textoDoPrazoDoTipo,
  textosDaEntrega,
  type ConfigDigitalDaLoja,
  type EntregaNaVitrine,
} from "@/lib/digitais/produto";

import { VendorCardCompacto, type VendorProduto as VendorProdutoResumo } from "./VendorCardDoProduto";
import { moedaDoVendor } from "./formato";
import type { VendorImagem } from "./VendorProduto";

/*
  A página do produto digital no Vendor (prévia 2).

  O mesmo esqueleto da página de produto do Vendor (galeria de 470px presa na
  tela, informação à direita), com o cartão de compra do digital no lugar do
  de sempre: preço único, o botão da compra rápida e "como você recebe". Nada
  aqui entra no carrinho.
*/

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

function BotaoDoVendor({ acao, rotulo, className = "" }: { acao: AcaoDoVendor; rotulo: string; className?: string }) {
  const base = `inline-flex h-12 items-center justify-center gap-2 px-5 text-[15px] font-semibold shadow-sm transition hover:opacity-90 ${className}`;
  const estilo = { borderRadius: "var(--vd-radius-xl)", backgroundColor: "var(--vd-primary)", color: "var(--vd-primary-fg)" };
  if (acao.tipo === "comprar" || acao.tipo === "entrar") {
    return (
      <Link href={acao.href} className={base} style={estilo}>
        {acao.tipo === "entrar" ? "Entrar para comprar" : rotulo}
      </Link>
    );
  }
  if (acao.tipo === "whatsapp") {
    return acao.href ? (
      <a href={acao.href} target="_blank" rel="noopener 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 function VendorProdutoDigital({
  slug,
  produto,
  imagens,
  categoriaNome,
  categoriaSlug,
  descricaoHtml,
  config,
  prazoDias,
  meios,
  acao,
  mostrarPreco,
  textoSemPreco,
  relacionados,
  clienteId,
  favoritos,
  corDaMarca,
  notaMedia,
  quantasAvaliacoes,
  avaliacoes,
  entrega = ENTREGA_NA_HORA,
}: {
  slug: string;
  produto: { id: string; name: string; price: number };
  imagens: VendorImagem[];
  /* Na hora, sob encomenda ou na pré-venda (o servidor decide pela data). */
  entrega?: EntregaNaVitrine;
  categoriaNome?: string | null;
  categoriaSlug?: string | null;
  descricaoHtml?: string | null;
  config: ConfigDigitalDaLoja;
  prazoDias: number | null;
  meios: Array<"pix" | "cartao">;
  acao: AcaoDoVendor;
  mostrarPreco: boolean;
  textoSemPreco: string;
  relacionados: VendorProdutoResumo[];
  clienteId?: string | null;
  favoritos?: string[] | null;
  corDaMarca: string;
  notaMedia?: number | null;
  quantasAvaliacoes?: number | null;
  avaliacoes?: React.ReactNode;
}) {
  const galeria = useMemo(() => {
    const lista = (imagens || []).filter((imagem) => imagem?.image_url);
    const principal = lista.find((imagem) => imagem.is_primary);
    return principal ? [principal, ...lista.filter((imagem) => imagem !== principal)] : lista;
  }, [imagens]);
  const [indice, setIndice] = useState(0);
  const [ampliada, setAmpliada] = useState<string | null>(null);
  const fotoAtual = galeria[indice]?.image_url || null;
  const gratis = mostrarPreco && Number(produto.price) <= 0;
  const preco = gratis ? "Grátis" : mostrarPreco ? moedaDoVendor(Number(produto.price) || 0) : textoSemPreco;
  const formatos = formatosDoQueRecebe(config.recebe);
  const licenca = config.licenca;
  const promessa = textosDaEntrega(entrega);

  const especificacoes = [
    formatos ? { rotulo: "Formato", valor: formatos.replace(" +", " e mais") } : null,
    config.recebe.length ? { rotulo: "Itens", valor: `${config.recebe.length} ${config.recebe.length === 1 ? "item" : "itens"}` } : null,
    { rotulo: "Entrega", valor: promessa ? promessa.chip : "Na hora, na tela e por e-mail" },
    { rotulo: "Acesso", valor: textoDoPrazoDoTipo(config.tipo, prazoDias).replace(/\.$/, "") },
    config.funcionaCom.length ? { rotulo: "Funciona com", valor: config.funcionaCom.join(", ") } : null,
    licenca ? { rotulo: "Licença", valor: NOME_DA_LICENCA[licenca.tipo] } : null,
  ].filter((linha): linha is { rotulo: string; valor: string } => Boolean(linha));

  return (
    <main className="mx-auto max-w-6xl space-y-6 px-4 py-6 pb-28 lg:pb-6">
      <div className="grid gap-6 lg:grid-cols-[470px_1fr] lg:items-start">
        {/* ------------ galeria ------------ */}
        <div className="overflow-hidden lg:sticky lg:self-start" style={{ top: "calc(var(--vd-header-h, 152px) + 16px)" }}>
          <div className="relative overflow-hidden bg-white" style={{ borderRadius: "var(--vd-radius-xl)", aspectRatio: "1 / 1" }}>
            {fotoAtual ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={fotoAtual} alt={produto.name} className="h-full w-full object-cover object-center" />
            ) : (
              <span className="flex h-full w-full items-center justify-center bg-[var(--vd-muted-bg)] text-sm text-[var(--vd-muted-fg)]">
                Sem imagem
              </span>
            )}
          </div>
          {galeria.length > 1 ? (
            <div className="flex flex-wrap gap-2 pt-3">
              {galeria.map((imagem, i) => (
                <button
                  key={imagem.id || imagem.image_url}
                  type="button"
                  onClick={() => setIndice(i)}
                  className="w-20 shrink-0 overflow-hidden border transition-colors sm:w-24"
                  style={{
                    aspectRatio: "1 / 1",
                    borderRadius: "var(--vd-radius-md)",
                    borderColor: i === indice ? "var(--vd-primary)" : "var(--vd-border)",
                  }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={imagem.image_url} alt="" className="h-full w-full object-cover" />
                </button>
              ))}
            </div>
          ) : null}
        </div>

        {/* ------------ informação ------------ */}
        <div className="min-w-0 space-y-4">
          <div>
            <nav className="mb-2 flex items-center gap-1 overflow-hidden text-xs text-[var(--vd-muted-fg)]">
              <Link href={`/${slug}`} className="shrink-0 transition-colors hover:text-[var(--vd-foreground)]">
                Início
              </Link>
              {categoriaNome ? (
                <span className="flex shrink-0 items-center gap-1">
                  <ChevronRight className="h-3 w-3 shrink-0" />
                  <Link
                    href={categoriaSlug ? `/${slug}/c/${categoriaSlug}` : `/${slug}`}
                    className="whitespace-nowrap transition-colors hover:text-[var(--vd-foreground)]"
                  >
                    {categoriaNome}
                  </Link>
                </span>
              ) : null}
              <span className="flex min-w-0 items-center gap-1">
                <ChevronRight className="h-3 w-3 shrink-0" />
                <span className="max-w-[24ch] truncate font-medium">{produto.name}</span>
              </span>
            </nav>
            <h1 className="text-xl font-semibold tracking-tight">{produto.name}</h1>
            {config.resumo ? <p className="mt-1 text-sm text-[var(--vd-muted-fg)]">{config.resumo}</p> : null}
            <div className="mt-1.5 flex items-center gap-2 text-[12px]">
              {Number(quantasAvaliacoes) > 0 ? (
                <span className="flex items-center gap-0.5 text-amber-500">
                  {Array.from({ length: 5 }).map((_, i) => {
                    const cheia = i + 1 <= Math.round(Number(notaMedia) || 0);
                    return <Star key={i} size={14} className={cheia ? "fill-current" : "text-[var(--vd-border)]"} fill={cheia ? "currentColor" : "none"} />;
                  })}
                </span>
              ) : null}
              <span className="flex items-center gap-1 text-[var(--vd-muted-fg)]">
                <CheckCircle2 size={13} className="text-emerald-600" />
                {Number(quantasAvaliacoes) > 0
                  ? `${quantasAvaliacoes} ${Number(quantasAvaliacoes) === 1 ? "avaliação" : "avaliações"}`
                  : "Entrega garantida pela loja"}
              </span>
            </div>
            <div className="mt-3 flex flex-wrap gap-2">
              <span className="inline-flex items-center gap-1.5 rounded-full bg-slate-900 px-2.5 py-1 text-[11px] 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-2.5 py-1 text-[11px] font-semibold text-amber-900">{promessa.chip}</span> : null}
              {formatos ? (
                <span className="rounded-full border px-2.5 py-1 text-[11px] text-[var(--vd-muted-fg)]" style={{ borderColor: "var(--vd-border)" }}>
                  {formatos}
                </span>
              ) : null}
              {config.recebe.length ? (
                <span className="rounded-full border px-2.5 py-1 text-[11px] text-[var(--vd-muted-fg)]" style={{ borderColor: "var(--vd-border)" }}>
                  {config.recebe.length} {config.recebe.length === 1 ? "item" : "itens"}
                </span>
              ) : null}
            </div>
          </div>

          {/* O cartão de compra do digital. */}
          <div className="border bg-[var(--vd-surface)] p-4 sm:p-5" style={{ borderRadius: "var(--vd-radius-xl)", borderColor: "var(--vd-border)" }}>
            {licenca ? (
              <div className="mb-4 border-b pb-4" style={{ borderColor: "var(--vd-border)" }}>
                <p className="text-sm font-semibold">{NOME_DA_LICENCA[licenca.tipo]}</p>
                <p className="mt-0.5 text-xs text-[var(--vd-muted-fg)]">{licenca.texto || RESUMO_DA_LICENCA[licenca.tipo]}</p>
              </div>
            ) : null}
            <div className="flex items-end justify-between gap-3">
              <div>
                <p className="text-[11px] text-[var(--vd-muted-fg)]">{gratis ? "Total" : "Total · pagamento único"}</p>
                <p className="text-2xl font-bold tabular-nums" style={{ color: "var(--vd-primary)" }}>
                  {preco}
                </p>
              </div>
              <span
                className="border px-2 py-0.5 text-[11px] text-[var(--vd-muted-fg)]"
                style={{ borderRadius: "var(--vd-radius-md)", borderColor: "var(--vd-border)" }}
              >
                Sem frete
              </span>
            </div>
            <BotaoDoVendor acao={acao} rotulo={promessa?.botao ?? (gratis ? "Receber agora" : "Comprar e receber agora")} className="mt-4 w-full" />

            <div className="mt-4 p-4" style={{ borderRadius: "var(--vd-radius-lg)", backgroundColor: "var(--vd-muted-bg)" }}>
              <p className="text-sm font-semibold">Como você recebe</p>
              <ol className="mt-3 space-y-3">
                {passosDaEntrega({ jeito: acao.tipo, gratis, meios, prazoDias, codigo: config.tipo === "codigo", entrega }).map((passo, i) => (
                  <li key={passo.titulo} className="flex gap-3">
                    <span
                      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-[11px] font-bold"
                      style={{ borderColor: "var(--vd-primary)", color: "var(--vd-primary)" }}
                    >
                      {i + 1}
                    </span>
                    <span>
                      <span className="block text-[13px] font-semibold">{passo.titulo}</span>
                      <span className="block text-[12px] text-[var(--vd-muted-fg)]">{passo.texto}</span>
                    </span>
                  </li>
                ))}
              </ol>
            </div>

            <div className="mt-4 grid grid-cols-2 gap-2 text-[12px] text-[var(--vd-muted-fg)]">
              <span className="flex items-center gap-1.5">
                <Zap className="h-3.5 w-3.5" style={{ color: "var(--vd-primary)" }} />
                {entrega.modo === "encomenda" ? "Feito para você" : entrega.modo === "pre_venda" ? "Pré-venda" : acao.tipo === "whatsapp" && !gratis ? "Entrega por e-mail" : "Entrega imediata"}
              </span>
              <span className="flex items-center gap-1.5">
                <Lock className="h-3.5 w-3.5" style={{ color: "var(--vd-primary)" }} />
                Pagamento seguro
              </span>
            </div>
            {meios.length && acao.tipo === "comprar" && !gratis ? (
              <div className="mt-3 flex flex-wrap gap-1.5">
                {meios.map((meio) => (
                  <span key={meio} className="border px-2 py-0.5 text-[11px] text-[var(--vd-muted-fg)]" style={{ borderRadius: "var(--vd-radius-md)", borderColor: "var(--vd-border)" }}>
                    {meio === "pix" ? "Pix" : "Cartão de crédito"}
                  </span>
                ))}
              </div>
            ) : null}
          </div>

          {especificacoes.length ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Especificações técnicas</h2>
              <div className="overflow-hidden border text-sm" style={{ borderRadius: "var(--vd-radius-lg)", borderColor: "var(--vd-border)" }}>
                <table className="w-full border-collapse">
                  <tbody>
                    {especificacoes.map((linha) => (
                      <tr key={linha.rotulo} className="border-t first:border-t-0" style={{ borderColor: "var(--vd-border)" }}>
                        <td className="w-1/3 px-3 py-2.5 text-[var(--vd-muted-fg)]" style={{ backgroundColor: "var(--vd-muted-bg)" }}>
                          {linha.rotulo}
                        </td>
                        <td className="border-l px-3 py-2.5" style={{ borderColor: "var(--vd-border)" }}>
                          {linha.valor}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          ) : null}

          {config.recebe.length ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">O que você recebe</h2>
              <ul className="border-t" style={{ borderColor: "var(--vd-border)" }}>
                {config.recebe.map((item, i) => (
                  <li key={`${item.titulo}-${i}`} className="flex items-center gap-3 border-b py-3" style={{ borderColor: "var(--vd-border)" }}>
                    <span
                      className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-[10px] font-extrabold text-white"
                      style={{ backgroundColor: corDoSelo(item.selo) }}
                    >
                      {item.selo.slice(0, 5)}
                    </span>
                    <span className="min-w-0">
                      <span className="block text-sm font-semibold">{item.titulo}</span>
                      {item.detalhe ? <span className="block text-xs text-[var(--vd-muted-fg)]">{item.detalhe}</span> : null}
                    </span>
                  </li>
                ))}
              </ul>
            </section>
          ) : null}

          {config.amostras.length ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Veja por dentro</h2>
              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                {config.amostras.map((src, i) => (
                  <button
                    key={`${src}-${i}`}
                    type="button"
                    onClick={() => setAmpliada(src)}
                    className="aspect-[3/4] overflow-hidden bg-[var(--vd-muted-bg)]"
                    style={{ borderRadius: "var(--vd-radius-md)" }}
                    aria-label={`Ampliar amostra ${i + 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}

          {descricaoHtml ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Descrição</h2>
              <div
                className="space-y-3 text-sm leading-relaxed"
                style={{ color: "color-mix(in srgb, var(--vd-foreground) 90%, transparent)" }}
                dangerouslySetInnerHTML={{ __html: descricaoHtml }}
              />
            </section>
          ) : null}

          {config.perguntas.length ? (
            <section className="space-y-1 pt-4">
              <h2 className="text-base font-semibold">Perguntas frequentes</h2>
              {config.perguntas.map((item) => (
                <details key={item.pergunta} className="group border-b py-3" style={{ borderColor: "var(--vd-border)" }}>
                  <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold">
                    {item.pergunta}
                    <ChevronDown className="h-4 w-4 shrink-0 text-[var(--vd-muted-fg)] transition group-open:rotate-180" />
                  </summary>
                  <p className="mt-2 whitespace-pre-line text-[13px] leading-6 text-[var(--vd-muted-fg)]">{item.resposta}</p>
                </details>
              ))}
            </section>
          ) : null}
        </div>
      </div>

      {relacionados.length ? (
        <section className="mt-4 space-y-4 border-t pt-8" style={{ borderColor: "var(--vd-border)" }}>
          <h2 className="text-lg font-semibold">Você também pode gostar</h2>
          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
            {relacionados.slice(0, 4).map((item) => (
              <VendorCardCompacto key={item.id} produto={item} slug={slug} clienteId={clienteId} favoritos={favoritos} corDaMarca={corDaMarca} />
            ))}
          </div>
        </section>
      ) : null}

      {avaliacoes ? (
        <section className="mt-4 border-t pt-8" style={{ borderColor: "var(--vd-border)" }}>
          {avaliacoes}
        </section>
      ) : null}

      {/* No celular, a compra fica sempre à mão (como na página de sempre). */}
      {acao.tipo !== "fechado" ? (
        <div
          className="fixed inset-x-0 bottom-0 z-40 border-t px-4 py-3 lg:hidden"
          style={{
            borderColor: "var(--vd-border)",
            backgroundColor: "var(--vd-surface)",
            boxShadow: "0 -8px 24px rgba(15, 23, 42, 0.10)",
            paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom))",
          }}
        >
          <div className="flex items-center gap-3">
            <div className="min-w-0 flex-1">
              <p className="text-[10.5px] uppercase tracking-wide text-[var(--vd-muted-fg)]">Total</p>
              <p className="truncate text-[17px] font-bold tabular-nums" style={{ color: "var(--vd-primary)" }}>
                {preco}
              </p>
            </div>
            <BotaoDoVendor acao={acao} rotulo={promessa?.botao ?? (gratis ? "Receber agora" : "Comprar agora")} className="h-11 shrink-0 text-[13.5px]" />
          </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-slate-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}
    </main>
  );
}