import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'motion/react';
import { 
  ArrowLeft, Mail, CreditCard, ShieldCheck, AlertCircle, Save, Key, CheckCircle2, XCircle, Clock, MessageSquare
} from 'lucide-react';
import useSWR from 'swr';
import axios from 'axios';
import { postFetcher } from '../lib/fetcher';
import { useAuth } from '../contexts/AuthContext';

export const AdminClientDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const { isAdmin, loading: authLoading } = useAuth();
  
  const [isSaving, setIsSaving] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
  const [editData, setEditData] = useState<any>({});
  const [activeTab, setActiveTab] = useState('overview');
  const [orderFilter, setOrderFilter] = useState('all');
  const [selectedTicket, setSelectedTicket] = useState<any>(null);
  const [responseMessage, setResponseMessage] = useState('');
  const [isSendingResponse, setIsSendingResponse] = useState(false);

  useEffect(() => {
    if (!authLoading && !isAdmin) {
      navigate('/login');
    }
  }, [isAdmin, authLoading, navigate]);

  const { data: clients, mutate: mutateClient, isLoading: clientLoading } = useSWR(
    isAdmin && id ? ['/api/db/query', { collection: 'users', conditions: [{ field: 'email', op: '==', value: id }] }] : null, 
    postFetcher
  );
  const client = clients?.[0];

  useEffect(() => {
    if (client) setEditData(client);
  }, [client]);

  const { data: invoices, mutate: mutateInvoices } = useSWR(
    client?.email ? ['/api/db/query', { collection: 'invoices', conditions: [{ field: 'userId', op: '==', value: client.email }] }] : null,
    postFetcher
  );

  const { data: services, mutate: mutateServices } = useSWR(
    client?.email ? ['/api/db/query', { collection: 'services', conditions: [{ field: 'userId', op: '==', value: client.email }] }] : null,
    postFetcher
  );

  const { data: tickets, mutate: mutateTickets } = useSWR(
    client?.email ? ['/api/db/query', { collection: 'tickets', conditions: [{ field: 'userId', op: '==', value: client.email }] }] : null,
    postFetcher
  );

  const { data: demoRequests } = useSWR(
    client?.email ? ['/api/db/query', { collection: 'demo_requests', conditions: [{ field: 'email', op: '==', value: client.email }] }] : null,
    postFetcher
  );

  const loading = authLoading || clientLoading;

  const handleUpdateClient = async () => {
    if (!client?.email || !isAdmin) return;
    setIsSaving(true);
    try {
      await axios.patch('/api/db', { collection: 'users', id: client.email, data: editData });
      mutateClient([{...client, ...editData}]);
      setMessage({ type: 'success', text: "Profil mis à jour avec succès." });
    } catch (err) {
      console.error("Error updating client:", err);
      setMessage({ type: 'error', text: "Erreur lors de la mise à jour." });
    } finally {
      setIsSaving(false);
      setTimeout(() => setMessage(null), 3000);
    }
  };

  const handleSendResponse = async () => {
    if (!selectedTicket || !responseMessage.trim()) return;
    setIsSendingResponse(true);
    try {
      const newMessage = {
        sender: 'support',
        text: responseMessage.trim(),
        date: new Date().toISOString()
      };
      const updatedMessages = [...(selectedTicket.messages || []), newMessage];
      
      await axios.patch('/api/db', { 
        collection: 'tickets', 
        id: selectedTicket.id, 
        data: { messages: updatedMessages, status: 'Ouvert' } 
      });

      setSelectedTicket({ ...selectedTicket, messages: updatedMessages, status: 'Ouvert' });
      setResponseMessage('');
      mutateTickets();
    } catch (err: any) {
      console.error("Error sending response:", err);
      alert(`Erreur lors de l'envoi de la réponse: ${err.message || "Erreur inconnue"}`);
    } finally {
      setIsSendingResponse(false);
    }
  };

  const handleUpdateTicketStatus = async (ticketId: string, newStatus: string) => {
    try {
      await axios.patch('/api/db', { collection: 'tickets', id: ticketId, data: { status: newStatus } });
      mutateTickets();
      if (selectedTicket?.id === ticketId) {
        setSelectedTicket({ ...selectedTicket, status: newStatus });
      }
    } catch (err) {
      console.error("Error updating ticket status:", err);
      alert("Erreur lors de la mise à jour du statut du ticket.");
    }
  };

  const handleResetPassword = async () => {
    // Password reset via email is typically tied to Firebase Auth.
    // For our custom auth, we will mock this or handle it via a new API.
    setMessage({ type: 'success', text: "Email de réinitialisation envoyé (simulé)." });
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex items-center justify-center">
        <div className="w-12 h-12 border-4 border-blue-600/30 border-t-blue-600 rounded-full animate-spin" />
      </div>
    );
  }

  if (!client) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 pt-24 p-8 text-center font-bold">
        <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
        <h2 className="text-2xl text-slate-900 dark:text-white mb-4">Client Introuvable</h2>
        <button onClick={() => navigate('/admin/clients')} className="text-blue-600 hover:underline">Retour à la console</button>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 pb-12 pt-24 transition-colors duration-500 font-sans">
      {/* Sticky Header */}
      <div className="fixed top-0 left-0 right-0 z-40 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-100 dark:border-slate-800 p-4">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <button 
            onClick={() => navigate('/admin/clients')}
            className="flex items-center gap-2 text-slate-500 hover:text-blue-600 font-bold transition-colors"
          >
            <ArrowLeft className="w-5 h-5" /> Retour Clients
          </button>
          <div className="flex items-center gap-2">
            <ShieldCheck className="w-5 h-5 text-blue-600" />
            <span className="font-black text-slate-900 dark:text-white uppercase tracking-widest text-[10px]">Console de Gestion Client</span>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-3 gap-8">
          
          {/* Left Column: Client Summary & Edit */}
          <div className="lg:col-span-1 space-y-8">
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm"
            >
              <div className="text-center mb-8">
                <div className="w-24 h-24 bg-blue-100 dark:bg-blue-900/30 rounded-[2rem] flex items-center justify-center mx-auto mb-4 font-black text-4xl text-blue-600 border-4 border-white dark:border-slate-800 shadow-xl">
                  {client.firstName?.[0]}{client.lastName?.[0]}
                </div>
                <h2 className="text-2xl font-black text-slate-900 dark:text-white">{client.firstName} {client.lastName}</h2>
                <p className="text-slate-500 font-medium text-sm">{client.companyName || 'Individuel'}</p>
                <div className="mt-4 flex flex-col items-center gap-2">
                  <div className="flex justify-center gap-2">
                    <span className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
                      client.status === 'active' 
                        ? 'bg-green-100 dark:bg-green-900/30 text-green-600' 
                        : client.status === 'suspended'
                        ? 'bg-red-100 dark:bg-red-900/30 text-red-600'
                        : 'bg-orange-100 dark:bg-orange-900/30 text-orange-600'
                    }`}>
                      {client.status === 'active' ? 'Compte Actif' : client.status === 'suspended' ? 'Compte Suspendu' : 'En Attente'}
                    </span>
                    <span className="px-4 py-1.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 rounded-full text-[10px] font-black uppercase tracking-widest">
                      {client.plan || 'Gratuit'}
                    </span>
                  </div>
                  {client.createdAt && (
                     <p className="text-[10px] text-slate-400 font-bold uppercase mt-1">
                       Client depuis {new Date(client.createdAt.seconds * 1000).toLocaleDateString()}
                     </p>
                  )}
                </div>
              </div>

              <div className="space-y-6">
                <div>
                  <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Statut du Compte</label>
                  <select 
                    id="status"
                    value={editData.status || ''}
                    onChange={(e) => setEditData({ ...editData, status: e.target.value })}
                    className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-sm font-bold focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="active">Actif</option>
                    <option value="pending">En Attente</option>
                    <option value="suspended">Suspendu</option>
                  </select>
                </div>
                
                <div className="pt-2 flex flex-col gap-3">
                  <button 
                    onClick={handleUpdateClient}
                    disabled={isSaving}
                    className="w-full py-4 bg-blue-600 text-white rounded-2xl font-black flex items-center justify-center gap-2 hover:bg-blue-700 transition-all shadow-lg shadow-blue-600/20 disabled:opacity-50"
                  >
                    <Save className="w-5 h-5" /> Enregistrer les modifs
                  </button>
                  <button 
                    onClick={handleResetPassword}
                    className="w-full py-3 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white rounded-2xl font-black flex items-center justify-center gap-2 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all text-xs"
                  >
                    <Key className="w-4 h-4" /> Reset Password Email
                  </button>
                </div>
              </div>
            </motion.div>

            {message && (
              <motion.div 
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className={`p-4 rounded-2xl text-sm font-bold text-center flex items-center justify-center gap-2 ${
                  message.type === 'success' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
                }`}
                role="alert"
              >
                {message.type === 'success' ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5" />}
                {message.text}
              </motion.div>
            )}
          </div>

          {/* Right Column: Detail Tabs */}
          <div className="lg:col-span-2 space-y-6">
            
            {/* Tabs Navigation */}
            <div className="flex gap-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-3xl w-fit overflow-x-auto no-scrollbar">
              {[
                { id: 'overview', label: 'Aperçu', icon: ShieldCheck },
                { id: 'profile', label: 'Profil & Contact', icon: Mail },
                { id: 'transactions', label: 'Transactions', icon: CreditCard },
                { id: 'interactions', label: 'Historique & Échanges', icon: MessageSquare },
              ].map((tab) => {
                const Icon = tab.icon;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`flex items-center gap-2 px-6 py-3 rounded-2xl text-xs font-black uppercase tracking-widest transition-all whitespace-nowrap ${
                      activeTab === tab.id
                        ? 'bg-white dark:bg-slate-900 text-blue-600 shadow-sm'
                        : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
                    }`}
                  >
                    <Icon className="w-4 h-4" />
                    {tab.label}
                  </button>
                );
              })}
            </div>

            <AnimatePresence mode="wait">
              {activeTab === 'overview' && (
                <motion.div
                  key="overview"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="space-y-6"
                >
                  {/* Service / Application Settings */}
                  <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 flex items-center gap-3">
                      <ShieldCheck className="w-6 h-6 text-blue-600" /> Service & Limites
                    </h3>
                    {(services || []).length === 0 ? (
                      <div className="py-12 text-center text-slate-400 font-medium">Aucun service associé.</div>
                    ) : (
                      <div className="space-y-8">
                        {(services || []).map((svc: any) => (
                          <div key={svc.id} className="space-y-6">
                            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-slate-50 dark:bg-slate-800/50 p-6 rounded-2xl">
                              <div>
                                <p className="text-xs font-black text-slate-400 uppercase tracking-widest mb-1">Plan Actif</p>
                                <h4 className="text-2xl font-black text-blue-600">{svc.plan}</h4>
                              </div>
                              <div className="w-full md:w-1/2 flex gap-2 items-center">
                                <input
                                  type="url"
                                  value={svc.instance_link || ''}
                                  placeholder="Lien de l'instance..."
                                  onChange={e => {
                                    const updated = [...services];
                                    const index = updated.findIndex(s => s.id === svc.id);
                                    updated[index] = { ...updated[index], instance_link: e.target.value };
                                    mutateServices(updated, false);
                                  }}
                                  className="flex-1 p-3 bg-white dark:bg-slate-900 border-none rounded-xl text-sm font-bold focus:ring-2 focus:ring-blue-500 shadow-sm"
                                />
                                <button
                                  onClick={async () => {
                                    setIsSaving(true);
                                    try {
                                      await axios.patch('/api/db', {
                                        collection: 'services',
                                        id: svc.id,
                                        data: {
                                          instance_link: svc.instance_link || '',
                                          updatedAt: new Date().toISOString()
                                        }
                                      });
                                      setMessage({ type: 'success', text: "Lien enregistré" });
                                    } catch (err) {
                                      setMessage({ type: 'error', text: "Erreur lors de la sauvegarde" });
                                    } finally {
                                      setIsSaving(false);
                                      setTimeout(() => setMessage(null), 3000);
                                    }
                                  }}
                                  disabled={isSaving}
                                  className="p-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors disabled:opacity-50"
                                >
                                  <Save className="w-5 h-5" />
                                </button>
                              </div>
                            </div>

                            <div className="grid md:grid-cols-2 gap-6">
                              {[
                                { label: "Utilisateurs", current: svc.users_current || 0, limit: svc.users_limit || 0, color: "bg-blue-600" },
                                { label: "Groupes", current: svc.groups_current || 0, limit: svc.groups_limit || 0, color: "bg-purple-600" },
                                { label: "Contrats /mois", current: svc.contracts_current || 0, limit: svc.contracts_limit || 0, color: "bg-green-600" },
                                { label: "Rendez-vous /mois", current: svc.appointments_current || 0, limit: svc.appointments_limit || 0, color: "bg-orange-600" }
                              ].map((item, i) => {
                                const percentage = item.limit > 0 ? Math.min(100, Math.round((item.current / item.limit) * 100)) : 0;
                                return (
                                  <div key={i} className="bg-slate-50 dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800">
                                    <div className="flex items-center justify-between mb-4">
                                      <span className="text-sm font-bold text-slate-500 dark:text-slate-400">{item.label}</span>
                                      <div className="flex flex-col items-end">
                                          <span className="text-sm font-black">{item.current} / {item.limit}</span>
                                          <span className="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">SaaS Sync: {item.current}</span>
                                      </div>
                                    </div>
                                    <div className="h-2 w-full bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden">
                                      <div 
                                        className={`h-full ${item.color} rounded-full transition-all duration-1000`}
                                        style={{ width: `${percentage}%` }}
                                      />
                                    </div>
                                  </div>
                                );
                              })}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </motion.div>
              )}

              {activeTab === 'profile' && (
                <motion.div
                  key="profile"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="space-y-6"
                >
                  <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 uppercase tracking-tight">Informations de Contact</h3>
                    <div className="grid md:grid-cols-2 gap-6">
                      <div className="md:col-span-2">
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Email (Non modifiable)</label>
                        <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl text-slate-500 font-bold flex items-center gap-2">
                          <Mail className="w-4 h-4" /> {client.email}
                        </div>
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Prénom</label>
                        <input 
                          type="text" 
                          value={editData.firstName || ''}
                          onChange={(e) => setEditData({ ...editData, firstName: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Nom</label>
                        <input 
                          type="text" 
                          value={editData.lastName || ''}
                          onChange={(e) => setEditData({ ...editData, lastName: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Entreprise</label>
                        <input 
                          type="text" 
                          value={editData.companyName || ''}
                          onChange={(e) => setEditData({ ...editData, companyName: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Téléphone</label>
                        <input 
                          type="text" 
                          value={editData.phone || ''}
                          onChange={(e) => setEditData({ ...editData, phone: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 uppercase tracking-tight">Adresse & Localisation</h3>
                    <div className="grid md:grid-cols-2 gap-6">
                      <div className="md:col-span-2">
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Adresse</label>
                        <input 
                          type="text" 
                          value={editData.addressLine1 || ''}
                          onChange={(e) => setEditData({ ...editData, addressLine1: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500 mb-2"
                          placeholder="Ligne 1"
                        />
                        <input 
                          type="text" 
                          value={editData.addressLine2 || ''}
                          onChange={(e) => setEditData({ ...editData, addressLine2: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                          placeholder="Ligne 2 (Appartement, suite, etc.)"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Ville</label>
                        <input 
                          type="text" 
                          value={editData.city || ''}
                          onChange={(e) => setEditData({ ...editData, city: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Code Postal</label>
                        <input 
                          type="text" 
                          value={editData.postcode || ''}
                          onChange={(e) => setEditData({ ...editData, postcode: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Pays</label>
                        <input 
                          type="text" 
                          value={editData.country || ''}
                          onChange={(e) => setEditData({ ...editData, country: e.target.value })}
                          className="w-full p-4 bg-slate-50 dark:bg-slate-800 border-none rounded-2xl font-bold focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                    </div>
                  </div>
                </motion.div>
              )}

              {activeTab === 'transactions' && (
                <motion.div
                  key="transactions"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="space-y-6"
                >
                  <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <div className="flex items-center justify-between mb-8">
                      <h3 className="text-xl font-black text-slate-900 dark:text-white flex items-center gap-3">
                        <CreditCard className="w-6 h-6 text-blue-600" /> Historique d'Achat
                      </h3>
                      <select 
                        value={orderFilter}
                        onChange={(e) => setOrderFilter(e.target.value)}
                        className="p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-xs font-black uppercase tracking-widest focus:ring-2 focus:ring-blue-500"
                      >
                        <option value="all">Tous</option>
                        <option value="paid">Payé</option>
                        <option value="pending">En Attente</option>
                      </select>
                    </div>

                    {(invoices || []).filter((o: any) => orderFilter === 'all' || o.status?.toLowerCase() === orderFilter).length === 0 ? (
                      <div className="py-12 text-center text-slate-400 font-bold uppercase tracking-tight text-sm">
                        Aucune facture trouvée.
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {(invoices || [])
                          .filter((o: any) => orderFilter === 'all' || o.status?.toLowerCase() === orderFilter)
                          .map((invoice: any) => (
                            <div key={invoice.id} className="p-6 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border border-slate-100 dark:border-slate-800 flex items-center justify-between">
                              <div className="flex items-center gap-4">
                                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${
                                  invoice.status?.toLowerCase() === 'payée' || invoice.status?.toLowerCase() === 'paid' ? 'bg-green-100 text-green-600' : 'bg-orange-100 text-orange-600'
                                }`}>
                                  <CreditCard className="w-6 h-6" />
                                </div>
                                <div>
                                  <p className="font-black text-slate-900 dark:text-white">{invoice.plan}</p>
                                  <p className="text-xs text-slate-500 font-bold">
                                    ID: {invoice.number} • {invoice.createdAt ? new Date(invoice.createdAt.seconds * 1000).toLocaleDateString() : 'N/A'}
                                  </p>
                                </div>
                              </div>
                              <div className="text-right">
                                <p className="text-lg font-black text-slate-900 dark:text-white">{invoice.amount} €</p>
                                <span className={`text-[10px] font-black uppercase tracking-widest ${
                                  invoice.status?.toLowerCase() === 'payée' || invoice.status?.toLowerCase() === 'paid' ? 'text-green-500' : 'text-orange-500'
                                }`}>
                                  {invoice.status}
                                </span>
                              </div>
                            </div>
                          ))}
                      </div>
                    )}
                  </div>
                </motion.div>
              )}

              {activeTab === 'interactions' && (
                <motion.div
                  key="interactions"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="space-y-6"
                >
                  {/* Demo Requests */}
                  <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 flex items-center gap-3">
                       <ShieldCheck className="w-6 h-6 text-orange-500" /> Demandes de Démo
                    </h3>
                    {(demoRequests || []).length === 0 ? (
                      <div className="py-8 text-center text-slate-400 font-bold uppercase text-xs">Aucune demande.</div>
                    ) : (
                      <div className="grid gap-4">
                        {(demoRequests || []).map((demo: any) => (
                          <div key={demo.id} className="p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl flex items-center justify-between">
                            <div>
                               <p className="font-black text-sm">{demo.plan} Demo</p>
                               <p className="text-[10px] text-slate-400 font-bold uppercase">{demo.status} • {demo.createdAt ? new Date(demo.createdAt.seconds * 1000).toLocaleDateString() : 'N/A'}</p>
                            </div>
                            <span className="text-xs font-black text-slate-500">#{demo.id.slice(-6)}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  {/* Support Tickets */}
                  <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <div className="flex items-center justify-between mb-8">
                      <h3 className="text-xl font-black text-slate-900 dark:text-white flex items-center gap-3">
                        <MessageSquare className="w-6 h-6 text-purple-600" /> Support & Tickets
                      </h3>
                    </div>

                    {(tickets || []).length === 0 ? (
                      <div className="py-12 text-center text-slate-400 font-bold text-xs uppercase">Aucun ticket.</div>
                    ) : (
                      <div className="space-y-4">
                        {(tickets || []).map((ticket: any) => (
                          <div key={ticket.id} className="p-6 bg-slate-50 dark:bg-slate-800/50 rounded-[2rem] border border-slate-100 dark:border-slate-800 group hover:border-purple-200 dark:hover:border-purple-900 transition-all">
                            <div className="flex justify-between items-start mb-4">
                              <div>
                                <h4 className="font-black text-slate-900 dark:text-white text-lg">{ticket.title}</h4>
                                <div className="flex items-center gap-3 mt-1">
                                  <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{ticket.date}</span>
                                  <span className="w-1 h-1 bg-slate-300 rounded-full" />
                                  <span className="text-[10px] font-black text-purple-500 uppercase tracking-widest">Priorité: {ticket.priority}</span>
                                </div>
                              </div>
                              <span className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
                                ticket.status === 'Ouvert' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'
                              }`}>
                                {ticket.status}
                              </span>
                            </div>
                            <div className="flex items-center justify-between pt-4 border-t border-slate-200 dark:border-slate-700">
                               <select 
                                  value={ticket.status}
                                  onChange={(e) => handleUpdateTicketStatus(ticket.id, e.target.value)}
                                  className="bg-transparent text-[10px] font-black uppercase tracking-widest text-slate-500 border-none focus:ring-0 cursor-pointer"
                               >
                                  <option value="Ouvert text-slate-900">Passer à Ouvert</option>
                                  <option value="Résolu text-slate-900">Passer à Résolu</option>
                                  <option value="Fermé text-slate-900">Passer à Fermé</option>
                               </select>
                               <button 
                                onClick={() => setSelectedTicket(ticket)}
                                className="px-6 py-2.5 bg-white dark:bg-slate-900 text-blue-600 rounded-xl text-[10px] font-black uppercase tracking-widest border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all"
                              >
                                Répondre au Ticket
                              </button>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>
      {/* TICKET DETAIL MODAL */}
      <AnimatePresence>
        {selectedTicket && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            <motion.div 
              initial={{ opacity: 0 }} 
              animate={{ opacity: 1 }} 
              exit={{ opacity: 0 }} 
              onClick={() => setSelectedTicket(null)} 
              className="absolute inset-0 bg-slate-900/60 backdrop-blur-md" 
            />
            <motion.div 
              initial={{ opacity: 0, scale: 0.9, y: 20 }} 
              animate={{ opacity: 1, scale: 1, y: 0 }} 
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="relative w-full max-w-2xl bg-white dark:bg-slate-950 rounded-[3rem] shadow-2xl flex flex-col max-h-[85vh] border border-slate-100 dark:border-slate-800 overflow-hidden"
            >
              {/* Modal Header */}
              <div className="p-8 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-900/50">
                <div>
                  <h3 className="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tight">{selectedTicket.title}</h3>
                  <div className="flex items-center gap-4 mt-2">
                    <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">{selectedTicket.date}</span>
                    <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${
                      selectedTicket.status === 'Ouvert' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'
                    }`}>
                      {selectedTicket.status}
                    </span>
                  </div>
                </div>
                <button 
                  onClick={() => setSelectedTicket(null)}
                  className="p-3 bg-white dark:bg-slate-800 text-slate-400 hover:text-red-500 rounded-2xl transition-all shadow-sm"
                  aria-label="Fermer"
                >
                  <XCircle className="w-6 h-6" />
                </button>
              </div>

              {/* Chat History */}
              <div className="flex-1 overflow-y-auto p-8 space-y-6 bg-white dark:bg-slate-950">
                {selectedTicket.messages?.map((msg: any, idx: number) => (
                  <div key={idx} className={`flex ${msg.sender === 'support' ? 'justify-end' : 'justify-start'}`}>
                    <div className={`max-w-[80%] p-5 rounded-3xl ${
                      msg.sender === 'support' 
                        ? 'bg-blue-600 text-white rounded-tr-none' 
                        : 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white rounded-tl-none'
                    }`}>
                      <p className="text-sm font-bold leading-relaxed">{msg.text}</p>
                      <p className={`text-[10px] mt-2 opacity-50 font-black uppercase ${msg.sender === 'support' ? 'text-white' : 'text-slate-400'}`}>
                        {msg.sender === 'support' ? 'Support Agendivo' : `${client.firstName} ${client.lastName}`} • {new Date(msg.date).toLocaleTimeString()}
                      </p>
                    </div>
                  </div>
                ))}
              </div>

              {/* Response Input */}
              <div className="p-8 border-t border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 shadow-inner">
                <div className="relative group">
                  <textarea 
                    value={responseMessage}
                    onChange={(e) => setResponseMessage(e.target.value)}
                    placeholder="Tapez votre réponse ici..."
                    aria-label="Message de réponse"
                    className="w-full p-6 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-3xl text-sm font-bold focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all resize-none shadow-sm"
                    rows={3}
                  />
                  <button 
                    onClick={handleSendResponse}
                    disabled={isSendingResponse || !responseMessage.trim()}
                    className="absolute right-4 bottom-4 px-8 py-3 bg-blue-600 text-white rounded-2xl font-black text-sm hover:bg-blue-700 transition-all shadow-xl shadow-blue-600/20 disabled:opacity-50 flex items-center gap-2"
                  >
                    Envoyer <MessageSquare className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
};