<template>
  <div class="service-hall-container">
    <div class="actions-bar">
      <h3>办事大厅</h3>
      <div class="buttons-wrapper">
        <button @click="showAddDemandModal = true" class="add-button">添加需求</button>
        <button @click="fetchDemandsAdmin" class="refresh-button">刷新列表</button>
      </div>
    </div>

    <div class="table-responsive-wrapper">
      <table class="custom-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>请求者</th>
            <th>QQ号</th>
            <th>请求内容</th>
            <th>悬赏金额</th>
            <th>创建日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="loading">
            <td :colspan="7" style="text-align: center;">加载中...</td>
          </tr>
          <tr v-else-if="demands.length === 0">
            <td :colspan="7" style="text-align: center;">暂无需求数据</td>
          </tr>
          <tr v-for="demand in demands" :key="demand.id">
            <td>{{ demand.id }}</td>
            <td>{{ demand.requester || '-' }}</td>
            <td>{{ demand.qq_code || '-' }}</td>
            <td class="content-cell" :title="demand.content">{{ truncateText(demand.content, 50) }}</td>
            <td>{{ demand.reward || '无赏金' }}</td>
            <td>{{ formatDate(demand.date) }}</td>
            <td>
              <button @click="editDemand(demand)" class="action-button edit">编辑</button>
              <button @click="confirmDeleteDemand(demand.id)" class="action-button delete">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 编辑需求模态框 -->
    <div v-if="showEditDemandModal" class="modal-overlay" @click.self="closeEditModal">
      <div class="modal-content">
        <h2>编辑需求</h2>
        <form @submit.prevent="submitEditForm">
          <div class="form-group">
            <label :for="`edit-requester-${currentDemand.id}`">请求者:</label>
            <input :id="`edit-requester-${currentDemand.id}`" type="text" v-model="editForm.requester">
          </div>
          <div class="form-group">
            <label :for="`edit-qq-${currentDemand.id}`">QQ号:</label>
            <input :id="`edit-qq-${currentDemand.id}`" type="text" v-model="editForm.qq_code">
          </div>
          <div class="form-group">
            <label :for="`edit-content-${currentDemand.id}`">需求内容:</label>
            <textarea :id="`edit-content-${currentDemand.id}`" v-model="editForm.sendcontent" rows="4" required></textarea>
          </div>
          <div class="form-group">
            <label :for="`edit-reward-${currentDemand.id}`">悬赏金额:</label>
            <input :id="`edit-reward-${currentDemand.id}`" type="text" v-model="editForm.reward">
          </div>
           <div class="form-group">
            <label :for="`edit-date-${currentDemand.id}`">日期 (YYYY-MM-DD HH:MM:SS):</label>
            <input :id="`edit-date-${currentDemand.id}`" type="text" v-model="editForm.date" readonly>
          </div>
          <div class="form-actions">
            <button type="submit" class="submit-button">更新</button>
            <button type="button" @click="closeEditModal" class="cancel-button">取消</button>
          </div>
          <p v-if="editError" class="error-message">{{ editError }}</p>
        </form>
      </div>
    </div>

    <!-- 添加需求模态框 -->
    <div v-if="showAddDemandModal" class="modal-overlay" @click.self="closeAddModal">
      <div class="modal-content">
        <h2>添加新需求</h2>
        <form @submit.prevent="submitAddForm">
          <div class="form-group">
            <label for="add-requester">请求者 (可选):</label>
            <input id="add-requester" type="text" v-model="addForm.requester">
          </div>
          <div class="form-group">
            <label for="add-qq">QQ号 (可选):</label>
            <input id="add-qq" type="text" v-model="addForm.qq_code">
          </div>
          <div class="form-group">
            <label for="add-content">需求内容:</label>
            <textarea id="add-content" v-model="addForm.sendcontent" rows="4" required></textarea>
          </div>
          <div class="form-group">
            <label for="add-reward">悬赏金额 (可选):</label>
            <input id="add-reward" type="text" v-model="addForm.reward">
          </div>
          <div class="form-actions">
            <button type="submit" class="submit-button" :disabled="addLoading">{{ addLoading ? '提交中...' : '提交' }}</button>
            <button type="button" @click="closeAddModal" class="cancel-button">取消</button>
          </div>
          <p v-if="addError" class="error-message">{{ addError }}</p>
        </form>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getDemandsList, updateDemand, deleteDemand, addDemand } from '../../api/demands'; // 确认路径

const demands = ref([]);
const loading = ref(false);
const showEditDemandModal = ref(false);
const currentDemand = ref(null);
const editForm = ref({});
const editError = ref('');

