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";
import { useEffect, useState } from "react";
import { getArtisanApplications } from "@/services/projectService";
import { collection, query, where, orderBy, getDocs } from "firebase/firestore";
import { db } from "@/lib/firebase";
import useAuth from "@/hooks/useAuth";

export default function ArtisanStats() {
  const { 
    totalQuotes, 
    acceptanceRate,
    totalProjects, 
    completedProjects,
    totalAppointments,
    pendingAppointments,
    totalRevenue,
    pendingRevenue,
    recentActivity,
    isLoading
  } = useDashboardStats();
  
  const { userData, currentUser } = useAuth();
  const [recentQuotes, setRecentQuotes] = useState([]);
  const [recentAppointments, setRecentAppointments] = useState([]);
  const [recentPayments, setRecentPayments] = useState([]);
  const [loadingTabs, setLoadingTabs] = useState(true);
  const [errorTabs, setErrorTabs] = useState<string | null>(null);
  
  // 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;
  
  useEffect(() => {
    async function fetchTabData() {
      if (!currentUser) return;
      setLoadingTabs(true);
      setErrorTabs(null);
      try {
        // 1. Devis récents
        const quotes = await getArtisanApplications(currentUser.uid);
        setRecentQuotes(quotes.slice(0, 5));
        // 2. Rendez-vous à venir (sans orderBy pour éviter l'index)
        const appointmentsQuery = query(
          collection(db, "appointments"),
          where("artisanId", "==", currentUser.uid),
          where("status", "in", ["pending", "confirmed"])
        );
        const appointmentsSnap = await getDocs(appointmentsQuery);
        const appointments = [];
        appointmentsSnap.forEach(doc => {
          const data = doc.data();
          appointments.push({ id: doc.id, ...data });
        });
        // Tri côté client par startTime croissant
        appointments.sort((a, b) => {
          const dateA = a.startTime?.toDate?.() || new Date(a.startTime);
          const dateB = b.startTime?.toDate?.() || new Date(b.startTime);
          return dateA - dateB;
        });
        setRecentAppointments(appointments.slice(0, 5));
        // 3. Revenus récents (sans orderBy pour éviter l'index)
        const paymentsQuery = query(
          collection(db, "payments"),
          where("artisanId", "==", currentUser.uid)
        );
        const paymentsSnap = await getDocs(paymentsQuery);
        const payments = [];
        paymentsSnap.forEach(doc => {
          const data = doc.data();
          payments.push({ id: doc.id, ...data });
        });
        // Tri côté client par createdAt décroissant
        payments.sort((a, b) => {
          const dateA = a.createdAt?.toDate?.() || new Date(a.createdAt);
          const dateB = b.createdAt?.toDate?.() || new Date(b.createdAt);
          return dateB - dateA;
        });
        setRecentPayments(payments.slice(0, 5));
      } catch (err) {
        setErrorTabs("Erreur lors du chargement des données. Veuillez réessayer ou vérifier votre connexion.");
      } finally {
        setLoadingTabs(false);
      }
    }
    fetchTabData();
  }, [currentUser]);
  
  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>
              {loadingTabs ? (
                <p className="text-gray-500 dark:text-gray-300">Chargement...</p>
              ) : errorTabs ? (
                <p className="text-red-500 dark:text-red-400">{errorTabs}</p>
              ) : recentQuotes.length === 0 ? (
                <p className="text-gray-500 dark:text-gray-300">Aucun devis récent à afficher.</p>
              ) : (
                <ul className="space-y-2">
                  {recentQuotes.map((quote) => (
                    <li key={quote.id} className="border-b border-border pb-2 last:border-0">
                      <span className="font-medium">Projet :</span> {quote.projectId} <br />
                      <span className="font-medium">Statut :</span> {quote.status}
                      <br />
                      <span className="text-xs text-muted-foreground">{quote.createdAt?.toLocaleString?.('fr-FR') || ''}</span>
                    </li>
                  ))}
                </ul>
              )}
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="appointments">
          <Card className="stats-card border border-border">
            <CardHeader>
              <CardTitle>Rendez-vous à venir</CardTitle>
            </CardHeader>
            <CardContent>
              {loadingTabs ? (
                <p className="text-gray-500 dark:text-gray-300">Chargement...</p>
              ) : errorTabs ? (
                <p className="text-red-500 dark:text-red-400">{errorTabs}</p>
              ) : recentAppointments.length === 0 ? (
                <p className="text-gray-500 dark:text-gray-300">Aucun rendez-vous à venir à afficher.</p>
              ) : (
                <ul className="space-y-2">
                  {recentAppointments.map((appt) => (
                    <li key={appt.id} className="border-b border-border pb-2 last:border-0">
                      <span className="font-medium">Client :</span> {appt.clientName || appt.clientId} <br />
                      <span className="font-medium">Date :</span> {appt.startTime?.toDate?.().toLocaleString?.('fr-FR') || ''}
                      <br />
                      <span className="font-medium">Statut :</span> {appt.status}
                    </li>
                  ))}
                </ul>
              )}
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="revenue">
          <Card className="stats-card border border-border">
            <CardHeader>
              <CardTitle>Revenus récents</CardTitle>
            </CardHeader>
            <CardContent>
              {loadingTabs ? (
                <p className="text-gray-500 dark:text-gray-300">Chargement...</p>
              ) : errorTabs ? (
                <p className="text-red-500 dark:text-red-400">{errorTabs}</p>
              ) : recentPayments.length === 0 ? (
                <p className="text-gray-500 dark:text-gray-300">Aucun revenu récent à afficher.</p>
              ) : (
                <ul className="space-y-2">
                  {recentPayments.map((pay) => (
                    <li key={pay.id} className="border-b border-border pb-2 last:border-0">
                      <span className="font-medium">Montant :</span> {pay.amount} € <br />
                      <span className="font-medium">Statut :</span> {pay.status}
                      <br />
                      <span className="text-xs text-muted-foreground">{pay.createdAt?.toDate?.().toLocaleString?.('fr-FR') || ''}</span>
                    </li>
                  ))}
                </ul>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}