import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Calendar, Activity, Mail, Shield, X, Check, XCircle, Globe, Filter, Clock, CheckCircle2 } from 'lucide-react';
import { PaginationControls } from '../../components/PaginationControls';
import { useOutletContext } from 'react-router-dom';
import axios from 'axios';

type ModalState = 
  | { type: 'approve'; demoId: string; companyName: string }
  | { type: 'reject'; demoId: string; companyName: string }
  | null;

export const Demos = () => {
  const { demos, paginate, currentPage, setCurrentPage } = useOutletContext<any>();
  const [processingId, setProcessingId] = useState<string | null>(null);
  const [modal, setModal] = useState<ModalState>(null);
  const [instanceUrl, setInstanceUrl] = useState('');
  const [rejectReason, setRejectReason] = useState('');
  const [activeFilter, setActiveFilter] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all');

  const filteredDemos = activeFilter === 'all'
    ? demos
    : demos.filter((d: any) => {
        if (activeFilter === 'pending') return !d.status || d.status === 'pending';
        return d.status === activeFilter;
      });

  const handleApprove = async () => {
    if (!modal || modal.type !== 'approve') return;
    try {
      setProcessingId(modal.demoId);
      await axios.post('/api/admin/approve-trial', { 
        demoId: modal.demoId,
        instanceUrl: instanceUrl.trim() || undefined
      });
      setModal(null);
      setInstanceUrl('');
      window.location.reload();
    } catch (error: any) {
      console.error("Failed to approve trial:", error);
      alert(error.response?.data?.error || "Erreur lors de l'approbation.");
    } finally {
      setProcessingId(null);
    }
  };

  const handleReject = async () => {
    if (!modal || modal.type !== 'reject') return;
    try {
      setProcessingId(modal.demoId);
      await axios.post('/api/admin/reject-trial', { 
        demoId: modal.demoId,
        reason: rejectReason.trim() || undefined
      });
      setModal(null);
      setRejectReason('');
      window.location.reload();
    } catch (error: any) {
      console.error("Failed to reject trial:", error);
      alert(error.response?.data?.error || "Erreur lors du rejet.");
    } finally {
      setProcessingId(null);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'approved':
        return (
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full text-[10px] font-black uppercase tracking-widest">
            <CheckCircle2 className="w-3 h-3" /> Approuvé
          </span>
        );
      case 'rejected':
        return (
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full text-[10px] font-black uppercase tracking-widest">
            <XCircle className="w-3 h-3" /> Rejeté
          </span>
        );
      default:
        return (
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-[10px] font-black uppercase tracking-widest">
            <Clock className="w-3 h-3" /> En attente
          </span>
        );
    }
  };

  const filterTabs = [
    { key: 'all' as const, label: 'Tous', count: demos.length },
    { key: 'pending' as const, label: 'En attente', count: demos.filter((d: any) => !d.status || d.status === 'pending').length },
    { key: 'approved' as const, label: 'Approuvés', count: demos.filter((d: any) => d.status === 'approved').length },
    { key: 'rejected' as const, label: 'Rejetés', count: demos.filter((d: any) => d.status === 'rejected').length },
  ];

  const isPending = (demo: any) => !demo.status || demo.status === 'pending';

  return (
    <>
      <motion.div
        key="demos"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="space-y-8"
      >
        {/* Filter Tabs */}
        <div className="flex items-center gap-2 flex-wrap">
          <Filter className="w-4 h-4 text-slate-400" />
          {filterTabs.map(tab => (
            <button
              key={tab.key}
              onClick={() => { setActiveFilter(tab.key); setCurrentPage(1); }}
              className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${
                activeFilter === tab.key
                  ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20'
                  : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-700 hover:border-blue-300'
              }`}
            >
              {tab.label} <span className="ml-1 opacity-70">({tab.count})</span>
            </button>
          ))}
        </div>

        <div className="grid lg:grid-cols-2 gap-8">
          {filteredDemos.length === 0 ? (
            <div className="col-span-full h-96 bg-white dark:bg-slate-900 rounded-[3rem] border border-dashed border-slate-200 dark:border-slate-800 flex flex-col items-center justify-center text-slate-400">
              <Calendar className="w-12 h-12 mb-4 opacity-50" />
              <p className="font-bold">Aucune demande de démo {activeFilter !== 'all' ? `(${filterTabs.find(t => t.key === activeFilter)?.label.toLowerCase()})` : ''}.</p>
            </div>
          ) : paginate(filteredDemos).map((demo: any) => (
            <div key={demo.id} className="bg-white dark:bg-slate-900 p-8 rounded-[3rem] border border-slate-100 dark:border-slate-800 shadow-sm relative overflow-hidden flex flex-col justify-between">
              <div className="absolute top-0 right-0 p-6">
                {getStatusBadge(demo.status)}
              </div>
              
              <div>
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center text-blue-600">
                    <Activity className="w-8 h-8" />
                  </div>
                  <div>
                    <h4 className="text-xl font-black text-slate-900 dark:text-white">{demo.companyName}</h4>
                    <p className="text-slate-500 text-sm font-medium">{demo.firstName} {demo.lastName} • {demo.city}</p>
                  </div>
                </div>

                <div className="space-y-3 mb-8">
                  <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                    <Mail className="w-4 h-4" /> {demo.email}
                  </div>
                  <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                    <Shield className="w-4 h-4" /> Pack Demandé: <span className="font-bold text-blue-600">{demo.plan}</span>
                  </div>
                  {demo.message && (
                    <p className="text-xs text-slate-500 dark:text-slate-500 italic bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
                      "{demo.message}"
                    </p>
                  )}
                </div>
              </div>

              {isPending(demo) ? (
                <div className="grid grid-cols-2 gap-4 pt-6 border-t border-slate-50 dark:border-slate-800">
                  <button
                    onClick={() => { setModal({ type: 'reject', demoId: demo.id, companyName: demo.companyName }); setRejectReason(''); }}
                    disabled={processingId === demo.id}
                    className="py-3.5 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white rounded-2xl font-bold hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400 transition-all disabled:opacity-50"
                  >
                    Rejeter
                  </button>
                  <button 
                    onClick={() => { setModal({ type: 'approve', demoId: demo.id, companyName: demo.companyName }); setInstanceUrl(''); }}
                    disabled={processingId === demo.id}
                    className="py-3.5 bg-blue-600 text-white rounded-2xl font-bold hover:bg-blue-700 shadow-lg shadow-blue-600/20 transition-all disabled:opacity-50"
                  >
                    Approuver
                  </button>
                </div>
              ) : (
                <div className="pt-6 border-t border-slate-50 dark:border-slate-800">
                  <p className="text-center text-xs text-slate-400 font-bold">
                    Traité le {new Date(demo.updatedAt).toLocaleDateString('fr-FR')}
                  </p>
                </div>
              )}
            </div>
          ))}
        </div>
        <PaginationControls 
          currentPage={currentPage}
          setCurrentPage={setCurrentPage}
          totalItems={filteredDemos.length} 
        />
      </motion.div>

      {/* ── Approve Modal ─────────────────────────────────────────────────── */}
      <AnimatePresence>
        {modal?.type === 'approve' && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
            onClick={() => setModal(null)}
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-white dark:bg-slate-900 rounded-3xl p-8 max-w-lg w-full shadow-2xl"
              onClick={e => e.stopPropagation()}
            >
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-xl font-black text-slate-900 dark:text-white">
                  Approuver — {modal.companyName}
                </h3>
                <button onClick={() => setModal(null)} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-colors">
                  <X className="w-5 h-5 text-slate-400" />
                </button>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2">
                    <Globe className="w-4 h-4 inline-block mr-1.5 -mt-0.5" />
                    URL de l'instance Laravel <span className="text-slate-400 font-medium">(optionnel)</span>
                  </label>
                  <input
                    type="url"
                    value={instanceUrl}
                    onChange={e => setInstanceUrl(e.target.value)}
                    placeholder="https://client.agendivo.com"
                    className="w-full p-3.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-medium focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                  />
                  <p className="text-xs text-slate-400 mt-1.5">L'URL sera envoyée au client dans l'email de bienvenue. Vous pourrez aussi la renseigner plus tard depuis la fiche client.</p>
                </div>

                <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-2xl">
                  <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
                    ✅ Un compte client sera créé automatiquement avec un mot de passe temporaire.
                    L'essai gratuit de <strong>14 jours</strong> sera activé immédiatement.
                  </p>
                </div>
              </div>

              <div className="flex gap-3 mt-8">
                <button
                  onClick={() => setModal(null)}
                  className="flex-1 py-3.5 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-2xl font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-all"
                >
                  Annuler
                </button>
                <button
                  onClick={handleApprove}
                  disabled={processingId !== null}
                  className="flex-1 py-3.5 bg-blue-600 text-white rounded-2xl font-bold hover:bg-blue-700 shadow-lg shadow-blue-600/20 transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                >
                  {processingId ? (
                    <>
                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      Activation...
                    </>
                  ) : (
                    <>
                      <Check className="w-4 h-4" /> Approuver et envoyer
                    </>
                  )}
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}

        {/* ── Reject Modal ──────────────────────────────────────────────────── */}
        {modal?.type === 'reject' && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
            onClick={() => setModal(null)}
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-white dark:bg-slate-900 rounded-3xl p-8 max-w-lg w-full shadow-2xl"
              onClick={e => e.stopPropagation()}
            >
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-xl font-black text-slate-900 dark:text-white">
                  Rejeter — {modal.companyName}
                </h3>
                <button onClick={() => setModal(null)} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-colors">
                  <X className="w-5 h-5 text-slate-400" />
                </button>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2">
                    Raison du rejet <span className="text-slate-400 font-medium">(optionnel)</span>
                  </label>
                  <textarea
                    value={rejectReason}
                    onChange={e => setRejectReason(e.target.value)}
                    placeholder="Expliquez brièvement pourquoi cette demande ne peut être approuvée..."
                    rows={3}
                    className="w-full p-3.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-medium focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all resize-none"
                  />
                  <p className="text-xs text-slate-400 mt-1.5">Si renseignée, la raison sera incluse dans l'email envoyé au client.</p>
                </div>

                <div className="bg-red-50 dark:bg-red-900/20 p-4 rounded-2xl">
                  <p className="text-sm text-red-700 dark:text-red-300 font-medium">
                    ⚠️ Le client recevra un email l'informant que sa demande n'a pas été retenue, accompagné d'une invitation à nous contacter.
                  </p>
                </div>
              </div>

              <div className="flex gap-3 mt-8">
                <button
                  onClick={() => setModal(null)}
                  className="flex-1 py-3.5 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-2xl font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-all"
                >
                  Annuler
                </button>
                <button
                  onClick={handleReject}
                  disabled={processingId !== null}
                  className="flex-1 py-3.5 bg-red-600 text-white rounded-2xl font-bold hover:bg-red-700 shadow-lg shadow-red-600/20 transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                >
                  {processingId ? (
                    <>
                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      Envoi...
                    </>
                  ) : (
                    <>
                      <XCircle className="w-4 h-4" /> Rejeter et notifier
                    </>
                  )}
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};