<?php
$config = json_decode(file_get_contents(__DIR__ . '/data/config.json'), true) ?: [];
$title = $config['siteTitle'] ?? 'دفترچه تلفن';
$subtitle = $config['siteSubtitle'] ?? '';
$intro = $config['intro'] ?? '';
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></title>
  <link rel="stylesheet" href="assets/css/style.css?v=1">
  <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><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></h1>
          <p><?= htmlspecialchars($subtitle, ENT_QUOTES, 'UTF-8') ?></p>
        </div>
      </div>
      <div class="header-actions">
        <button id="themeToggle" class="icon-btn" aria-label="تغییر تم">🌙</button>
      </div>
    </div>
  </header>

  <main class="container main">
    <?php if ($intro): ?>
    <section class="intro-card"><?= htmlspecialchars($intro, ENT_QUOTES, 'UTF-8') ?></section>
    <?php endif; ?>

    <section class="cta-row">
      <button id="btnSuggest" class="cta-card cta-primary">
        <span class="cta-icon">➕</span>
        <span class="cta-body"><strong>پیشنهاد شماره جدید</strong><small>اگر اطلاعات کسی را دارید، اضافه کنید (پس از تأیید مدیر)</small></span>
      </button>
      <?php if (!empty($config['bot']['enabled'])): ?>
      <a id="btnBot" class="cta-card cta-bot" href="https://t.me/<?= htmlspecialchars($config['bot']['username'] ?? '', ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener">
        <span class="cta-icon">🤖</span>
        <span class="cta-body">
          <strong><?= htmlspecialchars($config['bot']['title'] ?? 'ربات تلگرام', ENT_QUOTES, 'UTF-8') ?></strong>
          <small><?= htmlspecialchars($config['bot']['description'] ?? '', ENT_QUOTES, 'UTF-8') ?></small>
        </span>
      </a>
      <?php endif; ?>
    </section>

    <section class="search-card">
      <div class="search-wrap">
        <span class="search-icon">🔎</span>
        <input id="searchInput" type="search" autocomplete="off"
               placeholder="جستجو در نام، فامیل، سمت، شماره، آیدی، توضیحات…">
        <button id="searchClear" class="search-clear" aria-label="پاک کردن" hidden>✕</button>
      </div>
      <div id="deptChips" class="dept-chips"></div>
    </section>

    <section id="listSection" class="list-section">
      <div id="listMeta" class="list-meta"></div>
      <div id="contactGrid" class="contact-grid"></div>
      <div id="chunkSentinel" class="chunk-sentinel"></div>
      <div id="emptyState" class="empty-state" hidden>
        <div class="empty-icon">📭</div>
        <h3>هنوز مخاطبی ثبت نشده</h3>
        <p>اولین نفری باشید که شماره‌ای پیشنهاد می‌دهد.</p>
      </div>
      <div id="noResultState" class="empty-state" hidden>
        <div class="empty-icon">🔍</div>
        <h3>نتیجه‌ای یافت نشد</h3>
        <p>عبارت جستجو یا فیلتر دسته را تغییر دهید.</p>
      </div>
    </section>
  </main>

  <footer class="app-footer">
    <div class="container">
    © <?= date('Y') ?> — تمامی حقوق برای <strong>امور دانشجویی</strong> محفوظ است. |
    <a href="https://rubika.ir/omor_shahed" target="_blank" rel="noopener">@omor_shahed</a>
    </div>
  </footer>

  <!-- Contact Detail Modal -->
  <div id="detailModal" class="modal" hidden>
    <div class="modal-backdrop" data-close></div>
    <div class="modal-panel modal-md">
      <button class="modal-close" data-close aria-label="بستن">✕</button>
      <div id="detailBody"></div>
    </div>
  </div>

  <!-- Suggest Modal -->
  <div id="suggestModal" class="modal" hidden>
    <div class="modal-backdrop" data-close></div>
    <div class="modal-panel modal-lg">
      <button class="modal-close" data-close aria-label="بستن">✕</button>
      <h2>➕ پیشنهاد شماره جدید</h2>
      <p class="modal-sub">اطلاعات وارد شده پس از تأیید مدیر در سایت نمایش داده می‌شود.</p>
      <form id="suggestForm" class="form" enctype="multipart/form-data">
        <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" placeholder="مثلاً کارشناس آموزش"></label>
          <label>دسته
            <select name="department" id="suggestDept"><option value="">—</option></select>
          </label>
        </div>
        <div class="form-row">
          <label>شماره ثابت دانشگاه <input name="landline" maxlength="40" placeholder="021-51212xxx"></label>
          <label>داخلی <input name="internal" maxlength="20" placeholder="مثلاً 215"></label>
        </div>
        <div class="form-row">
          <label>شماره شخصی (اختیاری) <input name="phone" maxlength="40" placeholder="09..."></label>
          <label>ایمیل (اختیاری) <input name="email" type="email" maxlength="120"></label>
        </div>
        <div class="form-row">
          <label>آیدی تلگرام <input name="telegram" maxlength="80" placeholder="user_name"></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" placeholder="مثلاً: ساعات پاسخگویی ۸ تا ۱۴"></textarea>
        </label>
        <label>عکس (اختیاری — حداکثر 1MB)
          <input name="photo" type="file" accept="image/jpeg,image/png,image/webp">
        </label>

        <div class="divider"></div>
        <p class="hint">اطلاعات پیشنهاد‌دهنده (اختیاری — برای پیگیری مدیر):</p>
        <div class="form-row">
          <label>نام شما <input name="subName" maxlength="60"></label>
          <label>تماس شما <input name="subContact" maxlength="80" placeholder="تلگرام یا تلفن"></label>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn-primary">📤 ارسال پیشنهاد</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Success modal -->
  <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 aria-label="بستن">✕</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="assets/js/app.js?v=1"></script>
</body>
</html>
