function SuperviseurModal({ onValide, onAnnule }) {
  const [pin, setPin]       = React.useState('');
  const [etape, setEtape]   = React.useState('pin');
  const [raison, setRaison] = React.useState('');
  const [erreur, setErreur] = React.useState('');
  const [superviseur, setSuperviseur] = React.useState(null);

  const superviseurs = React.useMemo(() => {
    try { return JSON.parse(localStorage.getItem('pos_superviseurs') || '[]'); }
    catch(e) { return []; }
  }, []);

  function handlePad(val) {
    if (val === 'del') { setPin(p => p.slice(0,-1)); return; }
    if (pin.length >= 6) return;
    const newPin = pin + val;
    setPin(newPin);
    if (newPin.length === 6) {
      setTimeout(() => {
        const sup = superviseurs.find(s => s.pin === newPin);
        const now = Date.now();
        if (sup && sup.pin && sup.pinExpire && now < sup.pinExpire && !sup.pinUsed) {
          // Marquer PIN comme utilisé
          const sups = JSON.parse(localStorage.getItem('pos_superviseurs') || '[]');
          const updated = sups.map(s => s.id===sup.id ? {...s, pinUsed:true} : s);
          localStorage.setItem('pos_superviseurs', JSON.stringify(updated));
          setSuperviseur(sup);
          setEtape('raison');
          setErreur('');
        } else if (sup && sup.pinUsed) {
          setErreur('Ce PIN a déjà été utilisé');
          setPin('');
          setTimeout(() => setErreur(''), 2000);
        } else if (sup && sup.pinExpire && now > sup.pinExpire) {
          setErreur('PIN expiré — Générez-en un nouveau');
          setPin('');
          setTimeout(() => setErreur(''), 2000);
        } else {
          setErreur('PIN incorrect — Accès refusé');
          setPin('');
          setTimeout(() => setErreur(''), 2000);
        }
      }, 300);
    }
  }

  function validerAnnulation() {
    if (!raison) { setErreur('Choisissez une raison'); return; }
    onValide({ superviseur, raison });
  }

  return (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.75)',zIndex:9000,display:'flex',alignItems:'center',justifyContent:'center',padding:20}}>
      <div style={{background:'#fff',borderRadius:20,width:'100%',maxWidth:400,boxShadow:'0 25px 60px rgba(0,0,0,0.4)',overflow:'hidden'}}>

        {/* Header */}
        <div style={{background:'linear-gradient(135deg,#1e40af,#2563eb)',padding:'24px 28px',textAlign:'center'}}>
          <div style={{fontSize:42,marginBottom:8}}>🔐</div>
          <div style={{fontFamily:"'Playfair Display',serif",fontSize:18,color:'#fff',fontWeight:700}}>Autorisation Superviseur</div>
          <div style={{fontSize:12,color:'#bfdbfe',marginTop:4}}>Accès restreint — Superviseur uniquement</div>
        </div>

        <div style={{padding:24}}>

          {etape === 'pin' && (
            <div style={{textAlign:'center'}}>
              <div style={{fontSize:13,color:'#64748b',marginBottom:16,fontWeight:600}}>Entrez votre code PIN à 6 chiffres</div>

              {/* Points PIN */}
              <div style={{display:'flex',justifyContent:'center',gap:10,marginBottom:20}}>
                {[0,1,2,3,4,5].map(i => (
                  <div key={i} style={{width:40,height:40,borderRadius:10,border:'2px solid '+(pin.length>i?'#2563eb':'#e2e8f0'),background:pin.length>i?'#2563eb':'#f8fafc',display:'flex',alignItems:'center',justifyContent:'center',transition:'all .2s'}}>
                    {pin.length > i && <div style={{width:12,height:12,borderRadius:6,background:'#fff'}}/>}
                  </div>
                ))}
              </div>

              {erreur && (
                <div style={{background:'#fff1f2',border:'1px solid #fecaca',borderRadius:9,padding:'10px 16px',color:'#dc2626',fontSize:13,fontWeight:600,marginBottom:16}}>❌ {erreur}</div>
              )}

              {superviseurs.length === 0 && (
                <div style={{background:'#fffbf0',border:'1px solid #fde68a',borderRadius:9,padding:'10px 16px',color:'#92400e',fontSize:12,marginBottom:16}}>
                  ⚠️ Aucun superviseur configuré — Allez dans Paramètres → Superviseurs
                </div>
              )}

              {/* Pavé numérique */}
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,maxWidth:240,margin:'0 auto'}}>
                {['1','2','3','4','5','6','7','8','9','','0','del'].map((k,i) => (
                  <button key={i} onClick={() => k && handlePad(k)}
                    style={{height:56,borderRadius:12,border:'1.5px solid #e2e8f0',background:k==='del'?'#fff1f2':k===''?'transparent':'#f8fafc',color:k==='del'?'#dc2626':'#1e293b',fontSize:k==='del'?16:20,fontWeight:700,cursor:k?'pointer':'default',transition:'all .15s',visibility:k===''?'hidden':'visible'}}>
                    {k==='del'?'⌫':k}
                  </button>
                ))}
              </div>
            </div>
          )}

          {etape === 'raison' && (
            <div>
              <div style={{background:'#f0fdf4',border:'1px solid #86efac',borderRadius:10,padding:'12px 16px',marginBottom:16,display:'flex',alignItems:'center',gap:10}}>
                <span style={{fontSize:22}}>✅</span>
                <div>
                  <div style={{fontSize:11,color:'#16a34a',fontWeight:600}}>Superviseur identifié</div>
                  <div style={{fontSize:14,color:'#1e293b',fontWeight:700}}>{superviseur?.nom}</div>
                </div>
              </div>
              <div style={{marginBottom:14}}>
                <label style={{display:'block',fontSize:11,letterSpacing:1,textTransform:'uppercase',color:'#94a3b8',marginBottom:6,fontWeight:700}}>Raison de l'annulation *</label>
                <select value={raison} onChange={e=>setRaison(e.target.value)}
                  style={{width:'100%',padding:'11px 14px',borderRadius:9,border:'1.5px solid #e2e8f0',fontSize:14,color:'#1e293b'}}>
                  <option value="">-- Choisir une raison --</option>
                  <option>Erreur de caissier</option>
                  <option>Erreur de prix</option>
                  <option>Client a changé d'avis</option>
                  <option>Produit défectueux</option>
                  <option>Double encaissement</option>
                  <option>Autre</option>
                </select>
              </div>
              {erreur && <div style={{background:'#fff1f2',border:'1px solid #fecaca',borderRadius:9,padding:'10px 16px',color:'#dc2626',fontSize:13,fontWeight:600,marginBottom:14}}>❌ {erreur}</div>}
              <button onClick={validerAnnulation}
                style={{width:'100%',padding:'13px',background:'linear-gradient(135deg,#dc2626,#ef4444)',color:'#fff',border:'none',borderRadius:11,fontSize:15,fontWeight:700,cursor:'pointer',marginBottom:10}}>
                ✅ Confirmer l'annulation
              </button>
            </div>
          )}

          <button onClick={onAnnule}
            style={{width:'100%',padding:'11px',background:'transparent',border:'1.5px solid #e2e8f0',borderRadius:11,fontSize:13,color:'#64748b',cursor:'pointer',fontWeight:600}}>
            Annuler
          </button>
        </div>
      </div>
    </div>
  );
}