<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#6f5bd3">
  <meta name="description" content="Thompson Nest family dashboard">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="apple-touch-icon" href="icons/icon-192.png">
  <link rel="stylesheet" href="app.css">
  <title>Thompson Nest</title>
</head>
<body>
  <section id="profileGate" class="profile-gate">
    <div class="gate-panel">
      <div class="gate-brand"><span class="brand-mark">TN</span><div><p class="eyebrow">Welcome to</p><h1>Thompson Nest</h1></div></div>
      <div>
        <h2>Who’s using the Nest?</h2>
        <p class="muted">Select your profile. The first time you open it, you’ll create a private 4–6 digit PIN.</p>
      </div>
      <div id="loginProfiles" class="login-profile-grid"></div>
      <p class="gate-note">PINs in this prototype are saved only on this device. Cloud sync will require the later shared-data layer.</p>
    </div>
  </section>

  <div class="app-shell" id="appShell" hidden>
    <aside class="sidebar" aria-label="Primary navigation">
      <button class="brand" data-route="home" aria-label="Thompson Nest home">
        <span class="brand-mark">TN</span>
        <span><strong>Thompson Nest</strong><small>Family dashboard</small></span>
      </button>
      <nav class="side-nav">
        <button class="nav-item active" data-route="home"><span>⌂</span>Home</button>
        <button class="nav-item" data-route="kids"><span>☺</span>Kids</button>
        <button class="nav-item" data-route="household"><span>✓</span>Household</button>
        <button class="nav-item" data-route="rewards"><span>★</span>Rewards</button>
        <button class="nav-item" data-route="calendar"><span>□</span>Calendar</button>
        <button class="nav-item" data-route="games"><span>▣</span>Games</button>
      </nav>
      <div class="sidebar-foot">
        <button id="roleToggle" class="role-toggle">Signed in as <strong>Dan</strong></button>
        <small>Phase 2 visual prototype</small>
      </div>
    </aside>

    <main>
      <header class="topbar">
        <div><p class="eyebrow" id="todayLabel"></p><h1 id="pageTitle">Home</h1></div>
        <div class="top-actions">
          <button class="icon-button" id="installButton" hidden title="Install app">↓</button>
          <button class="avatar-button" id="activeAvatar">DT</button>
        </div>
      </header>

      <section id="home" class="page active"></section>
      <section id="kids" class="page"></section>
      <section id="household" class="page"></section>
      <section id="rewards" class="page"></section>
      <section id="calendar" class="page"></section>
      <section id="games" class="page"></section>
    </main>

    <nav class="mobile-nav" aria-label="Mobile navigation">
      <button class="active" data-route="home"><span>⌂</span>Home</button>
      <button data-route="kids"><span>☺</span>Kids</button>
      <button data-route="household"><span>✓</span>Tasks</button>
      <button data-route="rewards"><span>★</span>Rewards</button>
      <button data-route="games"><span>▣</span>Games</button>
    </nav>
  </div>

  <dialog id="taskDialog">
    <form method="dialog" id="taskForm" class="dialog-card">
      <div class="dialog-head"><div><p class="eyebrow">Parent control</p><h2>Add household task</h2></div><button value="cancel" class="close-button" aria-label="Close">×</button></div>
      <label>Task name<input id="taskName" required placeholder="Unload the dishwasher"></label>
      <label>Short guidance<textarea id="taskNote" placeholder="Put away silverware and plastic cups."></textarea></label>
      <div class="form-row">
        <label>Assign to<select id="taskAssignee"><option value="both">Either child</option><option value="riley">Alex</option><option value="miles">Miles</option></select></label>
        <label>Points<select id="taskPoints"><option>10</option><option>15</option><option selected>20</option><option>30</option></select></label>
      </div>
      <button class="primary-button" value="default">Add task</button>
    </form>
  </dialog>


  <dialog id="profileDialog">
    <form method="dialog" id="profileForm" class="dialog-card profile-dialog-card">
      <div class="dialog-head"><div><p class="eyebrow">Parent control</p><h2>Edit child profile</h2></div><button value="cancel" class="close-button" aria-label="Close">×</button></div>
      <div class="form-row">
        <label>Name<input id="profileName" required maxlength="30"></label>
        <label>Age<input id="profileAge" type="number" min="3" max="18" required></label>
      </div>
      <div class="form-row">
        <label>Avatar emoji<input id="profileIcon" maxlength="4" placeholder="🌿"></label>
        <label>Starting / current points<input id="profilePoints" type="number" min="0" max="99999"></label>
      </div>
      <label>Assistant guidance<textarea id="profileTone" maxlength="240" placeholder="Choose one small step..."></textarea></label>
      <div class="dialog-section-head"><div><strong>Daily routine</strong><div class="small muted">Change the wording, guidance, and points.</div></div><button type="button" class="soft-button" onclick="addProfileTaskRow()">Add item</button></div>
      <div id="profileTaskEditor" class="profile-task-editor"></div>
      <div class="dialog-actions"><button type="button" class="outline-button" onclick="document.getElementById('profileDialog').close()">Cancel</button><button class="primary-button" value="default">Save profile</button></div>
    </form>
  </dialog>

  <dialog id="pinDialog">
    <form method="dialog" id="pinForm" class="dialog-card">
      <div class="dialog-head"><div><p class="eyebrow" id="pinEyebrow">Secure profile</p><h2 id="pinTitle">Enter PIN</h2></div><button value="cancel" class="close-button" aria-label="Close">×</button></div>
      <p id="pinMessage" class="muted"></p>
      <label id="currentPinWrap" hidden>Current PIN<input id="currentPin" type="password" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" autocomplete="current-password"></label>
      <label id="newPinLabel">PIN<input id="newPin" type="password" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" autocomplete="new-password" required></label>
      <label id="confirmPinWrap" hidden>Confirm new PIN<input id="confirmPin" type="password" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" autocomplete="new-password"></label>
      <button class="primary-button" value="default" id="pinSubmit">Continue</button>
    </form>
  </dialog>

  <dialog id="accountDialog">
    <div class="dialog-card">
      <div class="dialog-head"><div><p class="eyebrow">Account</p><h2 id="accountTitle">Profile settings</h2></div><button class="close-button" onclick="document.getElementById('accountDialog').close()" aria-label="Close">×</button></div>
      <div id="accountSummary" class="account-summary"></div>
      <div class="dialog-section-head"><div><strong>PIN controls</strong><div class="small muted" id="pinControlHelp"></div></div></div>
      <div id="pinAccountList" class="pin-account-list"></div>
      <div class="dialog-actions"><button class="outline-button" onclick="logout()">Switch profile</button><button class="primary-button" onclick="document.getElementById('accountDialog').close()">Done</button></div>
    </div>
  </dialog>

  <div id="toast" class="toast" role="status"></div>
  <script src="app.js"></script>
</body>
</html>
