import Link from 'next/link';
import { getTranslations } from 'next-intl/server';
import { BadgeCheck, Star, MapPin, ChevronRight } from 'lucide-react';
import { SmartImage } from '@/components/ui';
import { discoveryApi } from '@/lib/api';
import type { VendorProfile } from '@/types/api';

const TYPE_LABEL: Record<string, Record<string, string>> = {
  rental: { en: 'Rental', ar: 'إيجار' },
  sale: { en: 'For sale', ar: 'للبيع' },
  digital: { en: 'Digital', ar: 'رقمي' },
};

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

  let vendors: VendorProfile[] = [];
  try {
    vendors = await discoveryApi.listVendors(locale, 6);
  } catch {
    return null;
  }

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

  return (
    <section className="border-b border-neutral-200 bg-[#fafafa]">
      <div className="mx-auto max-w-7xl px-4 py-14 md:py-20">
        <div className="grid gap-10 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="inline-flex items-center gap-1 self-end text-sm font-medium text-primary-700 hover:text-primary-800"
          >
            {t('view_all')}
            <ChevronRight className="h-4 w-4 rtl:rotate-180" aria-hidden />
          </Link>
        </div>

        <ul className="mt-10 grid gap-4 list-none p-0 md:grid-cols-3">
          {vendors.map((v) => (
            <li key={v.public_id}>
              <Link
                href={`/${locale}/vendors/${v.public_id}`}
                className="flex h-full flex-col gap-4 rounded-2xl border border-neutral-200 bg-white p-5 transition-shadow hover:shadow-[0_8px_24px_-12px_rgb(0_0_0/0.12)]"
              >
                <div className="flex items-start gap-4">
                  <div className="h-14 w-14 flex-shrink-0 overflow-hidden rounded-full bg-neutral-100">
                    <SmartImage
                      src={v.logo_url}
                      alt={v.business_name}
                      entity
                      placeholderLabel={v.business_name}
                      fallbackCategory="avatar"
                      fallbackSeed={v.public_id}
                      sizes="56px"
                      className="h-full w-full"
                      imgClassName="h-full w-full object-cover"
                    />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-1.5">
                      <h3 className="truncate font-heading text-base font-semibold text-neutral-900">
                        {v.business_name}
                      </h3>
                      {v.is_verified ? (
                        <BadgeCheck className="h-4 w-4 flex-shrink-0 text-primary-600" aria-label={t('verified_badge')} />
                      ) : null}
                    </div>
                    {v.city ? (
                      <p className="mt-0.5 inline-flex items-center gap-1 text-xs text-neutral-500">
                        <MapPin className="h-3 w-3" aria-hidden />
                        {v.city.name}
                      </p>
                    ) : null}
                  </div>
                </div>

                {v.rating_avg !== null && v.rating_count > 0 ? (
                  <div className="flex items-center gap-1 text-xs">
                    <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden />
                    <span className="font-semibold text-neutral-800">{v.rating_avg.toFixed(1)}</span>
                    <span className="text-neutral-400">({v.rating_count})</span>
                  </div>
                ) : null}

                {v.product_types.length > 0 ? (
                  <div className="flex flex-wrap gap-1.5">
                    {v.product_types.map((pt) => (
                      <span
                        key={pt}
                        className="rounded-full bg-neutral-100 px-2.5 py-1 text-[11px] font-medium text-neutral-700"
                      >
                        {TYPE_LABEL[pt]?.[locale] ?? pt}
                      </span>
                    ))}
                  </div>
                ) : null}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}