<template>
  <view class="tasks-page">
    <!-- 使用子头部组件 -->
    <sub-header 
      title="任务管理" 
      @goBack="goBack" 
      @showMoreOptions="showMoreOptions"
    />

    <!-- 页面内容 -->
    <scroll-view scroll-y class="unified-content">
      <!-- 搜索栏 -->
      <view class="search-container" v-if="showSearch">
      <view class="search-input-container">
        <i class="fas fa-search search-icon"></i>
        <input
          v-model="searchKeyword"
          placeholder="搜索任务..."
          class="search-input"
          @input="handleSearch"
        />
        <view class="clear-button" @click="clearSearch" v-if="searchKeyword">
          <i class="fas fa-times"></i>
        </view>
      </view>
    </view>

    <!-- 统计概览 -->
    <view class="stats-overview">
      <view class="stats-grid">
        <view class="stat-card total">
          <view class="stat-icon">
            <i class="fas fa-list"></i>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ taskStats.total }}</text>
            <text class="stat-label">总任务</text>
          </view>
        </view>
        <view class="stat-card pending">
          <view class="stat-icon">
            <i class="fas fa-clock"></i>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ taskStats.pending }}</text>
            <text class="stat-label">待完成</text>
          </view>
        </view>
        <view class="stat-card completed">
          <view class="stat-icon">
            <i class="fas fa-check-circle"></i>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ taskStats.completed }}</text>
            <text class="stat-label">已完成</text>
          </view>
        </view>
        <view class="stat-card overdue">
          <view class="stat-icon">
            <i class="fas fa-exclamation-triangle"></i>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ taskStats.overdue }}</text>
            <text class="stat-label">已逾期</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选和排序 -->
    <view class="filter-container">
      <view class="filter-tabs-wrapper">
        <view class="filter-tabs">
          <view
            v-for="filter in filterOptions"
            :key="filter.value"
            class="filter-tab"
            :class="{ active: currentFilter === filter.value }"
            @click="setFilter(filter.value)"
          >
            <text class="filter-text">{{ filter.label }}</text>
            <view class="filter-badge" v-if="getFilterCount(filter.value) > 0">
              {{ getFilterCount(filter.value) }}
            </view>
          </view>
        </view>
      </view>

      <view class="sort-container" @click="showSortOptions = !showSortOptions">
        <text class="sort-text">{{ getCurrentSortLabel() }}</text>
        <i
          class="fas fa-chevron-down sort-icon"
          :class="{ rotated: showSortOptions }"
        ></i>
      </view>
    </view>

    <!-- 排序选项下拉 -->
    <view class="sort-dropdown" v-if="showSortOptions">
      <view
        v-for="sort in sortOptions"
        :key="sort.value"
        class="sort-option"
        :class="{ active: currentSort === sort.value }"
        @click="setSort(sort.value)"
      >
        <text class="sort-option-text">{{ sort.label }}</text>
        <i class="fas fa-check" v-if="currentSort === sort.value"></i>
      </view>
    </view>

    <!-- 任务列表容器 -->
    <view class="task-list-container">
      <scroll-view scroll-y class="task-list" v-if="filteredTasks.length > 0">
        <view
          v-for="task in filteredTasks"
          :key="task.id"
          class="task-card"
          :class="{ completed: task.completed, overdue: isOverdue(task) }"
          @click="toggleTask(task.id)"
        >
          <view class="task-main">
            <view class="task-checkbox-container">
              <view
                class="custom-checkbox"
                :class="{ checked: task.completed }"
              >
                <i class="fas fa-check" v-if="task.completed"></i>
              </view>
            </view>

            <view class="task-content">
              <view class="task-header">
                <text class="task-title">{{ task.title }}</text>
                <view class="task-priority-indicator" :class="task.priority">
                  <i class="fas fa-circle"></i>
                </view>
              </view>

              <text class="task-description" v-if="task.description">{{
                task.description
              }}</text>

              <view class="task-footer">
                <view class="task-tags" v-if="task.tags.length > 0">
                  <text
                    v-for="tag in task.tags.slice(0, 3)"
                    :key="tag"
                    class="task-tag"
                  >
                    {{ tag }}
                  </text>
                </view>

                <view class="task-due-date" v-if="task.dueDate">
                  <i class="fas fa-calendar-alt"></i>
                  <text class="due-date-text">{{
                    formatDate(task.dueDate)
                  }}</text>
                </view>
              </view>
            </view>
          </view>

          <view class="task-actions" v-if="!task.completed">
            <view class="action-button edit" @click.stop="editTask(task)">
              <i class="fas fa-edit"></i>
            </view>
            <view
              class="action-button delete"
              @click.stop="deleteTask(task.id)"
            >
              <i class="fas fa-trash"></i>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <view class="empty-icon-container">
          <i class="fas fa-tasks empty-icon"></i>
        </view>
        <text class="empty-title">暂无任务</text>
        <text class="empty-description">点击右上角 + 号添加新任务</text>
        <view class="empty-action" @click="showAddTask = true">
          <i class="fas fa-plus"></i>
          <text>添加任务</text>
        </view>
      </view>
    </view>

    <!-- 添加任务弹窗 -->
    <view class="modal-overlay" v-if="showAddTask" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加任务</text>
          <view class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </view>
        </view>

        <view class="modal-body">
          <view class="form-group">
            <text class="form-label">任务标题 *</text>
            <input
              v-model="newTask.title"
              placeholder="请输入任务标题"
              class="form-input"
            />
          </view>

          <view class="form-group">
            <text class="form-label">任务描述</text>
            <textarea
              v-model="newTask.description"
              placeholder="请输入任务描述"
              class="form-textarea"
            >
            </textarea>
          </view>

          <view class="form-group">
            <text class="form-label">优先级</text>
            <view class="priority-options">
              <view
                v-for="priority in priorityOptions"
                :key="priority.value"
                class="priority-option"
                :class="{ active: newTask.priority === priority.value }"
                @click="newTask.priority = priority.value"
              >
                <view class="priority-dot" :class="priority.value"></view>
                <text class="priority-text">{{ priority.label }}</text>
              </view>
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">截止日期</text>
            <picker mode="date" :value="newTask.dueDate" @change="onDateChange">
              <view class="date-picker">
                <text class="date-text">{{
                  newTask.dueDate || "选择日期"
                }}</text>
                <i class="fas fa-calendar-alt"></i>
              </view>
            </picker>
          </view>

          <view class="form-group">
            <text class="form-label">标签</text>
            <input
              v-model="tagInput"
              placeholder="输入标签后按回车添加"
              class="form-input"
              @confirm="addTag"
            />
            <view class="tags-display" v-if="newTask.tags.length > 0">
              <view
                v-for="(tag, index) in newTask.tags"
                :key="index"
                class="tag-item"
              >
                <text class="tag-text">{{ tag }}</text>
                <view class="tag-remove" @click="removeTag(index)">
                  <i class="fas fa-times"></i>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="modal-footer">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button
            class="btn-confirm"
            @click="saveTask"
            :disabled="!newTask.title"
          >
            保存
          </button>
        </view>
      </view>
    </view>
    </scroll-view>
  </view>
