import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { 
  ArrowUpRight, 
  Calendar, 
  DollarSign, 
  Users, 
  Clock,
} from "lucide-react";
import useDashboardStats from "@/hooks/useDashboardStats";
import { formatDistanceToNow } from "date-fns";
import { fr } from "date-fns/locale";

export default function ArtisanStats() {
  const { 
    totalQuotes, 
    acceptanceRate,
    totalProjects, 
    completedProjects,
    totalAppointments,
    pendingAppointments,
    totalRevenue,
    pendingRevenue,
    recentActivity,
    isLoading
  } = useDashboardStats();
  
  // Calculs pour l'affichage
  const acceptedQuotes = Math.round(totalQuotes * (acceptanceRate / 100));
  const pendingQuotes = totalQuotes - acceptedQuotes - 2; // Supposons 2 rejetés
  const rejectedQuotes = 2;
  const inProgressProjects = totalProjects - completedProjects;
  const completedAppointments = totalAppointments - pendingAppointments;
  
  if (isLoading) {
    return <div className="mt-8 text-foreground">Chargement des statistiques...</div>;
  }

  return (
    <div className="space-y-4 mt-8">
      <h2 className="text-xl font-bold text-foreground">Statistiques</h2>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="stats-card border border-border">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Devis</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold stats-value">{totalQuotes}</div>
            <p className="text-xs text-muted-foreground stats-pending">
              {pendingQuotes} en attente
            </p>
            <div className="mt-2 flex items-center gap-1">
              <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800">
                {acceptedQuotes} acceptés
              </Badge>
              <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800">
                {rejectedQuotes} refusés
              </Badge>
            </div>
          </CardContent>
        </Card>
        
        <Card className="stats-card border border-border">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Projets</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold stats-value">{totalProjects}</div>
            <p className="text-xs text-muted-foreground stats-pending">
              {inProgressProjects} en cours
            </p>
            <div className="mt-2">
              <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800">
                {completedProjects} terminés
              </Badge>
            </div>
          </CardContent>
        </Card>
        
        <Card className="stats-card border border-border">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Rendez-vous</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold stats-value">{totalAppointments}</div>
            <p className="text-xs text-muted-foreground stats-pending">
              {pendingAppointments} à venir
            </p>
            <div className="mt-2">
              <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800">
                {completedAppointments} terminés
              </Badge>
            </div>
          </CardContent>
        </Card>
        
        <Card className="stats-card border border-border">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Revenus</CardTitle>
            <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold stats-value">
              {totalRevenue.toLocaleString('fr-FR')} €
            </div>
            <p className="text-xs text-muted-foreground stats-pending">
              {pendingRevenue.toLocaleString('fr-FR')} € en attente
            </p>
            <div className="mt-2">
              <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800">
                {(pendingRevenue + totalRevenue).toLocaleString('fr-FR')} € potentiels
              </Badge>
            </div>
          </CardContent>
        </Card>
      </div>
      
      <Tabs defaultValue="overview" className="space-y-4">
        <TabsList className="bg-muted text-muted-foreground">
          <TabsTrigger value="overview">Vue d'ensemble</TabsTrigger>
          <TabsTrigger value="quotes">Devis</TabsTrigger>
          <TabsTrigger value="appointments">Rendez-vous</TabsTrigger>
          <TabsTrigger value="revenue">Revenus</TabsTrigger>
        </TabsList>
        
        <TabsContent value="overview">
          <Card className="stats-card border border-border">
            <CardHeader>
              <CardTitle>Activité récente</CardTitle>
            </CardHeader>
            <CardContent>
              {recentActivity && recentActivity.length > 0 ? (
                <div className="space-y-4">
                  {recentActivity.map((activity, index) => (
                    <div key={index} className="flex items-start gap-4 border-b pb-4 last:border-0 border-border">
                      <div className={`rounded-full p-2 
                        ${activity.type === 'message' ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300' : 
                          activity.type === 'project' ? 'bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300' : 
                          activity.type === 'quote' ? 'bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300' : 
                          'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300'}`}>
                        <Clock className="h-4 w-4" />
                      </div>
                      <div className="activity-text">
                        <p className="font-medium text-foreground">{activity.title}</p>
                        <p className="text-sm text-gray-500 dark:text-gray-300">
                          {formatDistanceToNow(activity.date, { addSuffix: true, locale: fr })}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 dark:text-gray-300">Aucune activité récente à afficher.</p>
              )}
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="quotes">
          <Card className="stats-card border border-border">
            <CardHeader>
              <CardTitle>Devis récents</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-500 dark:text-gray-300">Aucun devis récent à afficher.</p>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="appointments">
          <Card className="stats-card border border-border">
            <CardHeader>
              <CardTitle>Rendez-vous à venir</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-500 dark:text-gray-300">Aucun rendez-vous à venir à afficher.</p>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="revenue">
          <Card className="stats-card border border-border">
            <CardHeader>
              <CardTitle>Revenus récents</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-500 dark:text-gray-300">Aucun revenu récent à afficher.</p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}