"use client";

import { PlayerDaGaleria, SeloDePlay } from "@/components/produto/VideoDoProduto";
import type { VideoDoProduto } from "@/lib/video-do-produto";
import { useCallback, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import ClientPortalFavoriteButton from "@/components/ClientPortalFavoriteButton";
import Link from "next/link";
import { CheckCircle2, ChevronRight, Clock3, Package, Star } from "lucide-react";
import { VendorCardCompacto, type VendorProduto as VendorProdutoResumo } from "./VendorCardDoProduto";
import type { ProductCombo } from "@/components/ProductCombosWidget";
import { useVisaoDaLoja } from "@/components/VisaoDaLojaContext";
import { VendorCompra, type VendorProdutoDaPagina } from "./VendorCompra";
import { VendorCorteDeProducao } from "./VendorCorteDeProducao";
import { VendorGabarito } from "./VendorGabarito";
import { gabaritosDoProduto } from "@/lib/gabaritos-do-produto";
import type { GrupoDeServicos, ServicoOpcional } from "@/lib/servicos-opcionais";

/*
  A página de produto do Vendor.

  Duas colunas: a galeria com largura FIXA de 470px e a coluna de informação
  ocupando o resto. Largura fixa, não fração — é o que impede a foto quadrada
  de distorcer quando a janela muda. A galeria fica presa na tela enquanto a
  coluna direita rola, com o deslocamento igual à altura do cabeçalho.

  Abaixo de 1024px as colunas empilham e a galeria solta.
*/

export type VendorImagem = { id?: string | null; image_url: string; is_primary?: boolean | null };

export type VendorEspecificacao = { rotulo: string; valor: string };

export function VendorProduto({
  slug,
  produto,
  imagens,
  categoriaNome,
  categoriaSlug,
  descricaoHtml,
  prazoTexto,
  previsaoTexto,
  horaDoCorte,
  especificacoes,
  relacionados,
  corDaMarca,
  gruposDeServico,
  servicosDoProduto,
  combos,
  clienteId,
  favoritos,
  notaMedia,
  quantasAvaliacoes,
  selos,
  avaliacoes,
  whatsapp,
  video = null,
}: {
  slug: string;
  produto: VendorProdutoDaPagina;
  imagens: VendorImagem[];
  categoriaNome?: string | null;
  categoriaSlug?: string | null;
  descricaoHtml?: string | null;
  prazoTexto?: string | null;
  previsaoTexto?: string | null;
  /* A hora limite para o pedido entrar na produção do dia. */
  horaDoCorte?: string | null;
  especificacoes: VendorEspecificacao[];
  relacionados: VendorProdutoResumo[];
  corDaMarca: string;
  gruposDeServico?: GrupoDeServicos[];
  servicosDoProduto?: ServicoOpcional[];
  /* O "compre junto" é desenhado dentro do card de compra, logo acima do
     botão: é lá que a decisão de levar mais um item acontece. */
  combos?: ProductCombo[];
  /* Quem está logado no portal, para o coração de favorito. */
  clienteId?: string | null;
  favoritos?: string[] | null;
  /* A nota do produto, mostrada logo abaixo do nome. */
  notaMedia?: number | null;
  quantasAvaliacoes?: number | null;
  /* Os selos de confiança do catálogo. */
  selos?: Array<{ icon?: string | null; title?: string | null }> | null;
  /* As avaliações chegam prontas, com a moldura do Vendor em volta. */
  avaliacoes?: React.ReactNode;
  /* O WhatsApp da loja, para o pedido pelo WhatsApp e a dúvida do sob consulta. */
  whatsapp?: string | null;
  /* O vídeo do produto (migration 183): o primeiro item da galeria. */
  video?: VideoDoProduto | null;
}) {
  const rota = useRouter();
  /* As regras da loja: o prazo de produção só aparece quando a loja deixa. */
  const visao = useVisaoDaLoja();
  const prazo = visao.regras.mostrarPrazo ? prazoTexto : null;
  const previsao = visao.regras.mostrarPrazo ? previsaoTexto : null;
  const galeria = useMemo(() => {
    const lista = (imagens || []).filter((imagem) => imagem?.image_url);
    if (!lista.length) return [];
    const principal = lista.find((imagem) => imagem.is_primary);
    return principal ? [principal, ...lista.filter((imagem) => imagem !== principal)] : lista;
  }, [imagens]);

  const [indice, setIndice] = useState(0);
  /* A galeria abre no vídeo, menos quando ele já roda na janelinha flutuante. */
  const [videoNaTela, setVideoNaTela] = useState(Boolean(video && !video.flutuante));
  const gabaritos = useMemo(() => gabaritosDoProduto(produto), [produto]);
  const fotoAtual = galeria[indice]?.image_url || null;

  /* A opção escolhida no card de compra manda na galeria: se ela tem foto
     própria, é essa que aparece. */
  const seguirImagemDaOpcao = useCallback(
    (idDaImagem: string | null) => {
      if (!idDaImagem) return;
      const posicao = galeria.findIndex((imagem) => String(imagem?.id || "") === idDaImagem);
      if (posicao >= 0) {
        setIndice(posicao);
        setVideoNaTela(false);
      }
    },
    [galeria]
  );

  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="overflow-hidden bg-white"
            style={{ borderRadius: "var(--vd-radius-xl)", aspectRatio: "1 / 1" }}
          >
            {video && videoNaTela ? (
              <PlayerDaGaleria video={video} capa={galeria[0]?.image_url ?? null} nome={produto.name} sozinho={video.opcoes.galeria.sozinho && !video.flutuante} />
            ) : 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 || video ? (
            <div className="flex flex-wrap gap-2 pt-3">
              {video ? (
                <button
                  type="button"
                  onClick={() => setVideoNaTela(true)}
                  className="relative w-20 shrink-0 overflow-hidden border bg-black transition-colors sm:w-24"
                  aria-label="Vídeo"
                  style={{
                    aspectRatio: "1 / 1",
                    borderRadius: "var(--vd-radius-md)",
                    borderColor: videoNaTela ? "var(--vd-primary)" : "var(--vd-border)",
                    boxShadow: videoNaTela ? "0 0 0 1px color-mix(in srgb, var(--vd-primary) 40%, transparent)" : undefined,
                  }}
                >
                  {galeria[0] ? (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img src={galeria[0].image_url} alt="" className="h-full w-full object-cover opacity-80" />
                  ) : null}
                  <SeloDePlay />
                </button>
              ) : null}
              {galeria.map((imagem, i) => (
                <button
                  key={imagem.id || imagem.image_url}
                  type="button"
                  onClick={() => {
                    setIndice(i);
                    setVideoNaTela(false);
                  }}
                  className="w-20 shrink-0 overflow-hidden border transition-colors sm:w-24"
                  style={{
                    aspectRatio: "1 / 1",
                    borderRadius: "var(--vd-radius-md)",
                    borderColor: !videoNaTela && i === indice ? "var(--vd-primary)" : "var(--vd-border)",
                    boxShadow: !videoNaTela && i === indice ? "0 0 0 1px color-mix(in srgb, var(--vd-primary) 40%, transparent)" : undefined,
                  }}
                >
                  {/* 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>
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <h1 className="text-xl font-semibold tracking-tight">{produto.name}</h1>
                {/* A nota e o selo de conferido: é o primeiro sinal de que
                    alguém já comprou isto e deu certo. */}
                <div className="mt-1.5 flex items-center gap-2 text-[12px]">
                  <span className="flex items-center gap-0.5 text-amber-500">
                    {Array.from({ length: 5 }).map((_, indice) => {
                      const cheia = indice + 1 <= Math.round(Number(notaMedia) || 0);
                      return (
                        <Star
                          key={indice}
                          size={14}
                          className={cheia ? "fill-current" : "text-[var(--vd-border)]"}
                          fill={cheia ? "currentColor" : "none"}
                        />
                      );
                    })}
                  </span>
                  <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"}`
                      : "Produto verificado"}
                  </span>
                </div>
              </div>
              {/* Guardar para depois é decisão que se toma aqui, com o produto
                  na frente — nos outros temas o coração fica no mesmo lugar. */}
              <ClientPortalFavoriteButton
                productId={produto.id}
                clientId={clienteId || null}
                initialFavorites={favoritos || null}
                primaryColor={corDaMarca}
                onRequireLogin={() => rota.push(`/${slug}/cliente/login`)}
              />
            </div>
          </div>

          <VendorCompra
            produto={produto}
            slug={slug}
            corDaMarca={corDaMarca}
            gruposDeServico={gruposDeServico}
            servicosDoProduto={servicosDoProduto}
            combos={combos}
            aoPreferirImagem={seguirImagemDaOpcao}
            selos={selos}
            whatsapp={whatsapp}
          />

          {prazo || horaDoCorte ? (
            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
              <div className="flex min-w-0 flex-col gap-1.5">
                {prazo ? (
                  <span className="flex items-center gap-1.5 text-sm text-[var(--vd-muted-fg)]">
                    <Clock3 className="h-4 w-4 shrink-0" />
                    <span className="truncate">
                      Prazo de produção: <strong className="text-[var(--vd-foreground)]">{prazo}</strong>
                    </span>
                  </span>
                ) : null}
                {previsao ? (
                  <div
                    className="inline-flex w-fit shrink-0 items-center gap-2 px-2.5 py-1 text-[11px] text-[var(--vd-muted-fg)] sm:text-xs"
                    style={{ borderRadius: "var(--vd-radius-md)", backgroundColor: "var(--vd-muted-bg)" }}
                  >
                    <Package className="h-3.5 w-3.5 shrink-0" />
                    <span className="whitespace-nowrap">
                      Previsão: <strong className="tabular-nums">{previsao}</strong>
                    </span>
                  </div>
                ) : null}
              </div>

              {/* A contagem "entra em produção hoje" é prazo: some junto com a regra. */}
              {horaDoCorte && visao.regras.mostrarPrazo ? <VendorCorteDeProducao horaLimite={horaDoCorte} /> : null}
            </div>
          ) : null}

          {/* O gabarito fica junto do prazo: os dois respondem "como e quando
              a minha arte vira produto". */}
          <VendorGabarito gabaritos={gabaritos} />

          {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}

          {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}
        </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}
    </main>
  );
}