"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { miniatura } from "@/lib/foto";
import type { BoutiqueProduto } from "./BoutiqueCardDoProduto";
import { fotoDoProduto } from "./BoutiqueCardDoProduto";
import { useArrastoComMouse, useJanela } from "./ganchos-da-home";

/*
  "Elas vestem" / Shop the look (referência, item 11 da home).

  QUAL BLOCO DO EDITOR VIROU ISTO: "Kits e combos" (combo_highlight). Cada kit
  do "Compre junto" é um par de peças que a própria loja montou para vender
  junto — é, literalmente, um look. Os outros candidatos não servem:
  "Imagem com pontos" é UMA foto (um look só, sem trilho); "Texto com imagem"
  é um bloco único sem produto; "Imagens lado a lado" só leva até quatro
  imagens com link, sem preço nem peça. O kit traz o que o card e a janela
  pedem: a foto de quem veste (a 2ª foto da peça principal), o nome, as peças,
  o preço junto com o desconto do kit e a página de cada produto. Nenhum modo
  de seção novo vai para o banco.

  O desenho: fundo papel #F4F0EB, eyebrow, título em Georgia de 72 px,
  subtítulo, setas redondas, trilho com scroll-snap arrastável (mouse e
  dedo), cards 0,72:1 com o número "01", degradê, "SHOP THE LOOK", nome em
  Georgia, botão "QUERO ESSE LOOK →" e a linha de progresso "01 / 14". O botão
  abre a janela "Shop the look": foto da peça, nome em Georgia, preço, texto e
  o botão preto VER PRODUTO (as outras peças do look logo acima dele). Fecha
  com X, Esc e clique fora; uma coluna no celular.
*/

export type BoutiqueLook = {
  chave: string;
  nome: string;
  foto: string | null;
  pecas: BoutiqueProduto[];
  /* O preço já pronto para a tela (das peças juntas, com o desconto do kit),
     ou o texto que a loja põe no lugar do preço. */
  preco: string | null;
  /* "10% OFF no kit" quando o kit tem desconto. */
  selo?: string | null;
  /* O preço de cada peça, pela mesma regra. */
  precoDaPeca: Record<string, string>;
};

function doisDigitos(n: number) {
  return String(n).padStart(2, "0");
}

