"use client";

import { Suspense } from "react";
import { BalanceChart, TransactionTrends, BankingStatsCards } from "@/components/banking";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

function AnalyticsSkeleton() {
    return (
        <div className="space-y-6">
            {/* Stats cards skeleton */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {Array.from({ length: 4 }).map((_, i) => (
                    <Card key={i}>
                        <CardContent className="p-6">
                            <Skeleton className="h-20 w-full" />
                        </CardContent>
                    </Card>
                ))}
            </div>

            {/* Charts skeleton */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <Card>
                    <CardContent className="p-6">
                        <Skeleton className="h-80 w-full" />
                    </CardContent>
                </Card>
                <Card>
                    <CardContent className="p-6">
                        <Skeleton className="h-80 w-full" />
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}

export default function AnalyticsPage() {
    return (
        <div className="container mx-auto space-y-6 p-6">
            <div>
                <h1 className="text-3xl font-bold">Analyses Banking</h1>
                <p className="text-muted-foreground">
                    Tableaux de bord et analyses des performances bancaires
                </p>
            </div>

            <Suspense fallback={<AnalyticsSkeleton />}>
                <div className="space-y-6">
                    {/* Statistiques principales */}
                    <BankingStatsCards
                        accounts={[]}
                        transactions={[]}
                        timeRange="month"
                    />

                    {/* Graphiques d'analyse */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <BalanceChart
                            accounts={[]}
                        />
                        <TransactionTrends
                            transactions={[]}
                        />
                    </div>
                </div>
            </Suspense>
        </div>
    );
}