import { ActivityFeed } from "./_components/activity-feed";
import { AttentionQueues } from "./_components/attention-queues";
import { CustomerBreakdown } from "./_components/customer-breakdown";
import { DashboardUnavailable } from "./_components/dashboard-unavailable";
import { MetricCards } from "./_components/metric-cards";
import { PerformanceOverview } from "./_components/performance-overview";
import { SubscriberOverview } from "./_components/subscriber-overview";
import { fetchAdminDashboardOverview } from "./_lib/admin-dashboard-overview";
import { parseAdminDashboardRange } from "./_lib/admin-dashboard-types";

export const dynamic = "force-dynamic";

type PageProps = {
  searchParams: Promise<Record<string, string | undefined>>;
};

export default async function Page({ searchParams }: PageProps) {
  const query = await searchParams;
  const range = parseAdminDashboardRange(query.range);
  const { overview, errorMessage } = await fetchAdminDashboardOverview(range);

  if (!overview) {
    return (
      <div className="@container/main flex flex-col gap-4 md:gap-6">
        <DashboardUnavailable message={errorMessage} />
      </div>
    );
  }

  return (
    <div className="@container/main flex flex-col gap-4 md:gap-6">
      <MetricCards kpis={overview.kpis} range={overview.range} />
      <PerformanceOverview series={overview.series} range={overview.range} />

      <CustomerBreakdown breakdowns={overview.breakdowns} />

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="flex flex-col gap-4 xl:col-span-2">
          <AttentionQueues
            pendingCustomers={overview.queues.pendingCustomers}
            recentOrdersNeedingAttention={overview.queues.recentOrdersNeedingAttention}
          />
          <SubscriberOverview
            totalCustomers={overview.kpis.customersTotal}
            recentCustomers={overview.recentCustomers}
          />
        </div>
        <ActivityFeed activity={overview.activity} />
      </div>
    </div>
  );
}