import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { loadVehicleCompanies } from "@/app/services/loadVehicleCompanies";
import type { Company } from "@/app/services/VehicleCompanyServiceClient";
import { JsonLd, breadcrumbJsonLd, serviceJsonLd } from "@/lib/seo";
import { EngineRepairClient } from "./EngineRepairClient";

export const metadata: Metadata = {
  title: "Engine Repair Companies",
  description:
    "Choose car or bike engine repair, select your vehicle company, and request doorstep engine support from Ride N Revive.",
  alternates: {
    canonical: "/services/engine-repair",
  },
  openGraph: {
    title: "Engine Repair Companies | Ride N Revive",
    description:
      "Browse supported car and bike companies for doorstep engine repair with Ride N Revive.",
    url: "/services/engine-repair",
  },
};

type EngineRepairPageProps = {
  searchParams?: Promise<{
    vehicleType?: string;
  }>;
};

function getInitialVehicleType(vehicleType?: string) {
  return vehicleType === "bike" ? "bike" : "car";
}

export async function renderEngineRepairPage(initialVehicleType: "car" | "bike" = "car") {
  let initialCarCompanies: Company[] | undefined;
  let initialBikeCompanies: Company[] | undefined;
  let initialErrorMessage = "";

  try {
    [initialCarCompanies, initialBikeCompanies] = await Promise.all([
      loadVehicleCompanies("car"),
      loadVehicleCompanies("bike"),
    ]);
  } catch (error) {
    initialErrorMessage =
      error instanceof Error ? error.message : "Could not load vehicle companies";
  }

  return (
    <>
      <JsonLd
        data={[
          serviceJsonLd({
            name: "Doorstep Engine Repair",
            description:
              "Choose car or bike engine repair, select your vehicle company, and request doorstep engine support from Ride N Revive.",
            path: "/services/engine-repair/",
            serviceType: "Engine repair",
          }),
          breadcrumbJsonLd([
            { name: "Home", path: "/" },
            { name: "Services", path: "/services/" },
            { name: "Engine Repair", path: "/services/engine-repair/" },
          ]),
        ]}
      />
      <Suspense fallback={null}>
        <EngineRepairClient
          initialCarCompanies={initialCarCompanies}
          initialBikeCompanies={initialBikeCompanies}
          initialVehicleType={initialVehicleType}
          initialErrorMessage={initialErrorMessage}
        />
      </Suspense>
    </>
  );
}

export default async function EngineRepairPage({ searchParams }: EngineRepairPageProps) {
  const resolvedSearchParams = await searchParams;
  const initialVehicleType = getInitialVehicleType(resolvedSearchParams?.vehicleType);

  if (resolvedSearchParams?.vehicleType === "bike" || resolvedSearchParams?.vehicleType === "car") {
    redirect(`/services/engine-repair/${initialVehicleType}`);
  }

  return renderEngineRepairPage(initialVehicleType);
}