// ─── Profile Module ─────────────────────────────────────────────────

const Profile = {
  async render(app) {
    const u = app.state.user || {};
    app.$content.innerHTML = `
      <div class="card">
        <div class="card-header"><h3>My Profile</h3></div>
        <div class="card-body">
          <div id="profile-message"></div>
          <form id="profile-form">
            <div class="form-row">
              <div class="form-group">
                <label>First Name</label>
                <input type="text" name="fname" class="form-control" value="${app.escape(u.fname || '')}" required>
              </div>
              <div class="form-group">
                <label>Last Name</label>
                <input type="text" name="lname" class="form-control" value="${app.escape(u.lname || '')}" required>
              </div>
            </div>
            <div class="form-group">
              <label>Email</label>
              <input type="email" name="email" class="form-control" value="${app.escape(u.email || '')}" required>
            </div>
            <div class="form-group">
              <label>Phone</label>
              <input type="tel" name="phone" class="form-control" value="${app.escape(u.phone || '')}">
            </div>
            <div class="form-group">
              <label>Current Password <small>(required to save changes)</small></label>
              <input type="password" name="opass" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary">Save Changes</button>
          </form>
        </div>
      </div>
      
      <div class="card">
        <div class="card-header"><h3>Change Password</h3></div>
        <div class="card-body">
          <div id="password-message"></div>
          <form id="password-form">
            <div class="form-group">
              <label>Current Password</label>
              <input type="password" name="opass" class="form-control" required>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>New Password</label>
                <input type="password" name="pass1" class="form-control" required>
              </div>
              <div class="form-group">
                <label>Confirm New Password</label>
                <input type="password" name="pass2" class="form-control" required>
              </div>
            </div>
            <button type="submit" class="btn btn-warning">Change Password</button>
          </form>
        </div>
      </div>
    `;

    document.getElementById('profile-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = {};
      fd.forEach((v, k) => data[k] = v);
      const r = await app.api('profile/update', 'POST', data);
      if (r.success) {
        document.getElementById('profile-message').innerHTML = '<div class="alert alert-success">Profile updated!</div>';
        await app.checkAuth();
      } else {
        document.getElementById('profile-message').innerHTML = `<div class="alert alert-danger">${r.message}</div>`;
      }
    };

    document.getElementById('password-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = {};
      fd.forEach((v, k) => data[k] = v);
      const r = await app.api('profile/password', 'POST', data);
      if (r.success) {
        document.getElementById('password-message').innerHTML = '<div class="alert alert-success">Password changed! Please login again.</div>';
        setTimeout(() => app.logout(), 2000);
      } else {
        document.getElementById('password-message').innerHTML = `<div class="alert alert-danger">${r.message}</div>`;
      }
    };
  }
};