import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { AiSearchBar } from "@/components/search/ai-search-bar";
import { CafeCard } from "@/components/cafe/cafe-card";
import { discoverCafes } from "@/lib/api";
import { Sparkles, MapPin } from "lucide-react";

const BASE = process.env.NEXT_PUBLIC_SITE_URL ?? "https://find.meezi.ir";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("homeTitle"),
    description: t("homeDescription"),
    alternates: {
      canonical: `${BASE}/${locale}`,
      languages: { fa: `${BASE}/fa`, en: `${BASE}/en` },
    },
  };
}

const CITIES_FA = ["تهران", "اصفهان", "مشهد", "شیراز", "تبریز", "کرج", "رشت", "اهواز"];
const CITIES_EN = ["Tehran", "Isfahan", "Mashhad", "Shiraz", "Tabriz", "Karaj", "Rasht", "Ahvaz"];
const CITY_SLUGS = ["tehran", "isfahan", "mashhad", "shiraz", "tabriz", "karaj", "rasht", "ahvaz"];

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "home" });
  const isFa = locale === "fa";

  // Fetch featured cafes (top-rated, with profile)
  const featured = await discoverCafes({ sort: "rating" });
  const topCafes = featured.slice(0, 8);

  const cities = isFa ? CITIES_FA : CITIES_EN;

  return (
    <>
      <Navbar />
      <main>
        {/* Hero */}
        <section className="relative overflow-hidden bg-gradient-to-b from-brand-700 to-brand-900 pb-20 pt-16 text-white">
          <div className="absolute inset-0 opacity-10">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,white,transparent_60%)]" />
          </div>
          <div className="relative mx-auto max-w-3xl px-4 text-center sm:px-6">
            <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold backdrop-blur-sm">
              <Sparkles className="h-3 w-3" />
              {t("badge")}
            </span>
            <h1 className="mt-5 text-3xl font-extrabold leading-tight sm:text-5xl">
              {t("headline")}
            </h1>
            <p className="mt-4 text-base text-white/70 sm:text-lg">
              {t("subheadline")}
            </p>
            <div className="mt-8">
              <AiSearchBar large />
            </div>
          </div>
        </section>

        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          {/* Popular cities */}
          <section className="py-10">
            <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-400">
              {t("popularCities")}
            </h2>
            <div className="flex flex-wrap gap-2">
              {cities.map((city, i) => (
                <a
                  key={city}
                  href={`/${locale}/city/${CITY_SLUGS[i]}`}
                  className="flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:border-brand-300 hover:text-brand-700"
                >
                  <MapPin className="h-3.5 w-3.5 text-brand-500" />
                  {city}
                </a>
              ))}
            </div>
          </section>

          {/* Featured cafes */}
          <section className="pb-16">
            <div className="mb-6">
              <h2 className="text-xl font-bold text-gray-900">{t("featuredTitle")}</h2>
              <p className="mt-1 text-sm text-gray-500">{t("featuredSubtitle")}</p>
            </div>

            {topCafes.length === 0 ? (
              <div className="rounded-2xl border border-dashed border-gray-200 py-16 text-center text-gray-400">
                <p className="text-sm">{t("noResults")}</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {topCafes.map((cafe) => (
                  <CafeCard
                    key={cafe.id}
                    cafe={cafe}
                    locale={locale}
                    href={`/${locale}/cafe/${cafe.slug}`}
                  />
                ))}
              </div>
            )}

            <div className="mt-8 text-center">
              <a
                href={`/${locale}/search`}
                className="inline-flex items-center gap-2 rounded-xl border border-brand-200 bg-brand-50 px-6 py-2.5 text-sm font-semibold text-brand-700 transition hover:bg-brand-100"
              >
                {isFa ? "مشاهده همه →" : "See all →"}
              </a>
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </>
  );
}
