// Tidal — Login Screen
// Salva em: public/tidal/login.jsx

const Login = ({ onLogin, sessionExpired }) => {
  const lang = useT().lang;
  const [pwaPronto, setPwaPronto] = useState(!!window._pwaPrompt);
  useEffect(() => {
    const f = () => setPwaPronto(!!window._pwaPrompt);
    window.addEventListener('pwa-prompt-ready', f);
    return () => window.removeEventListener('pwa-prompt-ready', f);
  }, []);
  const emApp = window.matchMedia && window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
  const ehIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);
  const instalarApp = async () => {
    const p = window._pwaPrompt;
    if (!p) return;
    p.prompt();
    try { await p.userChoice; } catch (e) {}
    window._pwaPrompt = null; setPwaPronto(false);
  };
  const [form, setForm] = React.useState({ login: '', password: '' });
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [showPass, setShowPass] = React.useState(false);

  const handleSubmit = async () => {
    if (!form.login || !form.password) {
      setError((lang==='pt'?'Preencha email e senha.':'Fill in email and password.'));
      return;
    }
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ login: form.login, password: form.password })
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || (lang==='pt'?'Credenciais inválidas.':'Invalid credentials.'));
      } else {
        localStorage.setItem('genesis_token', data.token);
        localStorage.setItem('genesis_user', JSON.stringify(data.user));
        onLogin(data.user, data.token);
      }
    } catch (e) {
      setError((lang==='pt'?'Erro de conexão com o servidor.':'Connection error with the server.'));
    } finally {
      setLoading(false);
    }
  };

  const handleKey = (e) => {
    if (e.key === 'Enter') handleSubmit();
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--surface-2)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '24px',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Background decoration */}
      <div style={{
        position: 'absolute',
        top: -120,
        right: -120,
        width: 480,
        height: 480,
        borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(217,105,75,0.08) 0%, transparent 70%)',
        pointerEvents: 'none'
      }}/>
      <div style={{
        position: 'absolute',
        bottom: -80,
        left: -80,
        width: 320,
        height: 320,
        borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(31,87,85,0.06) 0%, transparent 70%)',
        pointerEvents: 'none'
      }}/>

      <div style={{
        width: '100%',
        maxWidth: 420,
        animation: 'slideUp .4s both'
      }}>
        {/* Logo */}
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            width: 52,
            height: 52,
            borderRadius: '50%',
            background: 'var(--accent)',
            display: 'inline-grid',
            placeItems: 'center',
            color: 'var(--cream)',
            fontFamily: 'var(--fs)',
            fontStyle: 'italic',
            fontSize: 28,
            marginBottom: 16
          }}>g</div>
          <div style={{
            fontFamily: 'var(--fs)',
            fontStyle: 'italic',
            fontSize: 32,
            letterSpacing: '-0.5px',
            color: 'var(--ink)',
            lineHeight: 1
          }}>genesis</div>
          <div style={{
            fontFamily: 'var(--fm)',
            fontSize: 9,
            letterSpacing: '0.22em',
            color: 'var(--muted)',
            marginTop: 6,
            textTransform: 'uppercase'
          }}>PSV · I</div>
        </div>

        {/* Card */}
        <div style={{
          background: 'var(--cream)',
          border: '1px solid var(--line-soft)',
          borderRadius: 24,
          padding: '36px 32px',
          boxShadow: '0 24px 64px -32px rgba(31,42,46,0.14)'
        }}>
          <div style={{
            fontFamily: 'var(--fs)',
            fontSize: 26,
            letterSpacing: '-0.3px',
            color: 'var(--ink)',
            marginBottom: 6
          }}>Bem-vindo <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{lang==='pt'?'a bordo.':'aboard.'}</em></div>
          <div style={{
            fontFamily: 'var(--fs)',
            fontStyle: 'italic',
            fontSize: 14,
            color: 'var(--muted)',
            marginBottom: 28
          }}>{lang==='pt'?'Entre com suas credenciais para acessar o portal.':'Sign in with your credentials to access the portal.'}</div>

          {/* Email */}
          <div style={{ marginBottom: 16 }}>
            <label className="label">{lang==='pt'?'Email ou ID Genesis':'Email or Genesis ID'}</label>
            <input
              className="input"
              type="text"
              placeholder="email ou GEN-ID (ex: GEN-0001)"
              value={form.login}
              onChange={e => setForm(f => ({ ...f, login: e.target.value }))}
              onKeyDown={handleKey}
              style={{ width: '100%', boxSizing: 'border-box' }}
              autoComplete="username"
              autoFocus
            />
          </div>

          {/* Password */}
          <div style={{ marginBottom: 24, position: 'relative' }}>
            <label className="label">{lang==='pt'?'Senha':'Password'}</label>
            <div style={{ position: 'relative' }}>
              <input
                className="input"
                type={showPass ? 'text' : 'password'}
                placeholder="••••••••"
                value={form.password}
                onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
                onKeyDown={handleKey}
                style={{ width: '100%', boxSizing: 'border-box', paddingRight: 44 }}
                autoComplete="current-password"
              />
              <button
                onClick={() => setShowPass(v => !v)}
                style={{
                  position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
                  background: 'none', border: 'none', cursor: 'pointer',
                  color: 'var(--muted)', padding: 4, display: 'grid', placeItems: 'center'
                }}
              >
                <Icon n={showPass ? 'eye-off' : 'eye'} size={16}/>
              </button>
            </div>
          </div>

          {/* Sessão expirada */}
          {sessionExpired && !error && (
            <div style={{
              background: 'rgba(92,141,174,0.08)',
              border: '1px solid rgba(92,141,174,0.25)',
              borderRadius: 10,
              padding: '10px 14px',
              fontSize: 13,
              color: 'var(--teal)',
              marginBottom: 18,
              fontFamily: 'var(--f)',
              animation: 'slideIn .25s both'
            }}>Sua sessão expirou. Faça login novamente para continuar.</div>
          )}

          {/* Error */}
          {error && (
            <div style={{
              background: 'rgba(217,105,75,0.08)',
              border: '1px solid rgba(217,105,75,0.2)',
              borderRadius: 10,
              padding: '10px 14px',
              fontSize: 13,
              color: 'var(--accent-2)',
              marginBottom: 18,
              fontFamily: 'var(--f)',
              animation: 'slideIn .25s both'
            }}>{error}</div>
          )}

          {/* Submit */}
          <button
            onClick={handleSubmit}
            disabled={loading}
            style={{
              width: '100%',
              padding: '12px 20px',
              background: loading ? 'var(--muted-3)' : 'var(--accent)',
              color: 'var(--cream)',
              border: 'none',
              borderRadius: 999,
              fontFamily: 'var(--f)',
              fontWeight: 600,
              fontSize: 14,
              cursor: loading ? 'not-allowed' : 'pointer',
              transition: 'all .2s',
              letterSpacing: '0.02em'
            }}
            onMouseEnter={e => { if (!loading) e.currentTarget.style.background = 'var(--accent-2)'; }}
            onMouseLeave={e => { if (!loading) e.currentTarget.style.background = 'var(--accent)'; }}
          >
            {loading ? (lang==='pt'?'Entrando…':'Signing in…') : (lang==='pt'?'Entrar no portal':'Enter the portal')}
          </button>
        </div>

        {/* PWA: instalar o app */}
        {!emApp && pwaPronto && (
          <button onClick={instalarApp} style={{
            width:'100%', marginTop:14, padding:'12px 16px', borderRadius:14, cursor:'pointer',
            border:'1.5px dashed var(--teal)', background:'rgba(31,87,85,0.05)',
            fontFamily:'var(--fm)', fontSize:12.5, fontWeight:600, color:'var(--teal)',
            display:'flex', alignItems:'center', justifyContent:'center', gap:8
          }}>
            📲 {lang==='pt'?'Instalar o Portal como aplicativo':'Install the Portal as an app'}
          </button>
        )}
        {!emApp && !pwaPronto && ehIOS && (
          <div style={{
            marginTop:14, padding:'11px 16px', borderRadius:14, textAlign:'center',
            border:'1px dashed var(--line)', background:'var(--cream-2)',
            fontFamily:'var(--fm)', fontSize:11, color:'var(--muted)', lineHeight:1.5
          }}>
            📲 {lang==='pt'
              ? <>Pra instalar como app: toque em <b>compartilhar</b> e depois <b>"Adicionar à Tela de Início"</b></>
              : <>To install as an app: tap <b>share</b> then <b>"Add to Home Screen"</b></>}
          </div>
        )}

        {/* Footer */}
        <div style={{
          textAlign: 'center',
          marginTop: 24,
          fontFamily: 'var(--fm)',
          fontSize: 10,
          color: 'var(--muted-2)',
          letterSpacing: '0.08em'
        }}>
          PORTAL GENESIS · {new Date().getFullYear()}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Login });