function JanelaDoLook({
  look,
  rotulo,
  slug,
  aoFechar,
}: {
  look: BoutiqueLook;
  rotulo: string;
  slug: string;
  aoFechar: () => void;
}) {
  const [peca, setPeca] = useState(0);
  const caixa = useRef<HTMLDivElement | null>(null);
  const fechar = useRef<HTMLButtonElement | null>(null);
  useJanela(true, aoFechar, caixa, fechar);
  const escolhida = look.pecas[Math.min(peca, look.pecas.length - 1)];
  if (!escolhida) return null;
  const foto = fotoDoProduto(escolhida);
  const precoDaPeca = look.precoDaPeca[String(escolhida.id)];

  return (
    <div
      className="bq-look-fundo fixed inset-0 z-[95] flex items-center justify-center p-4"
      onClick={(e) => {
        if (e.target === e.currentTarget) aoFechar();
      }}
    >
      <div
        ref={caixa}
        role="dialog"
        aria-modal="true"
        aria-labelledby="bq-look-titulo"
        tabIndex={-1}
        className="bq-look-janela relative max-h-[calc(100svh-32px)] w-full max-w-[780px] overflow-y-auto outline-none"
      >
        <div className="flex items-start justify-between gap-4 border-b px-6 py-5 md:px-[30px] md:py-6" style={{ borderColor: "rgba(17,17,17,0.1)" }}>
          <div className="min-w-0">
            <p className="truncate text-[9px] font-bold uppercase tracking-[0.18em] text-[#6d6a66]">{rotulo}</p>
            <h2 id="bq-look-titulo" className="bq-revista mt-1.5 text-[30px] leading-none tracking-[-0.02em] text-[#111111] md:text-[36px]">
              Shop the look
            </h2>
          </div>
          <button
            ref={fechar}
            type="button"
            onClick={aoFechar}
            aria-label="Fechar"
            className="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-full border bg-white text-[#111111] transition-colors hover:bg-[#111111] hover:text-white"
            style={{ borderColor: "rgba(17,17,17,0.15)" }}
          >
            <X className="h-4 w-4" strokeWidth={1.6} />
          </button>
        </div>
        <div className="grid md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
          <div className="relative h-[310px] bg-white md:h-[420px]">
            {foto ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={miniatura(foto, 900)} alt={escolhida.name} className="absolute inset-0 h-full w-full object-contain p-3" />
            ) : null}
          </div>
          <div className="flex flex-col justify-center px-6 py-7 md:px-9 md:py-9">
            <h3 className="bq-revista text-[26px] leading-[1.1] tracking-[-0.02em] text-[#111111] md:text-[31px]">{escolhida.name}</h3>
            {precoDaPeca ? <p className="mt-4 text-[15px] font-bold text-[#111111]">{precoDaPeca}</p> : null}
            <p className="mt-6 text-[11px] leading-[1.65] text-[#74706a]">
              {look.pecas.length > 1
                ? `Uma das peças do look “${look.nome}”. Veja todos os detalhes, tamanhos e disponibilidade na página do produto.`
                : "Você encontrou a peça deste look. Veja todos os detalhes, tamanhos e disponibilidade na página do produto."}
            </p>
            {look.pecas.length > 1 ? (
              <div className="mt-5">
                <p className="text-[9px] font-bold uppercase tracking-[0.16em] text-[#6d6a66]">
                  As peças do look{look.preco ? ` · juntas ${look.preco}` : ""}
                  {look.selo ? ` · ${look.selo}` : ""}
                </p>
                <div className="mt-2.5 flex flex-wrap gap-2">
                  {look.pecas.map((item, i) => {
                    const miniaturaDaPeca = fotoDoProduto(item);
                    const marcada = i === peca;
                    return (
                      <button
                        key={item.id}
                        type="button"
                        onClick={() => setPeca(i)}
                        aria-pressed={marcada}
                        aria-label={item.name}
                        title={item.name}
                        className="h-14 w-14 overflow-hidden border bg-white transition-shadow"
                        style={{ borderColor: marcada ? "#111111" : "rgba(17,17,17,0.15)", boxShadow: marcada ? "0 0 0 1px #111111" : "none" }}
                      >
                        {miniaturaDaPeca ? (
                          /* eslint-disable-next-line @next/next/no-img-element */
                          <img src={miniatura(miniaturaDaPeca, 140)} alt="" className="h-full w-full object-contain" />
                        ) : null}
                      </button>
                    );
                  })}
                </div>
              </div>
            ) : null}
            <Link href={`/${slug}/p/${encodeURIComponent(String(escolhida.id))}`} className="bq-look-ver mt-7 flex h-[50px] w-full items-center justify-center">
              Ver produto
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

export function BoutiqueLooks({
  eyebrow,
  titulo,
  subtitulo,
  looks,
  slug,
}: {
  eyebrow?: string | null;
  titulo: string;
  subtitulo?: string | null;
  looks: BoutiqueLook[];
  slug: string;
}) {
  const trilho = useRef<HTMLDivElement | null>(null);
  const [primeiro, setPrimeiro] = useState(0);
  const [noFim, setNoFim] = useState(false);
  const [aberto, setAberto] = useState<number | null>(null);
  useArrastoComMouse(trilho);
  const total = looks.length;

  const medir = useCallback(() => {
    const caixa = trilho.current;
    const card = caixa?.firstElementChild as HTMLElement | null;
    if (!caixa || !card) return;
    const passo = card.getBoundingClientRect().width + parseFloat(getComputedStyle(caixa).columnGap || "0");
    setPrimeiro(Math.max(0, Math.min(total - 1, Math.round(caixa.scrollLeft / Math.max(1, passo)))));
    setNoFim(caixa.scrollLeft + caixa.clientWidth >= caixa.scrollWidth - 4);
  }, [total]);

  useEffect(() => {
    medir();
    window.addEventListener("resize", medir);
    return () => window.removeEventListener("resize", medir);
  }, [medir]);

  const andar = (direcao: -1 | 1) => {
    const caixa = trilho.current;
    const card = caixa?.firstElementChild as HTMLElement | null;
    if (!caixa || !card) return;
    const passo = card.getBoundingClientRect().width + parseFloat(getComputedStyle(caixa).columnGap || "0");
    caixa.scrollBy({ left: direcao * passo, behavior: "smooth" });
  };

  const fechar = useCallback(() => setAberto(null), []);
  if (!total) return null;
  /* A linha cresce até o look que está no começo do trilho (no fim, cheia). */
  const progresso = noFim ? 1 : (primeiro + 1) / total;
  const rotulo = String(titulo || "Elas vestem").toUpperCase();

  return (
    <section data-bq-looks="" className="w-full overflow-hidden bg-[var(--bq-papel)] pb-[60px] pt-[68px] md:pb-[90px] md:pt-[105px]">
      <div className="flex items-end justify-between gap-4 px-4 md:gap-6 md:px-6 md:pr-10">
        <div className="min-w-0 max-w-[820px]">
          {eyebrow ? <p className="text-[9px] font-bold uppercase tracking-[0.2em] text-[#111111] md:text-[10px]">{eyebrow}</p> : null}
          <h2 className="bq-revista bq-titulo-look mt-3 text-[#111111] md:mt-4">{titulo}</h2>
          {subtitulo ? <p className="mt-4 max-w-[580px] text-[13px] leading-[1.75] text-[#6d6a66] md:mt-6">{subtitulo}</p> : null}
        </div>
        {total > 1 ? (
          <div className="flex shrink-0 gap-2 pb-1 md:gap-3">
            <button type="button" aria-label="Looks anteriores" disabled={primeiro <= 0} onClick={() => andar(-1)} className="bq-look-seta">
              <ChevronLeft className="h-[18px] w-[18px]" strokeWidth={1.7} />
            </button>
            <button type="button" aria-label="Próximos looks" disabled={noFim} onClick={() => andar(1)} className="bq-look-seta">
              <ChevronRight className="h-[18px] w-[18px]" strokeWidth={1.7} />
            </button>
          </div>
        ) : null}
      </div>

      <div
        ref={trilho}
        onScroll={medir}
        className="bq-sem-barra bq-arrastavel mt-7 flex snap-x snap-mandatory gap-2 overflow-x-auto md:mt-11 md:gap-3"
        aria-label={`${titulo}: ${total} ${total === 1 ? "look" : "looks"}`}
      >
        {looks.map((look, i) => (
          <article key={look.chave} className="bq-look-card group relative shrink-0 snap-start overflow-hidden bg-[#e8e3dd]">
            {look.foto ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={miniatura(look.foto, 900)} alt="" loading="lazy" draggable={false} className="bq-look-foto absolute inset-0 h-full w-full object-cover" />
            ) : null}
            <span className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%)" }} />
            <span className="bq-look-numero absolute left-[18px] top-[18px] flex h-[34px] w-[34px] items-center justify-center text-[9px] font-bold text-[#111111]">
              {doisDigitos(i + 1)}
            </span>
            <div className="absolute inset-x-6 bottom-6 text-white md:inset-x-[24px] md:bottom-[28px]">
              <p className="text-[9px] font-extrabold uppercase tracking-[0.18em]">Shop the look</p>
              <h3 className="bq-revista mt-1.5 line-clamp-2 text-[26px] leading-[1.05] tracking-[-0.02em] md:text-[28.8px]">{look.nome}</h3>
              <button type="button" onClick={() => setAberto(i)} className="bq-look-botao mt-4 inline-flex h-[43px] items-center gap-3 px-[18px]">
                Quero esse look <span className="bq-seta-texto" aria-hidden="true">→</span>
              </button>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 flex items-center gap-5 px-4 md:mt-[34px] md:px-6" aria-hidden="true">
        <span className="relative h-px max-w-[560px] flex-1 bg-[rgba(17,17,17,0.16)]">
          <span className="absolute inset-y-0 left-0 bg-[#111111] transition-[width] duration-300" style={{ width: `${progresso * 100}%` }} />
        </span>
        <span className="shrink-0 text-[9px] font-bold tracking-[0.11em] text-[#6c6965] tabular-nums">
          {doisDigitos(Math.min(total, primeiro + 1))} / {doisDigitos(total)}
        </span>
      </div>

      {aberto !== null && looks[aberto] ? <JanelaDoLook look={looks[aberto]} rotulo={rotulo} slug={slug} aoFechar={fechar} /> : null}
    </section>
  );
}