</template>

<script>
import { ref, computed, onMounted, nextTick } from "vue";
import { useTaskStore } from "../../src/store/taskStore.js";
import SubHeader from "../components/subHeader.vue";

export default {
  name: "TasksPage",
  components: {
    SubHeader
  },
  setup() {
    const taskStore = useTaskStore();

    // 响应式数据
    const showSearch = ref(false);
    const showAddTask = ref(false);
    const showSortOptions = ref(false);
    const searchKeyword = ref("");
    const tagInput = ref("");

    const newTask = ref({
      title: "",
      description: "",
      priority: "medium",
      dueDate: "",
      tags: [],
    });

    // 筛选选项
    const filterOptions = [
      { label: "全部", value: "all" },
      { label: "待完成", value: "pending" },
      { label: "已完成", value: "completed" },
      { label: "已逾期", value: "overdue" },
    ];

    // 排序选项
    const sortOptions = [
      { label: "按截止日期", value: "dueDate" },
      { label: "按优先级", value: "priority" },
      { label: "按创建时间", value: "created" },
    ];

    // 优先级选项
    const priorityOptions = [
      { label: "低", value: "low" },
      { label: "中", value: "medium" },
      { label: "高", value: "high" },
    ];

    // 计算属性
    const filteredTasks = computed(() => taskStore.filteredTasks);
    const taskStats = computed(() => taskStore.taskStats);
    const currentFilter = computed(() => taskStore.currentFilter);
    const currentSort = computed(() => taskStore.currentSort);

    // 方法
    const handleSearch = () => {
      taskStore.setSearchKeyword(searchKeyword.value);
    };

    const clearSearch = () => {
      searchKeyword.value = "";
      taskStore.setSearchKeyword("");
    };

    const setFilter = (filter) => {
      taskStore.setFilter(filter);
      // 滚动到选中的标签
      nextTick(() => {
        const activeTab = document.querySelector('.filter-tab.active');
        if (activeTab) {
          activeTab.scrollIntoView({
            behavior: 'smooth',
            block: 'nearest',
            inline: 'center'
          });
        }
      });
    };

    const setSort = (sort) => {
      taskStore.setSort(sort);
      showSortOptions.value = false;
    };

    const getCurrentSortLabel = () => {
      const option = sortOptions.find((opt) => opt.value === currentSort.value);
      return option ? option.label : "按截止日期";
    };

    const getFilterCount = (filter) => {
      switch (filter) {
        case "all":
          return taskStore.tasks.length;
        case "pending":
          return taskStore.tasks.filter((task) => !task.completed).length;
        case "completed":
          return taskStore.tasks.filter((task) => task.completed).length;
        case "overdue":
          return taskStore.getOverdueTasks().length;
        default:
          return 0;
      }
    };

    const toggleTask = (id) => {
      taskStore.toggleTask(id);
    };

    const editTask = (task) => {
      newTask.value = { ...task };
      showAddTask.value = true;
    };

    const deleteTask = (id) => {
      uni.showModal({
        title: "确认删除",
        content: "确定要删除这个任务吗？",
        success: (res) => {
          if (res.confirm) {
            taskStore.deleteTask(id);
            uni.showToast({
              title: "删除成功",
              icon: "success",
            });
          }
        },
      });
    };

    const isOverdue = (task) => {
      if (task.completed || !task.dueDate) return false;
      return new Date(task.dueDate) < new Date();
    };

    const formatDate = (dateString) => {
      const date = new Date(dateString);
      const now = new Date();
      const diffTime = date - now;
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

      if (diffDays === 0) return "今天";
      if (diffDays === 1) return "明天";
      if (diffDays === -1) return "昨天";
      if (diffDays < 0) return `${Math.abs(diffDays)}天前`;
      if (diffDays <= 7) return `${diffDays}天后`;

      return date.toLocaleDateString();
    };

    const onDateChange = (e) => {
      newTask.value.dueDate = e.detail.value;
    };

    const addTag = () => {
      const tag = tagInput.value.trim();
      if (tag && !newTask.value.tags.includes(tag)) {
        newTask.value.tags.push(tag);
        tagInput.value = "";
      }
    };

    const removeTag = (index) => {
      newTask.value.tags.splice(index, 1);
    };

    const saveTask = () => {
      if (!newTask.value.title.trim()) {
        uni.showToast({
          title: "请输入任务标题",
          icon: "none",
        });
        return;
      }

      if (newTask.value.id) {
        // 编辑任务
        taskStore.updateTask(newTask.value.id, newTask.value);
        uni.showToast({
          title: "任务更新成功",
          icon: "success",
        });
      } else {
        // 添加任务
        taskStore.addTask(newTask.value);
        uni.showToast({
          title: "任务添加成功",
          icon: "success",
        });
      }

      closeModal();
    };

    const closeModal = () => {
      showAddTask.value = false;
      newTask.value = {
        title: "",
        description: "",
        priority: "medium",
        dueDate: "",
        tags: [],
      };
      tagInput.value = "";
    };

    // 头部相关方法
    const goBack = () => {
      uni.navigateBack();
    };

    const showMoreOptions = () => {
      uni.showActionSheet({
        itemList: ["搜索任务", "添加任务", "设置", "帮助"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              // 搜索任务
              showSearch.value = !showSearch.value;
              break;
            case 1:
              // 添加任务
              showAddTask.value = true;
              break;
            case 2:
              // 设置
              uni.showToast({ title: "设置功能开发中", icon: "none" });
              break;
            case 3:
              // 帮助
              uni.showToast({ title: "帮助功能开发中", icon: "none" });
              break;
          }
        },
      });
    };

    // 生命周期
    onMounted(() => {
      taskStore.loadFromStorage();
      taskStore.initSampleData();
    });

    return {
      showSearch,
      showAddTask,
      showSortOptions,
      searchKeyword,
      tagInput,
      newTask,
      filterOptions,
      sortOptions,
      priorityOptions,
      filteredTasks,
      taskStats,
      currentFilter,
      currentSort,
      handleSearch,
      clearSearch,
      setFilter,
      setSort,
      getCurrentSortLabel,
      getFilterCount,
      toggleTask,
      editTask,
      deleteTask,
      isOverdue,
      formatDate,
      onDateChange,
      addTag,
      removeTag,
      saveTask,
      closeModal,
      goBack,
      showMoreOptions,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/style.scss";

// 变量定义
$border-radius: 16rpx;
$border-radius-small: 12rpx;
$border-radius-large: 24rpx;
$spacing-small: 12rpx;
$spacing-medium: 20rpx;
$spacing-large: 30rpx;
$transition: all 0.3s ease;

/* 主容器 */
.tasks-page {
  min-height: 100vh;
  background: var(--background);
  position: relative;
  padding-top: calc(var(--status-bar-height) + 88rpx);
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .tasks-page {
    padding-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
}


/* 搜索容器 */
.search-container {
  padding: $spacing-medium $spacing-large;
  background: var(--surface);
  border-bottom: 1rpx solid var(--border-light);
  box-shadow: var(--shadow);
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-hover);
  border-radius: $border-radius-large;
  padding: 0 $spacing-medium;
  border: 2rpx solid var(--border-light);
  transition: $transition;
  box-shadow: var(--shadow);
}

.search-input-container:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4rpx var(--info-light);
  background: var(--surface);
}

.search-icon {
  color: var(--text-secondary);
  font-size: 28rpx;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  padding: 28rpx 0;
  border: none;
  background: transparent;
  font-size: 30rpx;
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: 0.2rpx;
}

.search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.clear-button {
  color: var(--text-muted);
  font-size: 26rpx;
  padding: $spacing-small;
  transition: $transition;
  border-radius: $border-radius-small;
}

.clear-button:active {
  color: var(--primary-color);
  background: var(--info-light);
}

/* 统计概览 */
.stats-overview {
  padding: $spacing-large;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $spacing-medium;
}

.stat-card {
  background: var(--surface);
  border-radius: $border-radius-large;
  padding: 32rpx $spacing-medium;
  display: flex;
  align-items: center;
  gap: $spacing-medium;
  box-shadow: var(--shadow-md);
  border: 2rpx solid var(--border-light);
  transition: $transition;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-surface);
  opacity: 0.2;
  z-index: 0;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.stat-card:active {
  transform: translateY(-4rpx);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.stat-card:active::after {
  opacity: 1;
}

.stat-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: var(--white);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}

.stat-card.total .stat-icon {
  background: var(--gradient-primary);
}

.stat-card.pending .stat-icon {
  background: var(--gradient-warning);
}

.stat-card.completed .stat-icon {
  background: var(--gradient-success);
}

.stat-card.overdue .stat-icon {
  background: var(--gradient-error);
}

.stat-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.stat-number {
  font-size: 42rpx;
  font-weight: 800;
  color: var(--text-color);
  margin-bottom: 6rpx;
  display: block;
  letter-spacing: -0.5rpx;
}

.stat-label {
  font-size: 26rpx;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.2rpx;
}

/* 筛选容器 */
.filter-container {
  padding: 0 $spacing-large $spacing-medium;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: $spacing-medium;
}

.filter-tabs-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}

