// 管理员密码（实际应用中应该使用更安全的方式）
const ADMIN_PASSWORD = 'JLUnaga2026';

// 全局变量存储当前数据和排序状态
let currentRecords = [];
let currentSortField = null;
let currentSortOrder = 'asc'; // 'asc' 或 'desc'

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', () => {
  checkAuth();
  initAuthForm();
  initEditForm();
  initModal();
});

// 检查认证状态
function checkAuth() {
  const isAuth = localStorage.getItem('adminAuth') === 'true';
  if (isAuth) {
    showAdminSection();
    loadAdminData();
  }
}

// 初始化认证表单
function initAuthForm() {
  const authForm = document.getElementById('authForm');
  authForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const password = document.getElementById('adminPassword').value;

    if (password === ADMIN_PASSWORD) {
      localStorage.setItem('adminAuth', 'true');
      showAdminSection();
      loadAdminData();
    } else {
      alert('❌ 密码错误');
    }
  });
}

// 显示管理员区域
function showAdminSection() {
  document.getElementById('authSection').style.display = 'none';
  document.getElementById('adminSection').style.display = 'block';
}

// 加载管理员数据
async function loadAdminData() {
  try {
    const response = await fetch('/api/list');
    const result = await response.json();

    if (result.success) {
      currentRecords = result.records;
      renderAdminTable(currentRecords);
    } else {
      alert('加载数据失败: ' + result.message);
    }
  } catch (error) {
    console.error('加载数据出错:', error);
    document.getElementById('adminTableBody').innerHTML = `
      <tr><td colspan="10" class="loading">加载失败，请刷新重试</td></tr>
    `;
  }
}

// 渲染管理员表格
function renderAdminTable(records) {
  const tbody = document.getElementById('adminTableBody');

  if (records.length === 0) {
    tbody.innerHTML = '<tr><td colspan="10" class="loading">暂无数据</td></tr>';
    return;
  }

  tbody.innerHTML = records.map((record, index) => {
    const hasNaga = record.nagaLink && record.nagaLink.trim() !== '';
    const nagaStatus = hasNaga 
      ? '<span class="has-naga">✔ 有</span>' 
      : '<span class="no-naga">✘ 无</span>';

    const nagaLinkDisplay = hasNaga 
      ? `<a href="${escapeHtml(record.nagaLink)}" target="_blank">查看链接</a>`
      : '-';

    const nagaNoteDisplay = record.nagaNote && record.nagaNote.trim() !== ''
      ? escapeHtml(record.nagaNote)
      : '-';

    const imagesDisplay = record.images && record.images.length > 0
      ? `<div class="image-thumbs">
          ${record.images.map(img => `
            <img src="${img}" class="thumb-img" onclick="showImages(${JSON.stringify(record.images).replace(/"/g, '&quot;')})">
          `).join('')}
        </div>`
      : '-';

    return `
      <tr>
        <td>${index + 1}</td>
        <td>${escapeHtml(record.submitTime)}</td>
        <td>${escapeHtml(record.name)}</td>
        <td class="link-cell"><a href="${escapeHtml(record.link)}" target="_blank">查看牌谱</a></td>
        <td class="note-cell">${record.note ? escapeHtml(record.note) : '-'}</td>
        <td>${nagaStatus}</td>
        <td class="link-cell">${nagaLinkDisplay}</td>
        <td class="note-cell">${nagaNoteDisplay}</td>
        <td>${imagesDisplay}</td>
        <td>
          <button class="btn btn-edit" onclick="openEditModal(${record.id})">编辑</button>
          <button class="btn btn-delete" onclick="deleteRecord(${record.id})">删除</button>
        </td>
      </tr>
    `;
  }).join('');
}

