<%- include('partials/header') %>

<main class="app-shell">
  <div class="container">
    <div class="page-grid">
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <a class="sidebar-link" href="/dashboard">Overview</a>
          <a class="sidebar-link" href="/planner">Sleep Planner</a>
          <a class="sidebar-link" href="/commitments">Commitments</a>
          <a class="sidebar-link" href="/history">Sleep History</a>
          <a class="sidebar-link active" href="/profile">Profile & Settings</a>
        </nav>
      </aside>

      <div class="content-panel">
        <div class="eyebrow">Profile & settings</div>
        <h2>Personalize RestRight</h2>

        <div id="profile-alert" class="alert" style="display:none"></div>

        <form id="profile-form" class="form-grid">
          <div class="form-row">
            <div class="form-group">
              <label for="profileName">Name</label>
              <input id="profileName" name="name" type="text" value="<%= user && user.name ? user.name : '' %>" required />
            </div>
            <div class="form-group">
              <label for="preferredWakeTime">Preferred wake-up time</label>
              <input id="preferredWakeTime" name="preferredWakeTime" type="time" value="<%= preferences && preferences.preferred_wake_time ? preferences.preferred_wake_time : '06:30' %>" />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="preferredSleepDuration">Preferred sleep duration</label>
              <input id="preferredSleepDuration" name="preferredSleepDuration" type="number" min="4" max="12" value="<%= preferences && preferences.preferred_sleep_duration ? preferences.preferred_sleep_duration : 8 %>" />
            </div>
            <div class="form-group">
              <label for="themePreference">Theme settings</label>
              <select id="themePreference" name="themePreference">
                <option value="midnight" <%= preferences && preferences.theme_preference === 'midnight' ? 'selected' : '' %>>Midnight</option>
                <option value="daylight" <%= preferences && preferences.theme_preference === 'daylight' ? 'selected' : '' %>>Daylight</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="notificationPreferences">Notification preferences</label>
            <select id="notificationPreferences" name="notificationPreferences">
              <option value="email" <%= preferences && preferences.notification_preferences && preferences.notification_preferences.includes('email') ? 'selected' : '' %>>Email</option>
              <option value="push" <%= preferences && preferences.notification_preferences && preferences.notification_preferences.includes('push') ? 'selected' : '' %>>Push</option>
              <option value="both" <%= preferences && preferences.notification_preferences === 'both' ? 'selected' : '' %>>Both</option>
            </select>
          </div>

          <div class="form-actions">
            <button class="btn btn-primary" type="submit">Save Changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>

<script>
  document.getElementById('profile-form')?.addEventListener('submit', async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const payload = {
      name: formData.get('name'),
      preferredWakeTime: formData.get('preferredWakeTime'),
      preferredSleepDuration: formData.get('preferredSleepDuration'),
      notificationPreferences: formData.get('notificationPreferences'),
      themePreference: formData.get('themePreference')
    };

    const alertBox = document.getElementById('profile-alert');
    const response = await fetch('/profile/update', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    const data = await response.json();
    alertBox.style.display = 'block';
    if (!response.ok || !data.success) {
      alertBox.className = 'alert alert-error';
      alertBox.textContent = data.message || 'Unable to save profile.';
      return;
    }

    alertBox.className = 'alert alert-success';
    alertBox.textContent = data.message || 'Saved successfully.';
  });
</script>

<%- include('partials/footer') %>
