"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
  FICHA_ORIGINAL,
  SERIE_PASTEL,
  TEXTO_IMPRESSOES,
  categories,
  formatarTamanhoCurto,
  isOriginal,
  isVendida,
  menorPreco,
  products,
  type Category,
} from "@/lib/products";

type Produto = (typeof products)[number];
type Grupo = "todas" | "originais" | "impressoes";

const GRUPOS: { id: Grupo; label: string }[] = [
  { id: "todas", label: "Todas" },
  { id: "originais", label: "Obras originais" },
  { id: "impressoes", label: "Impressões" },
];

const originais = products.filter(isOriginal);
const impressoes = products.filter((p) => !isOriginal(p));
const seriesDeImpressao = categories.filter((c) => c.id !== "pastel");

function precoDoCartao(product: Produto) {
  if (isVendida(product)) return "Vendida";
  const preco = menorPreco(product);
  if (preco == null) return "Preço sob consulta";
  const valor = preco.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
  return isOriginal(product) ? valor : `A partir de ${valor}`; // original tem preço único
}

function pill(ativo: boolean, pequeno = false) {
  return `rounded-full border transition-colors ${pequeno ? "px-3 py-1 text-xs" : "px-4 py-1.5 text-sm"} ${
    ativo ? "border-zinc-900 bg-zinc-900 text-white" : "border-zinc-300 text-zinc-600 hover:border-zinc-900"
  }`;
}

// Os originais aparecem na proporção real da obra (quadrada, horizontal ou vertical), sem faixas
// nem recorte, alinhados pelo topo. As impressões ficam num quadro fixo 4:5.
function Grade({ items }: { items: Produto[] }) {
  return (
    <div className="grid grid-cols-1 items-start gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((product) => {
        const original = isOriginal(product);
        return (
        <Link key={product.id} href={`/obra/${product.id}`} className="group block">
          <div className={`relative w-full overflow-hidden bg-zinc-100 ${original ? "" : "aspect-[4/5]"}`}>
            {isVendida(product) && (
              <span className="absolute left-3 top-3 z-10 rounded-full bg-black/75 px-3 py-1 text-xs font-medium text-[#ffffff]">
                Vendida
              </span>
            )}
            {original ? (
              <img
                src={product.thumb}
                alt={product.title}
                className="block h-auto w-full transition-transform duration-300 group-hover:scale-105"
              />
            ) : (
              <Image
                src={product.thumb}
                alt={product.title}
                width={800}
                height={1000}
                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
              />
            )}
          </div>
          <div className="mt-3">
            <h3 className="text-sm font-medium text-zinc-900">{product.title}</h3>
            <p className="mt-1 text-xs uppercase tracking-wide text-zinc-500">
              {isOriginal(product) ? SERIE_PASTEL.nome : product.category}
            </p>
            <p className="mt-1 text-xs text-zinc-500">{product.sizes.map(formatarTamanhoCurto).join("  ·  ")}</p>
            <p className="mt-1 text-sm font-medium text-zinc-900">{precoDoCartao(product)}</p>
          </div>
        </Link>
        );
      })}
    </div>
  );
}

function SecaoOriginais() {
  return (
    <section id="originais">
      <header className="mb-6 max-w-2xl">
        <h2 className="text-xl font-semibold tracking-tight">Obras originais</h2>
        <p className="mt-1 text-xs uppercase tracking-wide text-zinc-500">Série {SERIE_PASTEL.nome}</p>
        <p className="mt-3 text-sm text-zinc-600">{SERIE_PASTEL.subtitulo}</p>
        {SERIE_PASTEL.reflexao.map((paragrafo) => (
          <p key={paragrafo} className="mt-2 text-sm leading-relaxed text-zinc-600">
            {paragrafo}
          </p>
        ))}
        <p className="mt-2 text-sm leading-relaxed text-zinc-600">{SERIE_PASTEL.conceito}</p>
        <p className="mt-3 text-xs text-zinc-500">
          {FICHA_ORIGINAL.tecnica} · tamanhos variados · peças únicas, vendidas sem moldura.
        </p>
      </header>
      <Grade items={originais} />
    </section>
  );
}

function SecaoImpressoes() {
  const [serie, setSerie] = useState<Category | "todas">("todas");
  const visiveis = serie === "todas" ? impressoes : impressoes.filter((p) => p.category === serie);
  const serieAtiva = seriesDeImpressao.find((c) => c.id === serie);

  return (
    <section id="impressoes">
      <header className="mb-6 max-w-2xl">
        <h2 className="text-xl font-semibold tracking-tight">Impressões</h2>
        <p className="mt-1 text-xs uppercase tracking-wide text-zinc-500">Edições limitadas</p>
        <p className="mt-3 text-sm leading-relaxed text-zinc-600">{TEXTO_IMPRESSOES}</p>
        <div className="mt-4 flex flex-wrap gap-2">
          <button type="button" onClick={() => setSerie("todas")} className={pill(serie === "todas", true)}>
            Todas as impressões
          </button>
          {seriesDeImpressao.map((c) => (
            <button key={c.id} type="button" onClick={() => setSerie(c.id)} className={pill(serie === c.id, true)}>
              {c.label}
            </button>
          ))}
        </div>
        {serieAtiva && <p className="mt-3 text-sm text-zinc-600">{serieAtiva.description}</p>}
      </header>
      <Grade items={visiveis} />
    </section>
  );
}

export function Gallery() {
  const [grupo, setGrupo] = useState<Grupo>("todas");

  return (
    <div>
      <div className="mb-10 flex flex-wrap gap-2">
        {GRUPOS.map((g) => (
          <button key={g.id} type="button" onClick={() => setGrupo(g.id)} className={pill(grupo === g.id)}>
            {g.label}
          </button>
        ))}
      </div>

      <div className="space-y-16">
        {grupo !== "impressoes" && <SecaoOriginais />}
        {grupo !== "originais" && <SecaoImpressoes />}
      </div>
    </div>
  );
}