{% extends "base.html" %}
{% block title %}{{ 'Sign Up' if mode=='signup' else 'Sign In' }} — DUYS Boost{% endblock %}
{% block content %}
<style>
.auth-page{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;margin:-28px;background:var(--bg);position:relative}
.auth-page::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(124,77,255,.1) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:40px;width:100%;max-width:440px;position:relative;z-index:1}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.auth-title{font-size:26px;font-weight:800;margin-bottom:6px}
.auth-sub{font-size:14px;color:var(--muted);margin-bottom:28px}
.auth-tabs{display:flex;background:var(--surface2);border-radius:12px;padding:4px;margin-bottom:28px}
.auth-tab{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--muted)}
.auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--muted);font-size:13px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--text)}
.social-btn:hover{border-color:var(--accent)}
.error-list{background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.3);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--red)}
</style>
<div class="auth-page">
  <div class="auth-card">
    <div class="auth-logo">
      <div class="logo-mark">D</div>
      <div class="logo-text">DUYS Boost</div>
    </div>
    <div class="auth-tabs">
      <div class="auth-tab {% if mode=='login' %}active{% endif %}" onclick="window.location='{{ url_for('login') }}'">Sign In</div>
      <div class="auth-tab {% if mode=='signup' %}active{% endif %}" onclick="window.location='{{ url_for('signup') }}'">Sign Up</div>
    </div>
    <div id="error-box" class="error-list" style="display:none"></div>
    {% if mode == 'login' %}
    <form id="auth-form">
      <div class="form-group">
        <label class="form-label">Email or Username</label>
        <input class="form-input" name="identifier" type="text" placeholder="you@example.com" required>
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        <div style="position:relative">
          <input class="form-input" name="password" type="password" placeholder="••••••••" required id="pw-field">
          <span onclick="togglePw()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:16px" id="pw-eye">👁️</span>
        </div>
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:13px;font-size:15px">Sign In →</button>
    </form>
    <div class="divider">or continue with</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
      <button class="social-btn" type="button" onclick="window.location='{{ url_for('google_login_route') }}'">🌐 Google</button>
      <button class="social-btn" type="button" onclick="window.location='{{ url_for('apple_login_route') }}'"> Apple</button>
    </div>
    {% else %}
    <form id="auth-form">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
        <div class="form-group">
          <label class="form-label">Username</label>
          <input class="form-input" name="username" type="text" placeholder="cooluser" required>
        </div>
        <div class="form-group">
          <label class="form-label">Referral Code <span style="color:var(--muted)">(optional)</span></label>
          <input class="form-input" name="referral_code" type="text" placeholder="abc123">
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Email</label>
        <input class="form-input" name="email" type="email" placeholder="you@example.com" required>
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        <div style="position:relative">
          <input class="form-input" name="password" type="password" placeholder="Min. 8 characters" required id="pw-field">
          <span onclick="togglePw()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:16px" id="pw-eye">👁️</span>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Confirm Password</label>
        <input class="form-input" name="confirm_password" type="password" placeholder="••••••••" required>
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:13px;font-size:15px">Create Account →</button>
    </form>
    {% endif %}
  </div>
</div>
<script>
function togglePw(){
  const f=document.getElementById('pw-field');
  const e=document.getElementById('pw-eye');
  f.type=f.type==='password'?'text':'password';
  e.textContent=f.type==='password'?'👁️':'🙈';
}
document.getElementById('auth-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const btn=e.target.querySelector('[type=submit]');
  btn.textContent='Loading...';btn.disabled=true;
  const fd=new FormData(e.target);
  const action='{{ url_for("login") if mode=="login" else url_for("signup") }}';
  const r=await fetch(action,{method:'POST',body:fd});
  const d=await r.json();
  btn.textContent=btn.textContent.replace('Loading...','{{ "Sign In →" if mode=="login" else "Create Account →" }}');
  btn.disabled=false;
  if(d.success){window.location=d.redirect;}
  else{
    const eb=document.getElementById('error-box');
    eb.style.display='block';
    eb.innerHTML=d.errors.join('<br>');
  }
});
</script>
{% endblock %}