.filter-tabs-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20rpx;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}

.filter-tabs {
  display: flex;
  gap: 8rpx;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8rpx 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  padding: 16rpx $spacing-medium;
  border-radius: $border-radius-large;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 8rpx;
  box-shadow: var(--shadow);
  border: 2rpx solid var(--border-light);
  transition: $transition;
  white-space: nowrap;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: fit-content;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.filter-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-tab.active {
  background: var(--gradient-primary);
  color: var(--white);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.filter-tab.active::before {
  opacity: 0;
}

.filter-text {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-color);
  position: relative;
  z-index: 1;
  letter-spacing: 0.2rpx;
}

.filter-tab.active .filter-text {
  color: var(--white);
}

.filter-badge {
  background: var(--gray-dark);
  color: var(--white);
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  min-width: 36rpx;
  text-align: center;
  font-weight: 700;
  position: relative;
  z-index: 1;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.sort-container {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 16rpx;
  background: var(--surface);
  border-radius: $border-radius;
  box-shadow: var(--shadow);
  border: 1rpx solid var(--border);
  transition: $transition;
  flex-shrink: 0;
}

.sort-container:active {
  transform: scale(0.98);
}

.sort-text {
  font-size: 26rpx;
  color: var(--text-color);
  font-weight: 500;
}

.sort-icon {
  font-size: 20rpx;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.sort-icon.rotated {
  transform: rotate(180deg);
}

/* 排序下拉 */
.sort-dropdown {
  position: absolute;
  top: 160rpx;
  right: $spacing-large;
  background: var(--surface);
  border-radius: $border-radius;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  min-width: 200rpx;
  border: 1rpx solid var(--border);
  overflow: hidden;
}

.sort-option {
  padding: $spacing-medium $spacing-medium;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid var(--border);
  transition: $transition;
}

.sort-option:last-child {
  border-bottom: none;
}

.sort-option.active {
  background: var(--background);
}

.sort-option:active {
  background: var(--surface-hover);
}

.sort-option-text {
  font-size: 26rpx;
  color: var(--text-color);
  font-weight: 500;
}

.sort-option i {
  color: var(--primary-color);
  font-size: 20rpx;
}

/* 任务列表容器 */
.task-list-container {
  flex: 1;
  padding: 0 $spacing-large;
  min-height: 0;
}

.task-list {
  height: calc(100vh - 500rpx);
  padding-bottom: $spacing-medium;
}

/* 任务卡片 */
.task-card {
  background: var(--surface);
  border-radius: $border-radius-large;
  margin-bottom: $spacing-medium;
  box-shadow: var(--shadow-md);
  border: 2rpx solid var(--border-light);
  transition: $transition;
  overflow: hidden;
  position: relative;
}

.task-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-surface);
  opacity: 0.3;
  z-index: 0;
}

.task-card:active {
  transform: translateY(-4rpx);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.task-card.completed {
  opacity: 0.7;
  background: var(--gray-lighter);
  border-color: var(--gray);
}

.task-card.completed::before {
  opacity: 0.1;
}

.task-card.overdue {
  border-left: 8rpx solid var(--red);
  background: linear-gradient(90deg, var(--error-light) 0%, var(--white) 100%);
  border-color: var(--red-light);
}

.task-card.overdue::before {
  background: linear-gradient(90deg, var(--error-light) 0%, var(--white) 100%);
  opacity: 0.5;
}

.task-main {
  display: flex;
  align-items: flex-start;
  gap: $spacing-medium;
  padding: 32rpx 28rpx;
  position: relative;
  z-index: 1;
}

.task-checkbox-container {
  margin-top: 4rpx;
}

.custom-checkbox {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid var(--border);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: $transition;
  background: var(--surface);
}

.custom-checkbox.checked {
  background: var(--gradient-success);
  border-color: var(--success);
  color: var(--white);
}

.custom-checkbox i {
  font-size: 20rpx;
}

.task-content {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.task-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--title-color);
  flex: 1;
  line-height: 1.4;
}

.task-priority-indicator {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-left: $spacing-small;
}

.task-priority-indicator.high {
  color: var(--error);
}

.task-priority-indicator.medium {
  color: var(--warning);
}

.task-priority-indicator.low {
  color: var(--success);
}

.task-description {
  font-size: 26rpx;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16rpx;
  display: block;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: $spacing-small;
}

.task-tags {
  display: flex;
  gap: 8rpx;
  flex-wrap: wrap;
}

.task-tag {
  background: var(--info-light);
  color: var(--info);
  font-size: 22rpx;
  padding: 6rpx $spacing-small;
  border-radius: $border-radius-small;
  font-weight: 500;
}

.task-due-date {
  display: flex;
  align-items: center;
  gap: 6rpx;
  color: var(--text-secondary);
  font-size: 24rpx;
}

.due-date-text {
  font-weight: 500;
}

.task-actions {
  display: flex;
  gap: $spacing-small;
  padding: 0 28rpx 32rpx;
  position: relative;
  z-index: 1;
}

.action-button {
  width: 56rpx;
  height: 56rpx;
  border-radius: $border-radius;
  background: var(--surface-hover);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  transition: $transition;
  border: 2rpx solid var(--border-light);
  box-shadow: var(--shadow);
}

.action-button.edit {
  color: var(--primary-color);
  background: var(--info-light);
  border-color: var(--primary-light);
}

.action-button.edit:active {
  background: var(--primary-color);
  color: var(--white);
  transform: scale(0.95);
}

.action-button.delete {
  color: var(--error);
  background: var(--error-light);
  border-color: var(--error-light);
}

.action-button.delete:active {
  background: var(--error);
  color: var(--white);
  transform: scale(0.95);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80rpx $spacing-large;
  color: var(--text-secondary);
}

.empty-icon-container {
  margin-bottom: $spacing-large;
}

.empty-icon {
  font-size: 120rpx;
  color: var(--gray);
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16rpx;
  display: block;
}

.empty-description {
  font-size: 26rpx;
  color: var(--text-secondary);
  margin-bottom: 40rpx;
  display: block;
}

.empty-action {
  display: inline-flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 32rpx;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
  transition: all 0.3s ease;
}

.empty-action:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(79, 70, 229, 0.4);
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
  backdrop-filter: blur(4rpx);
}

