// ─── Authentication Pages ────────────────────────────────────────────

const Auth = {
  async login(app) {
    app.$content.innerHTML = `
    <div class="auth-page">
      <div class="auth-card">
        <h1>Welcome Back</h1>
        <p class="subtitle">Log in to your Host25Cent account</p>
        <div id="login-message"></div>
        <form id="login-form">
          <div class="form-group">
            <label>Email Address</label>
            <input type="email" name="email" class="form-control" placeholder="Enter your email" required>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" name="pass" class="form-control" placeholder="Enter password" required>
          </div>
          <button type="submit" class="btn btn-primary btn-lg btn-block">Sign In</button>
        </form>
        <div class="auth-links">
          <a href="#forgot" data-nav="forgot">Forgot Password?</a> &middot;
          <a href="#register" data-nav="register">Create Account</a>
        </div>
      </div>
    </div>`;

    document.getElementById('login-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = {};
      fd.forEach((v, k) => data[k] = v);
      const res = await app.api('auth/login', 'POST', data);
      if (res.success && res.data.redirect) {
        await app.checkAuth();
        app.state.page = res.data.redirect;
        window.location.hash = res.data.redirect;
        await app.render();
      } else {
        document.getElementById('login-message').innerHTML =
          `<div class="alert alert-danger">${res.message}</div>`;
      }
    };
  },

  async register(app) {
    app.$content.innerHTML = `
    <div class="auth-page">
      <div class="auth-card">
        <h1>Create Account</h1>
        <p class="subtitle">Get started with Host25Cent</p>
        <div id="register-message"></div>
        <form id="register-form">
          <div class="form-row">
            <div class="form-group">
              <label>First Name</label>
              <input type="text" name="fname" class="form-control" required>
            </div>
            <div class="form-group">
              <label>Last Name</label>
              <input type="text" name="lname" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label>Email Address</label>
            <input type="email" name="email" class="form-control" required>
          </div>
          <div class="form-group">
            <label>Phone</label>
            <input type="tel" name="phone" class="form-control">
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>Password</label>
              <input type="password" name="pass" class="form-control" required>
            </div>
            <div class="form-group">
              <label>Confirm Password</label>
              <input type="password" name="pass2" class="form-control" required>
            </div>
          </div>
          <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
        </form>
        <div class="auth-links">
          Already have an account? <a href="#login" data-nav="login">Sign In</a>
        </div>
      </div>
    </div>`;

    document.getElementById('register-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = {};
      fd.forEach((v, k) => data[k] = v);
      const res = await app.api('auth/register', 'POST', data);
      if (res.success) {
        await app.checkAuth();
        app.state.page = 'dashboard';
        window.location.hash = 'dashboard';
        await app.render();
        app.showMessage(res.message, 'success');
      } else {
        document.getElementById('register-message').innerHTML =
          `<div class="alert alert-danger">${res.message}</div>`;
      }
    };
  },

  async forgot(app) {
    app.$content.innerHTML = `
    <div class="auth-page">
      <div class="auth-card">
        <h1>Reset Password</h1>
        <p class="subtitle">Enter your email to receive a reset link</p>
        <div id="forgot-message"></div>
        <form id="forgot-form">
          <div class="form-group">
            <label>Email Address</label>
            <input type="email" name="email" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary btn-lg btn-block">Send Reset Link</button>
        </form>
        <div class="auth-links">
          <a href="#login" data-nav="login">Back to Login</a>
        </div>
      </div>
    </div>`;

    document.getElementById('forgot-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = {};
      fd.forEach((v, k) => data[k] = v);
      const res = await app.api('auth/forgot', 'POST', data);
      document.getElementById('forgot-message').innerHTML =
        `<div class="alert alert-info">${res.message}</div>`;
    };
  }
};