import type { Metadata } from "next";
import { Suspense } from "react";
import { serverApiBaseUrl } from "@/lib/api-url";
import { formatCompanyName, formatModelName } from "@/lib/vehicle-display";
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo";
import { VehicleModelsClient, type VehicleModel } from "./VehicleModelsClient";

type VehicleModelsPageProps = {
  params: Promise<{
    vehicleType: string;
    manufacturerSlug: string;
  }>;
  searchParams?: Promise<{
    packageType?: string;
    ev?: string;
    evOnly?: string;
  }>;
};

type VehicleModelsResponse = {
  models?: VehicleModel[];
  error?: string;
};

export async function generateMetadata({ params }: VehicleModelsPageProps): Promise<Metadata> {
  const { vehicleType, manufacturerSlug } = await params;
  const companyName = formatCompanyName(decodeURIComponent(manufacturerSlug));
  const vehicleLabel = vehicleType === "bike" ? "Bike" : "Car";

  return {
    title: `${companyName} ${vehicleLabel} Models`,
    description: `Select your ${companyName} ${vehicleLabel.toLowerCase()} model and fuel type for Ride N Revive doorstep service support.`,
    alternates: {
      canonical: `/vehicle-models/${vehicleType}/${manufacturerSlug}`,
    },
  };
}

export default async function VehicleModelsPage({ params, searchParams }: VehicleModelsPageProps) {
  const { vehicleType, manufacturerSlug } = await params;
  const resolvedSearchParams = await searchParams;
  const resolvedVehicleType = vehicleType === "bike" ? "bike" : "car";
  const initialEvOnly = resolvedSearchParams?.ev === "1" || resolvedSearchParams?.evOnly === "true";
  let initialModels: VehicleModel[] | undefined;
  let initialErrorMessage = "";

  try {
    const response = await fetch(
      `${serverApiBaseUrl}/api/vehicle-models?manufacturerSlug=${encodeURIComponent(
        decodeURIComponent(manufacturerSlug),
      )}&vehicleType=${resolvedVehicleType}${initialEvOnly ? "&evOnly=true" : ""}`,
      { cache: "no-store" },
    );
    const data = (await response.json().catch(() => ({}))) as VehicleModelsResponse;

    if (!response.ok) {
      throw new Error(data.error ?? "Could not load vehicle models");
    }

    initialModels = data.models ?? [];
  } catch (error) {
    initialErrorMessage = error instanceof Error ? error.message : "Could not load vehicle models";
  }

  return (
    <>
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Home", path: "/" },
          { name: "Services", path: "/services/" },
          {
            name: `${formatCompanyName(decodeURIComponent(manufacturerSlug))} ${resolvedVehicleType === "bike" ? "Bike" : "Car"} Models`,
            path: `/vehicle-models/${vehicleType}/${manufacturerSlug}/`,
          },
        ])}
      />
      <Suspense fallback={null}>
        <VehicleModelsClient
          vehicleType={resolvedVehicleType}
          manufacturerSlug={decodeURIComponent(manufacturerSlug)}
          packageType={resolvedSearchParams?.packageType ?? "service_package"}
          initialModels={initialModels}
          initialErrorMessage={initialErrorMessage}
          initialEvOnly={initialEvOnly}
        />
      </Suspense>
      {initialModels && initialModels.length > 0 ? (
        <section className="bg-white font-['Space_Grotesk']">
          <div className="mx-auto max-w-7xl px-4 pb-14 md:px-6 2xl:pb-20">
            <div className="border-t border-border pt-8">
              <h2 className="text-xl font-black tracking-tight text-foreground">
                Service pages for {formatCompanyName(decodeURIComponent(manufacturerSlug))} models
              </h2>
              <div className="mt-5 flex flex-wrap gap-2">
                {initialModels.slice(0, 36).map((model) => (
                  <a
                    key={model.id}
                    href={`/services/${resolvedVehicleType}-service/${encodeURIComponent(
                      manufacturerSlug,
                    )}/${encodeURIComponent(model.slug)}/`}
                    className="rounded-md border border-border bg-slate-50 px-3 py-2 text-sm font-bold text-muted-foreground transition hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
                  >
                    {formatModelName(model.slug, model.manufacturerName)}
                  </a>
                ))}
              </div>
            </div>
          </div>
        </section>
      ) : null}
    </>
  );
}