import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { IconArrowBack, IconArrowForward } from '@/components/Icons'
import { getReference, getReferenceNeighbours, references } from '@/lib/data'

type Params = { params: Promise<{ id: string }> }

/**
 * A 24 referencia-aloldal kéréskor renderelődik, nem build időben.
 *
 * A tárhely 1 GB-os memóriakerete nem bírta el mind a 38 oldal
 * előgenerálását: a "Generating static pages" szakaszon a rendszer
 * kilőtte a buildet. Így 14 oldal készül el előre, a referenciák pedig
 * az első kérésre — utána a Next gyorsítótárazza őket.
 *
 * A keresők szempontjából nincs különbség: a HTML továbbra is a
 * szerveren áll elő, teljes tartalommal.
 */
export const dynamicParams = true

export function generateStaticParams() {
  return []
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { id } = await params
  const reference = getReference(id)
  if (!reference) return {}
  return {
    title: `${reference.name} esküvője`,
    description: reference.short_message ?? undefined,
    alternates: { canonical: `/referenciak/${id}` },
    openGraph: { images: [`/images/reference/${reference.picture}`] },
  }
}

export default async function ReferenceShowPage({ params }: Params) {
  const { id } = await params
  const reference = getReference(id)
  if (!reference) notFound()

  const { prev, next } = getReferenceNeighbours(id)

  return (
    <>
      <section
        className="site-blocks-cover inner-page-cover"
        style={{ backgroundImage: "url('/images/zsoltiacm_reference_banner.png')" }}
      >
        <div className="container cover-inner">
          <div className="banner-h1">
            <h1 className="text-white">Referenciák</h1>
            <h4 className="text-white">{reference.name} esküvője</h4>
          </div>
        </div>
      </section>

      <section
        className="site-section bg-image"
        style={{ backgroundImage: "url('/images/zsoltiacm_referenciak_hatter.png')" }}
      >
        <div className="layer-60" style={{ position: 'absolute', inset: 0 }} />
        <div className="container section-inner">
          <Link href="/referenciak" className="back-link">
            <IconArrowBack size={24} /> vissza a referenciákhoz
          </Link>

          <Image
            src={`/images/reference/${reference.picture}`}
            alt={`${reference.name} esküvője`}
            width={1200}
            height={800}
            sizes="(max-width: 1140px) 100vw, 1140px"
            priority
            style={{ width: '100%', height: 'auto' }}
          />

          <h3 className="text-white text-center" style={{ margin: 20 }}>
            {reference.name}
          </h3>
          <p className="text-white" style={{ margin: 20, textAlign: 'justify' }}>
            {reference.content}
          </p>

          <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem' }}>
            {prev && (
              <Link href={`/referenciak/${prev.id}`} className="text-white" aria-label="Előző referencia">
                <IconArrowBack size={36} />
              </Link>
            )}
            {next && (
              <Link href={`/referenciak/${next.id}`} className="text-white" aria-label="Következő referencia">
                <IconArrowForward size={36} />
              </Link>
            )}
          </div>
        </div>
      </section>
    </>
  )
}