"use client";

import { useEffect, useState } from "react";
import { useFormato } from "@/components/FormatoContext";
import { OrderForm } from "@/components/OrderForm";
import { formatarTamanho, formatarTamanhoCurto, type SizeOption } from "@/lib/products";

type Props = {
  productId: string;
  sizes: SizeOption[];
  origem: { rotulo: string; texto: string };
  ficha: { impressao: string; papel: string; papelDetalhe: string; certificado: string };
  // Presente nas obras originais (peça única): troca a ficha de edição impressa pela de original.
  original?: { tecnica: string; moldura: string; ano: string; unicidade: string };
  vendida?: boolean; // original já vendido: mostra "Vendida" e bloqueia a compra
};

export function ProductPurchase({ productId, sizes, origem, ficha, original, vendida }: Props) {
  const { sizeId, setSizeId } = useFormato(sizes[0].id);
  const size = sizes.find((t) => t.id === sizeId) ?? sizes[0];

  // Barra de compra fixa no celular: aparece enquanto o formulário de compra está fora da tela.
  const [formularioVisivel, setFormularioVisivel] = useState(false);
  useEffect(() => {
    const alvo = document.getElementById("comprar");
    if (!alvo) return;
    const obs = new IntersectionObserver(([e]) => setFormularioVisivel(e.isIntersecting), { threshold: 0.05 });
    obs.observe(alvo);
    return () => obs.disconnect();
  }, []);
  const mostrarBarra = !vendida && !!size.price && !formularioVisivel;

  return (
    <>
      {sizes.length > 1 && (
        <div className="mt-5">
          <p className="text-xs font-medium uppercase tracking-wide text-zinc-500">Formato</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {sizes.map((t) => (
              <button
                key={t.id}
                type="button"
                onClick={() => setSizeId(t.id)}
                aria-pressed={t.id === sizeId}
                className={`rounded-lg border px-4 py-2 text-left text-sm transition-colors ${
                  t.id === sizeId
                    ? "border-zinc-900 bg-zinc-900 text-white"
                    : "border-zinc-300 text-zinc-700 hover:border-zinc-900"
                }`}
              >
                <span className="block font-medium">{formatarTamanhoCurto(t)}</span>
                <span className={`block text-xs ${t.id === sizeId ? "text-zinc-300" : "text-zinc-500"}`}>
                  {t.price
                    ? t.price.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })
                    : "Preço sob consulta"}
                </span>
              </button>
            ))}
          </div>
        </div>
      )}

      <p className="mt-4 text-xl font-medium text-zinc-900">
        {vendida
          ? "Vendida"
          : size.price
            ? size.price.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })
            : "Preço sob consulta"}
      </p>

      <section className="mt-6 rounded-lg border border-zinc-200 p-5">
        <p className="text-xs font-medium uppercase tracking-wide text-zinc-500">
          {original
            ? "Obra original · peça única"
            : `Edição limitada · ${size.tiragem} cópias neste formato, numeradas e assinadas`}
        </p>
        <h2 className="mt-1 text-base font-semibold text-zinc-900">{origem.rotulo}</h2>
        <p className="mt-2 text-sm leading-relaxed text-zinc-600">{origem.texto}</p>
        {original ? (
          <dl className="mt-4 divide-y divide-zinc-100 text-sm">
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Técnica</dt>
              <dd className="text-right text-zinc-900">{original.tecnica}</dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Dimensões</dt>
              <dd className="text-right text-zinc-900">{formatarTamanho(size)}</dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Moldura</dt>
              <dd className="text-right text-zinc-900">{original.moldura}</dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Ano</dt>
              <dd className="text-right text-zinc-900">{original.ano}</dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Edição</dt>
              <dd className="text-right text-zinc-900">{original.unicidade}</dd>
            </div>
          </dl>
        ) : (
          <dl className="mt-4 divide-y divide-zinc-100 text-sm">
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Impressão</dt>
              <dd className="text-right text-zinc-900">{ficha.impressao}</dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Papel</dt>
              <dd className="text-right text-zinc-900">
                {ficha.papel}
                <span className="block text-xs text-zinc-500">{ficha.papelDetalhe}</span>
              </dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Tamanho final</dt>
              <dd className="text-right text-zinc-900">{formatarTamanho(size)}</dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Tiragem</dt>
              <dd className="text-right text-zinc-900">
                {size.tiragem} cópias neste formato, numeradas e assinadas pelo artista
              </dd>
            </div>
            <div className="flex justify-between gap-4 py-2">
              <dt className="text-zinc-500">Certificado</dt>
              <dd className="text-right text-zinc-900">{ficha.certificado}</dd>
            </div>
          </dl>
        )}
        <p className="mt-4 text-xs text-zinc-500">
          {original
            ? "A obra é vendida sem moldura. As imagens emolduradas e em ambiente são apenas uma sugestão de apresentação."
            : "A obra é enviada sem moldura, em tubo rígido. A imagem emoldurada é apenas uma simulação."}
        </p>
      </section>

      {vendida ? (
        <p className="mt-6 rounded-lg bg-zinc-100 p-4 text-sm text-zinc-700">
          Esta obra original já foi vendida. Por ser peça única, não está mais disponível.
        </p>
      ) : (
        <div id="comprar" className="scroll-mt-4">
          <OrderForm productId={productId} sizeId={size.id} price={size.price} />
        </div>
      )}
      {mostrarBarra && (
        <>
          <div className="h-20 md:hidden" aria-hidden />
          <div className="fixed inset-x-0 bottom-0 z-40 flex items-center justify-between gap-4 border-t border-zinc-200 bg-white/95 px-5 py-3 backdrop-blur md:hidden">
            <div>
              <p className="text-xs text-zinc-500">{formatarTamanhoCurto(size)}</p>
              <p className="text-base font-semibold text-zinc-900">
                {size.price!.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })}
              </p>
            </div>
            <button
              type="button"
              onClick={() => document.getElementById("comprar")?.scrollIntoView({ behavior: "smooth", block: "start" })}
              className="rounded-full bg-zinc-900 px-8 py-3 text-sm font-medium text-white"
            >
              Comprar
            </button>
          </div>
        </>
      )}
    </>
  );
}