import IntentLink from "@/components/IntentLink";
import type { Metadata } from "next";
import { ArrowLeft, Download, ExternalLink } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import JsonLdScript from "@/components/JsonLdScript";
import { nordenCatalogDocument } from "@/lib/document-library";
import { buildLocalizedPageMetadata } from "@/lib/seo";
import { buildCatalogDocumentStructuredData } from "@/lib/public-page-seo";

const text = {
  tr: { back: "Ana sayfa", title: "Norden Ürün Kataloğu", sub: "Seriler, model seçenekleri ve doğrulanmış ürün özellikleri.", open: "PDF'yi ayrı aç", download: "PDF kataloğunu indir", viewer: "Norden 2026 ürün kataloğu PDF görüntüleyici", fallback: "PDF önizlemesi açılamadı. Kataloğu ayrı sekmede görüntüleyebilirsiniz." },
  en: { back: "Home", title: "Norden Product Catalogue", sub: "Series, model alternatives and verified product features.", open: "Open PDF separately", download: "Download PDF catalogue", viewer: "Norden 2026 product catalogue PDF viewer", fallback: "The PDF preview could not be opened. You can view the catalogue in a separate tab." },
  ru: { back: "Главная", title: "Каталог продукции Norden", sub: "Серии, варианты моделей и подтвержденные характеристики.", open: "Открыть PDF отдельно", download: "Скачать PDF-каталог", viewer: "Просмотр каталога продукции Norden 2026 в PDF", fallback: "Предпросмотр PDF недоступен. Откройте каталог в отдельной вкладке." },
};

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const active = locale === "en" || locale === "ru" ? locale : "tr";
  const t = text[active];
  return buildLocalizedPageMetadata({
    locale: active,
    pathname: "/catalog",
    title: t.title,
    description: t.sub,
    image: "/media/story/catalog/catalog-cover-1080.webp",
    imageAlt: t.title,
  });
}

export default async function CatalogPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const active = locale === "en" || locale === "ru" ? locale : "tr";
  const t = text[active];
  const structuredData = buildCatalogDocumentStructuredData({
    locale: active,
    name: t.title,
    description: t.sub,
    breadcrumbs: [
      { name: t.back, pathname: "" },
      { name: t.title, pathname: "/catalog" },
    ],
  });
  return <div className="min-h-screen" style={{ background: "var(--surface-0)", color: "var(--fg-primary)" }}>
    <JsonLdScript data={structuredData} />
    <Navbar logoUrl="/brand/norden.png" locale={active} />
    <main className="mx-auto max-w-[100rem] px-5 pb-16 pt-32 md:px-10">
      <div className="mb-8 flex flex-col justify-between gap-5 md:flex-row md:items-end">
        <div><IntentLink href={`/${active}`} className="inline-flex items-center gap-2 text-xs uppercase tracking-[.15em]" style={{ color: "var(--fg-muted)" }}><ArrowLeft size={14}/>{t.back}</IntentLink><h1 className="mt-6 text-4xl font-medium tracking-[-.04em] md:text-6xl">{t.title}</h1><p className="mt-3" style={{ color: "var(--fg-secondary)" }}>{t.sub}</p></div>
        <div className="flex flex-wrap gap-3">
          <a href={nordenCatalogDocument.publicPath} target="_blank" rel="noopener noreferrer" className="inline-flex min-h-11 w-fit items-center gap-2 rounded-full border px-5 py-3 text-xs uppercase tracking-[.14em]" style={{ borderColor: "var(--border)", color: "var(--fg-secondary)" }}>{t.open}<ExternalLink size={14}/></a>
          <a href={nordenCatalogDocument.publicPath} download={nordenCatalogDocument.downloadName} className="inline-flex min-h-11 w-fit items-center gap-2 rounded-full px-6 py-3 text-xs uppercase tracking-[.14em]" style={{ background: "var(--ember)", color: "var(--surface-0)" }}>{t.download}<Download size={14}/></a>
        </div>
      </div>
      <div className="overflow-hidden rounded-[28px] border" style={{ borderColor: "var(--border)", height: "min(78vh, 1050px)" }}>
        <object aria-label={t.viewer} data={`${nordenCatalogDocument.publicPath}#view=FitH`} type={nordenCatalogDocument.contentType} className="h-full w-full bg-white">
          <div className="flex h-full flex-col items-center justify-center gap-5 p-8 text-center">
            <p className="max-w-lg text-sm leading-7" style={{ color: "var(--fg-secondary)" }}>{t.fallback}</p>
            <a href={nordenCatalogDocument.publicPath} target="_blank" rel="noopener noreferrer" className="inline-flex min-h-11 items-center gap-2 rounded-full border px-5 py-3 text-xs uppercase tracking-[.14em]" style={{ borderColor: "var(--border)", color: "var(--ember)" }}>{t.open}<ExternalLink size={14}/></a>
          </div>
        </object>
      </div>
    </main><Footer />
  </div>;
}