import type { Metadata } from "next";
import { Suspense } from "react";
import { EarningsClient } from "@/roles/admin/components/earnings/earnings-client";
import { earningsDataStore } from "@/features/payment/services/earnings.service";
import { Skeleton } from "@/components/ui/skeleton";

// export const metadata: Metadata = {
//   title: "Agent Earnings | Ameera Holidays Admin",
//   description:
//     "View and manage all agent earnings on Ameera Holidays platform. Track total earnings, monthly earnings, wallet balance, and withdrawal history for travel agents.",
//   openGraph: {
//     title: "Agent Earnings | Ameera Holidays Admin",
//     description:
//       "Comprehensive agent earnings dashboard with detailed financial reports and commission tracking.",
//     type: "website",
//     siteName: "Ameera Holidays",
//   },
//   twitter: {
//     card: "summary",
//     title: "Agent Earnings | Ameera Holidays Admin",
//     description:
//       "Comprehensive agent earnings dashboard with detailed financial reports and commission tracking.",
//   },
//   robots: {
//     index: false,
//     follow: false,
//   },
// };

function EarningsTableSkeleton() {
  return (
    <div className="space-y-6">
      {/* Summary cards skeleton */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-24 w-full" />
        ))}
      </div>
      {/* Search skeleton */}
      <div className="flex items-center justify-between">
        <Skeleton className="h-10 w-72" />
        <Skeleton className="h-10 w-24" />
      </div>
      {/* Table skeleton */}
      <Skeleton className="h-96 w-full" />
    </div>
  );
}

export default function AgentEarningPage() {
  const agentEarnings = earningsDataStore.getAgentEarnings();
  const summary = earningsDataStore.getTotalEarningsByType("agent");

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    name: "Agent Earnings Dashboard",
    description:
      "Administrative dashboard for managing agent earnings and commissions on Ameera Holidays platform.",
    isPartOf: {
      "@type": "WebSite",
      name: "Ameera Holidays Admin",
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <main className="space-y-6">
        <header>
          <h1 className="text-3xl font-bold tracking-tight">Agent Earnings</h1>
          <p className="text-muted-foreground mt-2">
            View earnings reports and commission details for all registered
            agents
          </p>
        </header>

        <Suspense fallback={<EarningsTableSkeleton />}>
          <EarningsClient
            data={agentEarnings}
            summary={summary}
            userType="agent"
          />
        </Suspense>
      </main>
    </>
  );
}