<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    header('Location: login.php');
    exit;
}
?>
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
</head>
<body data-page="admin">
  <div class="app-admin">
    <header class="topbar">
      <div class="brand">
        <div class="brand-logo" style="width: 40px; height: 40px; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: bold; font-size: 1.2rem;">S</div>
        <div>
          <div class="fs-5 fw-bold text-white">SMS后台管理</div>
        </div>
      </div>
      <div class="meta d-flex align-items-center gap-3">
        <span class="status-pill text-white"><small>● 系统正常运行</small></span>
        <span class="text-white">管理员：Admin</span>
        <a class="btn btn-sm btn-outline-light" href="logout.php">退出登录</a>
      </div>
    </header>

    <main class="admin-shell">
      <aside class="admin-sidebar">
        <nav class="nav flex-column gap-1">
          <a class="nav-link active" href="#" data-section-link="dashboard">📊 仪表盘</a>
          <a class="nav-link" href="#" data-section-link="contacts">👥 客户管理</a>
          <a class="nav-link" href="#" data-section-link="messages">💬 消息记录</a>
          <a class="nav-link" href="#" data-section-link="send">📤 发送短信</a>
          <a class="nav-link" href="#" data-section-link="auto">🤖 自动回复</a>
          <a class="nav-link" href="#" data-section-link="settings">⚙️ Twilio 配置</a>
          <a class="nav-link" href="#" data-section-link="system">🖥 系统设置</a>
        </nav>
      </aside>

      <section class="admin-content">
        <div class="section-card mb-4" data-section="dashboard">
          <h5 class="mb-3">📊 今日概览</h5>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="stat-card">
                <div class="text-muted small">今日发送数量</div>
                <div class="fs-3 fw-bold mt-1" data-stat="sent">0</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="stat-card">
                <div class="text-muted small">今日接收数量</div>
                <div class="fs-3 fw-bold mt-1" data-stat="received">0</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="stat-card">
                <div class="text-muted small">活跃客户数</div>
                <div class="fs-3 fw-bold mt-1" data-stat="active">0</div>
              </div>
            </div>
          </div>
        </div>

        <div class="section-card mb-4 d-none" data-section="contacts">
          <h5 class="mb-3">👥 客户管理</h5>
          <div class="table-responsive">
            <table class="table align-middle">
              <thead>
                <tr>
                  <th>手机号</th>
                  <th>标签</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody data-admin-contacts></tbody>
            </table>
          </div>
        </div>

        <div class="section-card mb-4 d-none" data-section="messages">
          <h5 class="mb-3">💬 消息记录</h5>
          <div class="table-responsive">
            <table class="table align-middle">
              <thead>
                <tr>
                  <th>手机号</th>
                  <th>方向</th>
                  <th>内容</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody data-admin-messages></tbody>
            </table>
          </div>
        </div>

        <div class="section-card mb-4 d-none" data-section="send">
          <h5 class="mb-3">📤 发送短信</h5>
          <form class="row g-3" data-send-form>
            <div class="col-md-4">
              <label class="form-label">手机号</label>
              <input class="form-control" name="phone" placeholder="+86 138 0013 8000" required>
            </div>
            <div class="col-md-8">
              <label class="form-label">短信内容</label>
              <input class="form-control" name="body" placeholder="输入要发送的内容" required>
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">发送短信</button>
            </div>
          </form>
        </div>

        <div class="section-card mb-4 d-none" data-section="auto">
          <h5 class="mb-3">🤖 自动回复规则</h5>
          <form class="row g-3 mb-4" data-reply-form>
            <div class="col-md-4">
              <label class="form-label">关键词</label>
              <input class="form-control" name="keyword" required>
            </div>
            <div class="col-md-8">
              <label class="form-label">回复内容</label>
              <input class="form-control" name="reply" required>
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">添加规则</button>
            </div>
          </form>
          <ul class="list-group" data-reply-list></ul>
        </div>

        <div class="section-card mb-4 d-none" data-section="settings">
          <h5 class="mb-3">⚙️ Twilio 配置</h5>
          <form class="row g-3" data-settings-form>
            <div class="col-md-4">
              <label class="form-label">Account SID</label>
              <input class="form-control" name="sid" placeholder="ACxxxxxxxx">
            </div>
            <div class="col-md-4">
              <label class="form-label">Auth Token</label>
              <input class="form-control" name="token" placeholder="••••••••">
            </div>
            <div class="col-md-4">
              <label class="form-label">From 号码</label>
              <input class="form-control" name="from" placeholder="+14155550199">
            </div>
            <div class="col-12">
              <label class="form-label">Webhook 地址</label>
              <input class="form-control" name="webhook" placeholder="https://your-domain.com/twilio/webhook">
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">保存配置</button>
            </div>
          </form>
        </div>

        <div class="section-card d-none" data-section="system">
          <h5 class="mb-3">🖥 系统设置</h5>
          <form class="row g-3" data-system-form>
            <div class="col-md-4">
              <label class="form-label">刷新频率（秒）</label>
              <input class="form-control" name="refresh_interval" value="3">
            </div>
            <div class="col-md-4">
              <label class="form-label">管理员名称</label>
              <input class="form-control" name="admin_name" value="Admin">
            </div>
            <div class="col-12">
              <button class="btn btn-success px-4" type="submit">保存设置</button>
            </div>
          </form>
        </div>
      </section>
    </main>
  </div>

  <div class="toast-container"></div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
  <script src="assets/js/main.js?v=<?= time() ?>" defer></script>
</body>
</html>