.modal-content {
  background: var(--surface);
  border-radius: $border-radius-large;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  padding: $spacing-large;
  border-bottom: 1rpx solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--background);
}

.modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--title-color);
}

.close-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: $border-radius-small;
  background: var(--surface-hover);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  transition: $transition;
  border: 1rpx solid var(--border-light);
}

.close-btn:active {
  background: var(--surface);
  color: var(--text-color);
}

.modal-body {
  padding: $spacing-large;
  max-height: 60vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: $spacing-large;
}

.form-label {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: $spacing-small;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: $spacing-medium;
  border: 2rpx solid var(--border-light);
  border-radius: $border-radius-small;
  font-size: 28rpx;
  color: var(--text-color);
  background: var(--surface);
  transition: $transition;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4rpx var(--info-light);
  outline: none;
}

.form-textarea {
  height: 120rpx;
  resize: none;
}

.priority-options {
  display: flex;
  gap: 16rpx;
}

.priority-option {
  flex: 1;
  padding: 16rpx;
  border: 2rpx solid var(--border-light);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  gap: $spacing-small;
  transition: $transition;
  background: var(--surface);
}

.priority-option.active {
  border-color: var(--primary-color);
  background: var(--info-light);
  box-shadow: 0 0 0 4rpx var(--info-light);
}

