import Link from 'next/link';
import { getTranslations } from 'next-intl/server';
import { ChevronRight, 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> = {
  'cakes':                'cake',
  'venues':               'venue',
  'balloons-decoration':  'balloons',
  'catering':             'catering',
  'photography':          'photography',
  'entertainment':        'entertainer',
  'gifts':                'digital',
  'rentals':              'rental',
};

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

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

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

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

  const featured = categories.slice(0, 2);
  const rest = categories.slice(2, 8);

  const allCategoriesLabel = locale === 'ar' ? 'كل الفئات' : 'All categories';
  const browseLabel = locale === 'ar' ? 'تصفّح' : 'Browse';

  return (
    <section className="border-b border-neutral-200 bg-white">
      <div className="mx-auto max-w-7xl px-4 py-14 md:py-20">
        <div className="grid gap-6 md:grid-cols-[1fr_auto] md:items-end">
          <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 max-w-prose text-sm leading-relaxed text-neutral-600 md:text-base">
              {t('sub')}
            </p>
          </header>
          <Link
            href={`/${locale}/search`}
            className="hidden items-center gap-1 self-end text-sm font-medium text-neutral-700 hover:text-neutral-900 md:inline-flex"
          >
            {allCategoriesLabel}
            <ChevronRight className="h-4 w-4 rtl:rotate-180" aria-hidden />
          </Link>
        </div>

        {/* Editorial strip: two large photographic cards */}
        <div className="mt-10 grid gap-3 md:grid-cols-2 md:gap-4">
          {featured.map((cat, i) => (
            <Link
              key={cat.public_id}
              href={`/${locale}/c/${cat.slug}`}
              className="group relative 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"
            >
              <div className="relative aspect-[4/3] md:aspect-[16/9]">
                <SmartImage
                  src={null}
                  alt=""
                  fallbackCategory={imageForSlug(cat.slug)}
                  fallbackSeed={`cat-feat-${cat.slug}`}
                  loading={i === 0 ? 'eager' : '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/70 via-black/20 to-transparent"
                />
                <div className="relative flex h-full flex-col justify-end p-6 text-white">
                  <h3 className="font-heading text-xl font-bold leading-tight md:text-2xl">
                    {cat.name}
                  </h3>
                  <span className="mt-3 inline-flex w-fit items-center gap-1 text-[11px] font-semibold uppercase tracking-wider text-white">
                    {browseLabel}
                    <ArrowUpRight className="h-3.5 w-3.5 rtl:rotate-90" aria-hidden />
                  </span>
                </div>
              </div>
            </Link>
          ))}
        </div>

        {/* Smaller cards grid */}
        {rest.length > 0 && (
          <ul className="mt-3 grid grid-cols-2 gap-3 list-none p-0 md:mt-4 md:grid-cols-3 md:gap-4">
            {rest.map((cat) => (
              <li key={cat.public_id}>
                <Link
                  href={`/${locale}/c/${cat.slug}`}
                  className="group block h-full overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all duration-300 hover:border-neutral-300 hover:shadow-[0_8px_24px_-12px_rgb(0_0_0/0.12)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2"
                >
                  <div className="relative aspect-[4/3] overflow-hidden bg-neutral-100">
                    <SmartImage
                      src={null}
                      alt=""
                      fallbackCategory={imageForSlug(cat.slug)}
                      fallbackSeed={`cat-${cat.slug}`}
                      className="h-full w-full"
                      imgClassName="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.05]"
                    />
                  </div>
                  <div className="p-4">
                    <div className="flex items-start justify-between gap-2">
                      <h3 className="font-heading text-sm font-semibold text-neutral-900 md:text-[15px]">
                        {cat.name}
                      </h3>
                      <ChevronRight
                        className="mt-1 h-4 w-4 flex-shrink-0 text-neutral-400 transition-colors group-hover:text-neutral-700 rtl:rotate-180"
                        aria-hidden
                      />
                    </div>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        )}

        <div className="mt-6 flex justify-center md:hidden">
          <Link
            href={`/${locale}/search`}
            className="inline-flex items-center gap-1 text-sm font-medium text-neutral-700 hover:text-neutral-900"
          >
            {allCategoriesLabel}
            <ChevronRight className="h-4 w-4 rtl:rotate-180" aria-hidden />
          </Link>
        </div>
      </div>
    </section>
  );
}