<?php
$cfgPath = __DIR__ . '/../data/config.json';
$config = json_decode(@file_get_contents($cfgPath), true) ?: [];
$title = $config['siteTitle'] ?? 'دفترچه تلفن';
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>پنل مدیر — <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></title>
  <link rel="stylesheet" href="../assets/css/style.css?v=2">
  <link rel="icon" href="../assets/img/logo.svg" type="image/svg+xml">
</head>
<body>
  <header class="app-header">
    <div class="container header-row">
      <div class="brand">
        <img src="../assets/img/logo.svg" alt="" class="brand-logo">
        <div class="brand-text">
          <h1>پنل مدیر</h1>
          <p><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></p>
        </div>
      </div>
      <div class="header-actions">
        <button id="themeToggle" class="icon-btn" aria-label="تم">🌙</button>
        <a class="btn-secondary" href="../">🏠 صفحه اصلی</a>
      </div>
    </div>
  </header>

  <main class="admin-wrap">

    <!-- Login view -->
    <section id="loginView" class="admin-header" style="justify-content:center; flex-direction:column; max-width:460px; margin:40px auto; padding:28px;">
      <div style="text-align:center; margin-bottom:16px;">
        <div style="font-size:48px;">🔐</div>
        <h2 style="margin-top:10px;">ورود مدیر</h2>
        <p>برای مدیریت دفترچه تلفن</p>
      </div>
      <form id="loginForm" class="form" style="width:100%;">
        <label>رمز عبور
          <input type="password" name="password" required autocomplete="current-password">
        </label>
        <div id="loginError" class="hint" style="color:var(--danger); display:none;"></div>
        <div class="form-actions" style="justify-content:stretch;">
          <button type="submit" class="btn-primary" style="width:100%;">ورود</button>
        </div>
      </form>
    </section>

    <!-- Panel view -->
    <section id="panelView" hidden>
      <div class="admin-header">
        <div>
          <h2>مدیریت مخاطبان</h2>
          <p id="adminLabel">—</p>
        </div>
        <div style="display:flex; gap:10px;">
          <button id="btnNewContact" class="btn-primary">➕ افزودن مخاطب</button>
          <button id="btnLogout" class="btn-secondary">خروج</button>
        </div>
      </div>

      <div class="admin-tabs">
        <button class="admin-tab is-active" data-tab="pending">⏳ در انتظار <span id="cntPending" class="chip-count">۰</span></button>
        <button class="admin-tab" data-tab="approved">✅ تأیید شده <span id="cntApproved" class="chip-count">۰</span></button>
        <button class="admin-tab" data-tab="rejected">❌ رد شده <span id="cntRejected" class="chip-count">۰</span></button>
      </div>

      <div class="admin-search">
        <div class="search-wrap">
          <span class="search-icon">🔎</span>
          <input type="search" id="adminSearch" placeholder="جستجو در نام، سمت، شماره، آیدی، توضیحات…" autocomplete="off">
          <button type="button" id="adminSearchClear" class="search-clear" hidden aria-label="پاک کردن">×</button>
        </div>
        <div id="adminResultCount" class="result-count"></div>
      </div>

      <div id="adminList"></div>
      <div id="adminEmpty" class="empty-state" hidden>
        <div class="empty-icon">📭</div>
        <h3>خالی است</h3>
        <p>در این بخش هنوز مخاطبی وجود ندارد.</p>
      </div>
    </section>
  </main>

  <!-- Edit/Create modal -->
  <div id="editModal" class="modal" hidden>
    <div class="modal-backdrop" data-close></div>
    <div class="modal-panel modal-lg">
      <button class="modal-close" data-close>✕</button>
      <h2 id="editTitle">مخاطب جدید</h2>
      <p class="modal-sub">اطلاعات وارد شده فوراً تأیید و در سایت نمایش داده می‌شود.</p>
      <form id="editForm" class="form" enctype="multipart/form-data">
        <input type="hidden" name="id" id="editId">
        <div class="form-row">
          <label>نام <input name="firstName" required maxlength="60"></label>
          <label>نام‌خانوادگی <input name="lastName" maxlength="60"></label>
        </div>
        <div class="form-row">
          <label>سمت <input name="role" maxlength="120"></label>
          <label>دسته
            <select name="department" id="editDept"><option value="">—</option></select>
          </label>
        </div>
        <div class="form-row">
          <label>تلفن ثابت <input name="landline" maxlength="40" placeholder="021-..."></label>
          <label>داخلی <input name="internal" maxlength="20"></label>
        </div>
        <div class="form-row">
          <label>تلفن شخصی <input name="phone" maxlength="40"></label>
          <label>ایمیل <input name="email" type="email" maxlength="120"></label>
        </div>
        <div class="form-row">
          <label>آیدی تلگرام <input name="telegram" maxlength="80"></label>
          <label>آیدی روبیکا <input name="rubika" maxlength="80"></label>
        </div>
        <div class="form-row">
          <label>آیدی ایتا <input name="eitaa" maxlength="80"></label>
          <label>آیدی بله <input name="bale" maxlength="80"></label>
        </div>
        <label>توضیحات
          <textarea name="description" rows="3" maxlength="500"></textarea>
        </label>
        <label>عکس (اختیاری — جایگزین می‌شود)
          <input name="photo" type="file" accept="image/jpeg,image/png,image/webp">
        </label>
        <div class="form-actions">
          <button type="button" class="btn-secondary" data-close>انصراف</button>
          <button type="submit" class="btn-primary">ذخیره</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Success toast -->
  <div id="successModal" class="modal" hidden>
    <div class="modal-backdrop" data-close></div>
    <div class="modal-panel modal-sm">
      <button class="modal-close" data-close>✕</button>
      <div class="success-icon">✅</div>
      <h2>انجام شد</h2>
      <p id="successMessage"></p>
      <div class="form-actions"><button class="btn-primary" data-close>بستن</button></div>
    </div>
  </div>

  <script src="admin.js?v=2"></script>
</body>
</html>
