<?php

date_default_timezone_set('Asia/Tehran');

session_start();
require __DIR__ . "/db.php";

$user = null;
if (isset($_SESSION["user_id"])) {
  $stmt = $conn->prepare("SELECT id, username FROM users WHERE id=?");
  $stmt->bind_param("i", $_SESSION["user_id"]);
  $stmt->execute();
  $user = $stmt->get_result()->fetch_assoc();
}

// اگر لاگین نیست، فقط فرم ورود نشون بده (هیچ چیزی از چت/لیست یوزرها دیده نشه)
if (!$user) {
?>
<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ورود</title>
  <style>
    body{margin:0;height:100vh;display:grid;place-items:center;background:#0b1220;color:#e5e7eb;font-family:tahoma}
    .box{width:min(420px,92vw);background:#070b14;border:1px solid #223056;border-radius:16px;padding:18px}
    h2{margin:0 0 12px;font-size:18px}
    input{width:100%;padding:12px;border-radius:12px;border:1px solid #223056;background:#0a1020;color:#fff;outline:none;margin-top:10px}
    button{width:100%;padding:12px;margin-top:10px;border:none;border-radius:12px;background:#38bdf8;color:#071018;font-weight:700;cursor:pointer}
    .hint{font-size:12px;color:#94a3b8;margin-top:10px;line-height:1.7}
    .err{background:#2a0f17;border:1px solid #7f1d1d;color:#fecaca;padding:10px;border-radius:12px;margin-top:10px;font-size:13px}
  </style>
</head>
<body>
  <div class="box">
    <h2>ورود به چت</h2>
    <form method="post" action="/api/login.php">
      <input name="username" maxlength="30" placeholder="نام کاربری..." required>
      <input name="password" type="password" placeholder="پسورد (147258)" required>
      <button type="submit">ورود</button>
    </form>
    <?php if (!empty($_GET["err"])): ?>
      <div class="err">نام کاربری یا پسورد اشتباهه.</div>
    <?php endif; ?>
    <div class="hint">
      فقط اعضایی که وارد می‌شن می‌تونن چت رو ببینن و به دایرکت هم دسترسی دارن.
    </div>
  </div>
</body>
</html>
<?php
  exit;
}
?>
<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>چت</title>
  <link rel="stylesheet" href="/assets/style.css">
</head>
<body>

<div class="app">

  <!-- سمت راست: لیست یوزرها -->
  <aside class="sidebar">
    <div class="brand">چت</div>

    <div class="me">
      <div class="avatar"><?= mb_substr($user["username"], 0, 1) ?></div>
      <div>
        <div class="name"><?= htmlspecialchars($user["username"]) ?></div>
        <a class="logout" href="/api/logout.php">خروج</a>
      </div>
    </div>

    <div class="usersPanel">
      <div class="section">لیست اعضا</div>
      <input id="userSearch" class="userSearch" placeholder="جستجو..." autocomplete="off">
      <div id="usersList" class="usersList"></div>
      <div class="hint" style="margin-top:8px">روی هر نفر بزنی، دایرکتش باز می‌شه.</div>
    </div>

    <div class="rooms">
      <div class="section" style="margin-top:14px">عمومی</div>
      <button class="room active" id="publicBtn">برگشت به عمومی</button>
    </div>
  </aside>
<div id="overlay" class="overlay"></div>

  <!-- وسط/چپ: چت -->
  <main class="chat">
    <header class="topbar">
        <button id="menuBtn" class="menuBtn" type="button" aria-label="menu">☰</button>

      <div class="title" id="chatTitle">عمومی</div>
      <div class="status" id="status">آنلاین</div>
    </header>
<button id="toBottomBtn" class="toBottomBtn" title="رفتن به آخر">⬇️</button>

    <section class="messages" id="messages"></section>



    <div id="replyIndicator" style="display: none; padding: 8px; background-color: #f0f0f0; border-bottom: 1px solid #ccc; margin-bottom: 10px; align-items: center; justify-content: space-between;">
        <!-- محتوای ریپلای اینجا توسط JS قرار می‌گیرد -->
    </div>




<footer class="composer">
<form id="sendForm" class="sendForm">
  <!--<button type="button" id="emojiBtn">😊</button>-->
  
  <!-- دکمه جدید برای ضبط صدا اضافه شد -->
  <button type="button" id="recordButton" title="ضبط صدا">🎙️</button> 

  <label class="fileBtn">
    📎
    <input type="file" id="file" hidden>
  </label>

  <input id="msg" autocomplete="off" placeholder="پیام بنویس..." maxlength="800">
  <button type="submit">ارسال</button>
</form>

<div id="emojiPanel" class="emojiPanel" style="display:none"></div>


  <div id="emojiPanel" class="emojiPanel" style="display:none"></div>
</footer>



  </main>

</div>

<script>
  window.CHAT = {
    mode: "public",
    roomId: 1,
    conversationId: null,
    me: <?= (int)$user["id"] ?>,
    meName: <?= json_encode($user["username"], JSON_UNESCAPED_UNICODE) ?>
  };
  
  
  
  
  
  
  
  
  
  
  
  
  

  
</script>
<script src="./assets/app.js"></script>

</body>
</html>
