
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  X, CheckCircle2, Server, ShieldCheck, Activity, 
  Users, FileText, Truck, BarChart3, PenTool, RefreshCw,
  Lock, FileJson, Info
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

const StatusItem = ({ icon: Icon, label, status, subtext }) => (
  <div className="flex items-center justify-between p-4 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-default group">
    <div className="flex items-center gap-3">
      <div className="p-2 bg-gray-50 dark:bg-gray-800 rounded-lg group-hover:bg-white dark:group-hover:bg-gray-700 transition-colors">
        <Icon className="w-5 h-5 text-[#338660]" />
      </div>
      <div>
        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{label}</p>
        {subtext && <p className="text-xs text-gray-500 dark:text-gray-400">{subtext}</p>}
      </div>
    </div>
    <div className="flex items-center gap-2">
      <span className="relative flex h-2.5 w-2.5">
        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
        <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-[#338660]"></span>
      </span>
      <span className="text-xs font-medium text-[#338660]">{status}</span>
    </div>
  </div>
);

const MetricCard = ({ label, value, icon: Icon, tooltip }) => (
  <div className="flex flex-col p-4 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-xl hover:shadow-sm transition-shadow">
    <div className="flex items-center gap-2 mb-2 text-gray-500 dark:text-gray-400">
      <Icon className="w-4 h-4" />
      <span className="text-xs font-medium">{label}</span>
    </div>
    <p className="text-lg font-bold text-gray-900 dark:text-white">{value}</p>
  </div>
);

const SecurityItem = ({ label, active = true }) => (
  <div className="flex items-center gap-3 p-3 rounded-lg bg-green-50/50 dark:bg-green-900/10 border border-green-100 dark:border-green-900/20">
    <ShieldCheck className="w-4 h-4 text-[#338660]" />
    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{label}</span>
    {active && <span className="ml-auto text-xs text-[#338660] font-bold">Actif</span>}
  </div>
);

const SystemStatusDrawer = ({ isOpen, onClose }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60]"
          />

          {/* Drawer */}
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className="fixed inset-y-0 right-0 z-[70] w-full sm:w-[500px] bg-white dark:bg-[#0A0A0A] shadow-2xl flex flex-col border-l border-gray-200 dark:border-gray-800"
          >
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800 bg-white/50 dark:bg-[#0A0A0A]/50 backdrop-blur-xl sticky top-0 z-10">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-[#338660]/10 rounded-xl">
                  <Server className="w-6 h-6 text-[#338660]" />
                </div>
                <div>
                  <h2 className="text-lg font-bold text-gray-900 dark:text-white">État du système</h2>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Statut opérationnel en temps réel</p>
                </div>
              </div>
              <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
                <X className="w-5 h-5" />
              </Button>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
              
              {/* Global Status */}
              <div className="p-5 rounded-2xl bg-gradient-to-br from-green-50 to-white dark:from-[#338660]/10 dark:to-gray-900 border border-green-100 dark:border-[#338660]/20 shadow-sm">
                <div className="flex items-center gap-4">
                  <div className="relative">
                    <div className="absolute inset-0 bg-green-400 rounded-full animate-ping opacity-20"></div>
                    <CheckCircle2 className="w-12 h-12 text-[#338660] relative z-10" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-[#338660]">Système Opérationnel</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-300">Tous les services Dataven fonctionnent normalement.</p>
                  </div>
                </div>
              </div>

              {/* Modules */}
              <section>
                <div className="flex items-center gap-2 mb-4">
                  <Activity className="w-4 h-4 text-gray-400" />
                  <h3 className="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Modules Applicatifs</h3>
                </div>
                <div className="grid gap-3">
                  <StatusItem icon={Users} label="CRM & Opportunités" status="Opérationnel" />
                  <StatusItem icon={FileText} label="Devis & Facturation" status="Opérationnel" />
                  <StatusItem icon={Truck} label="Livraisons & Stocks" status="Opérationnel" />
                  <StatusItem icon={BarChart3} label="Comptabilité & Reporting" status="Opérationnel" />
                  <StatusItem icon={PenTool} label="Signature Électronique" status="Opérationnel" />
                  <StatusItem icon={RefreshCw} label="Connecteurs ERP (Sage 100)" status="Sync active" subtext="Dernière synchro: 2 min" />
                </div>
              </section>

              {/* Activity Metrics */}
              <section>
                <div className="flex items-center gap-2 mb-4">
                  <BarChart3 className="w-4 h-4 text-gray-400" />
                  <h3 className="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Activité Système</h3>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <MetricCard icon={RefreshCw} label="Dernière synchro" value="il y a 2 min" />
                  <MetricCard icon={FileJson} label="Documents traités (24h)" value="247 documents" />
                  <MetricCard icon={Activity} label="Écritures analysées" value="1,842 lignes" />
                  <MetricCard icon={Users} label="Utilisateurs actifs" value="12 connectés" />
                </div>
              </section>

              {/* Security */}
              <section>
                <div className="flex items-center gap-2 mb-4">
                  <Lock className="w-4 h-4 text-gray-400" />
                  <h3 className="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Sécurité & Conformité</h3>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <SecurityItem label="Connexions SSL/TLS" />
                  <SecurityItem label="Journalisation active" />
                  <SecurityItem label="Contrôle d'accès RBAC" />
                  <SecurityItem label="Chiffrement des données" />
                </div>
              </section>

              {/* SaaS Position */}
              <div className="p-4 bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-xl flex items-start gap-3">
                <Info className="w-5 h-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
                <p className="text-sm text-blue-800 dark:text-blue-300 italic">
                  "Dataven fonctionne comme une surcouche intelligente, en continu, sans interruption des systèmes existants."
                </p>
              </div>

              <div className="text-center text-xs text-gray-400 pt-4">
                Version système: 3.0.0-stable • Dataven Cloud Regions (EU-West)
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default SystemStatusDrawer;