// 打开编辑模态框
async function openEditModal(id) {
  try {
    const response = await fetch('/api/list');
    const result = await response.json();
    
    if (!result.success) {
      alert('获取数据失败');
      return;
    }

    const record = result.records.find(r => r.id === id);
    if (!record) {
      alert('记录不存在');
      return;
    }

    // 填充表单
    document.getElementById('editId').value = record.id;
    document.getElementById('editNagaLink').value = record.nagaLink || '';
    document.getElementById('editNagaNote').value = record.nagaNote || '';
    document.getElementById('nagaNoteCount').textContent = (record.nagaNote || '').length;

    // 清空图片预览和已有图片
    document.getElementById('imagePreview').innerHTML = '';
    document.getElementById('editImages').value = '';

    // 显示已有图片
    const existingImagesDiv = document.getElementById('existingImages');
    if (record.images && record.images.length > 0) {
      existingImagesDiv.innerHTML = record.images.map(img => `
        <div class="existing-image-item">
          <img src="${img}" alt="已上传图片">
          <button type="button" class="btn-remove-image" onclick="removeImage(${record.id}, '${img}')">✕</button>
        </div>
      `).join('');
    } else {
      existingImagesDiv.innerHTML = '<p class="no-images">暂无图片</p>';
    }

    // 显示只读信息
    const readonlyInfo = document.getElementById('readonlyInfo');
    readonlyInfo.innerHTML = `
      <p><strong>人名:</strong> ${escapeHtml(record.name)}</p>
      <p><strong>提交时间:</strong> ${escapeHtml(record.submitTime)}</p>
      <p><strong>牌谱链接:</strong> <a href="${escapeHtml(record.link)}" target="_blank">查看</a></p>
      <p><strong>备注:</strong> ${record.note ? escapeHtml(record.note) : '无'}</p>
    `;

    // 显示模态框
    document.getElementById('editModal').style.display = 'block';
  } catch (error) {
    alert('打开编辑器失败: ' + error.message);
  }
}

// 关闭编辑模态框
function closeEditModal() {
  document.getElementById('editModal').style.display = 'none';
}

// 初始化编辑表单
function initEditForm() {
  const editForm = document.getElementById('editForm');
  const nagaNoteInput = document.getElementById('editNagaNote');
  const nagaNoteCount = document.getElementById('nagaNoteCount');
  const imageInput = document.getElementById('editImages');
  const imagePreview = document.getElementById('imagePreview');

  // 字数统计
  nagaNoteInput.addEventListener('input', () => {
    nagaNoteCount.textContent = nagaNoteInput.value.length;
  });

  // 图片预览
  imageInput.addEventListener('change', (e) => {
    imagePreview.innerHTML = '';
    const files = e.target.files;

    if (files.length > 10) {
      alert('最多只能上传 10 张图片');
      imageInput.value = '';
      return;
    }

    Array.from(files).forEach(file => {
      if (file.size > 5 * 1024 * 1024) {
        alert(`文件 ${file.name} 超过 5MB`);
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        const div = document.createElement('div');
        div.className = 'preview-item';
        div.innerHTML = `<img src="${e.target.result}" alt="预览">`;
        imagePreview.appendChild(div);
      };
      reader.readAsDataURL(file);
    });
  });

  // 表单提交
  editForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    await updateRecord();
  });
}

// 更新记录
async function updateRecord() {
  const id = document.getElementById('editId').value;
  const nagaLink = document.getElementById('editNagaLink').value;
  const nagaNote = document.getElementById('editNagaNote').value;
  const imageInput = document.getElementById('editImages');

  try {
    // 获取已有图片列表
    const response = await fetch('/api/list');
    const result = await response.json();
    const record = result.records.find(r => r.id === parseInt(id));
    const existingImages = record ? record.images : [];

    // 创建 FormData
    const formData = new FormData();
    formData.append('id', id);
    formData.append('nagaLink', nagaLink.trim());
    formData.append('nagaNote', nagaNote.trim());
    formData.append('existingImages', JSON.stringify(existingImages));

    // 添加新图片
    if (imageInput.files.length > 0) {
      Array.from(imageInput.files).forEach(file => {
        formData.append('images', file);
      });
    }

    const updateResponse = await fetch('/api/admin/update', {
      method: 'POST',
      body: formData
    });

    const updateResult = await updateResponse.json();

    if (updateResult.success) {
      alert('✅ 更新成功！');
      closeEditModal();
      loadAdminData();
    } else {
      alert('❌ ' + updateResult.message);
    }
  } catch (error) {
    alert('❌ 更新失败: ' + error.message);
  }
}

