import { Suspense } from "react";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { OverviewMetrics } from "@/components/dashboard/overview-metrics";
import { RealTimeStats } from "@/components/dashboard/real-time-stats";
import { RealUserActivityChart } from "@/components/dashboard/charts/real-user-activity-chart";
import { DashboardUsersList } from "@/components/dashboard/dashboard-users-list";
import {
  Users,
  MessageSquare,
  CreditCard,
  BarChart3,
  TrendingUp,
  Activity,
} from "lucide-react";

export default function Dashboard() {
  return (
    <div className="space-y-6">
      {/* En-tête simplifié */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
          <TrendingUp className="h-8 w-8" />
          Vue d&apos;ensemble
        </h1>
        <p className="text-muted-foreground">
          Tableau de bord administrateur Cercle GPT
        </p>
      </div>

      {/* Métriques principales - maintenant avec tokens consommés */}
      <Suspense
        fallback={<div className="h-32 bg-muted animate-pulse rounded-lg" />}
      >
        <OverviewMetrics />
      </Suspense>

      {/* Graphiques en temps réel */}
      <div className="space-y-6">
        <h2 className="text-xl font-semibold flex items-center gap-2">
          <Activity className="h-5 w-5" />
          Statistiques en temps réel
        </h2>

        <Suspense
          fallback={<div className="h-64 bg-muted animate-pulse rounded-lg" />}
        >
          <RealTimeStats />
        </Suspense>
      </div>

      {/* Grille pour activité utilisateurs et top utilisateurs */}
      <div className="grid gap-6 md:grid-cols-2">
        {/* Activité des utilisateurs */}
        <Suspense
          fallback={
            <div className="h-64 bg-muted animate-pulse rounded-lg" />
          }
        >
          <RealUserActivityChart />
        </Suspense>

        {/* Top 5 utilisateurs - nouveau composant */}
        <Suspense
          fallback={
            <div className="h-64 bg-muted animate-pulse rounded-lg" />
          }
        >
          <DashboardUsersList />
        </Suspense>
      </div>

      {/* Actions rapides */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card className="hover:shadow-md transition-shadow border-l-4 border-l-blue-500">
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center">
                <Users className="h-4 w-4 mr-2 text-blue-600" />
                Utilisateurs
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <p className="text-sm text-muted-foreground mb-3">
                Gérer les comptes utilisateurs
              </p>
              <Link href="/users">
                <Button variant="outline" size="sm" className="w-full">
                  Voir les utilisateurs
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow border-l-4 border-l-green-500">
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center">
                <MessageSquare className="h-4 w-4 mr-2 text-green-600" />
                Conversations
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <p className="text-sm text-muted-foreground mb-3">
                Consulter les discussions
              </p>
              <Link href="/conversations">
                <Button variant="outline" size="sm" className="w-full">
                  Voir les conversations
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow border-l-4 border-l-purple-500">
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center">
                <CreditCard className="h-4 w-4 mr-2 text-purple-600" />
                Transactions
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <p className="text-sm text-muted-foreground mb-3">
                Historique des paiements
              </p>
              <Link href="/transactions">
                <Button variant="outline" size="sm" className="w-full">
                  Voir les transactions
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow border-l-4 border-l-orange-500">
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center">
                <BarChart3 className="h-4 w-4 mr-2 text-orange-600" />
                Analytics
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <p className="text-sm text-muted-foreground mb-3">
                Analyses détaillées
              </p>
              <Link href="/analytics">
                <Button variant="outline" size="sm" className="w-full">
                  Voir les analytics
                </Button>
              </Link>
            </CardContent>
          </Card>
      </div>
    </div>
  );
}