/* Console interne — accès : connexion (mot de passe puis code), activation 2FA, mot de passe (lien reçu
   par email), mot de passe oublié. Même cadre que les accès partenaires du design. */
const ADMIN_API = 'https://api.jokkkotechgroup.com/api:lms-admin';
const {api, lireJeton, ecrireJeton} = creerApi(ADMIN_API, 'lms_admin_jeton');
const SIDE_ADMIN = {sub:'Admin', badge:'Espace interne', titre:'Console interne LeMultiservice.', texte:'Dossiers de production, dépôts, partenaires et supervision. Réservée à l\'équipe LeMultiservice : chaque action est tracée.'};

function Connexion({onConnecte, go}){
  const [email, setEmail] = React.useState(''), [mdp, setMdp] = React.useState(''), [voir, setVoir] = React.useState(false);
  const [etape, setEtape] = React.useState(null), [code, setCode] = React.useState(''), [secours, setSecours] = React.useState(false), [cs, setCs] = React.useState('');
  const [err, setErr] = React.useState(null), [load, setLoad] = React.useState(false);
  const [ini, setIni] = React.useState(null), [codes, setCodes] = React.useState(null), [garde, setGarde] = React.useState(false), [jetonFinal, setJetonFinal] = React.useState(null);
  const envoyer = async (e) => { e && e.preventDefault(); setErr(null); setLoad(true);
    try { const r = await api('POST', 'auth/connexion', {email, mot_de_passe:mdp}); setEtape(r);
      if(r.etape === 'activation_2fa') setIni(await api('POST', 'auth/2fa/initier', {jeton:r.jeton}));
    } catch(x){ setErr(x.message); } setLoad(false); };
  const verifier = async () => { setErr(null); setLoad(true);
    try { const r = await api('POST', 'auth/2fa/verifier', secours ? {jeton:etape.jeton, code_secours:cs} : {jeton:etape.jeton, code}); ecrireJeton(r.jeton); onConnecte(); }
    catch(x){ setErr(x.message); setCode(''); } setLoad(false); };
  const activer = async () => { setErr(null); setLoad(true);
    try { const r = await api('POST', 'auth/2fa/activer', {jeton:etape.jeton, code}); setCodes(r.codes_secours); setJetonFinal(r.jeton); }
    catch(x){ setErr(x.message); setCode(''); } setLoad(false); };

  if(codes) return <AuthFrame w={440} side={SIDE_ADMIN}>
    <Progress steps={['Scanner','Vérifier','Codes de secours']} i={2}/>
    <H s={26}>Gardez vos codes de secours</H><Muted>Chaque code s'utilise une seule fois si vous perdez votre téléphone. Ils ne seront plus affichés.</Muted>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, padding:16, borderRadius:18, background:V.sub, border:`1px solid ${V.line}`}}>{codes.map(c=><Mono key={c} s={14} c={V.ink}>{c}</Mono>)}</div>
    <div style={{display:'flex', gap:8}}><CopyBtn text={codes.join('\n')} sm={false}/></div>
    <Check on={garde} set={setGarde}>J'ai enregistré mes codes de secours en lieu sûr.</Check>
    <Btn full disabled={!garde} onClick={()=>{ ecrireJeton(jetonFinal); onConnecte(); }}>Accéder à la console</Btn>
  </AuthFrame>;

  if(etape?.etape === 'activation_2fa') return <AuthFrame w={440} side={SIDE_ADMIN}>
    <Progress steps={['Scanner','Vérifier','Codes de secours']} i={code.length ? 1 : 0}/>
    <H s={26}>Activez la double authentification</H><Muted>Obligatoire pour toute l'équipe. Scannez ce QR code avec Google Authenticator, Microsoft Authenticator ou 1Password, puis saisissez le code affiché.</Muted>
    {ini ? <div style={{display:'flex', gap:18, alignItems:'center', flexWrap:'wrap'}}><QR texte={ini.otpauth_uri} s={150}/>
      <div style={{minWidth:0}}><Lbl>Ou saisissez la clé</Lbl><div style={{marginTop:8, display:'flex', alignItems:'center', gap:8, flexWrap:'wrap'}}><Mono s={13} c={V.ink}>{ini.secret.replace(/(.{4})/g,'$1 ').trim()}</Mono><CopyBtn text={ini.secret}/></div></div></div> : <Skel h={170}/>}
    <OTP value={code} set={v=>{setCode(v); setErr(null);}} err={!!err}/>
    {err && <Notice tone="bad" title="Code incorrect">{err}</Notice>}
    <Btn full disabled={code.length<6||load} onClick={activer}>{load?'Vérification…':'Activer'}</Btn>
    <Link2 onClick={()=>{setEtape(null); setCode('');}}>← Retour</Link2>
  </AuthFrame>;

  if(etape?.etape === 'code_2fa') return <AuthFrame side={SIDE_ADMIN}>
    <Tile icon="device-mobile" s={52}/><H s={26}>Vérification en deux étapes</H>
    {secours ? <><Muted>Saisissez un de vos codes de secours (format XXXX-XXXX). Il ne servira qu'une fois.</Muted><Field label="Code de secours"><Inp value={cs} onChange={e=>setCs(e.target.value.toUpperCase())} placeholder="XXXX-XXXX" mono/></Field></>
      : <><Muted>Saisissez le code à 6 chiffres affiché dans votre application d'authentification.</Muted><OTP value={code} set={v=>{setCode(v); setErr(null);}} err={!!err}/></>}
    {err && <Notice tone="bad" title="Code incorrect">{err} Après 5 essais, le compte est bloqué 15 minutes.</Notice>}
    <Btn full disabled={(secours ? cs.length<9 : code.length<6)||load} onClick={verifier}>{load?'Vérification…':'Vérifier'}</Btn>
    <div style={{display:'flex', justifyContent:'space-between'}}><Link2 onClick={()=>{setEtape(null); setCode('');}}>← Retour</Link2><Link2 onClick={()=>{setSecours(!secours); setErr(null);}}>{secours?'Utiliser l\'application':'Utiliser un code de secours'}</Link2></div>
  </AuthFrame>;

  return <AuthFrame side={SIDE_ADMIN}>
    <form onSubmit={envoyer} style={{display:'flex', flexDirection:'column', gap:18}}>
      <H s={28}>Connexion</H><Muted>Console interne réservée à l'équipe LeMultiservice.</Muted>
      <Field label="Email"><Inp type="email" value={email} onChange={e=>setEmail(e.target.value)} lead={<I n="envelope-simple" s={18}/>} autoComplete="username" placeholder="prenom.nom@lemultiservice.sn"/></Field>
      <Field label="Mot de passe"><div style={{position:'relative'}}><Inp type={voir?'text':'password'} value={mdp} onChange={e=>setMdp(e.target.value)} lead={<I n="lock-simple" s={18}/>} autoComplete="current-password"/>
        <button type="button" aria-label={voir?'Masquer':'Afficher'} onClick={()=>setVoir(!voir)} style={{position:'absolute', right:10, top:10, border:0, background:'none', cursor:'pointer', color:V.ink3}}><I n={voir?'eye-slash':'eye'} s={18}/></button></div></Field>
      <div style={{display:'flex', justifyContent:'flex-end', marginTop:-8}}><Link2 onClick={()=>go('oubli')}>Mot de passe oublié ?</Link2></div>
      {err && <Notice tone="bad">{err}</Notice>}
      <Btn full type="submit" disabled={!email||!mdp||load}>{load?'Connexion…':'Se connecter'}</Btn>
      <span style={{textAlign:'center', fontSize:12.5, color:V.ink3}}>Après 5 essais, le compte est bloqué 15 minutes.</span>
    </form>
  </AuthFrame>;
}

function Oubli({go}){ const [email, setEmail] = React.useState(''), [envoye, setEnvoye] = React.useState(false), [load, setLoad] = React.useState(false);
  return <AuthFrame side={SIDE_ADMIN}>
    <Tile icon={envoye?'envelope-simple-open':'key'} s={52}/><H s={26}>{envoye?'Email envoyé':'Mot de passe oublié'}</H>
    {envoye ? <Muted>Si cette adresse appartient à l'équipe, un lien vient d'être envoyé. Il est valable 1 heure.</Muted>
    : <><Muted>Indiquez votre email. Nous vous enverrons un lien pour choisir un nouveau mot de passe.</Muted><Field label="Email"><Inp type="email" value={email} onChange={e=>setEmail(e.target.value)} lead={<I n="envelope-simple" s={18}/>}/></Field>
      <Btn full disabled={!email||load} onClick={async()=>{ setLoad(true); try { await api('POST', 'auth/mdp/oublie', {email}); } catch(e){} setEnvoye(true); setLoad(false); }}>Envoyer le lien</Btn></>}
    <Link2 onClick={()=>go('connexion')}>← Retour à la connexion</Link2></AuthFrame>; }

function Definir({jeton, go}){ const [pw, setPw] = React.useState(''), [pw2, setPw2] = React.useState(''), [err, setErr] = React.useState(null), [fait, setFait] = React.useState(false), [load, setLoad] = React.useState(false);
  const regles = [['8 caractères minimum', pw.length>=8],['Une majuscule', /[A-Z]/.test(pw)],['Un chiffre', /\d/.test(pw)],['Un caractère spécial', /[^A-Za-z0-9]/.test(pw)]];
  if(fait) return <AuthFrame side={SIDE_ADMIN}><Tile icon="check-circle" s={56} fill/><H s={26}>Mot de passe enregistré</H><Muted>Connectez-vous : la double authentification vous sera demandée.</Muted><Btn full onClick={()=>go('connexion')}>Se connecter</Btn></AuthFrame>;
  return <AuthFrame side={SIDE_ADMIN}>
    <H s={26}>Choisissez votre mot de passe</H>
    <Field label="Nouveau mot de passe"><Inp type="password" value={pw} onChange={e=>setPw(e.target.value)} placeholder="••••••••"/></Field>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>{regles.map(r=><span key={r[0]} style={{display:'flex', alignItems:'center', gap:6, fontSize:12.5, fontWeight:600, color:r[1]?V.accD:V.ink3}}><I n={r[1]?'check-circle':'circle'} s={15} fill={r[1]}/>{r[0]}</span>)}</div>
    <Field label="Confirmer le mot de passe" err={pw2 && pw2!==pw ? 'Les deux mots de passe diffèrent.' : null}><Inp type="password" value={pw2} onChange={e=>setPw2(e.target.value)} placeholder="••••••••"/></Field>
    {err && <Notice tone="bad">{err}</Notice>}
    <Btn full disabled={regles.some(r=>!r[1]) || pw!==pw2 || load} onClick={async()=>{ setLoad(true); setErr(null); try { await api('POST', 'auth/mdp/definir', {jeton, mot_de_passe:pw}); setFait(true); history.replaceState(null, '', location.pathname); } catch(e){ setErr(e.message); } setLoad(false); }}>Enregistrer</Btn>
  </AuthFrame>; }

Object.assign(window, {api, lireJeton, ecrireJeton, Connexion, Oubli, Definir});