"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { trackCatalogEvent } from "@/lib/catalog-analytics";
import { destinoDoLink } from "@/lib/destino-do-link";
import { VendorCardDoProduto, type VendorProduto } from "./VendorCardDoProduto";
import type { VendorCategoria } from "./VendorShell";

/*
  Os blocos da home do Vendor: banner principal, círculos de categoria, grade
  de produtos e banner duplo. Moravam dentro do VendorHome; vieram para cá,
  com o mesmo desenho, para a home montada pelo editor (VendorSecoesDaHome)
  usar os mesmos blocos que a home automática.
*/

export type VendorBanner = {
  id: string;
  image_url: string;
  link_type?: "none" | "product" | "url" | null;
  product_id?: string | null;
  link_url?: string | null;
  open_in_new_tab?: boolean | null;
};

export const PRODUTOS_POR_SECAO = 4;

export function LinkDoBanner({
  banner,
  slug,
  children,
  className,
  style,
}: {
  banner: VendorBanner;
  slug: string;
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}) {
  if (banner.link_type === "product" && banner.product_id) {
    return (
      <Link href={`/${slug}/p/${banner.product_id}`} className={className} style={style}>
        {children}
      </Link>
    );
  }
  /* O lojista digita o endereço à mão: sem o https:// ele viraria pasta da
     própria loja (ver lib/destino-do-link.ts). */
  const destino = banner.link_type === "url" ? destinoDoLink(banner.link_url) : null;
  if (destino && !destino.externo) {
    return (
      <Link
        href={destino.href}
        target={banner.open_in_new_tab ? "_blank" : undefined}
        rel={banner.open_in_new_tab ? "noopener noreferrer" : undefined}
        className={className}
        style={style}
      >
        {children}
      </Link>
    );
  }
  if (destino) {
    return (
      <a
        href={destino.href}
        target={banner.open_in_new_tab ? "_blank" : undefined}
        rel={banner.open_in_new_tab ? "noopener noreferrer" : undefined}
        className={className}
        style={style}
      >
        {children}
      </a>
    );
  }
  return (
    <div className={className} style={style}>
      {children}
    </div>
  );
}

/* O hero: um trilho que desliza por transform, não por rolagem. Rolagem
   deixa o slide parado no meio quando o dedo solta; transform sempre pousa
   num quadro inteiro. */
export function VendorHero({ banners, slug }: { banners: VendorBanner[]; slug: string }) {
  const [indice, setIndice] = useState(0);
  const total = banners.length;

  useEffect(() => {
    if (total <= 1) return;
    const relogio = window.setInterval(() => setIndice((i) => (i + 1) % total), 6000);
    return () => window.clearInterval(relogio);
  }, [total]);

  if (!total) return null;

  return (
    <div className="mx-auto w-full max-w-6xl px-4 pt-3">
      <div
        className="relative w-full overflow-hidden bg-[var(--vd-muted-bg)]"
        style={{ borderRadius: "var(--vd-radius-2xl)", aspectRatio: "16 / 5" }}
      >
        <div
          className="flex h-full will-change-transform"
          style={{ transform: `translateX(-${indice * 100}%)`, transition: "transform 500ms ease-in-out" }}
        >
          {banners.map((banner) => (
            <LinkDoBanner key={banner.id} banner={banner} slug={slug} className="relative h-full min-w-full shrink-0">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={banner.image_url} alt="" className="absolute inset-0 h-full w-full object-cover" />
            </LinkDoBanner>
          ))}
        </div>

        {total > 1 ? (
          <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
            {banners.map((banner, i) => (
              <button
                key={banner.id}
                type="button"
                aria-label={`Banner ${i + 1}`}
                onClick={() => setIndice(i)}
                className="h-1.5 rounded-full transition-all"
                style={{
                  width: i === indice ? 20 : 6,
                  backgroundColor: i === indice ? "#ffffff" : "rgba(255,255,255,0.55)",
                }}
              />
            ))}
          </div>
        ) : null}
      </div>
    </div>
  );
}

/* Um círculo: a categoria das principais (VendorCirculos) ou a escolhida no
   editor (atalhos de categorias). */
export type VendorCirculo = { chave: string; href: string; nome: string; foto?: string | null };

/* Os círculos de categoria. No desktop ficam centralizados; no mobile viram
   um trilho que mostra três por vez. */
export function VendorCirculosDeItens({
  itens,
  noComputador = 6,
  noCelular = 10,
}: {
  itens: VendorCirculo[];
  noComputador?: number;
  noCelular?: number;
}) {
  if (!itens.length) return null;

  const item = (circulo: VendorCirculo, largura: string) => (
    <Link
      key={circulo.chave}
      href={circulo.href}
      className="group flex shrink-0 flex-col items-center gap-2"
      style={{ width: largura }}
    >
      <div
        className="w-full overflow-hidden rounded-full border-[3px] bg-[var(--vd-muted-bg)] transition-all duration-200"
        style={{ aspectRatio: "1 / 1", borderColor: "var(--vd-muted-bg)" }}
      >
        {circulo.foto ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img src={circulo.foto} alt="" loading="lazy" className="h-full w-full object-cover" />
        ) : (
          <span className="flex h-full w-full items-center justify-center text-lg font-bold text-[var(--vd-muted-fg)]">
            {circulo.nome.slice(0, 1).toUpperCase()}
          </span>
        )}
      </div>
      <span className="text-center text-xs leading-tight">{circulo.nome}</span>
    </Link>
  );

  return (
    <div className="mt-6 space-y-4">
      {/* Até sete cabem numa linha do container; mais que isso quebra linha. */}
      <div className={`hidden ${Math.min(itens.length, noComputador) > 7 ? "flex-wrap " : ""}items-start justify-center gap-4 px-4 pb-2 pt-2 lg:flex`}>
        {itens.slice(0, noComputador).map((circulo) => item(circulo, "128px"))}
      </div>
      <div className="vd-sem-barra flex snap-x gap-4 overflow-x-auto px-4 pb-2 lg:hidden">
        {itens.slice(0, noCelular).map((circulo) => item(circulo, "calc(33.33vw - 24px)"))}
      </div>
    </div>
  );
}

