<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <title>NasifyTech後台管理系統</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary-color: #2c3e50;
      --secondary-color: #34495e;
      --accent-color: #e67e22;
      --accent-color-hover: #d35400;
      --background-color: #ecf0f1;
      --header-height: 70px;
      --transition-speed: 0.3s;
      --font-family-primary: 'Noto Sans TC', sans-serif;
      --font-family-secondary: 'Exo 2', sans-serif;
      --text-color: #2c3e50;
      --input-border: #bdc3c7;
      --button-text-color: #fff;
      --footer-background: #2c3e50;
      --footer-text-color: #bdc3c7;
      --max-container-width: 1200px;
      --padding: 20px;
    }

    body {
      font-family: var(--font-family-primary);
      color: var(--text-color);
      background-color: var(--background-color);
      line-height: 1.6;
      overflow-x: hidden;
      padding: 100px 20px 60px;
    }

    a {
      color: var(--accent-color);
      text-decoration: none;
      transition: color var(--transition-speed) ease;
    }
    a:hover {
      color: var(--accent-color-hover);
    }

    header {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      background: #fff;
      z-index: 1000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      height: var(--header-height);
    }

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      flex-wrap: wrap;
      padding: 0 var(--padding);
    }

    .nav-bar .nav-left {
      font-family: var(--font-family-secondary);
      font-size: 1.4em;
      color: var(--primary-color);
      font-weight: bold;
    }

    .nav-bar .nav-left a {
      color: var(--primary-color);
      text-decoration: none;
    }

    .nav-bar .nav-right {
      display: flex;
      gap: 20px;
      list-style: none;
      flex-wrap: wrap;
    }

    .nav-bar .nav-right li {
      display: inline-block;
    }

    .nav-bar .nav-right li a {
      font-weight: 600;
      position: relative;
      padding: 10px;
      display: block;
    }

    .nav-bar .nav-right li a::after {
      content: '';
      position: absolute;
      width: 0%;
      height: 2px;
      background: var(--accent-color);
      left: 0;
      bottom: 0;
      transition: width var(--transition-speed) ease;
    }

    .nav-bar .nav-right li a:hover::after {
      width: 100%;
    }
    .container {
      max-width: var(--max-container-width);
      margin: 0 auto;
      padding: 0 var(--padding);
    }
    .section-title {
      margin-bottom: 20px;
      text-align: center;
    }
    .section-title h2 {
      font-family: var(--font-family-secondary);
      font-size: 2em;
      color: var(--primary-color);
      position: relative;
      display: inline-block;
    }
    .section-title h2::after {
      content: '';
      width: 50px;
      height: 3px;
      background: var(--accent-color);
      display: block;
      margin: 8px auto 0;
      border-radius: 2px;
    }

    .card {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      transition: transform var(--transition-speed) ease;
    }
    .card:hover {
      transform: translateY(-3px);
    }

    .form-section label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .form-section input[type="text"],
    .form-section textarea,
    .form-section select {
      width: 100%;
      padding: 10px;
      margin-bottom: 12px;
      border-radius: 6px;
      border: 1px solid var(--input-border);
      font-size: 1em;
      transition: border-color var(--transition-speed) ease;
    }
    .form-section input[type="text"]:focus,
    .form-section textarea:focus,
    .form-section select:focus {
      border-color: var(--accent-color);
      outline: none;
      box-shadow: 0 0 4px rgba(230, 126, 34, 0.3);
    }

    button {
      display: inline-block;
      padding: 10px 18px;
      background: var(--accent-color);
      color: var(--button-text-color);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.95em;
      font-weight: 600;
      transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
    }
    button:hover {
      background: var(--accent-color-hover);
      transform: translateY(-2px);
    }
    button:active {
      transform: translateY(0);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
      overflow-x: auto;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 0.75rem;
      text-align: left;
      font-size: 0.95em;
    }
    th {
      background: #f0f0f0;
      font-weight: 700;
    }
    tbody tr:nth-child(even) {
      background: #f9f9f9;
    }

    .delete-btn {
      background-color: #e74c3c;
      color: #fff;
      border: none;
      padding: 6px 10px;
      cursor: pointer;
      border-radius: 4px;
      font-size: 0.85em;
      transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
    }
    .delete-btn:hover {
      background-color: #c0392b;
      transform: translateY(-2px);
    }

    #mainContent {
      display: none; 
    }

    /* 響應式設計 */
    @media (max-width: 1024px) {
      .nav-bar {
        padding: 0 15px;
      }
      .section-title h2 {
        font-size: 1.8em;
      }
      button {
        font-size: 0.9em;
        padding: 9px 16px;
      }
    }

    @media (max-width: 768px) {
      body {
        padding: 90px 15px 50px;
      }
      .nav-bar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 10px 15px;
      }
      .nav-bar .nav-right {
        flex-direction: column;
        width: 100%;
      }
      .nav-bar .nav-right li {
        width: 100%;
      }
      .nav-bar .nav-right li a {
        width: 100%;
        padding: 10px 0;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      .container {
        padding: 0 15px;
      }
      .section-title h2 {
        font-size: 1.6em;
      }
      .form-section input[type="text"],
      .form-section textarea,
      .form-section select {
        font-size: 0.95em;
      }
      button {
        width: 100%;
        text-align: center;
      }
      table, thead, tbody, th, td, tr {
        display: block;
      }
      thead tr {
        display: none;
      }
      tbody tr {
        margin-bottom: 15px;
      }
      tbody td {
        padding-left: 50%;
        position: relative;
      }
      tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 15px;
        font-weight: bold;
        white-space: nowrap;
      }
    }

    @media (max-width: 480px) {
      .section-title h2 {
        font-size: 1.4em;
      }
      button {
        font-size: 0.85em;
        padding: 8px 14px;
      }
      .form-section label {
        font-size: 0.95em;
      }
      .form-section input[type="text"],
      .form-section textarea,
      .form-section select {
        font-size: 0.9em;
      }
    }
  </style>
