import type { Metadata } from "next";
import { Suspense } from "react";
import { serverApiBaseUrl } from "@/lib/api-url";
import { JsonLd, breadcrumbJsonLd, serviceJsonLd } from "@/lib/seo";
import { BikeCompaniesClient, type BikeCompany } from "./BikeCompaniesClient";

export const metadata: Metadata = {
  title: "Bike Service Companies",
  description:
    "Choose your bike company for doorstep bike service, maintenance, repairs, and support from Ride N Revive.",
  alternates: {
    canonical: "/services/bike-service",
  },
  openGraph: {
    title: "Bike Service Companies | Ride N Revive",
    description:
      "Browse supported bike companies and book doorstep bike service with Ride N Revive.",
    url: "/services/bike-service",
  },
};

type CompaniesResponse = {
  logos?: BikeCompany[];
  error?: string;
};

export default async function BikeServicePage() {
  let initialCompanies: BikeCompany[] | undefined;
  let initialErrorMessage = "";

  try {
    const response = await fetch(`${serverApiBaseUrl}/api/vehicle-logos?vehicleType=bike`, {
      cache: "no-store",
    });
    const data = (await response.json().catch(() => ({}))) as CompaniesResponse;

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

    initialCompanies = data.logos ?? [];
  } catch (error) {
    initialErrorMessage = error instanceof Error ? error.message : "Could not load bike companies";
  }

  return (
    <>
      <JsonLd
        data={[
          serviceJsonLd({
            name: "Doorstep Bike Service",
            description:
              "Choose your bike company for doorstep bike service, maintenance, repairs, and support from Ride N Revive.",
            path: "/services/bike-service/",
            serviceType: "Bike service",
          }),
          breadcrumbJsonLd([
            { name: "Home", path: "/" },
            { name: "Services", path: "/services/" },
            { name: "Bike Service", path: "/services/bike-service/" },
          ]),
        ]}
      />
      <Suspense fallback={null}>
        <BikeCompaniesClient
          initialCompanies={initialCompanies}
          initialErrorMessage={initialErrorMessage}
        />
      </Suspense>
    </>
  );
}