import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { fileiras, tamanhoJpeg } from "@/lib/imagemTamanho";

type Exposicao = {
  slug: string;
  titulo: string;
  local: string;
  data: string;
  curadoria?: string;
  parceria?: string;
  texto: string;
  count: number;
  sufixo?: string; // muda o nome dos arquivos de fotos trocadas, para nenhum aparelho reaproveitar a imagem antiga
};

const exposicoes: Exposicao[] = [
  {
    slug: "paisagens-particulares-2026",
    titulo: "Paisagens Particulares",
    local: "Museu Guido Viaro, Curitiba",
    data: "22 de janeiro a 14 de março de 2026",
    curadoria: "Otilhiane Juchem",
    texto:
      "Recorte da última década de produção de Felipe Tosin, entre pintura, gravura, desenho e esculturas em cerâmica. As paisagens deixam de ser representações de lugares e se tornam “estados de atenção”, onde tempo, memória e matéria se entrelaçam entre o reconhecível e o abstrato. Na série Fósseis, fragmentos de plástico recolhidos na Ilha do Mel, encapsulados em resina, formam uma arqueologia do presente e perguntam: o que se transforma e o que deixamos como rastro?",
    count: 16,
    sufixo: "-v2",
  },
  {
    slug: "impulso-imaginario-2024",
    titulo: "Impulso Imaginário: convergências",
    local: "Aliança Francesa, Curitiba",
    data: "20 de março de 2024",
    curadoria: "Otilhiane Juchem",
    parceria: "Essência Criativa",
    texto:
      "Exposição individual na Aliança Francesa de Curitiba, com curadoria de Otilhiane Juchem. Reúne pinturas e objetos em que o artista ressignifica materiais plásticos coletados em litorais e florestas, incorporando-os aos seus impulsos imaginários e a um universo pictórico particular.",
    count: 8,
    sufixo: "-v2",
  },
  {
    slug: "paisagens-possiveis-conexoes-2017",
    titulo: "Paisagens, possíveis conexões",
    local: "Museu Alfredo Andersen, Curitiba",
    data: "7 de julho a 27 de agosto de 2017",
    curadoria: "Juliane Fuganti",
    texto:
      "Exposição individual no Museu Alfredo Andersen, com texto crítico de Benedito Costa Neto, reunindo pinturas de grande formato construídas em camadas de cor. Realização do Governo do Paraná / Secretaria de Estado da Cultura.",
    count: 20,
    sufixo: "-v6",
  },
];

export const metadata: Metadata = {
  title: "Exposições | Felipe Tosin",
  description: "Exposições de Felipe Tosin, artista visual de Curitiba: fotos, cartazes e registros das mostras.",
};

export default function ExposicoesPage() {
  return (
    <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-12">
      <div className="mb-12">
        <h1 className="text-2xl font-semibold tracking-tight">Exposições</h1>
        <p className="mt-2 max-w-2xl text-sm text-zinc-600">
          Registros de exposições individuais. O histórico completo está na página{" "}
          <Link href="/sobre" className="underline hover:text-zinc-900">
            Sobre
          </Link>
          .
        </p>
      </div>

      <div className="space-y-16">
        {exposicoes.map((e) => (
          <section key={e.slug}>
            <div className="mb-4 max-w-2xl">
              <h2 className="text-lg font-semibold text-zinc-900">{e.titulo}</h2>
              <p className="mt-1 text-sm text-zinc-500">
                {e.local} · {e.data}
                {e.curadoria ? ` · curadoria: ${e.curadoria}` : ""}
                {e.parceria ? ` · parceria: ${e.parceria}` : ""}
              </p>
              <p className="mt-2 text-sm text-zinc-600">{e.texto}</p>
            </div>

            <Mosaico e={e} />
          </section>
        ))}
      </div>
    </main>
  );
}

// Diagramação em fileiras justificadas: verticais e horizontais encaixam, cada fileira fecha exatamente nas duas margens
// (inclusive a última). A divisão em fileiras é calculada para o computador (1104 px) e para o celular (343 px).
function Mosaico({ e }: { e: Exposicao }) {
  const fotos = Array.from({ length: e.count }, (_, i) => {
    const n = String(i + 1).padStart(2, "0");
    const src = `/exposicoes/${e.slug}/${n}${e.sufixo ?? ""}.jpg`;
    const { w, h } = tamanhoJpeg(src);
    return { n, src, w, h, r: w / h };
  });
  const ratios = fotos.map((f) => f.r);
  const bloco = (rows: number[][], gapPx: number, sizes: string, classe: string) => (
    <div className={classe} style={{ display: undefined }}>
      {rows.map((row, k) => (
        <div key={k} className="flex" style={{ gap: gapPx, marginTop: k ? gapPx : 0 }}>
          {row.map((i) => (
            <div key={fotos[i].n} style={{ flex: `${fotos[i].r} 1 0%`, minWidth: 0 }}>
              <Image
                src={fotos[i].src}
                alt={`${e.titulo}, foto ${fotos[i].n}`}
                width={fotos[i].w}
                height={fotos[i].h}
                sizes={sizes}
                className="block h-auto w-full"
              />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
  return (
    <>
      {bloco(fileiras(ratios, 1104, 12, 270), 12, "(min-width: 768px) 30vw, 50vw", "hidden md:block")}
      {bloco(fileiras(ratios, 343, 8, 150), 8, "50vw", "md:hidden")}
    </>
  );
}