// ─── FirstLoginScreen — troca de senha obrigatória ───
const FirstLoginScreen = ({ user, token, onDone }) => {
  const lang = useT().lang;
  const [nova, setNova] = React.useState('');
  const [confirma, setConfirma] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [showNova, setShowNova] = React.useState(false);
  const [showConfirma, setShowConfirma] = React.useState(false);

  const primeiroNome = (user?.nome || user?.email || '').split(' ')[0];

  const handleSubmit = async () => {
    setError('');
    if (nova.length < 6) { setError((lang==='pt'?'A senha deve ter pelo menos 6 caracteres.':'Password must have at least 6 characters.')); return; }
    if (nova !== confirma) { setError((lang==='pt'?'As senhas não coincidem.':'Passwords do not match.')); return; }
    setLoading(true);
    try {
      const res = await fetch('/api/users/change-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
        body: JSON.stringify({ nova_senha: nova })
      });
      const data = await res.json();
      if (res.ok) {
        // Atualiza o user no localStorage
        const updatedUser = { ...user, first_login: false };
        localStorage.setItem('genesis_user', JSON.stringify(updatedUser));
        onDone(updatedUser);
      } else {
        setError(data.error || (lang==='pt'?'Erro ao trocar senha.':'Error changing password.'));
      }
    } catch(e) {
      setError((lang==='pt'?'Erro de conexão com o servidor.':'Connection error with the server.'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--surface-2)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '24px', position: 'relative', overflow: 'hidden'
    }}>
      {/* Background decoration */}
      <div style={{position:'absolute',top:-120,right:-120,width:480,height:480,borderRadius:'50%',background:'radial-gradient(circle, var(--accent-soft) 0%, transparent 70%)',pointerEvents:'none'}}/>
      <div style={{position:'absolute',bottom:-80,left:-80,width:320,height:320,borderRadius:'50%',background:'radial-gradient(circle, var(--sky-soft) 0%, transparent 70%)',pointerEvents:'none'}}/>

      <div style={{width:'100%',maxWidth:420,position:'relative'}}>
        {/* Logo */}
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:36}}>
          <div style={{width:36,height:36,borderRadius:'50%',background:'var(--accent)',display:'grid',placeItems:'center',color:'var(--cream)',fontFamily:'var(--fs)',fontStyle:'italic',fontSize:20}}>g</div>
          <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',letterSpacing:2,textTransform:'uppercase'}}>Portal Genesis</div>
        </div>

        {/* Card */}
        <div style={{background:'var(--cream)',border:'1px solid var(--line-soft)',borderRadius:28,padding:'36px 32px',boxShadow:'0 24px 64px -24px rgba(31,42,46,0.18)'}}>
          {/* Ícone de boas-vindas */}
          <div style={{fontSize:40,marginBottom:16}}>🔐</div>

          <div style={{fontFamily:'var(--fs)',fontSize:30,letterSpacing:'-0.6px',lineHeight:1.1,marginBottom:8}}>
            Bem-vindo,{' '}
            <em style={{fontStyle:'italic',color:'var(--accent)'}}>{primeiroNome}.</em>
          </div>
          <div style={{fontSize:14,color:'var(--muted)',lineHeight:1.6,marginBottom:28}}>
            Este é seu primeiro acesso. Por segurança, defina uma senha pessoal antes de continuar.
          </div>

          {/* Campo nova senha */}
          <div style={{marginBottom:14}}>
            <label style={{fontFamily:'var(--fm)',fontSize:10.5,letterSpacing:1,textTransform:'uppercase',color:'var(--muted)',display:'block',marginBottom:6}}>
              Nova senha
            </label>
            <div style={{position:'relative'}}>
              <input
                type={showNova ? 'text' : 'password'}
                value={nova}
                onChange={e=>setNova(e.target.value)}
                onKeyDown={e=>e.key==='Enter'&&handleSubmit()}
                placeholder="mínimo 6 caracteres"
                style={{width:'100%',boxSizing:'border-box',padding:'13px 44px 13px 16px',borderRadius:14,border:'1px solid var(--line)',background:'var(--cream-2)',fontFamily:'var(--f)',fontSize:15,color:'var(--ink)',outline:'none'}}
              />
              <button onClick={()=>setShowNova(v=>!v)} style={{position:'absolute',right:12,top:'50%',transform:'translateY(-50%)',background:'none',border:'none',cursor:'pointer',color:'var(--muted)',fontSize:13,fontFamily:'var(--fm)'}}>
                {showNova?'ocultar':'ver'}
              </button>
            </div>
            {/* Barra de força da senha */}
            {nova.length > 0 && (
              <div style={{marginTop:8,display:'flex',gap:4}}>
                {[1,2,3,4].map(i => {
                  const força = nova.length >= 10 ? 4 : nova.length >= 8 ? 3 : nova.length >= 6 ? 2 : 1;
                  const cores = ['#E8896A','#C8A24A','#5C8DAE','#5C7E4F'];
                  return <div key={i} style={{flex:1,height:3,borderRadius:2,background:i<=força?cores[força-1]:'var(--line-soft)',transition:'background .2s'}}/>;
                })}
              </div>
            )}
          </div>

          {/* Campo confirmar senha */}
          <div style={{marginBottom:20}}>
            <label style={{fontFamily:'var(--fm)',fontSize:10.5,letterSpacing:1,textTransform:'uppercase',color:'var(--muted)',display:'block',marginBottom:6}}>
              Confirmar senha
            </label>
            <div style={{position:'relative'}}>
              <input
                type={showConfirma ? 'text' : 'password'}
                value={confirma}
                onChange={e=>setConfirma(e.target.value)}
                onKeyDown={e=>e.key==='Enter'&&handleSubmit()}
                placeholder="repita a nova senha"
                style={{
                  width:'100%',boxSizing:'border-box',padding:'13px 44px 13px 16px',borderRadius:14,
                  border:`1px solid ${confirma.length>0?(nova===confirma?'var(--leaf)':'var(--coral-2)'):'var(--line)'}`,
                  background:'var(--cream-2)',fontFamily:'var(--f)',fontSize:15,color:'var(--ink)',outline:'none'
                }}
              />
              <button onClick={()=>setShowConfirma(v=>!v)} style={{position:'absolute',right:12,top:'50%',transform:'translateY(-50%)',background:'none',border:'none',cursor:'pointer',color:'var(--muted)',fontSize:13,fontFamily:'var(--fm)'}}>
                {showConfirma?'ocultar':'ver'}
              </button>
            </div>
            {confirma.length > 0 && nova !== confirma && (
              <div style={{marginTop:6,fontSize:12,color:'var(--coral-2)',fontFamily:'var(--fm)'}}>{lang==='pt'?'as senhas não coincidem':'passwords do not match'}</div>
            )}
          </div>

          {/* Erro */}
          {error && (
            <div style={{marginBottom:16,padding:'10px 14px',background:'var(--coral-soft)',borderRadius:12,fontSize:13,color:'var(--accent-2)',fontFamily:'var(--fm)'}}>
              {error}
            </div>
          )}

          {/* Botão */}
          <button
            onClick={handleSubmit}
            disabled={loading || nova.length < 6 || nova !== confirma}
            style={{
              width:'100%',padding:'14px',borderRadius:16,border:'none',cursor:'pointer',
              background: nova.length >= 6 && nova === confirma ? 'var(--accent)' : 'var(--cream-3)',
              color: nova.length >= 6 && nova === confirma ? 'var(--cream)' : 'var(--muted)',
              fontFamily:'var(--fs)',fontStyle:'italic',fontSize:18,letterSpacing:'-0.2px',
              transition:'all .2s',opacity:loading?0.7:1
            }}
          >
            {loading ? (lang==='pt'?'Salvando…':'Saving…') : (lang==='pt'?'Definir senha e entrar →':'Set password and enter →')}
          </button>
        </div>

        <div style={{textAlign:'center',marginTop:20,fontSize:11,color:'var(--muted-2)',fontFamily:'var(--fm)',letterSpacing:'0.08em'}}>
          PORTAL GENESIS · {new Date().getFullYear()}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Login, FirstLoginScreen });