// js/components/common/PerfilPage.jsx
// Página de perfil do usuário (todos os roles) — troca de senha.
// Movido de index.html em Fase 5 do refactor (2026-04-29): L833-L906
// Deps runtime: sb (window.sb), verifyCurrentPasswordAuth, verifyPassword, hashPassword,
//               window.__ZNX_NEW_AUTH_ENABLED__
(function() {
  'use strict';
  const {useState} = React;

  // CÓPIA EXATA do index.html L833-L906
  function PerfilPage({user,allUsers,onTrocarSenha,onBack}){
    const roleLabels={admin:'Administrador',vendedor:'Vendedor',financeiro:'Financeiro',estoquista:'Estoquista'};
    const[senhaAtual,setSenhaAtual]=useState('');
    const[novaSenha,setNovaSenha]=useState('');
    const[confirmar,setConfirmar]=useState('');
    const[msg,setMsg]=useState('');
    const[err,setErr]=useState('');
    const[showA,setShowA]=useState(false);
    const[showN,setShowN]=useState(false);
    const[showC,setShowC]=useState(false);
    // [L2-Perfil 2026-05-09] Loading state + validação visual (regra_loading_state_obrigatorio)
    const[saving,setSaving]=useState(false);

    // [L2-Perfil] Força da senha real-time
    const senhaForce=React.useMemo(()=>{
      if(!novaSenha)return{score:0,label:'',color:'#E5E7EB'};
      let s=0;
      if(novaSenha.length>=6)s++;
      if(novaSenha.length>=10)s++;
      if(/[A-Z]/.test(novaSenha))s++;
      if(/[0-9]/.test(novaSenha))s++;
      if(/[^A-Za-z0-9]/.test(novaSenha))s++;
      if(s<=1)return{score:s,label:'Fraca',color:'#DC2626'};
      if(s<=2)return{score:s,label:'OK',color:'#F59E0B'};
      if(s<=3)return{score:s,label:'Boa',color:'#16A34A'};
      return{score:s,label:'Excelente',color:'#15803D'};
    },[novaSenha]);
    const senhasMatch=novaSenha&&confirmar&&novaSenha===confirmar;
    const senhasMismatch=novaSenha&&confirmar&&novaSenha!==confirmar;
    const podeSubmeter=senhaAtual&&novaSenha.length>=6&&senhasMatch&&!saving;

    async function handleSave(){
      if(saving)return;
      setSaving(true);
      setErr('');setMsg('');
      // [BUG-SENHA 2026-05-11] try/catch/finally global garante setSaving(false) sempre
      // (regra_loading_state_obrigatorio + regra_fix_de_teste_metodo_correto)
      // Sem isso, qualquer throw async em verifyCurrentPasswordAuth / hashPassword / onTrocarSenha
      // deixa user travado em "⏳ Alterando..." infinito.
      try{
        // [AUTH FIX] novo auth: valida senha atual via Supabase Auth (source of truth pós-cutover)
        // legado: mantém verificação SHA-256 contra store.extraUsers
        let authV=null;
        try{authV=await verifyCurrentPasswordAuth(senhaAtual);}
        catch(e){
          console.warn('[PerfilPage] verifyCurrentPasswordAuth threw:',e);
          if(typeof Sentry!=='undefined')try{Sentry.captureException(e,{tags:{flow:'password_change',step:'verifyCurrentPasswordAuth'}});}catch(_){}
          return setErr('Erro ao verificar senha atual. Tente novamente.');
        }
        if(authV){if(!authV.ok)return setErr(authV.err);}
        else{
          const found=allUsers.find(u=>u.username===user.username);
          const rp=found?found.password:user.password;
          if(!await verifyPassword(senhaAtual,rp))return setErr('Senha atual incorreta.');
        }
        if(novaSenha.length<6)return setErr('Nova senha deve ter pelo menos 6 caracteres.');
        if(novaSenha!==confirmar)return setErr('As senhas não coincidem.');
        // Bug 3 fix: sincroniza senha com Supabase Auth (bcrypt) antes do hash SHA-256 legado
        if(window.__ZNX_NEW_AUTH_ENABLED__){
          try{
            const{error:authErr}=await sb.auth.updateUser({password:novaSenha});
            if(authErr){
              if(typeof Sentry!=='undefined')try{Sentry.captureException(new Error('sb.auth.updateUser failed: '+authErr.message),{tags:{flow:'password_change',step:'updateUser'}});}catch(_){}
              return setErr('Erro ao trocar senha: '+authErr.message);
            }
          }catch(e){
            console.warn('[PerfilPage] sb.auth.updateUser threw:',e);
            if(typeof Sentry!=='undefined')try{Sentry.captureException(e,{tags:{flow:'password_change',step:'updateUser_throw'}});}catch(_){}
            return setErr('Erro ao trocar senha. Tente novamente.');
          }
        }
        let hashed;
        try{hashed=await hashPassword(novaSenha);}
        catch(e){
          console.warn('[PerfilPage] hashPassword threw:',e);
          if(typeof Sentry!=='undefined')try{Sentry.captureException(e,{tags:{flow:'password_change',step:'hashPassword'}});}catch(_){}
          // Auth já foi atualizado — log de inconsistência, mas continua confirmação UX
          hashed=novaSenha; // fallback inofensivo (será sobrescrito no próximo login via Auth)
        }
        try{onTrocarSenha(hashed);}
        catch(e){
          console.warn('[PerfilPage] onTrocarSenha threw:',e);
          if(typeof Sentry!=='undefined')try{Sentry.captureException(e,{tags:{flow:'password_change',step:'onTrocarSenha'}});}catch(_){}
          // não bloqueia — senha já está no Supabase Auth (source of truth)
        }
        // [ONDA3 P2 2026-05-11] audit log troca de senha — ação sensível (compliance/segurança)
        // best-effort: nunca bloqueia confirmação visual pro user (regra_admin_audit_log)
        try{
          if(typeof sb !== 'undefined' && sb && sb.rpc){
            await sb.rpc('log_admin_action',{
              p_action:'password_changed',
              p_target_type:'app_user',
              p_target_id:String(user?.id||user?.auth_user_id||user?.username||''),
              p_before:null,
              p_after:null,
              p_reason:'troca via PerfilPage',
              p_metadata:{username:user?.username,role:user?.role,context:'PerfilPage.handleSave',new_auth:Boolean(window.__ZNX_NEW_AUTH_ENABLED__)}
            });
          }
        }catch(_){/* audit best-effort */}
        setMsg('✅ Senha alterada com sucesso!');
        setSenhaAtual('');setNovaSenha('');setConfirmar('');
      }catch(e){
        // Catch-all final — garante UX honesta se algo escapar dos blocos internos
        console.error('[PerfilPage] handleSave unexpected error:',e);
        if(typeof Sentry!=='undefined')try{Sentry.captureException(e,{tags:{flow:'password_change',step:'handleSave_unexpected'}});}catch(_){}
        setErr('Erro inesperado. Tente novamente.');
      }finally{
        setSaving(false);
      }
    }

    return(
      <div style={{padding:32,maxWidth:480,margin:'40px auto'}}>
        <div style={{background:'#fff',borderRadius:12,boxShadow:'0 2px 16px rgba(0,0,0,0.08)',padding:32}}>
          <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:24}}>
            <div style={{width:56,height:56,borderRadius:'50%',background:'#1B2A4A',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:22,fontWeight:700}}>
              {(user.name||'U')[0].toUpperCase()}
            </div>
            <div>
              <div style={{fontWeight:700,fontSize:18,color:'#1B2A4A'}}>{user.name}</div>
              <div style={{color:'#6B7280',fontSize:13}}>@{user.username}</div>
              <div style={{background:'#EFF6FF',color:'#2563EB',borderRadius:20,padding:'2px 10px',fontSize:12,fontWeight:600,display:'inline-block',marginTop:4}}>{roleLabels[user.role]||user.role}</div>
            </div>
          </div>
          <div style={{borderTop:'1px solid #E5E7EB',paddingTop:20}}>
            <div style={{fontWeight:600,color:'#1B2A4A',marginBottom:16}}>Alterar Senha</div>
            {err&&<div style={{background:'#FEE2E2',color:'#DC2626',borderRadius:6,padding:'8px 12px',marginBottom:12,fontSize:13}}>{err}</div>}
            {msg&&<div style={{background:'#D1FAE5',color:'#065F46',borderRadius:6,padding:'8px 12px',marginBottom:12,fontSize:13}}>{msg}</div>}
            {[
              {label:'Senha atual',val:senhaAtual,set:setSenhaAtual,show:showA,setShow:setShowA},
              {label:'Nova senha',val:novaSenha,set:setNovaSenha,show:showN,setShow:setShowN},
              {label:'Confirmar nova senha',val:confirmar,set:setConfirmar,show:showC,setShow:setShowC},
            ].map(({label,val,set,show,setShow},idx)=>{
              const isNova=idx===1;
              const isConf=idx===2;
              const borderColor=isConf&&senhasMismatch?'#DC2626':isConf&&senhasMatch?'#16A34A':'#D1D5DB';
              return(
                <div key={label} style={{marginBottom:12}}>
                  <label style={{fontSize:12,fontWeight:600,color:'#374151',display:'block',marginBottom:4}}>
                    {label}
                    {isConf&&senhasMatch&&<span style={{color:'#16A34A',marginLeft:6,fontSize:11}}>✓ confere</span>}
                    {isConf&&senhasMismatch&&<span style={{color:'#DC2626',marginLeft:6,fontSize:11}}>✗ não confere</span>}
                  </label>
                  <div style={{position:'relative'}}>
                    <input type={show?'text':'password'} value={val} onChange={e=>set(e.target.value)} disabled={saving}
                      style={{width:'100%',padding:'8px 36px 8px 12px',border:`1px solid ${borderColor}`,borderRadius:6,fontSize:14,boxSizing:'border-box'}}/>
                    <button type="button" onClick={()=>setShow(s=>!s)} disabled={saving}
                      style={{position:'absolute',right:8,top:'50%',transform:'translateY(-50%)',background:'none',border:'none',cursor:'pointer',color:'#9CA3AF',fontSize:16,padding:0}}>
                      {show?'🙈':'👁'}
                    </button>
                  </div>
                  {/* [L2-Perfil 2026-05-09] Barra de força só na nova senha */}
                  {isNova&&novaSenha&&(
                    <div style={{marginTop:6}}>
                      <div style={{display:'flex',gap:3,marginBottom:3}}>
                        {[1,2,3,4,5].map(i=>(
                          <div key={i} style={{flex:1,height:4,borderRadius:2,background:i<=senhaForce.score?senhaForce.color:'#E5E7EB'}}/>
                        ))}
                      </div>
                      <div style={{fontSize:11,color:senhaForce.color,fontWeight:600}}>{senhaForce.label} {novaSenha.length<6&&'(mínimo 6 caracteres)'}</div>
                    </div>
                  )}
                </div>
              );
            })}
            <button onClick={handleSave} className="btn-gold" disabled={!podeSubmeter}
              style={{width:'100%',marginTop:8,padding:'10px',opacity:podeSubmeter?1:0.55,cursor:podeSubmeter?'pointer':'not-allowed'}}>
              {saving?'⏳ Alterando...':'Alterar Senha'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.PerfilPage = PerfilPage;
  window.PerfilPage = PerfilPage;

  window.ZNX.refactor_phase_5_loaded = window.ZNX.refactor_phase_5_loaded || {};
  window.ZNX.refactor_phase_5_loaded.PerfilPage = true;

})();