import type { Metadata } from "next";
import { Suspense } from "react";
import { generatePageMetadata, generateJsonLd } from "@/lib/seo/metadata";
import { LegalPageEditor } from "@/roles/admin/components/legal/legal-page-editor";
import { Skeleton } from "@/components/ui/skeleton";

export const metadata: Metadata = generatePageMetadata({
  title: "Refund Policy",
  description:
    "Manage refund policy for Ameera Holidays platform. Edit meta information and content.",
  path: "/admin/user-refund-policy",
  noIndex: true,
});

function EditorLoading() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-4 w-96" />
      </div>
      <Skeleton className="h-64 w-full rounded-xl" />
      <Skeleton className="h-96 w-full rounded-xl" />
    </div>
  );
}

export default function UserRefundPolicyPage() {
  const jsonLd = generateJsonLd({
    "@type": "WebPage",
    name: "Refund Policy Management | Ameera Holidays Admin",
    description: "Administrative interface for managing user refund policy.",
  });

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={jsonLd} />
      <main>
        <Suspense fallback={<EditorLoading />}>
          <LegalPageEditor
            slug="user-refund-policy"
            title="Refund Policy"
            description="Manage the refund policy for cancelled bookings and services."
          />
        </Suspense>
      </main>
    </>
  );
}