"use client";

import { useState } from "react";
import { 
  FileText, 
  Download, 
  Upload, 
  User, 
  FileSignature, 
  Calendar, 
  Bell, 
  CheckCircle, 
  Clock, 
  AlertCircle,
  Home,
  Briefcase,
  CreditCard,
  Settings,
  LogOut,
  ChevronRight,
  Eye,
  Palmtree,
  Plus,
  X
} from "lucide-react";

export default function HubSalarieMockup() {
  const [activeTab, setActiveTab] = useState<'accueil' | 'contrats' | 'paie' | 'conges' | 'documents' | 'profil'>('accueil');

  // Données mockées
  const mockEmployee = {
    firstName: "Marie",
    lastName: "Dupont",
    email: "marie.dupont@example.com",
    numSecu: "2 85 03 75 123 456 78",
    address: "123 rue de la République, 75001 Paris",
    phone: "06 12 34 56 78"
  };

  const mockContracts = [
    {
      id: 1,
      type: "CDDU",
      title: "Festival d'été 2025",
      organization: "Théâtre National",
      startDate: "2025-07-01",
      endDate: "2025-07-31",
      status: "active",
      signedAt: "2025-06-15"
    },
    {
      id: 2,
      type: "CDDU",
      title: "Production Molière",
      organization: "Compagnie ABC",
      startDate: "2025-09-10",
      endDate: "2025-10-20",
      status: "signed",
      signedAt: "2025-08-28"
    },
    {
      id: 3,
      type: "CDDU",
      title: "Tournée régionale",
      organization: "Théâtre National",
      startDate: "2025-05-01",
      endDate: "2025-05-15",
      status: "completed",
      signedAt: "2025-04-10"
    }
  ];

  const mockPayslips = [
    { id: 1, month: "Octobre 2025", amount: "2 450,00", downloadUrl: "#", status: "available" },
    { id: 2, month: "Septembre 2025", amount: "2 680,00", downloadUrl: "#", status: "available" },
    { id: 3, month: "Août 2025", amount: "3 120,00", downloadUrl: "#", status: "available" },
    { id: 4, month: "Juillet 2025", amount: "2 890,00", downloadUrl: "#", status: "available" },
  ];

  const mockDocuments = [
    { id: 1, name: "Attestation Pôle Emploi - Octobre 2025.pdf", date: "2025-11-01", type: "Attestation", size: "245 KB" },
    { id: 2, name: "Certificat de travail - Tournée.pdf", date: "2025-05-16", type: "Certificat", size: "189 KB" },
    { id: 3, name: "RIB.pdf", date: "2025-01-10", type: "Bancaire", size: "78 KB" },
  ];

  const mockPendingSignatures = [
    {
      id: 1,
      title: "Contrat CDDU - Spectacle de Noël",
      organization: "Centre Culturel",
      dueDate: "2025-11-10",
      priority: "high"
    }
  ];

  const mockNotifications = [
    { id: 1, type: "success", message: "Votre fiche de paie d'octobre est disponible", date: "Il y a 2 heures" },
    { id: 2, type: "warning", message: "Un nouveau contrat attend votre signature", date: "Il y a 1 jour" },
    { id: 3, type: "info", message: "Pensez à mettre à jour votre RIB si nécessaire", date: "Il y a 3 jours" },
  ];

  // Données mockées pour les congés (RG uniquement)
  const mockCongesBalance = {
    congesPayes: { acquis: 25, pris: 12, solde: 13 },
    rtt: { acquis: 10, pris: 4, solde: 6 },
    congesSansSolde: { pris: 0 },
  };

  const mockCongesHistory = [
    {
      id: 1,
      type: "Congés payés",
      startDate: "2025-08-15",
      endDate: "2025-08-29",
      days: 10,
      status: "approved",
      approvedBy: "Marie Martin",
      approvedAt: "2025-07-20"
    },
    {
      id: 2,
      type: "RTT",
      startDate: "2025-10-10",
      endDate: "2025-10-10",
      days: 1,
      status: "approved",
      approvedBy: "Marie Martin",
      approvedAt: "2025-10-01"
    },
    {
      id: 3,
      type: "Congés payés",
      startDate: "2025-12-23",
      endDate: "2025-12-31",
      days: 5,
      status: "pending",
      approvedBy: null,
      approvedAt: null
    },
  ];

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">O</span>
              </div>
              <div>
                <h1 className="text-lg font-semibold text-slate-900">Espace Paie Salarié</h1>
                <p className="text-xs text-slate-500">MOCKUP - Interface de démonstration</p>
              </div>
            </div>
            <div className="flex items-center gap-4">
              <button className="relative p-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                <Bell className="w-5 h-5" />
                <span className="absolute top-1 right-1 w-2 h-2 bg-orange-500 rounded-full"></span>
              </button>
              <div className="flex items-center gap-3 pl-4 border-l border-slate-200">
                <div className="text-right">
                  <p className="text-sm font-medium text-slate-900">{mockEmployee.firstName} {mockEmployee.lastName}</p>
                  <p className="text-xs text-slate-500">Salarié</p>
                </div>
                <div className="w-9 h-9 bg-indigo-100 rounded-full flex items-center justify-center">
                  <User className="w-5 h-5 text-indigo-600" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Navigation Tabs */}
        <nav className="flex gap-2 mb-8 bg-white p-2 rounded-lg border border-slate-200">
          <button
            onClick={() => setActiveTab('accueil')}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all ${
              activeTab === 'accueil'
                ? 'bg-indigo-600 text-white'
                : 'text-slate-600 hover:bg-slate-100'
            }`}
          >
            <Home className="w-4 h-4" />
            Accueil
          </button>
          <button
            onClick={() => setActiveTab('contrats')}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all ${
              activeTab === 'contrats'
                ? 'bg-indigo-600 text-white'
                : 'text-slate-600 hover:bg-slate-100'
            }`}
          >
            <Briefcase className="w-4 h-4" />
            Mes Contrats
          </button>
          <button
            onClick={() => setActiveTab('paie')}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all ${
              activeTab === 'paie'
                ? 'bg-indigo-600 text-white'
                : 'text-slate-600 hover:bg-slate-100'
            }`}
          >
            <CreditCard className="w-4 h-4" />
            Mes Paies
          </button>
          <button
            onClick={() => setActiveTab('conges')}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all ${
              activeTab === 'conges'
                ? 'bg-indigo-600 text-white'
                : 'text-slate-600 hover:bg-slate-100'
            }`}
          >
            <Palmtree className="w-4 h-4" />
            Congés & RTT
          </button>
          <button
            onClick={() => setActiveTab('documents')}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all ${
              activeTab === 'documents'
                ? 'bg-indigo-600 text-white'
                : 'text-slate-600 hover:bg-slate-100'
            }`}
          >
            <FileText className="w-4 h-4" />
            Mes Documents
          </button>
          <button
            onClick={() => setActiveTab('profil')}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all ${
              activeTab === 'profil'
                ? 'bg-indigo-600 text-white'
                : 'text-slate-600 hover:bg-slate-100'
            }`}
          >
            <User className="w-4 h-4" />
            Mon Profil
          </button>
        </nav>

        {/* Content */}
        {activeTab === 'accueil' && (
          <div className="space-y-6">
            {/* Welcome Banner */}
            <div className="bg-gradient-to-r from-indigo-600 to-indigo-700 rounded-xl p-6 text-white">
              <h2 className="text-2xl font-bold mb-2">Bonjour {mockEmployee.firstName} !</h2>
              <p className="text-indigo-100">Bienvenue sur votre espace personnel. Gérez vos documents, contrats et informations en toute simplicité.</p>
            </div>

            {/* Pending Actions */}
            {mockPendingSignatures.length > 0 && (
              <div className="bg-orange-50 border border-orange-200 rounded-lg p-6">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-5 h-5 text-orange-600 mt-0.5" />
                  <div className="flex-1">
                    <h3 className="font-semibold text-orange-900 mb-3">Actions en attente</h3>
                    <div className="space-y-3">
                      {mockPendingSignatures.map(sig => (
                        <div key={sig.id} className="bg-white rounded-lg p-4 border border-orange-200">
                          <div className="flex items-center justify-between">
                            <div className="flex-1">
                              <p className="font-medium text-slate-900">{sig.title}</p>
                              <p className="text-sm text-slate-600 mt-1">{sig.organization}</p>
                              <p className="text-xs text-orange-600 mt-2">À signer avant le {new Date(sig.dueDate).toLocaleDateString('fr-FR')}</p>
                            </div>
                            <button className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors font-medium">
                              Signer
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Quick Stats */}
              <div className="lg:col-span-2 space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  <div className="bg-white rounded-lg border border-slate-200 p-6">
                    <div className="flex items-center justify-between mb-2">
                      <Briefcase className="w-8 h-8 text-indigo-600" />
                    </div>
                    <p className="text-3xl font-bold text-slate-900">3</p>
                    <p className="text-sm text-slate-600 mt-1">Contrats actifs</p>
                  </div>
                  <div className="bg-white rounded-lg border border-slate-200 p-6">
                    <div className="flex items-center justify-between mb-2">
                      <FileText className="w-8 h-8 text-green-600" />
                    </div>
                    <p className="text-3xl font-bold text-slate-900">24</p>
                    <p className="text-sm text-slate-600 mt-1">Fiches de paie</p>
                  </div>
                  <div className="bg-white rounded-lg border border-slate-200 p-6">
                    <div className="flex items-center justify-between mb-2">
                      <FileSignature className="w-8 h-8 text-orange-600" />
                    </div>
                    <p className="text-3xl font-bold text-slate-900">1</p>
                    <p className="text-sm text-slate-600 mt-1">À signer</p>
                  </div>
                </div>

                {/* Recent Payslips */}
                <div className="bg-white rounded-lg border border-slate-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold text-slate-900">Dernières fiches de paie</h3>
                    <button className="text-sm text-indigo-600 hover:text-indigo-700 font-medium">
                      Voir tout
                    </button>
                  </div>
                  <div className="space-y-3">
                    {mockPayslips.slice(0, 3).map(payslip => (
                      <div key={payslip.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                            <FileText className="w-5 h-5 text-green-600" />
                          </div>
                          <div>
                            <p className="font-medium text-slate-900">{payslip.month}</p>
                            <p className="text-sm text-slate-600">{payslip.amount} €</p>
                          </div>
                        </div>
                        <button className="p-2 text-slate-600 hover:bg-white rounded-lg transition-colors">
                          <Download className="w-5 h-5" />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Notifications */}
              <div className="bg-white rounded-lg border border-slate-200 p-6">
                <h3 className="text-lg font-semibold text-slate-900 mb-4">Notifications</h3>
                <div className="space-y-3">
                  {mockNotifications.map(notif => (
                    <div key={notif.id} className={`p-3 rounded-lg border ${
                      notif.type === 'success' ? 'bg-green-50 border-green-200' :
                      notif.type === 'warning' ? 'bg-orange-50 border-orange-200' :
                      'bg-blue-50 border-blue-200'
                    }`}>
                      <p className="text-sm font-medium text-slate-900">{notif.message}</p>
                      <p className="text-xs text-slate-600 mt-1">{notif.date}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'contrats' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold text-slate-900">Mes Contrats de Travail</h2>
              <div className="flex gap-2">
                <button className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors font-medium">
                  Filtrer
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-4">
              {mockContracts.map(contract => (
                <div key={contract.id} className="bg-white rounded-lg border border-slate-200 p-6 hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-3">
                        <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                          contract.status === 'active' ? 'bg-green-100 text-green-700' :
                          contract.status === 'signed' ? 'bg-blue-100 text-blue-700' :
                          'bg-slate-100 text-slate-700'
                        }`}>
                          {contract.status === 'active' ? 'En cours' :
                           contract.status === 'signed' ? 'Signé' :
                           'Terminé'}
                        </span>
                        <span className="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-medium">
                          {contract.type}
                        </span>
                      </div>
                      <h3 className="text-lg font-semibold text-slate-900 mb-2">{contract.title}</h3>
                      <p className="text-slate-600 mb-3">{contract.organization}</p>
                      <div className="flex items-center gap-6 text-sm text-slate-600">
                        <div className="flex items-center gap-2">
                          <Calendar className="w-4 h-4" />
                          <span>Du {new Date(contract.startDate).toLocaleDateString('fr-FR')} au {new Date(contract.endDate).toLocaleDateString('fr-FR')}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <CheckCircle className="w-4 h-4 text-green-600" />
                          <span>Signé le {new Date(contract.signedAt).toLocaleDateString('fr-FR')}</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                        <Eye className="w-5 h-5" />
                      </button>
                      <button className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                        <Download className="w-5 h-5" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {activeTab === 'paie' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold text-slate-900">Mes Fiches de Paie</h2>
              <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium flex items-center gap-2">
                <Download className="w-4 h-4" />
                Télécharger tout
              </button>
            </div>

            <div className="bg-white rounded-lg border border-slate-200">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-slate-50 border-b border-slate-200">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Période
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Montant Net
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Statut
                      </th>
                      <th className="px-6 py-3 text-right text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                    {mockPayslips.map(payslip => (
                      <tr key={payslip.id} className="hover:bg-slate-50 transition-colors">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                              <FileText className="w-5 h-5 text-green-600" />
                            </div>
                            <span className="font-medium text-slate-900">{payslip.month}</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="text-lg font-semibold text-slate-900">{payslip.amount} €</span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
                            Disponible
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right">
                          <div className="flex items-center justify-end gap-2">
                            <button className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                              <Eye className="w-5 h-5" />
                            </button>
                            <button className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                              <Download className="w-5 h-5" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'conges' && (
          <div className="space-y-6">
            {/* Header with info badge */}
            <div className="flex items-start justify-between">
              <div>
                <h2 className="text-2xl font-bold text-slate-900">Congés & RTT</h2>
                <p className="text-sm text-slate-600 mt-1">Gérez vos demandes de congés et consultez vos soldes</p>
              </div>
              <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-2">
                <p className="text-xs text-blue-700 font-medium">Réservé au Régime Général uniquement</p>
              </div>
            </div>

            {/* Soldes des congés */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-white rounded-lg border border-slate-200 p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-slate-900">Congés Payés</h3>
                  <Palmtree className="w-5 h-5 text-indigo-600" />
                </div>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-slate-600">Acquis</span>
                    <span className="text-lg font-bold text-slate-900">{mockCongesBalance.congesPayes.acquis} jours</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-slate-600">Pris</span>
                    <span className="text-lg font-semibold text-orange-600">{mockCongesBalance.congesPayes.pris} jours</span>
                  </div>
                  <div className="pt-3 border-t border-slate-200">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium text-slate-900">Solde</span>
                      <span className="text-2xl font-bold text-indigo-600">{mockCongesBalance.congesPayes.solde} jours</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-lg border border-slate-200 p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-slate-900">RTT</h3>
                  <Clock className="w-5 h-5 text-green-600" />
                </div>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-slate-600">Acquis</span>
                    <span className="text-lg font-bold text-slate-900">{mockCongesBalance.rtt.acquis} jours</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-slate-600">Pris</span>
                    <span className="text-lg font-semibold text-orange-600">{mockCongesBalance.rtt.pris} jours</span>
                  </div>
                  <div className="pt-3 border-t border-slate-200">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium text-slate-900">Solde</span>
                      <span className="text-2xl font-bold text-green-600">{mockCongesBalance.rtt.solde} jours</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-lg border border-slate-200 p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-slate-900">Congés sans solde</h3>
                  <Calendar className="w-5 h-5 text-slate-600" />
                </div>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-slate-600">Pris cette année</span>
                    <span className="text-lg font-bold text-slate-900">{mockCongesBalance.congesSansSolde.pris} jours</span>
                  </div>
                  <p className="text-xs text-slate-500 mt-4">Les congés sans solde sont soumis à validation de l'employeur</p>
                </div>
              </div>
            </div>

            {/* Nouvelle demande */}
            <div className="bg-white rounded-lg border border-slate-200 p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-900">Faire une nouvelle demande</h3>
                <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium flex items-center gap-2">
                  <Plus className="w-4 h-4" />
                  Nouvelle demande
                </button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Type de congé</label>
                  <select className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    <option>Congés payés</option>
                    <option>RTT</option>
                    <option>Congés sans solde</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Date de début</label>
                  <input 
                    type="date" 
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Date de fin</label>
                  <input 
                    type="date" 
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Nombre de jours</label>
                  <input 
                    type="number" 
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    placeholder="0"
                    disabled
                  />
                </div>
              </div>
              <div className="mt-4">
                <label className="block text-sm font-medium text-slate-700 mb-2">Commentaire (optionnel)</label>
                <textarea 
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  rows={3}
                  placeholder="Ajoutez un commentaire à votre demande..."
                />
              </div>
            </div>

            {/* Historique des demandes */}
            <div className="bg-white rounded-lg border border-slate-200">
              <div className="p-6 border-b border-slate-200">
                <h3 className="font-semibold text-slate-900">Historique des demandes</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-slate-50 border-b border-slate-200">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Type
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Période
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Durée
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Statut
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Validé par
                      </th>
                      <th className="px-6 py-3 text-right text-xs font-medium text-slate-600 uppercase tracking-wider">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                    {mockCongesHistory.map(conge => (
                      <tr key={conge.id} className="hover:bg-slate-50 transition-colors">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center gap-2">
                            {conge.type === 'Congés payés' ? (
                              <Palmtree className="w-4 h-4 text-indigo-600" />
                            ) : (
                              <Clock className="w-4 h-4 text-green-600" />
                            )}
                            <span className="font-medium text-slate-900">{conge.type}</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="text-sm text-slate-900">
                            {new Date(conge.startDate).toLocaleDateString('fr-FR')} - {new Date(conge.endDate).toLocaleDateString('fr-FR')}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="font-semibold text-slate-900">{conge.days} jour{conge.days > 1 ? 's' : ''}</span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                            conge.status === 'approved' ? 'bg-green-100 text-green-700' :
                            conge.status === 'pending' ? 'bg-orange-100 text-orange-700' :
                            'bg-red-100 text-red-700'
                          }`}>
                            {conge.status === 'approved' ? 'Validé' :
                             conge.status === 'pending' ? 'En attente' :
                             'Refusé'}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          {conge.approvedBy ? (
                            <div>
                              <p className="text-sm text-slate-900">{conge.approvedBy}</p>
                              <p className="text-xs text-slate-500">{conge.approvedAt && new Date(conge.approvedAt).toLocaleDateString('fr-FR')}</p>
                            </div>
                          ) : (
                            <span className="text-sm text-slate-500">-</span>
                          )}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right">
                          {conge.status === 'pending' && (
                            <button className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                              <X className="w-5 h-5" />
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'documents' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold text-slate-900">Mes Documents</h2>
              <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium flex items-center gap-2">
                <Upload className="w-4 h-4" />
                Charger un document
              </button>
            </div>

            {/* Upload Zone */}
            <div className="bg-white rounded-lg border-2 border-dashed border-slate-300 p-8 text-center hover:border-indigo-400 transition-colors cursor-pointer">
              <Upload className="w-12 h-12 text-slate-400 mx-auto mb-3" />
              <p className="text-slate-700 font-medium mb-1">Glissez vos documents ici</p>
              <p className="text-sm text-slate-500">ou cliquez pour sélectionner des fichiers</p>
              <p className="text-xs text-slate-400 mt-2">PDF, PNG, JPG jusqu'à 10 MB</p>
            </div>

            {/* Documents List */}
            <div className="bg-white rounded-lg border border-slate-200">
              <div className="p-6 border-b border-slate-200">
                <h3 className="font-semibold text-slate-900">Documents téléchargés</h3>
              </div>
              <div className="divide-y divide-slate-200">
                {mockDocuments.map(doc => (
                  <div key={doc.id} className="p-6 hover:bg-slate-50 transition-colors">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <div className="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center">
                          <FileText className="w-6 h-6 text-slate-600" />
                        </div>
                        <div>
                          <p className="font-medium text-slate-900">{doc.name}</p>
                          <div className="flex items-center gap-4 mt-1 text-sm text-slate-600">
                            <span>{doc.type}</span>
                            <span>{doc.size}</span>
                            <span>{new Date(doc.date).toLocaleDateString('fr-FR')}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <button className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                          <Eye className="w-5 h-5" />
                        </button>
                        <button className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                          <Download className="w-5 h-5" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'profil' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold text-slate-900">Mon Profil</h2>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Profile Photo */}
              <div className="bg-white rounded-lg border border-slate-200 p-6">
                <h3 className="font-semibold text-slate-900 mb-4">Photo de profil</h3>
                <div className="flex flex-col items-center">
                  <div className="w-32 h-32 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                    <User className="w-16 h-16 text-indigo-600" />
                  </div>
                  <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium text-sm">
                    Modifier la photo
                  </button>
                </div>
              </div>

              {/* Personal Info */}
              <div className="lg:col-span-2 bg-white rounded-lg border border-slate-200 p-6">
                <div className="flex items-center justify-between mb-6">
                  <h3 className="font-semibold text-slate-900">Informations personnelles</h3>
                  <button className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors font-medium text-sm">
                    Modifier
                  </button>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-600 mb-2">Prénom</label>
                    <p className="text-slate-900 font-medium">{mockEmployee.firstName}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-600 mb-2">Nom</label>
                    <p className="text-slate-900 font-medium">{mockEmployee.lastName}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-600 mb-2">Email</label>
                    <p className="text-slate-900 font-medium">{mockEmployee.email}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-600 mb-2">Téléphone</label>
                    <p className="text-slate-900 font-medium">{mockEmployee.phone}</p>
                  </div>
                  <div className="sm:col-span-2">
                    <label className="block text-sm font-medium text-slate-600 mb-2">Numéro de Sécurité Sociale</label>
                    <p className="text-slate-900 font-medium">{mockEmployee.numSecu}</p>
                  </div>
                  <div className="sm:col-span-2">
                    <label className="block text-sm font-medium text-slate-600 mb-2">Adresse</label>
                    <p className="text-slate-900 font-medium">{mockEmployee.address}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Banking Info */}
            <div className="bg-white rounded-lg border border-slate-200 p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="font-semibold text-slate-900">Informations bancaires</h3>
                <button className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors font-medium text-sm">
                  Modifier le RIB
                </button>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-slate-600 mb-2">IBAN</label>
                  <p className="text-slate-900 font-mono">FR76 1234 5678 9012 3456 7890 123</p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-600 mb-2">BIC</label>
                  <p className="text-slate-900 font-mono">BNPAFRPPXXX</p>
                </div>
              </div>
            </div>

            {/* Security */}
            <div className="bg-white rounded-lg border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-6">Sécurité</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
                  <div>
                    <p className="font-medium text-slate-900">Mot de passe</p>
                    <p className="text-sm text-slate-600 mt-1">Dernière modification il y a 3 mois</p>
                  </div>
                  <button className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors font-medium text-sm">
                    Modifier
                  </button>
                </div>
                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
                  <div>
                    <p className="font-medium text-slate-900">Authentification à deux facteurs</p>
                    <p className="text-sm text-slate-600 mt-1">Sécurisez votre compte avec 2FA</p>
                  </div>
                  <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium text-sm">
                    Activer
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <footer className="bg-white border-t border-slate-200 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center justify-between text-sm text-slate-600">
            <p>© 2025 Odentas - Espace Paie</p>
            <div className="flex gap-6">
              <a href="#" className="hover:text-slate-900 transition-colors">Aide</a>
              <a href="#" className="hover:text-slate-900 transition-colors">Confidentialité</a>
              <a href="#" className="hover:text-slate-900 transition-colors">CGU</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
