import type { Metadata } from "next";
import Link from "next/link";
import { MapPin } from "lucide-react";

import { BreadcrumbSection } from "@/components/BreadcrumbSection";
import { JsonLd, breadcrumbJsonLd, serviceJsonLd } from "@/lib/seo";
import { getLocationPages } from "@/lib/location-pages";
import { routePath } from "@/lib/route-url";

export const metadata: Metadata = {
  title: "Service Cities",
  description:
    "Browse Ride N Revive doorstep car and bike service locations and open city-specific service pages.",
  alternates: {
    canonical: "/cities",
  },
};

export default async function CitiesPage() {
  const locations = await getLocationPages();
  const popularLocations = locations.filter((location) => location.isPopular);

  return (
    <>
      <JsonLd
        data={[
          serviceJsonLd({
            name: "Ride N Revive service cities",
            description:
              "DB-backed city pages for Ride N Revive doorstep vehicle service locations.",
            path: "/cities/",
            serviceType: "Vehicle service locations",
          }),
          breadcrumbJsonLd([
            { name: "Home", path: "/" },
            { name: "Cities", path: "/cities/" },
          ]),
        ]}
      />
      <BreadcrumbSection
        currentPage="Cities"
        title="Doorstep vehicle service by city"
        lead="Choose a DB-backed service location to see car and bike service pages for that area."
      />

      <main className="bg-slate-50 font-['Space_Grotesk']">
        <section className="mx-auto max-w-7xl px-4 py-14 md:px-6 2xl:py-20">
          {locations.length === 0 ? (
            <EmptyLocations />
          ) : (
            <div className="space-y-10">
              {popularLocations.length > 0 ? (
                <LocationSection title="Popular locations" locations={popularLocations} />
              ) : null}
              <LocationSection title="All service locations" locations={locations} />
            </div>
          )}
        </section>
      </main>
    </>
  );
}

function LocationSection({
  title,
  locations,
}: {
  title: string;
  locations: Awaited<ReturnType<typeof getLocationPages>>;
}) {
  return (
    <section>
      <div className="flex items-end justify-between gap-4">
        <h2 className="text-2xl font-black tracking-tight text-foreground">{title}</h2>
        {title === "Popular locations" ? (
          <Link
            href={routePath("/cities/popular")}
            className="text-sm font-black text-primary hover:underline"
          >
            View popular
          </Link>
        ) : null}
      </div>
      <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {locations.map((location) => (
          <Link
            key={location.id}
            href={routePath(`/cities/${location.slug}`)}
            className="group rounded-lg border border-border bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-primary/35 hover:shadow-md"
          >
            <span className="flex items-start gap-3">
              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
                <MapPin className="h-5 w-5" />
              </span>
              <span>
                <span className="block text-lg font-black text-foreground group-hover:text-primary">
                  {location.name}
                </span>
                <span className="mt-1 block text-sm font-semibold text-muted-foreground">
                  Doorstep car and bike service
                </span>
              </span>
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}

function EmptyLocations() {
  return (
    <div className="rounded-lg border border-dashed border-border bg-white p-10 text-center">
      <p className="text-lg font-black text-foreground">No active service locations found</p>
      <p className="mt-2 text-sm font-semibold text-muted-foreground">
        Add active locations in the DB/admin panel and they will appear here automatically.
      </p>
    </div>
  );
}