// Refs for Add Demand Modal
const showAddDemandModal = ref(false);
const addLoading = ref(false);
const initialAddFormState = {
  requester: '',
  qq_code: '',
  sendcontent: '',
  reward: ''
  // date is generated on submit
};
const addForm = ref({ ...initialAddFormState });
const addError = ref('');

const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return dateString; // 如果日期无效，返回原始字符串
    return date.toLocaleString(); // 或者更复杂的格式化
  } catch (e) {
    return dateString;
  }
};

const truncateText = (text, length) => {
  if (!text) return '';
  return text.length > length ? text.substring(0, length) + '...' : text;
};

const fetchDemandsAdmin = async () => {
  loading.value = true;
  try {
    const response = await getDemandsList();
    demands.value = Array.isArray(response) ? response : (response.data || []);
  } catch (error) {
    console.error('获取需求列表失败 (admin):', error);
    demands.value = [];
  } finally {
    loading.value = false;
  }
};

const editDemand = (demand) => {
  currentDemand.value = { ...demand };
  // 确保 editForm 使用 demand 中的原始 date 字符串，而不是格式化后的
  editForm.value = { 
      ...demand, 
      sendcontent: demand.content || demand.sendcontent // API中content和sendcontent可能混用
  }; 
  editError.value = '';
  showEditDemandModal.value = true;
};

const closeEditModal = () => {
  showEditDemandModal.value = false;
  currentDemand.value = null;
  editError.value = '';
};

const submitEditForm = async () => {
  if (!currentDemand.value || !currentDemand.value.id) return;
  editError.value = '';
  try {
    // 构造符合 updateDemand API 的 payload
    const payload = {
        requester: editForm.value.requester,
        qq_code: editForm.value.qq_code,
        sendcontent: editForm.value.sendcontent,
        reward: editForm.value.reward,
        date: editForm.value.date // 使用表单中的日期
        // content 会在API层通过 sendcontent 补齐
    };
    await updateDemand(currentDemand.value.id, payload);
    alert('需求更新成功！');
    closeEditModal();
    fetchDemandsAdmin();
  } catch (error) {
    console.error('更新需求失败:', error);
    editError.value = error.response?.data?.detail || error.message || '更新失败，请重试。';
  }
};

const confirmDeleteDemand = async (id) => {
  if (window.confirm('确定要删除此需求吗？')) {
    try {
      await deleteDemand(id);
      alert('需求删除成功！');
      fetchDemandsAdmin();
    } catch (error) {
      console.error('删除需求失败:', error);
      alert('删除需求失败: ' + (error.message || '请稍后重试'));
    }
  }
};

// --- Add Demand Modal Logic ---
const openAddModal = () => {
  addForm.value = { ...initialAddFormState };
  addError.value = '';
  showAddDemandModal.value = true;
};

const closeAddModal = () => {
  showAddDemandModal.value = false;
  addError.value = '';
};

const submitAddForm = async () => {
  if (!addForm.value.sendcontent.trim()) {
    addError.value = '需求内容不能为空';
    return;
  }
  addLoading.value = true;
  addError.value = '';
  try {
    const now = new Date();
    const dateStr = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
    
    const payload = {
      ...addForm.value,
      date: dateStr,
      // content will be handled by addDemand API function if sendcontent is provided
    };
    await addDemand(payload);
    alert('新需求添加成功！');
    closeAddModal();
    fetchDemandsAdmin(); // Refresh list
  } catch (error) {
    console.error('添加需求失败:', error);
    addError.value = error.response?.data?.detail || error.message || '添加失败，请稍后重试。';
  } finally {
    addLoading.value = false;
  }
};

onMounted(() => {
  fetchDemandsAdmin();
});

</script>

<style scoped>
.service-hall-container {
  padding: 15px; /* Reduced padding for mobile */
}

.actions-bar {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* Add gap for wrapped items */
}
.actions-bar h3 {
    margin: 0;
    font-size: 1.4rem; /* Slightly reduced for mobile */
    color: #333;
}

/* Container for buttons on the right */
.actions-bar .buttons-wrapper {
  display: flex;
  gap: 10px; /* Space between buttons */
}

.refresh-button, .add-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 12px; /* Slightly reduced padding */
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem; /* Slightly reduced font size */
}
.refresh-button:hover, .add-button:hover {
  background-color: #40a9ff;
}

.table-responsive-wrapper { /* New wrapper for table */
  width: 100%;
  overflow-x: auto; /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
}

.custom-table {
  width: 100%;
  min-width: 750px; /* Minimum width before scrolling starts, adjust as needed */
  border-collapse: collapse;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12); /* Softer shadow */
}

