'use client'
import React, { useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { Users, Clock, CalendarCheck, School, TrendingUp, UserCheck } from 'lucide-react';
import Loader from '@/components/Loader';
import ClasseDetails from '@/components/ClasseDetails';
import { fetchClasses } from '@/app/lib/schoolAction';

// Composant StatCard pour afficher une statistique
const StatCard = ({ title, value, icon, change, color = "blue" }) => (
  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
    <div className="flex justify-between items-start">
      <div>
        <h3 className="text-gray-500 text-sm font-medium">{title}</h3>
        <p className="text-2xl font-semibold mt-1">{value}</p>
        {change && (
          <p className={`text-sm ${change > 0 ? 'text-green-500' : 'text-red-500'}`}>
            {change > 0 ? '+' : ''}{change}% depuis le mois dernier
          </p>
        )}
      </div>
      <div className={`p-3 rounded-full bg-${color}-100`}>
        {icon}
      </div>
    </div>
  </div>
);

// Composant EventCard pour afficher les événements
const EventCard = ({ title, date, description, type }) => (
  <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4">
    <div className="flex items-center gap-3">
      <CalendarCheck className="text-blue-500" size={20} />
      <div>
        <h4 className="font-medium">{title}</h4>
        <p className="text-sm text-gray-500">{date}</p>
        <p className="text-sm mt-1">{description}</p>
      </div>
    </div>
  </div>
);

export default function DashboardPage() {
  const t = useTranslations('dashboard');
  const [isLoading, setIsLoading] = useState(true);
  const [stats, setStats] = useState({
    totalStudents: 0,
    averageInscriptionTime: 0,
    reInscriptionRate: 0,
    structureCapacity: 0,
    upcomingEvents: [],
    monthlyStats: {
      inscriptions: [],
      completionRate: 0
    }
  });

  const [classes, setClasses] = useState([]);


  useEffect(() => {
    // Fetch data for classes
    fetchClasses().then(data => {
        setClasses(data);
      })
      .catch(error => {
        console.error('Error fetching classes:', error);
      });

    // Simulation de chargement des données
    setTimeout(() => {
      setStats({
        totalStudents: 245,
        averageInscriptionTime: 3.5,
        reInscriptionRate: 85,
        structureCapacity: 300,
        upcomingEvents: [
          {
            title: "Réunion de rentrée",
            date: "2024-09-01",
            description: "Présentation de l'année scolaire",
            type: "meeting"
          },
          {
            title: "Date limite inscriptions",
            date: "2024-08-15",
            description: "Clôture des inscriptions",
            type: "deadline"
          }
        ],
        monthlyStats: {
          inscriptions: [150, 180, 210, 245],
          completionRate: 78
        }
      });
      setIsLoading(false);
    }, 1000);
  }, []);

  if (isLoading) return <Loader />;

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-6">{t('dashboard')}</h1>

      {/* Statistiques principales */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard
          title={t('totalStudents')}
          value={stats.totalStudents}
          icon={<Users className="text-blue-500" size={24} />}
          change={12}
        />
        <StatCard
          title={t('averageInscriptionTime')}
          value={`${stats.averageInscriptionTime} jours`}
          icon={<Clock className="text-green-500" size={24} />}
          color="green"
        />
        <StatCard
          title={t('reInscriptionRate')}
          value={`${stats.reInscriptionRate}%`}
          icon={<UserCheck className="text-purple-500" size={24} />}
          color="purple"
        />
        <StatCard
          title={t('structureCapacity')}
          value={`${(stats.totalStudents/stats.structureCapacity * 100).toFixed(1)}%`}
          icon={<School className="text-orange-500" size={24} />}
          color="orange"
        />
      </div>

      {/* Événements et KPIs */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        {/* Graphique des inscriptions */}
        <div className="lg:col-span-2 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
          <h2 className="text-lg font-semibold mb-4">{t('inscriptionTrends')}</h2>
          {/* Insérer ici un composant de graphique */}
          <div className="h-64 bg-gray-50 rounded flex items-center justify-center">
            <TrendingUp size={48} className="text-gray-300" />
          </div>
        </div>

        {/* Événements à venir */}
        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
          <h2 className="text-lg font-semibold mb-4">{t('upcomingEvents')}</h2>
          {stats.upcomingEvents.map((event, index) => (
            <EventCard key={index} {...event} />
          ))}
        </div>
      </div>

      <div className="flex flex-wrap">
        {classes.map((classe) => (
          <div key={classe.id} className="lg:col-span-2 bg-white p-6 rounded-lg shadow-sm border border-gray-100 mr-4">
            <ClasseDetails classe={classe} />
          </div>
        ))}
      </div>
    </div>
  );
}