import React from 'react';
import { motion } from 'framer-motion';
import { Search, CheckCircle2, XCircle, Key, Trash2 } from 'lucide-react';
import { PaginationControls } from '../../components/PaginationControls';
import { useOutletContext } from 'react-router-dom';

export const Clients = () => {
  const {
    filteredClients,
    searchTerm,
    setSearchTerm,
    handleToggleStatus,
    navigate,
    setResetConfirmEmail,
    setDeleteConfirm,
    currentPage,
    setCurrentPage,
    paginate
  } = useOutletContext<any>();

  return (
    <motion.div
      key="clients"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="bg-white dark:bg-slate-900 rounded-[3rem] border border-slate-100 dark:border-slate-800 shadow-sm p-8"
    >
      <div className="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
        <h3 className="text-2xl font-black text-slate-900 dark:text-white">Gestion des Clients</h3>
        <div className="relative w-full md:w-96">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
          <input 
            type="text" 
            placeholder="Rechercher un client..." 
            aria-label="Rechercher un client"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-12 pr-4 py-3 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl focus:ring-2 focus:ring-blue-500 transition-all font-medium"
          />
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-left">
          <thead>
            <tr className="border-b border-slate-100 dark:border-slate-800">
              <th className="pb-4 px-4 text-xs font-bold text-slate-400 uppercase tracking-widest text-[10px]">Client / Entreprise</th>
              <th className="pb-4 px-4 text-xs font-bold text-slate-400 uppercase tracking-widest text-[10px]">Contact</th>
              <th className="pb-4 px-4 text-xs font-bold text-slate-400 uppercase tracking-widest text-[10px]">Localisation</th>
              <th className="pb-4 px-4 text-xs font-bold text-slate-400 uppercase tracking-widest text-[10px]">Plan</th>
              <th className="pb-4 px-4 text-xs font-bold text-slate-400 uppercase tracking-widest text-[10px]">Statut</th>
              <th className="pb-4 px-4 text-xs font-bold text-slate-400 uppercase tracking-widest text-[10px]">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
            {paginate(filteredClients).map((client: any) => (
              <tr key={client.id} className="group hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
                <td className="py-6 px-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center font-black text-blue-600">
                      {client.firstName?.[0]}{client.lastName?.[0]}
                    </div>
                    <div>
                      <p className="font-bold text-slate-900 dark:text-white text-sm">{client.firstName} {client.lastName}</p>
                      <p className="text-[10px] font-medium text-slate-500 uppercase tracking-tighter">{client.companyName || 'Individuel'}</p>
                    </div>
                  </div>
                </td>
                <td className="py-6 px-4">
                  <div className="space-y-1">
                    <p className="text-xs font-bold text-slate-700 dark:text-slate-300 flex items-center gap-1">
                      <span className="text-slate-400 italic font-medium">@</span> {client.email}
                    </p>
                    {client.phone && (
                      <p className="text-[10px] text-slate-500 font-medium">{client.phone}</p>
                    )}
                  </div>
                </td>
                <td className="py-6 px-4">
                  <p className="text-xs font-bold text-slate-600 dark:text-slate-400">
                    {client.city ? `${client.city}${client.country ? `, ${client.country}` : ''}` : 'Non renseigné'}
                  </p>
                </td>
                <td className="py-6 px-4">
                  <span className="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-lg text-xs font-bold">
                    {client.plan || 'N/A'}
                  </span>
                </td>
                <td className="py-6 px-4">
                  <div className={`flex items-center gap-2 text-xs font-bold ${
                    client.status === 'active' ? 'text-green-500' : 
                    client.status === 'suspended' ? 'text-red-500' : 'text-orange-500'
                  }`}>
                    <div className={`w-2 h-2 rounded-full ${
                      client.status === 'active' ? 'bg-green-500' : 
                      client.status === 'suspended' ? 'bg-red-500' : 'bg-orange-500'
                    }`}></div>
                    {client.status === 'active' ? 'Actif' : client.status === 'suspended' ? 'Suspendu' : 'Attente Démo'}
                  </div>
                </td>
                <td className="py-6 px-4">
                  <div className="flex items-center gap-2">
                    <button 
                      onClick={() => navigate(`/admin/clients/${client.id}`)}
                      className="px-4 py-2 bg-blue-50 dark:bg-blue-900/20 text-blue-600 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-blue-100 transition-all shadow-sm"
                    >
                      Détails
                    </button>
                    <button 
                      onClick={() => handleToggleStatus(client.id, client.status)}
                      className={`p-2 rounded-lg transition-colors border ${
                        client.status === 'active' 
                          ? 'text-red-500 border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20' 
                          : 'text-green-500 border-green-200 dark:border-green-800 hover:bg-green-50 dark:hover:bg-green-900/20'
                      }`}
                      title={client.status === 'active' ? "Suspendre le compte" : "Activer le compte"}
                    >
                      {client.status === 'active' ? <XCircle className="w-4 h-4" /> : <CheckCircle2 className="w-4 h-4" />}
                    </button>
                    <button 
                      onClick={() => setResetConfirmEmail(client.email)}
                      className="p-2 text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg transition-colors"
                      title="Réinitialiser Password"
                    >
                      <Key className="w-4 h-4" />
                    </button>
                    <button 
                      onClick={() => setDeleteConfirm({ id: client.id, type: 'client', label: `${client.firstName} ${client.lastName}` })}
                      className="p-2 text-slate-400 hover:text-red-600 rounded-lg transition-colors"
                      title="Supprimer Client"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <PaginationControls 
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        totalItems={filteredClients.length} 
      />
    </motion.div>
  );
};