.priority-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}

.priority-dot.high {
  background: var(--error);
}

.priority-dot.medium {
  background: var(--warning);
}

.priority-dot.low {
  background: var(--success);
}

.priority-text {
  font-size: 26rpx;
  color: var(--text-color);
  font-weight: 500;
}

.date-picker {
  padding: $spacing-medium;
  border: 2rpx solid var(--border-light);
  border-radius: $border-radius-small;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  transition: $transition;
}

.date-picker:active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4rpx var(--info-light);
}

.date-text {
  font-size: 28rpx;
  color: var(--text-color);
  font-weight: 500;
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-top: $spacing-small;
}

.tag-item {
  background: var(--info-light);
  color: var(--info);
  padding: 8rpx 16rpx;
  border-radius: $border-radius;
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.tag-remove {
  color: var(--info);
  font-size: 20rpx;
  transition: $transition;
}

.tag-remove:active {
  color: var(--primary-color);
}

.modal-footer {
  padding: $spacing-large;
  border-top: 1rpx solid var(--border-light);
  display: flex;
  gap: $spacing-medium;
  background: var(--background);
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  height: 80rpx;
  border-radius: $border-radius;
  font-size: 28rpx;
  font-weight: 600;
  border: none;
  transition: $transition;
}

.btn-cancel {
  background: var(--surface);
  color: var(--text-secondary);
  border: 2rpx solid var(--border-light);
}

.btn-cancel:active {
  background: var(--surface-hover);
  color: var(--text-color);
}

.btn-confirm {
  background: var(--gradient-primary);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-confirm:active {
  transform: translateY(1rpx);
  box-shadow: var(--shadow-lg);
}

.btn-confirm:disabled {
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16rpx;
  }

  .filter-container {
    flex-direction: column;
    gap: 16rpx;
    align-items: stretch;
  }

  .filter-tabs-wrapper {
    justify-content: flex-start;
  }

  .filter-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-tab {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: fit-content;
  }

  .task-list {
    height: calc(100vh - 600rpx);
  }
}
</style>
