import { Suspense } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { UsageAnalytics } from "@/components/dashboard/usage-analytics";
import { RecentTransactions } from "@/components/dashboard/recent-transactions";

import { BarChart3 } from "lucide-react";

function AnalyticsSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 4 }).map((_, i) => (
        <Card key={i}>
          <CardContent className="p-6">
            <div className="animate-pulse space-y-2">
              <div className="h-4 bg-gray-200 rounded w-3/4"></div>
              <div className="h-8 bg-gray-200 rounded"></div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

export default function AnalyticsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
          <BarChart3 className="h-8 w-8" />
          Analytics détaillées
        </h1>
        <p className="text-muted-foreground">
          Analyses approfondies des performances et de l&apos;utilisation de
          Cercle GPT
        </p>
      </div>

      <Suspense fallback={<AnalyticsSkeleton />}>
        <div className="space-y-6">
          {/* Analytics des utilisateurs */}
          <UsageAnalytics />

          {/* Transactions récentes - toute la largeur */}
          <RecentTransactions />
        </div>
      </Suspense>
    </div>
  );
}