<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
?>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SMS短信平台</title>
  <link rel="icon" href="assets/pasted-20260318-121747-861d2826.jpg" type="image/jpeg" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.css" rel="stylesheet">
  <link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
</head>
<body data-page="agent">
  <div class="app-frontend">
    <header class="frontend-topbar">
      <div class="brand">
        <img src="assets/pasted-20260318-121747-861d2826.jpg" alt="logo" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;" />
        SMS短信平台
      </div>
      <div class="meta">
        <span class="status-pill">● 在线</span>
        <span>客服：Lina</span>
        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#settingsModal">⚙️ 设置</button>
      </div>
    </header>

    <main class="frontend-app-shell">
      <section class="contacts-panel">
        <div class="search d-flex gap-2">
          <div class="form-control" role="button" id="searchTrigger" data-bs-toggle="modal" data-bs-target="#countryModal" style="cursor: pointer; background: #fff; border: 1px solid #ced4da;">🔍 点击选择国家开始聊天...</div>
        </div>
        <div class="contacts-list" data-contacts></div>
      </section>

      <section class="chat-panel">
        <div class="frontend-chat-header">
          <div>
            <div class="fw-semibold" data-chat-title>请选择联系人</div>
            <div class="small muted" data-chat-meta>状态</div>
          </div>
        </div>
        <div class="frontend-chat-body" data-chat-body></div>
        <div class="frontend-chat-input-wrapper">
          <div class="shortcut-list mb-2" data-shortcuts></div>
          <div class="chat-input">
            <form class="d-flex gap-2 align-items-center" data-chat-form>
              <div class="position-relative">
                <button class="btn btn-light border" type="button" data-emoji-trigger>😊</button>
                <emoji-picker class="position-absolute" style="bottom: 100%; left: 0; z-index: 1000;" data-emoji-picker></emoji-picker>
              </div>
              <input class="form-control" placeholder="输入短信内容..." data-chat-input />
              <button class="btn btn-primary px-4" type="submit">发送</button>
            </form>
          </div>
        </div>
      </section>
    </main>
  </div>

  <!-- Country Selection Modal -->
  <div class="modal fade" id="countryModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">选择国家/地区</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <input class="form-control mb-2" placeholder="搜索国家名..." id="countrySearch" />
            <div id="countryList" style="max-height: 300px; overflow-y: auto;"></div>
        </div>
        <div class="modal-footer">
            <span id="selectedCode" class="me-auto fw-bold">+86</span>
            <input class="form-control w-50" id="phoneNumber" placeholder="输入手机号" />
            <button class="btn btn-primary" id="startChat">开始聊天</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="settingsModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">快捷回复设置</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="input-group mb-2">
              <input class="form-control" id="newShortcut" placeholder="输入快捷短语" />
              <button class="btn btn-success" id="addShortcut">添加</button>
          </div>
          <ul class="list-group" id="shortcutList"></ul>
        </div>
      </div>
    </div>
  </div>

  <div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
  <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
  <script src="assets/js/countries.js?v=<?= time() ?>" defer></script>
  <script src="assets/js/main.js?v=<?= time() ?>" defer></script>
</body>
</html>