</head>
<body>
  <header>
    <nav class="nav-bar container">
      <div class="nav-left">
        <a href="#">NasifyTech後台管理系統</a>
      </div>
      <ul class="nav-right">
        <li><a href="index.html">首頁</a></li>
      </ul>
    </nav>
  </header>
  <div id="mainContent" class="container">
    <div class="section-title" style="margin-top: 40px;">
      <h2>單字管理後台</h2>
    </div>
    <div class="card form-section">
      <div class="section-title">
        <h2>新增章節</h2>
      </div>
      <label for="chapterName">章節名稱</label>
      <input type="text" id="chapterName" placeholder="例：多益單字(第一章)" />
      <button id="addChapterBtn">新增章節</button>
    </div>
    <div class="card form-section">
      <div class="section-title">
        <h2>單字新增</h2>
      </div>
      <label for="chapterSelect">選擇章節</label>
      <select id="chapterSelect"></select>

      <label for="wordEn">英文(en)</label>
      <input type="text" id="wordEn" placeholder="例：apple" />
      
      <label for="wordZh">中文(zh)</label>
      <input type="text" id="wordZh" placeholder="例：蘋果" />

      <button id="addWordBtn">新增單字</button>
    </div>
    <div class="card form-section">
      <div class="section-title">
        <h2>批次新增單字</h2>
      </div>
      <p style="margin-bottom: 15px; font-size: 0.95em; color: #7f8c8d;">
        請使用逗號分隔，每行一筆。例如：<br>
        <code>apple,蘋果<br>banana,香蕉</code>
      </p>
      <label for="batchChapterSelect">選擇章節</label>
      <select id="batchChapterSelect"></select>
      
      <label for="batchTextArea">批次資料</label>
      <textarea id="batchTextArea" rows="5" placeholder="en,zh"></textarea>
      
      <button id="batchAddBtn">批次新增</button>
    </div>
    <div class="card">
      <div class="section-title">
        <h2>章節與單字列表</h2>
      </div>
      <div class="form-section" style="padding: 0; box-shadow: none; border: none;">
        <label for="viewChapterSelect">選擇章節</label>
        <select id="viewChapterSelect"></select>
        <button id="viewWordsBtn" style="margin-top: 10px;">載入單字</button>
        <button id="deleteChapterBtn" style="margin-top: 10px; background-color:#e74c3c;">刪除章節</button>
      </div>

      <table id="wordsTable">
        <thead>
          <tr>
            <th>英文</th>
            <th>中文</th>
            <th>刪除</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
  <script>
    const firebaseConfig = {
      apiKey: "AIzaSyCknahg0vqFDiFYDQM1YkS4Sa6j4Eth7ro",
      authDomain: "nasirsweb.firebaseapp.com",
      databaseURL: "https://nasirsweb-default-rtdb.firebaseio.com",
      projectId: "nasirsweb",
      storageBucket: "nasirsweb.firebasestorage.app",
      appId: "1:472577461049:web:00b9cab35ce7b7401bf6e8",
      measurementId: "G-7HZ5KWXJGP"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const auth = firebase.auth();
    const mainContent = document.getElementById('mainContent');

    const chapterNameInput = document.getElementById('chapterName');
    const addChapterBtn = document.getElementById('addChapterBtn');
    const chapterSelect = document.getElementById('chapterSelect');
    const batchChapterSelect = document.getElementById('batchChapterSelect');
    const viewChapterSelect = document.getElementById('viewChapterSelect');
    
    const wordEnInput = document.getElementById('wordEn');
    const wordZhInput = document.getElementById('wordZh');
    const addWordBtn = document.getElementById('addWordBtn');

    const batchTextArea = document.getElementById('batchTextArea');
    const batchAddBtn = document.getElementById('batchAddBtn');

    const viewWordsBtn = document.getElementById('viewWordsBtn');
    const deleteChapterBtn = document.getElementById('deleteChapterBtn');
    const wordsTableBody = document.querySelector('#wordsTable tbody');

    auth.onAuthStateChanged(user => {
      if (!user) {
        window.location.href = 'index.html';
      } else {
        mainContent.style.display = 'block';
        loadChapters();
      }
    });

    function loadChapters() {
      db.ref('chapters').once('value')
        .then(snapshot => {
          const chaptersData = snapshot.val() || {};
          chapterSelect.innerHTML = '<option value="">--請選擇章節--</option>';
          batchChapterSelect.innerHTML = '<option value="">--請選擇章節--</option>';
          viewChapterSelect.innerHTML = '<option value="">--請選擇章節--</option>';

          Object.entries(chaptersData).forEach(([chapterId, chapterObj]) => {
            const name = chapterObj.name || `未命名章節(${chapterId})`;

            const opt1 = document.createElement('option');
            opt1.value = chapterId;
            opt1.textContent = name;
            chapterSelect.appendChild(opt1);

            const opt2 = document.createElement('option');
            opt2.value = chapterId;
            opt2.textContent = name;
            batchChapterSelect.appendChild(opt2);

            const opt3 = document.createElement('option');
            opt3.value = chapterId;
            opt3.textContent = name;
            viewChapterSelect.appendChild(opt3);
          });
        })
        .catch(err => {
          console.error('載入章節失敗：', err);
        });
    }

    function loadWords(chapterId) {
      db.ref(`chapters/${chapterId}/words`).once('value')
        .then(snapshot => {
          const wordsData = snapshot.val() || {};
          wordsTableBody.innerHTML = '';
          Object.entries(wordsData).forEach(([wordId, { en, zh }]) => {
            const tr = document.createElement('tr');
            
            const tdEn = document.createElement('td');
            tdEn.textContent = en;
            tdEn.setAttribute('data-label', '英文');
            const tdZh = document.createElement('td');
            tdZh.textContent = zh;
            tdZh.setAttribute('data-label', '中文');
            const tdDelete = document.createElement('td');
            tdDelete.setAttribute('data-label', '刪除');

            const delBtn = document.createElement('button');
            delBtn.textContent = '刪除';
            delBtn.className = 'delete-btn';
            delBtn.addEventListener('click', () => {
              if (confirm(`確定要刪除「${en} - ${zh}」？`)) {
                db.ref(`chapters/${chapterId}/words/${wordId}`).remove()
                  .then(() => {
                    alert('刪除成功');
                    loadWords(chapterId);
                  })
                  .catch(err => {
                    console.error('刪除失敗：', err);
                  });
              }
            });
            tdDelete.appendChild(delBtn);

            tr.appendChild(tdEn);
            tr.appendChild(tdZh);
            tr.appendChild(tdDelete);
            wordsTableBody.appendChild(tr);
          });
        })
        .catch(err => {
          console.error('載入單字失敗：', err);
        });
    }

    addChapterBtn.addEventListener('click', () => {
      const name = chapterNameInput.value.trim();
      if (!name) {
        alert('請輸入章節名稱');
        return;
      }
      const newChapterRef = db.ref('chapters').push();
      newChapterRef.set({ name })
        .then(() => {
          alert('成功新增章節：' + name);
          chapterNameInput.value = '';
          loadChapters(); 
        })
        .catch(err => {
          console.error('新增章節失敗：', err);
        });
    });

    addWordBtn.addEventListener('click', () => {
      const chapterId = chapterSelect.value;
      const en = wordEnInput.value.trim();
      const zh = wordZhInput.value.trim();
      if (!chapterId) {
        alert('請先選擇章節');
        return;
      }
      if (!en || !zh) {
        alert('請輸入英文與中文');
        return;
      }
      const newWordRef = db.ref(`chapters/${chapterId}/words`).push();
      newWordRef.set({ en, zh })
        .then(() => {
          alert(`成功新增單字：${en} - ${zh}`);
          wordEnInput.value = '';
          wordZhInput.value = '';
        })
        .catch(err => {
          console.error('新增單字失敗：', err);
        });
    });

    batchAddBtn.addEventListener('click', () => {
      const chapterId = batchChapterSelect.value;
      const textData = batchTextArea.value.trim();
      if (!chapterId) {
        alert('請先選擇章節');
        return;
      }
      if (!textData) {
        alert('請輸入要批次新增的資料');
        return;
      }
      const lines = textData.split('\n');
      const updates = {};
      const wordsRef = db.ref(`chapters/${chapterId}/words`);
      
      lines.forEach(line => {
        const [en, zh] = line.split(',');
        if (!en || !zh) return;
        const newKey = wordsRef.push().key;
        updates[newKey] = { en: en.trim(), zh: zh.trim() };
      });

      wordsRef.update(updates)
        .then(() => {
          alert('批次新增成功');
          batchTextArea.value = '';
        })
        .catch(err => {
          console.error('批次新增失敗：', err);
        });
    });

    viewWordsBtn.addEventListener('click', () => {
      const chapterId = viewChapterSelect.value;
      if (!chapterId) {
        alert('請先選擇要查看的章節');
        return;
      }
      loadWords(chapterId);
    });

    deleteChapterBtn.addEventListener('click', () => {
      const chapterId = viewChapterSelect.value;
      if (!chapterId) {
        alert('請先選擇要刪除的章節');
        return;
      }
      if (confirm('確定要刪除整個章節？此動作將無法復原。')) {
        db.ref(`chapters/${chapterId}`).remove()
          .then(() => {
            alert('章節已刪除');
            loadChapters(); 
            wordsTableBody.innerHTML = ''; 
          })
          .catch(err => {
            console.error('刪除章節失敗：', err);
          });
      }
    });
  </script>

</body>
</html>