export function VendorCirculos({
  categorias,
  slug,
  fotos,
}: {
  categorias: VendorCategoria[];
  slug: string;
  fotos: Map<string, string>;
}) {
  return (
    <VendorCirculosDeItens
      itens={categorias.map((categoria) => ({
        chave: categoria.id,
        href: `/${slug}/c/${categoria.slug || categoria.id}`,
        nome: categoria.name,
        foto: fotos.get(categoria.id) || null,
      }))}
    />
  );
}

/* Uma seção de produtos: cabeçalho centralizado e grade de quatro colunas.
   O espaço entre fileiras é maior que entre colunas de propósito — separa as
   linhas sem espalhar a grade. */
export function VendorSecaoDeProdutos({
  titulo,
  produtos,
  slug,
  verTudoHref,
  clienteId,
  favoritos,
  corDaMarca,
  limite = PRODUTOS_POR_SECAO,
}: {
  titulo: string;
  produtos: VendorProduto[];
  slug: string;
  verTudoHref?: string | null;
  clienteId?: string | null;
  favoritos?: string[] | null;
  corDaMarca?: string;
  /* Quantos cards. A home automática mostra 4; a montada pelo editor, o que
     a seção pedir. */
  limite?: number;
}) {
  if (!produtos.length) return null;
  return (
    <section className="mx-auto w-full max-w-6xl px-4 py-6">
      {/* O nome da seção entre duas linhas: é o que separa uma grade da outra
          sem precisar de fundo diferente. */}
      <div className="mb-8 flex items-center justify-center gap-4">
        <span className="h-px max-w-[120px] flex-1" style={{ backgroundColor: "var(--vd-border)" }} />
        <h2 className="text-center text-base font-bold sm:text-xl">{titulo}</h2>
        <span className="h-px max-w-[120px] flex-1" style={{ backgroundColor: "var(--vd-border)" }} />
      </div>

      {/* No celular a seção vira trilho: dois cards por vez numa grade
          escondem o resto da seção, e ninguém rola para dentro de uma grade.
          Arrastando para o lado, o terceiro card aparece pela metade e conta
          que tem mais. Do `sm` para cima volta a ser grade. */}
      <div className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:mx-0 sm:grid sm:grid-cols-2 sm:gap-x-4 sm:gap-y-8 sm:overflow-visible sm:px-0 sm:pb-0 lg:grid-cols-4">
        {produtos.slice(0, limite).map((produto) => (
          <div key={produto.id} className="w-[46%] shrink-0 snap-start sm:w-auto sm:shrink">
            <VendorCardDoProduto
              produto={produto}
              slug={slug}
              clienteId={clienteId}
              favoritos={favoritos}
              corDaMarca={corDaMarca}
            />
          </div>
        ))}
      </div>

      {verTudoHref ? (
        <div className="mt-6 flex justify-center">
          <Link
            href={verTudoHref}
            onClick={() => {
              /* O "ver todos" conta para os relatórios, como nos outros temas:
                 é o sinal de que a seção despertou interesse. */
              void trackCatalogEvent({ slug, eventName: "view_more_click", meta: { secao: titulo } });
            }}
            className="inline-flex h-9 items-center gap-1.5 border px-4 text-sm font-medium transition-colors"
            style={{ borderRadius: "var(--vd-radius-xl)", borderColor: "var(--vd-border)" }}
          >
            Ver todos
            <ChevronRight className="h-4 w-4" />
          </Link>
        </div>
      ) : null}
    </section>
  );
}

export function VendorBannerDuplo({ banners, slug }: { banners: VendorBanner[]; slug: string }) {
  if (banners.length < 2) return null;
  const par = banners.slice(0, 2);
  return (
    <div className="mx-auto w-full max-w-6xl px-4 pt-3">
      <div className="hidden grid-cols-2 gap-3 sm:grid">
        {par.map((banner) => (
          <LinkDoBanner
            key={banner.id}
            banner={banner}
            slug={slug}
            className="relative w-full overflow-hidden bg-[var(--vd-muted-bg)]"
            style={{ borderRadius: "var(--vd-radius-2xl)", aspectRatio: "8 / 5" }}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={banner.image_url} alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover" />
          </LinkDoBanner>
        ))}
      </div>
      <div className="vd-sem-barra flex snap-x gap-3 overflow-x-auto sm:hidden">
        {par.map((banner) => (
          <LinkDoBanner
            key={banner.id}
            banner={banner}
            slug={slug}
            className="relative w-full shrink-0 snap-start overflow-hidden bg-[var(--vd-muted-bg)]"
            style={{ borderRadius: "var(--vd-radius-2xl)", aspectRatio: "8 / 5" }}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={banner.image_url} alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover" />
          </LinkDoBanner>
        ))}
      </div>
    </div>
  );
}