import React, { useState, useEffect, useMemo } from 'react';
import { 
  Zap, Droplet, Thermometer, FlaskConical, RefreshCw, 
  Clock, Beaker, CheckCircle, X, Maximize2, Database, 
  Aperture, Plus, Waves, Microscope, Server, Calculator, 
  Video, Camera, Square, Circle, Signal, Wifi, 
  ShieldCheck, Battery, Wind, Settings, Cpu, HardDrive, 
  AlertOctagon, Fan, Power, Activity, ChevronRight, Scale,
  Box, ArrowDownCircle, Trash2, Save, History
} from 'lucide-react';

const App = () => {
  const [selectedUnitId, setSelectedUnitId] = useState(1);
  const [activeTab, setActiveTab] = useState('process'); // 'process', 'esp-simulation', 'logs'
  
  // --- ÉTAT DU CYCLE (Simulation Automate) ---
  const [currentStep, setCurrentStep] = useState('INITIALISATION'); 
  // Étapes : INITIALISATION -> CHAUFFE -> ACIDIFICATION -> CHARGEMENT -> LIXIVIATION -> REPOS -> TERMINE
  
  // --- DONNÉES CAPTEURS (Simulées par saisie ou ESP) ---
  const [sensors, setSensors] = useState({
    ph: 7.0,
    temp: 22.4,
    rpm: 0,
    targetRpm: 550,
    weightAcid: 0.0,
    weightOre: 0, // En kg
    levelUltrasonic: 0, // En L
    distilledWater: 100, // % restant
    airPressure: 0
  });

  // --- MATRICE DES 16 RELAIS / ACTIONNEURS ---
  const [relays, setRelays] = useState([
    { id: 1, name: "Agitateur (VFD)", active: false, pin: 13 },
    { id: 2, name: "Pompe Acide", active: false, pin: 25 },
    { id: 3, name: "Pompe Eau", active: false, pin: 26 },
    { id: 4, name: "Pompe Liquide", active: false, pin: 33 },
    { id: 5, name: "Vanne Sortie 1", active: false, pin: 27 },
    { id: 6, name: "Vanne Sortie 2", active: false, pin: 14 },
    { id: 7, name: "Vanne Sortie 3", active: false, pin: 12 },
    { id: 8, name: "Vanne Air (Pneum)", active: false, pin: 4 },
    { id: 9, name: "Moteur Pas à Pas (Minerai)", active: false, pin: "SPI" },
    { id: 10, name: "Eau Distillée (Nettoyage)", active: false, pin: 5 },
    { id: 11, name: "Couverture Chauffe", active: false, pin: 18 },
    { id: 12, name: "Prélèvement Auto", active: false, pin: 19 },
    { id: 13, name: "Lumière État (Verte)", active: false, pin: 21 },
    { id: 14, name: "Lumière Alerte (Rouge)", active: false, pin: 22 },
    { id: 15, name: "Auxiliaire 1", active: false, pin: 23 },
    { id: 16, name: "Auxiliaire 2", active: false, pin: 15 },
  ]);

  const [logMessages, setLogMessages] = useState([
    { time: "18:30:00", msg: "uLixi6_uctrl connecté. En attente de l'ESP32 Cuve 1.", type: "system" }
  ]);

  const addLog = (msg, type = "info") => setLogMessages(prev => [{ time: new Date().toLocaleTimeString(), msg, type }, ...prev]);

  // --- LOGIQUE DE SIMULATION DU CYCLE ---
  const startCycle = () => {
    setCurrentStep('CHAUFFE');
    setSensors({...sensors, levelUltrasonic: 750, ph: 7.0});
    const newRelays = [...relays];
    newRelays[10].active = true; // Activer chauffe
    setRelays(newRelays);
    addLog("Démarrage Cycle : Remplissage 750L effectué. Mise en chauffe...");
  };

  const injectAcid = () => {
    setCurrentStep('ACIDIFICATION');
    addLog("Acidification en cours... Cible pH 0.5 - 1.0");
  };

  const loadOre = () => {
    setCurrentStep('CHARGEMENT');
    addLog("Démarrage chargement minerai : Cible 300kg.");
  };

  // --- RENDU UI ---

  const Sidebar = () => (
    <aside className="w-full lg:w-80 space-y-6 flex-shrink-0 italic">
        {/* STATUT STATION uctrl */}
        <div className="bg-white p-8 rounded-[2.5rem] shadow-xl border border-slate-100 text-slate-900">
            <div className="flex items-center gap-3 mb-6">
                <div className="bg-indigo-600 p-2 rounded-xl text-white"><ShieldCheck size={20}/></div>
                <h3 className="text-[10px] font-black uppercase tracking-widest text-slate-400">Station Node (uctrl)</h3>
            </div>
            <div className="space-y-4">
                <div className="flex justify-between items-center text-[10px] font-bold uppercase">
                    <span className="text-slate-500">Backbone uAmp</span>
                    <span className="text-emerald-600 flex items-center gap-2">Online <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div></span>
                </div>
                <div className="flex justify-between items-center text-[10px] font-bold uppercase">
                    <span className="text-slate-500">ESP32 Link</span>
                    <span className="text-blue-600">Port 81 (NAT OK)</span>
                </div>
                <div className="flex justify-between items-center text-[10px] font-bold uppercase">
                    <span className="text-slate-500">Temp. Armoire</span>
                    <span className="text-slate-900">28.4 °C</span>
                </div>
            </div>
        </div>

        {/* INTERFACE DE SIMULATION ESP (L'injecteur) */}
        <div className="bg-slate-900 p-8 rounded-[2.5rem] shadow-2xl text-white border-b-8 border-blue-600">
            <h3 className="text-[10px] font-black uppercase text-blue-400 mb-6 tracking-widest flex items-center gap-2">
                <Cpu size={14}/> Injecteur ESP32
            </h3>
            <div className="space-y-5">
                <div>
                    <label className="text-[8px] font-black text-slate-500 uppercase block mb-1">Simuler pH</label>
                    <input type="range" min="0" max="14" step="0.1" value={sensors.ph} onChange={(e)=>setSensors({...sensors, ph: parseFloat(e.target.value)})} className="w-full accent-blue-500" />
                    <div className="text-xl font-black text-blue-400 text-right">{sensors.ph}</div>
                </div>
                <div>
                    <label className="text-[8px] font-black text-slate-500 uppercase block mb-1">Simuler Temp (°C)</label>
                    <input type="number" value={sensors.temp} onChange={(e)=>setSensors({...sensors, temp: e.target.value})} className="w-full bg-white/5 border border-white/10 p-3 rounded-xl text-sm font-black outline-none focus:border-orange-500" />
                </div>
                <div>
                    <label className="text-[8px] font-black text-slate-500 uppercase block mb-1">Simuler Poids Minerai (kg)</label>
                    <input type="number" value={sensors.weightOre} onChange={(e)=>setSensors({...sensors, weightOre: e.target.value})} className="w-full bg-white/5 border border-white/10 p-3 rounded-xl text-sm font-black outline-none focus:border-emerald-500" />
                </div>
                <button className="w-full py-4 bg-blue-600 rounded-2xl font-black uppercase text-[9px] tracking-widest shadow-lg hover:bg-blue-500 transition-all flex items-center justify-center gap-2">
                    <Save size={14}/> Sync vers uAmp
                </button>
            </div>
        </div>
    </aside>
  );

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col font-sans italic selection:bg-blue-500/30">
      
      {/* HEADER uLixi6 */}
      <header className="bg-slate-900 text-white p-5 border-b border-white/5 flex justify-between items-center sticky top-0 z-50 shadow-2xl">
        <div className="flex items-center gap-4">
          <div className="bg-blue-600 p-2.5 rounded-2xl shadow-xl"><Zap size={24}/></div>
          <div>
            <h1 className="text-xl font-black uppercase tracking-tighter leading-none italic">uLixi<span className="text-blue-500">6</span> Hub</h1>
            <p className="text-[9px] font-bold text-slate-500 uppercase tracking-widest mt-1">Station #001 Baobab Alpha</p>
          </div>
        </div>
        <div className="flex gap-2">
            {[1, 2, 3, 4].map(id => (
                <button key={id} onClick={() => setSelectedUnitId(id)} className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase transition-all ${selectedUnitId === id ? 'bg-blue-600 text-white shadow-lg' : 'bg-slate-800 text-slate-400'}`}>Unit {id}</button>
            ))}
        </div>
      </header>

      <main className="flex-1 max-w-[1800px] mx-auto w-full p-6 lg:p-12 flex flex-col lg:flex-row gap-10 pb-32">
        
        <Sidebar />

        <div className="flex-1 space-y-8">
            {/* CONTRÔLE PRINCIPAL UNITÉ */}
            <div className="bg-white p-8 md:p-12 rounded-[4rem] shadow-2xl border border-slate-100 text-slate-900 relative overflow-hidden flex flex-col">
                <div className="flex flex-col sm:flex-row justify-between items-start mb-12 border-b border-slate-50 pb-10 gap-8">
                    <div className="flex-1">
                        <div className="flex items-center gap-4 mb-4">
                           <span className="text-blue-600 font-black italic text-2xl tracking-tighter uppercase leading-none">UNITÉ #{selectedUnitId}</span>
                           <div className="h-2 flex-1 bg-slate-50 rounded-full overflow-hidden max-w-[300px] shadow-inner"><div className="h-full bg-blue-500 transition-all duration-1000 shadow-[0_0_15px_#3b82f6]" style={{width: currentStep === 'INITIALISATION' ? '5%' : currentStep === 'CHAUFFE' ? '25%' : '75%'}}></div></div>
                        </div>
                        <h2 className="text-3xl md:text-5xl font-black italic tracking-tighter uppercase leading-none">
                            {currentStep === 'INITIALISATION' ? 'Attente lancement' : `Phase : ${currentStep}`}
                        </h2>
                    </div>
                    <div className="flex flex-col items-end gap-2">
                        <div className="bg-slate-900 text-white px-8 py-4 rounded-[2rem] font-black text-3xl shadow-xl border-b-8 border-blue-600 italic leading-none uppercase">{sensors.ph} <small className="text-[10px] opacity-40 uppercase ml-2 tracking-widest">pH</small></div>
                        <span className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Temps réel via ESP32-S3</span>
                    </div>
                </div>

                <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
                    {/* MATRICE DES 16 RELAIS */}
                    <div className="space-y-6">
                        <div className="flex justify-between items-center">
                            <h4 className="text-[10px] font-black uppercase text-slate-400 tracking-[0.2em] italic">Matrice de Commande (16 Pins)</h4>
                            <span className="text-[8px] bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full border border-indigo-100 font-black uppercase italic">ESP32 GPIO Map active</span>
                        </div>
                        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            {relays.map(r => (
                                <button key={r.id} onClick={() => {
                                    const nr = [...relays];
                                    nr[r.id-1].active = !nr[r.id-1].active;
                                    setRelays(nr);
                                    addLog(`${nr[r.id-1].active ? 'Activation' : 'Désactivation'} ${r.name} (Pin ${r.pin})`, "control");
                                }} className={`p-4 rounded-3xl border-2 flex flex-col items-center justify-center gap-3 transition-all ${r.active ? 'bg-emerald-500 border-emerald-400 text-white shadow-lg' : 'bg-slate-50 border-slate-100 text-slate-400 hover:bg-slate-100'}`}>
                                    <div className={`w-1.5 h-1.5 rounded-full ${r.active ? 'bg-white shadow-[0_0_8px_white]' : 'bg-slate-300'}`}></div>
                                    <span className="text-[7px] font-black uppercase tracking-tighter text-center h-4 flex items-center leading-none">{r.name}</span>
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* ACTIONS DE CYCLE */}
                    <div className="space-y-8 flex flex-col">
                        <div className="grid grid-cols-2 gap-6">
                            <div className="p-8 bg-slate-50 rounded-[2.5rem] border-2 border-slate-100 shadow-inner flex flex-col items-center justify-center">
                                <Thermometer className={sensors.temp > 80 ? "text-orange-500 animate-pulse" : "text-slate-300"} size={48}/>
                                <span className="text-3xl font-black mt-2 tracking-tighter">{sensors.temp} °C</span>
                                <span className="text-[8px] font-black uppercase text-slate-400 mt-1 tracking-widest italic leading-none">Temp. Bain</span>
                            </div>
                            <div className="p-8 bg-slate-50 rounded-[2.5rem] border-2 border-slate-100 shadow-inner flex flex-col items-center justify-center">
                                <Scale className="text-emerald-500" size={48}/>
                                <span className="text-3xl font-black mt-2 tracking-tighter">{sensors.weightOre} kg</span>
                                <span className="text-[8px] font-black uppercase text-slate-400 mt-1 tracking-widest italic leading-none">Chargement Minerai</span>
                            </div>
                        </div>

                        <div className="flex-1 space-y-4 flex flex-col justify-end italic">
                            {currentStep === 'INITIALISATION' && (
                                <button onClick={startCycle} className="w-full py-8 bg-blue-600 text-white rounded-[2.5rem] font-black uppercase text-[11px] tracking-[0.4em] shadow-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-4">
                                    <ArrowDownCircle size={20}/> Lancer Séquence 750L
                                </button>
                            )}
                            {currentStep === 'CHAUFFE' && sensors.temp >= 70 && (
                                <button onClick={injectAcid} className="w-full py-8 bg-indigo-600 text-white rounded-[2.5rem] font-black uppercase text-[11px] tracking-[0.4em] shadow-xl hover:bg-indigo-700 transition-all flex items-center justify-center gap-4 animate-bounce">
                                    <FlaskConical size={20}/> Démarrer Pompe Acide
                                </button>
                            )}
                            {currentStep === 'ACIDIFICATION' && sensors.ph <= 1.0 && (
                                <button onClick={loadOre} className="w-full py-8 bg-emerald-600 text-white rounded-[2.5rem] font-black uppercase text-[11px] tracking-[0.4em] shadow-xl hover:bg-emerald-700 transition-all flex items-center justify-center gap-4">
                                    <Box size={20}/> Ouvrir Bouche Minerai
                                </button>
                            )}
                        </div>
                    </div>
                </div>

                {/* LOGS EN TEMPS RÉEL (uctrl Buffer) */}
                <div className="bg-slate-950 p-10 rounded-[3rem] text-emerald-400 font-mono text-xs h-72 shadow-2xl border border-slate-800 relative group italic">
                    <div className="flex items-center gap-3 mb-6 text-slate-500 border-b border-white/5 pb-5 uppercase font-black tracking-widest leading-none">
                        <Database size={18}/> Archivage local (uctrl Sync)
                    </div>
                    <div className="overflow-y-auto h-44 space-y-3 pr-4 custom-scrollbar">
                        {logMessages.map((log, i) => (
                            <div key={i} className="flex gap-6 leading-relaxed border-l-2 border-slate-800 pl-6 py-1.5 hover:bg-white/5 transition-colors">
                                <span className="text-slate-600 font-bold shrink-0">{log.time}</span>
                                <span className={`font-medium ${log.type === 'control' ? 'text-blue-400' : log.type === 'system' ? 'text-indigo-400' : 'text-emerald-100'}`}>
                                    {log.msg}
                                </span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
      </main>

      {/* FOOTER STATUT */}
      <footer className="fixed bottom-0 w-full bg-slate-900 border-t border-white/5 p-4 z-40 italic">
        <div className="max-w-[1920px] mx-auto flex justify-between items-center px-4 font-black uppercase text-[9px] text-slate-500">
           <div className="flex items-center gap-4">
             <div className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-pulse"></div>
             <span className="tracking-[0.3em]">uAmp_lixi6 Node Ready • GPM MADAGASCAR 2026</span>
           </div>
           <div className="flex gap-8">
             <div className="flex items-center gap-2"><History size={14} className="text-slate-700"/><span>Last Restore: 21/06/2026</span></div>
             <span className="text-slate-800 italic">Jerryrap Industrial Engineering</span>
           </div>
        </div>
      </footer>
    </div>
  );
};

export default App;