.custom-table th, .custom-table td {
  border: 1px solid #e8e8e8;
  padding: 10px 12px; /* Adjusted padding */
  text-align: left;
  font-size: 0.85rem; /* Adjusted font size */
  vertical-align: middle;
  /* white-space: nowrap; /* Consider if content should wrap or not. Ellipsis is handled by truncateText */
}

.custom-table th {
  background-color: #fafafa;
  font-weight: 600;
  color: #000000d9;
  white-space: nowrap; /* Keep headers on one line */
}

.custom-table tbody tr:hover {
  background-color: #f5f5f5;
}

.content-cell {
  max-width: 250px; /* Adjust as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-button {
  padding: 5px 8px; /* Adjusted padding */
  border-radius: 3px; /* Adjusted border-radius */
  border: none;
  cursor: pointer;
  font-size: 0.8rem; /* Adjusted font size */
  margin-right: 5px;
  color: white;
  white-space: nowrap; /* Keep button text on one line */
}
.action-button.edit {
  background-color: #52c41a;
}
.action-button.edit:hover {
  background-color: #73d13d;
}
.action-button.delete {
  background-color: #ff4d4f;
}
.action-button.delete:hover {
  background-color: #ff7875;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 10px; /* Add padding for very small screens */
}

.modal-content {
  background-color: white;
  padding: 20px; /* Adjusted padding */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 550px;
  z-index: 1001;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 1.3rem; /* Adjusted font size */
}

.form-group {
  margin-bottom: 12px; /* Adjusted margin */
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem; /* Adjusted font size */
  font-weight: 500;
  color: #555;
}

.form-group input[type="text"],
.form-group textarea {
  padding: 8px 10px; /* Adjusted padding */
  font-size: 0.85rem; /* Adjusted font size */
  width: 100%; /* Ensure form elements take full width */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-actions {
  margin-top: 20px; /* Adjusted margin */
}

.submit-button, .cancel-button {
  padding: 8px 15px; /* Adjusted padding */
  font-size: 0.85rem; /* Adjusted font size */
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.submit-button {
  background-color: #1890ff;
  color: white;
  margin-right: 10px;
}
.submit-button:hover {
  background-color: #40a9ff;
}

.cancel-button {
  background-color: #f0f0f0;
  color: #333;
}
.cancel-button:hover {
  background-color: #e0e0e0;
}
.error-message {
  color: red;
  margin-top: 10px;
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .actions-bar {
    flex-direction: column; /* Stack title and buttons vertically */
    align-items: flex-start; /* Align items to the start */
  }
  .actions-bar h3 {
    margin-bottom: 10px; /* Add space below title when stacked */
  }
  .actions-bar .buttons-wrapper { /* Container for buttons */
    width: 100%; /* Full width on mobile */
    /* justify-content: space-between; /* Remove this if you don't want them to spread far apart */
    /* Consider justify-content: flex-start; or let gap handle spacing */
  }
  .refresh-button, .add-button {
    /* flex-grow: 1; /* Remove flex-grow if buttons should take natural width */
    /* margin: 0 5px; /* Remove or adjust margin, gap is now on buttons-wrapper */
    /* width: auto; /* Ensure buttons take their content width or a defined width */
    padding: 8px 15px; /* Ensure decent padding */
  }
  /* If you want them to still be somewhat spread on mobile but not full flex-grow:
  .actions-bar .buttons-wrapper {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right on mobile when stacked 
  }
  .refresh-button, .add-button {
     margin-left: 10px; 
  }
  .refresh-button:first-child, .add-button:first-child { margin-left: 0; }
  */
}

@media (max-width: 480px) {
  .modal-content {
    padding: 15px;
  }
  .modal-content h2 {
    font-size: 1.2rem;
  }
  .actions-bar .buttons-wrapper button { /* Target buttons within the wrapper more specifically if needed */
    padding: 8px 10px; /* Even smaller padding for very small buttons */
    font-size: 0.8rem;
    /* width: 100%; /* Optionally make buttons full width on very small screens */
    /* margin-bottom: 5px; /* If they stack vertically */
  }
  /* If buttons stack vertically on very small screens (example):
  .actions-bar .buttons-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .actions-bar .buttons-wrapper button {
    width: 100%;
    margin-left: 0;
    margin-bottom: 8px;
  }
  .actions-bar .buttons-wrapper button:last-child {
    margin-bottom: 0;
  }
  */

  .content-cell {
    max-width: 100px; /* Further reduce for very small screens */
  }
}
</style> 