// page-login.jsx — Login & Cadastro com Supabase Auth real

const { useState: useStateLogin } = React;

function PageLogin({ onLogin }) {
  const [mode, setMode]     = useStateLogin('login');
  const [email, setEmail]   = useStateLogin('');
  const [pw, setPw]         = useStateLogin('');
  const [name, setName]     = useStateLogin('');
  const [loading, setLoading] = useStateLogin(false);
  const [error, setError]   = useStateLogin('');
  const [resetSent, setResetSent] = useStateLogin(false);

  async function handleSubmit() {
    setError(''); setLoading(true);
    try {
      if (mode === 'login') {
        await SB.signIn(email, pw);
        await onLogin();
      } else if (mode === 'signup') {
        await SB.signUp(email, pw, name);
        await onLogin();
      } else if (mode === 'reset') {
        await SB.resetPassword(email);
        setResetSent(true);
      }
    } catch (e) {
      const msgs = {
        'Invalid login credentials': 'E-mail ou senha incorretos.',
        'Email not confirmed': 'Confirme seu e-mail antes de entrar.',
        'User already registered': 'Este e-mail já está cadastrado.',
      };
      setError(msgs[e.message] ?? 'Ocorreu um erro. Tente novamente.');
    } finally {
      setLoading(false);
    }
  }

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

  if (resetSent) return (
    <div style={{ position:'fixed',inset:0,display:'grid',placeItems:'center',background:'var(--bg-base)' }}>
      <div style={{ textAlign:'center', maxWidth: 360 }}>
        <iconify-icon icon="lucide:mail-check" style={{ fontSize:48, color:'var(--ok)', marginBottom:16 }} />
        <h2 style={{ fontWeight:800, marginBottom:8 }}>Verifique seu e-mail</h2>
        <p className="secondary">Enviamos um link de redefinição para <b>{email}</b>.</p>
        <button className="btn btn-secondary" style={{ marginTop:24 }} onClick={() => { setResetSent(false); setMode('login'); }}>
          Voltar ao login
        </button>
      </div>
    </div>
  );

  return (
    <div style={{
      position: 'fixed', inset: 0,
      display: 'grid', gridTemplateColumns: '1fr 1.1fr',
      background: 'var(--bg-base)',
    }}>
      {/* ── Formulário ── */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center', padding:40 }}>
        <div style={{ width:'100%', maxWidth:380 }}>
          <div className="brand" style={{ padding:0, border:'none', marginBottom:36 }}>
            <div className="brand-mark">S</div>
            <div>
              <div className="brand-name">SyncBridge</div>
              <div className="brand-sub">Plataforma de integração</div>
            </div>
          </div>

          <h1 style={{ fontSize:28, fontWeight:800, letterSpacing:'-0.5px', marginBottom:6 }}>
            {mode === 'login' ? 'Entrar na sua conta'
             : mode === 'signup' ? 'Criar sua conta'
             : 'Redefinir senha'}
          </h1>
          <p className="secondary" style={{ marginBottom:28, fontSize:14 }}>
            {mode === 'login' ? 'Acompanhe a integração da sua loja Nuvemshop com o ActiveCampaign.'
             : mode === 'signup' ? 'Em 2 minutos sua loja está sincronizando.'
             : 'Informe seu e-mail para receber o link de redefinição.'}
          </p>

          {mode === 'signup' && (
            <div style={{ marginBottom:14 }}>
              <label className="tweaks-label" style={{ marginBottom:6 }}>Nome</label>
              <input className="input" placeholder="Seu nome" value={name}
                onChange={e => setName(e.target.value)} onKeyDown={handleKey} />
            </div>
          )}

          <div style={{ marginBottom:14 }}>
            <label className="tweaks-label" style={{ marginBottom:6 }}>E-mail</label>
            <input className="input" type="email" placeholder="seu@email.com" value={email}
              onChange={e => setEmail(e.target.value)} onKeyDown={handleKey} />
          </div>

          {mode !== 'reset' && (
            <div style={{ marginBottom:18 }}>
              <div className="row" style={{ justifyContent:'space-between', marginBottom:6 }}>
                <label className="tweaks-label" style={{ margin:0 }}>Senha</label>
                {mode === 'login' && (
                  <a style={{ fontSize:11, fontWeight:700, color:'var(--accent)', cursor:'pointer' }}
                    onClick={() => setMode('reset')}>
                    Esqueci a senha
                  </a>
                )}
              </div>
              <input className="input" type="password" placeholder="••••••••" value={pw}
                onChange={e => setPw(e.target.value)} onKeyDown={handleKey} />
            </div>
          )}

          {error && (
            <div style={{
              marginBottom:14, padding:'10px 12px',
              background:'var(--err-soft)', border:'1px solid var(--err)',
              borderRadius:'var(--r-md)', fontSize:13, color:'var(--err)',
            }}>
              {error}
            </div>
          )}

          <button className="btn btn-primary"
            style={{ width:'100%', justifyContent:'center', padding:'11px 14px', opacity: loading ? 0.7 : 1 }}
            onClick={handleSubmit} disabled={loading}>
            {loading
              ? <><iconify-icon icon="lucide:loader-circle" style={{ animation:'spin 1s linear infinite' }} /> Aguarde…</>
              : mode === 'login' ? <>'Entrar' <iconify-icon icon="lucide:arrow-right" /></>
              : mode === 'signup' ? 'Criar conta e conectar Nuvemshop'
              : 'Enviar link de redefinição'}
          </button>

          {mode !== 'reset' && (
            <div className="row" style={{ justifyContent:'center', gap:6, marginTop:18, fontSize:13 }}>
              <span className="muted">{mode === 'login' ? 'Ainda não tem conta?' : 'Já tem conta?'}</span>
              <a style={{ color:'var(--text-primary)', fontWeight:700, cursor:'pointer' }}
                onClick={() => { setMode(mode === 'login' ? 'signup' : 'login'); setError(''); }}>
                {mode === 'login' ? 'Criar conta' : 'Entrar'}
              </a>
            </div>
          )}
          {mode === 'reset' && (
            <div style={{ textAlign:'center', marginTop:16 }}>
              <a style={{ fontSize:13, color:'var(--accent)', cursor:'pointer' }}
                onClick={() => { setMode('login'); setError(''); }}>
                Voltar ao login
              </a>
            </div>
          )}
        </div>
      </div>

      {/* ── Visual ── */}
      <div style={{
        position:'relative', overflow:'hidden',
        background:'radial-gradient(ellipse at 30% 20%, rgba(255,122,0,0.18), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255,61,139,0.14), transparent 50%), var(--bg-surface)',
        borderLeft:'1px solid var(--border)',
        display:'grid', placeItems:'center', padding:40,
      }}>
        <div style={{
          position:'absolute', inset:0,
          backgroundImage:'linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px)',
          backgroundSize:'40px 40px',
          maskImage:'radial-gradient(ellipse at center, black 30%, transparent 70%)',
        }} />
        <div style={{ position:'relative', textAlign:'center', maxWidth:460 }}>
          <FlowDiagram />
          <h2 style={{ fontSize:26, fontWeight:700, letterSpacing:'-0.5px', marginTop:36, lineHeight:1.2 }}>
            Sua loja <span style={{ color:'var(--accent)' }}>conectada</span> em<br/>1 clique.
          </h2>
          <p className="secondary" style={{ marginTop:12, fontSize:14 }}>
            Pedidos, leads, carrinhos abandonados e catálogo
            sincronizando automaticamente — sem n8n, sem código, sem dor de cabeça.
          </p>
        </div>
      </div>
    </div>
  );
}

function FlowDiagram() {
  return (
    <div className="row" style={{ justifyContent:'center', gap:18 }}>
      <FlowNode label="Nuvemshop" icon="lucide:store" color="#3FB8E8" />
      <FlowConnector />
      <FlowNode label="SyncBridge" icon="lucide:zap" color="var(--accent)" big />
      <FlowConnector />
      <FlowNode label="ActiveCampaign" icon="lucide:send" color="#25D682" />
    </div>
  );
}

function FlowNode({ label, icon, color, big }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10 }}>
      <div style={{
        width:big?72:60, height:big?72:60, borderRadius:16,
        background:'var(--bg-elevated)', border:'1px solid var(--border-strong)',
        display:'grid', placeItems:'center',
        boxShadow: big ? `0 0 32px ${color}` : 'var(--shadow-md)',
        position:'relative',
      }}>
        <iconify-icon icon={icon} style={{ fontSize:big?28:24, color }} />
        {big && <span style={{
          position:'absolute', inset:-4, borderRadius:18,
          border:`1px solid ${color}`, opacity:0.3,
        }} />}
      </div>
      <span style={{ fontSize:11, fontWeight:700, color:'var(--text-secondary)' }}>{label}</span>
    </div>
  );
}

function FlowConnector() {
  return (
    <svg width="40" height="60" viewBox="0 0 40 60" style={{ overflow:'visible' }}>
      <line x1="0" y1="30" x2="40" y2="30" stroke="var(--border-strong)" strokeWidth="1.5" strokeDasharray="3 3" />
      <circle r="3" fill="var(--accent)">
        <animateMotion path="M0,30 L40,30" dur="2s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}

Object.assign(window, { PageLogin });