import Link from 'next/link';
import { getTranslations } from 'next-intl/server';
import { ArrowUpRight } from 'lucide-react';
import { SmartImage } from '@/components/ui';
import { serverCatalogApi } from '@/lib/api';
import type { DemoCategory } from '@/lib/demo-images';

const SLUG_TO_IMAGE: Record<string, DemoCategory> = {
  'birthday':         'birthday',
  'baby-shower':      'kids_decor',
  'graduation':       'venue',
  'family-gathering': 'catering',
  'corporate':        'photography',
  'wedding':          'venue',
  'engagement':       'birthday',
};

function imageForSlug(slug: string): DemoCategory {
  return SLUG_TO_IMAGE[slug] ?? 'generic';
}

export async function OccasionTiles({ locale }: { locale: string }) {
  const t = await getTranslations({ locale, namespace: 'home.occasions' });

  let occasions: { public_id: string; name: string; slug: string }[] = [];
  try {
    occasions = await serverCatalogApi.occasions(locale);
  } catch {
    return null;
  }

  if (occasions.length === 0) return null;

  const featured = occasions[0];
  const rest = occasions.slice(1);

  return (
    <section className="border-b border-neutral-200 bg-[#fafafa]">
      <div className="mx-auto max-w-7xl px-4 py-14 md:py-20">
        <header className="max-w-2xl">
          <span className="text-xs font-medium uppercase tracking-[0.16em] text-neutral-500">
            {t('eyebrow')}
          </span>
          <h2 className="mt-3 font-heading text-3xl font-bold leading-tight text-neutral-900 md:text-4xl">
            {t('heading')}
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-neutral-600 md:text-base">
            {t('sub')}
          </p>
        </header>

        <ul className="mt-10 grid auto-rows-[160px] grid-cols-4 gap-3 list-none p-0 md:auto-rows-[220px]">
          {/* Featured tile: 2×2 */}
          <li className="col-span-2 row-span-2">
            <Link
              href={`/${locale}/o/${featured.slug}`}
              className="group relative block h-full w-full overflow-hidden rounded-2xl bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2"
            >
              <SmartImage
                src={null}
                alt=""
                fallbackCategory={imageForSlug(featured.slug)}
                fallbackSeed={`occ-${featured.slug}`}
                loading="eager"
                className="absolute inset-0 h-full w-full"
                imgClassName="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
              />
              <span
                aria-hidden
                className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/15 to-transparent transition-opacity duration-300 group-hover:from-black/70"
              />
              <div className="relative flex h-full flex-col justify-end p-4 text-white md:p-5">
                <h3 className="font-heading text-xl font-bold leading-tight md:text-2xl">
                  {featured.name}
                </h3>
                <ArrowUpRight
                  className="absolute end-3 top-3 h-4 w-4 text-white/90 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 rtl:rotate-90 md:h-5 md:w-5 md:end-4 md:top-4"
                  aria-hidden
                />
              </div>
            </Link>
          </li>

          {/* Remaining tiles: 1×1 */}
          {rest.map((occ) => (
            <li key={occ.public_id} className="col-span-2 md:col-span-1">
              <Link
                href={`/${locale}/o/${occ.slug}`}
                className="group relative block h-full w-full overflow-hidden rounded-2xl bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2"
              >
                <SmartImage
                  src={null}
                  alt=""
                  fallbackCategory={imageForSlug(occ.slug)}
                  fallbackSeed={`occ-${occ.slug}`}
                  loading="lazy"
                  className="absolute inset-0 h-full w-full"
                  imgClassName="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
                />
                <span
                  aria-hidden
                  className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/15 to-transparent transition-opacity duration-300 group-hover:from-black/70"
                />
                <div className="relative flex h-full flex-col justify-end p-4 text-white md:p-5">
                  <h3 className="font-heading text-base font-bold leading-tight md:text-lg">
                    {occ.name}
                  </h3>
                  <ArrowUpRight
                    className="absolute end-3 top-3 h-4 w-4 text-white/90 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 rtl:rotate-90 md:h-5 md:w-5 md:end-4 md:top-4"
                    aria-hidden
                  />
                </div>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}