import { Suspense } from "react";
import { DollarSign, Users, FileText, Percent } from "lucide-react";
import { PageHeader } from "@/components/shared/PageHeader";
import { StatCard } from "@/components/shared/StatCard";
import { RevenueTrendChart } from "@/components/features/admin/RevenueTrendChart";
import { LogStream } from "@/components/features/admin/LogStream";
import { AdminClientsTable } from "@/components/features/admin/AdminClientsTable";
import {
  getPlatformOverview,
  getRevenueTrend,
  getRecentAuditLogs,
  getAdminClients,
} from "@/lib/queries/admin-queries";

// Re-use filter parser pattern — inline for admin client filters
function parseClientFilters(searchParams: Record<string, string | string[] | undefined>) {
  const plan = String(searchParams.plan ?? "all");
  const search = String(searchParams.search ?? "");
  return {
    plan: plan as "all" | "free" | "pro" | "enterprise",
    search: search || undefined,
  };
}

interface OverviewPageProps {
  searchParams: Record<string, string | string[] | undefined>;
}

export default async function AdminOverviewPage({
  searchParams,
}: OverviewPageProps) {
  const filters = parseClientFilters(searchParams);

  const [overview, revenue, logs, clients] = await Promise.all([
    getPlatformOverview(),
    getRevenueTrend(6),
    getRecentAuditLogs(10),
    getAdminClients({
      plan: filters.plan === "all" ? undefined : filters.plan,
      search: filters.search,
    }),
  ]);

  return (
    <>
      <PageHeader
        title="Platform Overview"
        actions={
          <span className="inline-flex items-center gap-1.5 rounded-full bg-success-bg px-3 py-1 text-[11.5px] font-bold text-success">
            ● All systems operational
          </span>
        }
      />

      <div className="flex-1 overflow-y-auto p-4 sm:p-[26px]">
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
          <StatCard
            label="MRR"
            value={overview.mrrFormatted}
            delta="↑ 9.2% MoM"
            deltaDirection="up"
            icon={<DollarSign className="h-4 w-4 text-success" />}
            iconClassName="bg-success/10"
          />
          <StatCard
            label="Active Clients"
            value={overview.activeClients.toLocaleString()}
            delta={`↑ ${overview.newClientsThisMonth} this month`}
            deltaDirection="up"
            icon={<Users className="h-4 w-4 text-primary" />}
            iconClassName="bg-primary/10"
          />
          <StatCard
            label="Total Surveys"
            value={overview.totalSurveys.toLocaleString()}
            delta={`↑ ${overview.newSurveysThisMonth} this month`}
            deltaDirection="up"
            icon={<FileText className="h-4 w-4 text-accent" />}
            iconClassName="bg-accent/10"
          />
          <StatCard
            label="Global Response Rate"
            value={`${overview.globalResponseRate.toFixed(1)}%`}
            icon={<Percent className="h-4 w-4 text-navy" />}
            iconClassName="bg-navy/10"
          />
        </div>

        <div className="mt-5 grid gap-4 lg:grid-cols-2">
          <div className="rounded-lg border border-border bg-card p-4 shadow sm:p-5">
            <h4 className="mb-3 text-sm font-bold text-navy">Revenue trend</h4>
            <RevenueTrendChart data={revenue} />
          </div>
          <div className="rounded-lg border border-border bg-card p-4 shadow sm:p-5">
            <h4 className="mb-3 text-sm font-bold text-navy">System log stream</h4>
            <LogStream logs={logs} />
          </div>
        </div>

        <div className="mt-6">
          <h4 className="mb-3 text-sm font-bold text-navy">Clients</h4>
          <Suspense fallback={null}>
            <AdminClientsTable clients={clients} />
          </Suspense>
        </div>
      </div>
    </>
  );
}