import type { Metadata } from "next";
import { Suspense } from "react";
import { generatePageMetadata, generateJsonLd } from "@/lib/seo/metadata";
import { CitiesClient } from "@/roles/admin/components/cities/cities-client";
import { Skeleton } from "@/components/ui/skeleton";
import { getCitiesAction } from "@/features/locations/actions/cities-actions";
import { getStatesAction } from "@/features/locations/actions/states-actions";

export const metadata: Metadata = generatePageMetadata({
  title: "Cities",
  description:
    "Manage cities for the Ameera Holidays platform. Add, edit, activate, deactivate, or delete cities to control your platform coverage.",
  path: "/admin/cities",
  noIndex: true,
});

function CitiesLoading() {
  return (
    <div className="admin-section space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-32" />
          <Skeleton className="h-4 w-64" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>
      <div className="space-y-4">
        <Skeleton className="h-10 w-72" />
        <Skeleton className="h-96 w-full rounded-xl" />
      </div>
    </div>
  );
}

export default async function CitiesPage() {
  const initialCitiesSearch = "";
  const initialCitiesPage = 1;
  const initialStatesSearch = "";
  const initialStatesPage = 1;

  const [initialCitiesResult, initialStatesResult] = await Promise.all([
    getCitiesAction(initialCitiesSearch, initialCitiesPage),
    getStatesAction(initialStatesSearch, initialStatesPage),
  ]);

  const jsonLd = generateJsonLd({
    "@type": "WebPage",
    name: "Cities Management | Ameera Holidays Admin",
    description:
      "Administrative interface for managing cities in the Ameera Holidays platform.",
  });

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={jsonLd} />
      <main>
        <Suspense fallback={<CitiesLoading />}>
          <CitiesClient
            initialCitiesData={
              initialCitiesResult.success ? initialCitiesResult.data : undefined
            }
            initialStatesData={
              initialStatesResult.success ? initialStatesResult.data : undefined
            }
            initialCitiesSearch={initialCitiesSearch}
            initialCitiesPage={initialCitiesPage}
            initialStatesSearch={initialStatesSearch}
            initialStatesPage={initialStatesPage}
          />
        </Suspense>
      </main>
    </>
  );
}