<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>Reset Password — MEDI CHEAP AI AUTOMATION</title>
  <link rel="stylesheet" href="assets/css/main.css"/>
  <style>
    body{background:var(--bg-dark,#0f0f1a);min-height:100vh;display:flex;align-items:center;justify-content:center}
    .reset-card{background:var(--card-bg,#1a1a2e);border:1px solid var(--border-color,rgba(255,255,255,0.08));border-radius:16px;padding:40px;width:100%;max-width:420px}
    .brand{text-align:center;font-size:1.8rem;font-weight:800;margin-bottom:6px}
    .brand span{color:var(--primary,#6366f1)}
    .subtitle{text-align:center;color:var(--text-muted);margin-bottom:28px;font-size:0.9rem}
    .success-box{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:#4ade80;border-radius:8px;padding:14px;font-size:0.88rem;display:none;margin-bottom:16px;text-align:center}
    .error-box{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:12px;font-size:0.85rem;display:none;margin-bottom:16px}
  </style>
</head>
<body>
<div class="reset-card">
  <div class="brand">⚡ Auto<span>Viral</span></div>
  <div class="subtitle">Enter your email to receive a reset link</div>
  <div class="success-box" id="successBox">✅ Reset link sent! Check your email inbox.</div>
  <div class="error-box" id="errorBox"></div>
  <div class="form-group">
    <label class="form-label">Email Address</label>
    <input type="email" id="emailInput" class="form-control" placeholder="you@example.com"/>
  </div>
  <button class="btn btn-primary" style="width:100%" id="resetBtn">Send Reset Link</button>
  <p style="text-align:center;margin-top:16px;font-size:0.85rem">
    <a href="login.html" style="color:var(--primary)">← Back to Login</a>
  </p>
</div>
<div class="loading-overlay" id="loadingOverlay" style="display:none"><div class="spinner"></div></div>
<script type="module">
import { auth } from './assets/js/firebase-init.js';
import { sendPasswordResetEmail } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js';
const overlay=document.getElementById('loadingOverlay');
const errBox=document.getElementById('errorBox');
const sucBox=document.getElementById('successBox');
document.getElementById('resetBtn').addEventListener('click',async()=>{
  const email=document.getElementById('emailInput').value.trim();
  if(!email){errBox.textContent='Please enter your email.';errBox.style.display='block';return;}
  errBox.style.display='none';sucBox.style.display='none';
  overlay.style.display='flex';
  try{
    await sendPasswordResetEmail(auth,email);
    sucBox.style.display='block';
    document.getElementById('emailInput').value='';
  }catch(e){
    const msgs={'auth/user-not-found':'No account with this email.','auth/invalid-email':'Invalid email address.'};
    errBox.textContent=msgs[e.code]||e.message;errBox.style.display='block';
  }
  overlay.style.display='none';
});
document.getElementById('emailInput').addEventListener('keydown',e=>{if(e.key==='Enter')document.getElementById('resetBtn').click();});
</script>
</body>
</html>