<?php
// Very simple "login" simulation - in real version use proper session + password hash
session_start();

$logged_in = isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true;

if (isset($_POST['action']) && $_POST['action'] === 'login') {
    // Dummy check - replace with real auth later
    if ($_POST['username'] === 'user' && $_POST['password'] === 'pass') {
        $_SESSION['logged_in'] = true;
        header("Location: index.php");
        exit;
    } else {
        $error = "Wrong username or password";
    }
}

if (isset($_GET['logout'])) {
    session_destroy();
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en" data-theme="hybrid">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Familiar OS</title>
  <link rel="stylesheet" href="os.css">
</head>
<body>

<?php if (!$logged_in): ?>

  <div class="boot-screen">
    <div class="logo">Familiar</div>
    <div class="loading-bar">
      <div class="bar"></div>
    </div>
    <p class="status">Loading memories...</p>
  </div>

  <div class="login-container" id="loginScreen" style="display:none;">
    <div class="login-box">
      <h1>Welcome back</h1>
      <?php if (isset($error)): ?>
        <p class="error"><?php echo $error; ?></p>
      <?php endif; ?>
      <form method="post">
        <input type="hidden" name="action" value="login">
        <input type="text"     name="username" placeholder="Username" required autofocus>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Sign In</button>
      </form>
      <p class="small">Hint: user / pass (demo)</p>
    </div>
  </div>

  <script>
    // Fake boot → show login after 2.5s
    setTimeout(() => {
      document.querySelector('.boot-screen').style.opacity = '0';
      setTimeout(() => {
        document.querySelector('.boot-screen').style.display = 'none';
        document.getElementById('loginScreen').style.display = 'flex';
      }, 800);
    }, 2500);
  </script>

<?php else: ?>

  <div class="desktop">

    <!-- Pull-down notification shade -->
    <div class="status-bar" id="statusBar">
      <div class="clock">3:37 AM</div>
      <div class="tray">
        <span>Wi-Fi</span>
        <span>🔋 92%</span>
      </div>
    </div>

    <div class="shade" id="shade">
      <div class="quick-settings">
        <button>Wi-Fi</button>
        <button>Bluetooth</button>
        <button>Do Not Disturb</button>
      </div>
      <div class="notifications">
        <div class="notif">Flight NZ456 landed in WLG 12 min ago</div>
        <div class="notif">SH1 near Porirua – roadworks until 8am</div>
        <div class="notif">Wellington → 14°C, rain later</div>
      </div>
    </div>

    <!-- Desktop icons + preview folders -->
    <div class="icons">
      <div class="icon">
        <div class="preview-folder">
          <div class="tile big">Weather</div>
          <div class="tile big">Flights</div>
          <div class="tile">Maps</div>
          <div class="tile">Roads</div>
        </div>
        <span>NZ Quick</span>
      </div>

      <div class="icon large">
        <img src="https://via.placeholder.com/64?text=🎮" alt="Games">
        <span>Games Library</span>
      </div>

      <div class="icon">
        <img src="https://via.placeholder.com/48?text=📁" alt="Files">
        <span>Documents</span>
      </div>

      <div class="icon">
        <img src="https://via.placeholder.com/48?text=🖼️" alt="Wallpapers">
        <span>Wallpapers</span>
      </div>
    </div>

    <!-- Taskbar -->
    <div class="taskbar">
      <button class="start">Start</button>
      <div class="pinned">
        <img src="https://via.placeholder.com/32?text=🌤️" title="Weather">
        <img src="https://via.placeholder.com/32?text=✈️" title="Flights">
        <img src="https://via.placeholder.com/32?text=🗺️" title="Maps">
        <img src="https://via.placeholder.com/32?text=🎮" title="Games">
      </div>
      <div class="tray-right">
        <span class="clock-tray">3:37 AM NZDT</span>
      </div>
    </div>

  </div>

  <script src="os.js"></script>

<?php endif; ?>

</body>
</html>