import Link from 'next/link';
import type { FeaturedListPayload } from '@/types/api';
import { serverCatalogApi } from '@/lib/api';

const TILE_THEMES = [
  'bg-secondary-50 hover:bg-secondary-100',
  'bg-accent-50 hover:bg-accent-100',
  'bg-neutral-100 hover:bg-neutral-200',
  'bg-secondary-100 hover:bg-secondary-200',
] as const;

export async function FeaturedTaxonomy({
  payload,
  kind,
  locale,
}: {
  payload: FeaturedListPayload;
  kind: 'featured_occasions' | 'featured_categories';
  locale: string;
}) {
  const isOccasions = kind === 'featured_occasions';

  let items: { public_id: string; name: string; slug: string }[] = [];
  try {
    const all = isOccasions
      ? await serverCatalogApi.occasions(locale)
      : await serverCatalogApi.categories(locale);

    if (payload.public_ids?.length) {
      const byId = new Map(all.map((x) => [x.public_id, x]));
      items = payload.public_ids.flatMap((id) => {
        const found = byId.get(id);
        return found ? [found] : [];
      });
    } else {
      items = all;
    }
  } catch {
    return null;
  }

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

  const prefix = isOccasions ? 'o' : 'c';

  return (
    <section className="py-8 md:py-12">
      {payload.title ? (
        <div className="mx-auto max-w-7xl px-4 pb-6">
          <h2 className="font-heading text-2xl md:text-3xl font-bold text-neutral-900 text-start">
            {payload.title}
          </h2>
        </div>
      ) : null}
      <div className="mx-auto max-w-7xl px-4">
        <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 list-none p-0">
          {items.map((item, i) => (
            <li key={item.public_id}>
              <Link
                href={`/${locale}/${prefix}/${item.slug}`}
                className={`group flex min-h-[140px] md:min-h-[180px] flex-col justify-end rounded-xl p-4 transition-colors duration-150 ${TILE_THEMES[i % TILE_THEMES.length]}`}
              >
                <span className="font-heading text-sm md:text-base font-semibold text-neutral-900 leading-snug">
                  {item.name}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}