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

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

const CITY_DISPLAY: Record<string, { fa: string; en: string }> = {
  tehran:     { fa: "تهران",   en: "Tehran" },
  isfahan:    { fa: "اصفهان",  en: "Isfahan" },
  mashhad:    { fa: "مشهد",    en: "Mashhad" },
  shiraz:     { fa: "شیراز",   en: "Shiraz" },
  tabriz:     { fa: "تبریز",   en: "Tabriz" },
  karaj:      { fa: "کرج",     en: "Karaj" },
  rasht:      { fa: "رشت",     en: "Rasht" },
  ahvaz:      { fa: "اهواز",   en: "Ahvaz" },
  qom:        { fa: "قم",      en: "Qom" },
  kermanshah: { fa: "کرمانشاه", en: "Kermanshah" },
};

export async function generateStaticParams() {
  return Object.keys(CITY_DISPLAY).flatMap((city) => [
    { locale: "fa", city },
    { locale: "en", city },
  ]);
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string; city: string }>;
}): Promise<Metadata> {
  const { locale, city } = await params;
  const t = await getTranslations({ locale, namespace: "city" });
  const displayName = CITY_DISPLAY[city]?.[locale as "fa" | "en"] ?? city;
  return {
    title: t("cafesIn", { city: displayName }),
    description: t("description", { city: displayName }),
    alternates: {
      canonical: `${BASE}/${locale}/city/${city}`,
      languages: {
        fa: `${BASE}/fa/city/${city}`,
        en: `${BASE}/en/city/${city}`,
      },
    },
  };
}

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

  const displayName = CITY_DISPLAY[city]?.[locale as "fa" | "en"] ?? city;
  const cityApiParam = CITY_DISPLAY[city]?.[isFa ? "fa" : "en"] ?? city;

  const cafes = await discoverCafes({ city: cityApiParam, sort: "rating" });

  return (
    <>
      <Navbar />
      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
        {/* City header */}
        <div className="mb-8">
          <div className="flex items-center gap-2 text-sm text-gray-400">
            <a href={`/${locale}`} className="hover:text-brand-700">{isFa ? "خانه" : "Home"}</a>
            <span>/</span>
            <span>{displayName}</span>
          </div>
          <h1 className="mt-2 flex items-center gap-2 text-2xl font-extrabold text-gray-900 sm:text-3xl">
            <MapPin className="h-6 w-6 text-brand-600" />
            {t("cafesIn", { city: displayName })}
          </h1>
          <p className="mt-1 text-sm text-gray-500">
            {cafes.length} {isFa ? "مکان یافت شد" : "places found"}
          </p>
        </div>

        {/* Search in city */}
        <div className="mb-8">
          <AiSearchBar initialCity={cityApiParam} />
        </div>

        {cafes.length === 0 ? (
          <div className="rounded-2xl border border-dashed border-gray-200 py-20 text-center text-gray-400">
            <p className="text-sm">
              {isFa ? "هنوز کافه‌ای در این شهر ثبت نشده" : "No cafes registered in this city yet"}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {cafes.map((cafe) => (
              <CafeCard
                key={cafe.id}
                cafe={cafe}
                locale={locale}
                href={`/${locale}/cafe/${cafe.slug}`}
              />
            ))}
          </div>
        )}
      </main>
      <Footer />
    </>
  );
}
