<%- include('partials/header') %>

<main class="app-shell planner-shell">
  <div class="container">
    <div class="page-grid">
      <aside class="sidebar">
        <nav class="sidebar-nav" aria-label="Account navigation">
          <a class="sidebar-link" href="/dashboard">Overview</a>
          <a class="sidebar-link active" 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" href="/profile">Profile & Settings</a>
        </nav>
      </aside>

      <div class="content-panel planner-panel">
        <div class="eyebrow">Sleep planner</div>
        <h1>Plan a sleep schedule that fits your life</h1>
        <p class="planner-intro">Set your sleep goals, add the things you need to do, and review any conflicts before saving a schedule.</p>

        <form id="planner-form" class="planner-section form-grid">
          <div class="planner-section-heading">
            <span class="section-number">1</span>
            <div>
              <h2>My Sleep Goals</h2>
              <p>Tell us when you want to wake up and how much sleep you need.</p>
            </div>
          </div>

          <div class="form-row">
            <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' %>" required />
              <small>The time you want to wake up.</small>
            </div>
            <div class="form-group">
              <label for="requiredSleepDuration">Required sleep duration</label>
              <div class="input-suffix">
                <input id="requiredSleepDuration" name="requiredSleepDuration" type="number" min="4" max="12" step="0.5" value="<%= preferences && preferences.preferred_sleep_duration ? preferences.preferred_sleep_duration : 8 %>" required />
                <span>hours</span>
              </div>
              <small>Most adults need around 7 to 9 hours. Default: 8 hours.</small>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="currentBedtime">Current bedtime</label>
              <input id="currentBedtime" name="currentBedtime" type="time" value="22:30" required />
              <small>Your usual bedtime, used only to explain how the schedule differs.</small>
            </div>
            <fieldset class="form-group day-fieldset">
              <legend>Preferred sleep days</legend>
              <small>Choose the days you want to wake up following this schedule.</small>
              <div class="day-checkboxes">
                <% const selectedSleepDays = (preferences && preferences.preferred_sleep_days ? preferences.preferred_sleep_days : 'Mon,Tue,Wed,Thu,Fri').split(','); %>
                <% [['Mon','Monday'],['Tue','Tuesday'],['Wed','Wednesday'],['Thu','Thursday'],['Fri','Friday'],['Sat','Saturday'],['Sun','Sunday']].forEach(([value, label]) => { %>
                  <label class="day-option">
                    <input type="checkbox" name="preferredSleepDays" value="<%= value %>" <%= selectedSleepDays.includes(value) ? 'checked' : '' %> />
                    <span><%= label %></span>
                  </label>
                <% }) %>
              </div>
            </fieldset>
          </div>

          <div id="planner-message" class="alert" role="alert" aria-live="polite" hidden></div>
          <div class="planner-actions">
            <button class="btn btn-primary generate-button" type="submit">Generate Sleep Schedule</button>
          </div>
        </form>

        <section class="planner-section" aria-labelledby="commitment-heading">
          <div class="planner-section-heading">
            <span class="section-number">2</span>
            <div>
              <h2 id="commitment-heading">My Daily Commitments</h2>
              <p>Add the activities that may affect your sleep or morning routine.</p>
            </div>
          </div>

          <div id="commitment-list" class="planner-commitment-list"></div>
          <div id="commitment-empty" class="empty-state" hidden>No commitments yet. Add classes, work, study time, or anything else that follows a schedule.</div>

          <form id="commitment-form" class="commitment-editor" hidden>
            <h3 id="commitment-form-heading">Add a commitment</h3>
            <div class="form-row">
              <div class="form-group">
                <label for="commitmentName">Commitment name</label>
                <input id="commitmentName" name="name" type="text" maxlength="80" placeholder="e.g., Classes or Work" required />
              </div>
              <div class="form-group">
                <label for="commitmentPriority">Priority</label>
                <select id="commitmentPriority" name="priority" required>
                  <option value="Low">Low</option>
                  <option value="Medium" selected>Medium</option>
                  <option value="High">High</option>
                </select>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="commitmentStartTime">Start time</label>
                <input id="commitmentStartTime" name="startTime" type="time" required />
              </div>
              <div class="form-group">
                <label for="commitmentEndTime">End time</label>
                <input id="commitmentEndTime" name="endTime" type="time" required />
                <small>For an activity that passes midnight, set an end time earlier than its start.</small>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="preparationTime">Preparation or travel time</label>
                <div class="input-suffix">
                  <input id="preparationTime" name="preparationTime" type="number" min="0" max="720" step="5" value="0" required />
                  <span>minutes</span>
                </div>
                <small>How long you need before the activity starts.</small>
              </div>
              <fieldset class="form-group day-fieldset">
                <legend>Days this commitment happens</legend>
                <div class="day-checkboxes compact-days">
                  <% [['Mon','Mon'],['Tue','Tue'],['Wed','Wed'],['Thu','Thu'],['Fri','Fri'],['Sat','Sat'],['Sun','Sun']].forEach(([value, label]) => { %>
                    <label class="day-option">
                      <input type="checkbox" name="sleepDays" value="<%= value %>" />
                      <span><%= label %></span>
                    </label>
                  <% }) %>
                </div>
              </fieldset>
            </div>

            <div class="form-actions">
              <button id="save-commitment" class="btn btn-primary" type="submit">Save Commitment</button>
              <button id="cancel-commitment" class="btn btn-ghost" type="button">Cancel</button>
            </div>
          </form>

          <button type="button" class="btn btn-secondary add-commitment-button" id="add-commitment">+ Add Commitment</button>
        </section>

        <section id="result-section" class="planner-section results-section" aria-labelledby="result-heading" hidden>
          <div class="planner-section-heading">
            <span class="section-number">3</span>
            <div>
              <h2 id="result-heading">Your Sleep Schedule</h2>
              <p>Review this plan and its warnings before saving.</p>
            </div>
          </div>
          <div id="result-box" class="result-box" aria-live="polite"></div>
          <p id="schedule-save-status" class="planner-save-status" role="status" hidden></p>
          <button id="save-schedule" class="btn btn-primary save-schedule-button" type="button">Save Schedule</button>
        </section>
      </div>
    </div>
  </div>
</main>

<%- include('partials/footer') %>