// 删除单张图片
async function removeImage(id, imagePath) {
  if (!confirm('确定要删除这张图片吗？')) {
    return;
  }

  try {
    const response = await fetch('/api/admin/delete-image', {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        id: id,
        imagePath: imagePath
      })
    });

    const result = await response.json();

    if (result.success) {
      alert('✅ 图片删除成功！');
      // 重新打开编辑框以刷新图片列表
      openEditModal(id);
    } else {
      alert('❌ ' + result.message);
    }
  } catch (error) {
    alert('❌ 删除图片失败: ' + error.message);
  }
}

// 删除记录
async function deleteRecord(id) {
  if (!confirm('确定要删除这条记录吗？此操作不可恢复！')) {
    return;
  }

  try {
    const response = await fetch(`/api/admin/delete/${id}`, {
      method: 'DELETE'
    });

    const result = await response.json();

    if (result.success) {
      alert('✅ 删除成功！');
      loadAdminData();
    } else {
      alert('❌ ' + result.message);
    }
  } catch (error) {
    alert('❌ 删除失败: ' + error.message);
  }
}

// 显示图片模态框
function showImages(images) {
  const modal = document.getElementById('imageModal');
  const modalImages = document.getElementById('modalImages');

  modalImages.innerHTML = images.map(img => `
    <img src="${img}" alt="图片">
  `).join('');

  modal.style.display = 'block';
}

// 初始化图片模态框
function initModal() {
  const imageModal = document.getElementById('imageModal');
  const editModal = document.getElementById('editModal');
  
  // 图片模态框关闭
  imageModal.querySelector('.close').onclick = () => {
    imageModal.style.display = 'none';
  };

  // 点击模态框外部关闭
  window.onclick = (event) => {
    if (event.target === imageModal) {
      imageModal.style.display = 'none';
    }
    if (event.target === editModal) {
      closeEditModal();
    }
  };
}

// HTML 转义函数
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

// 排序表格
function sortTable(field) {
  // 如果点击同一列，切换排序方向
  if (currentSortField === field) {
    currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
  } else {
    currentSortField = field;
    currentSortOrder = 'asc';
  }

  // 复制数组进行排序
  const sortedRecords = [...currentRecords];

  sortedRecords.sort((a, b) => {
    let valueA, valueB;

    switch(field) {
      case 'id':
        valueA = a.id;
        valueB = b.id;
        break;
      case 'submitTime':
        valueA = a.submitTime;
        valueB = b.submitTime;
        break;
      case 'name':
        valueA = a.name.toLowerCase();
        valueB = b.name.toLowerCase();
        break;
      case 'hasNaga':
        valueA = (a.nagaLink && a.nagaLink.trim() !== '') ? 1 : 0;
        valueB = (b.nagaLink && b.nagaLink.trim() !== '') ? 1 : 0;
        break;
      default:
        return 0;
    }

    if (valueA < valueB) {
      return currentSortOrder === 'asc' ? -1 : 1;
    }
    if (valueA > valueB) {
      return currentSortOrder === 'asc' ? 1 : -1;
    }
    return 0;
  });

  renderAdminTable(sortedRecords);
  updateSortIcons();
}

// 更新排序图标
function updateSortIcons() {
  // 移除所有排序图标的激活状态
  document.querySelectorAll('.sort-icon').forEach(icon => {
    icon.textContent = '⇅';
    icon.classList.remove('sort-asc', 'sort-desc');
  });

  // 如果有当前排序字段，更新对应图标
  if (currentSortField) {
    const headers = document.querySelectorAll('th.sortable');
    headers.forEach(th => {
      const onclick = th.getAttribute('onclick');
      if (onclick && onclick.includes(`'${currentSortField}'`)) {
        const icon = th.querySelector('.sort-icon');
        if (icon) {
          icon.textContent = currentSortOrder === 'asc' ? '↑' : '↓';
          icon.classList.add(currentSortOrder === 'asc' ? 'sort-asc' : 'sort-desc');
        }
      }
    });
  }
}