src/app/admin/stats/page.tsx

export const dynamic = 'force-dynamic';

import { getPlatformStats } from "@/lib/actions/admin";
import { StatCard } from "@/components/admin/StatCard";
import { Users, Package, Coins as CoinsIcon, AlertTriangle, BarChart3 } from "lucide-react"; // Renamed Coins to CoinsIcon
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

export default async function AdminStatsPage() {
  const statsResult = await getPlatformStats();

  if (!statsResult.success || !statsResult.stats) {
    return (
      <div className="space-y-8">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
            <BarChart3 className="mr-3 h-8 w-8 text-primary" /> Platform Statistics
          </h1>
        </div>
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertTitle>Error Fetching Stats</AlertTitle>
          <AlertDescription>
            {statsResult.message || "Could not load platform statistics. Please try again later."}
          </AlertDescription>
        </Alert>
      </div>
    );
  }

  const { totalUsers, totalDeployments, totalCoinsInSystem } = statsResult.stats;

  return (
    <div className="space-y-8">
       <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
            <BarChart3 className="mr-3 h-8 w-8 text-primary" /> Platform Statistics
          </h1>
          <p className="text-muted-foreground">Overview of platform activity and usage.</p>
        </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <StatCard title="Total Users" value={totalUsers.toLocaleString()} icon={Users} description="Total number of registered users." />
        <StatCard title="Total Deployments" value={totalDeployments.toLocaleString()} icon={Package} description="Total number of deployments created." />
        <StatCard title="Total Coins in System" value={totalCoinsInSystem.toLocaleString()} icon={CoinsIcon} description="Sum of all user coin balances." />
      </div>

      <Separator />

      {/* Placeholder for charts */}
      <Card className="shadow-lg">
        <CardHeader>
          <CardTitle className="flex items-center text-xl">
            <BarChart3 className="mr-2 h-5 w-5 text-accent" />
            Usage Trends
          </CardTitle>
          <CardDescription>Visual charts showing platform growth (feature coming soon).</CardDescription>
        </CardHeader>
        <CardContent>
          <Alert>
            <BarChart3 className="h-4 w-4" />
            <AlertTitle>Charts Coming Soon!</AlertTitle>
            <AlertDescription>
              Detailed charts for user registration trends, deployment activity, and more will be available here in a future update.
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    </div>
  );
}