<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { Briefcase, Clock, ArrowRight, CheckCircle, Truck, Search, Ban } from 'lucide-vue-next';
import { useRoute, useRouter } from 'vue-router';
import { getApplications } from '@/api/tasks';

const route = useRoute();
const router = useRouter();

const allApps = ref<any[]>([]);
const isLoading = ref(true);
const searchQuery = ref('');

const tabs = [
  { key: 'ALL', label: '全部项目' },
  { key: 'APPROVED', label: '执行中' },
  { key: 'DELIVERED', label: '待验收' },
  { key: 'COMPLETED', label: '已完成' },
  { key: 'CANCELLED', label: '已取消' },
];

const validKeys = tabs.map(t => t.key);
const initTab = typeof route.query.tab === 'string' && validKeys.includes(route.query.tab)
  ? route.query.tab : 'ALL';
const activeTab = ref(initTab);

const fetchData = async () => {
  try {
    isLoading.value = true;
    const res: any = await getApplications();
    allApps.value = res.results || [];
  } catch (e) { console.error(e); }
  finally { isLoading.value = false; }
};

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

watch(() => route.query.tab, (newTab) => {
  if (typeof newTab === 'string' && validKeys.includes(newTab)) {
    activeTab.value = newTab;
  }
});

const getAppStatus = (app: any) => {
  if (app.task_detail?.status === 'CANCELLED') return 'CANCELLED';
  if (app.task_detail?.status === 'COMPLETED' || app.status === 'COMPLETED') return 'COMPLETED';
  return app.status;
};

const validApps = computed(() => {
  return allApps.value.filter(app => {
    const s = getAppStatus(app);
    return ['APPROVED', 'DELIVERED', 'COMPLETED', 'CANCELLED'].includes(s);
  });
});

const filteredProjects = computed(() => {
  return validApps.value.filter(app => {
    const s = getAppStatus(app);
    const task = app.task_detail || {};
    const matchSearch = !searchQuery.value ||
      task.title?.toLowerCase().includes(searchQuery.value.toLowerCase());
    
    if (!matchSearch) return false;
    if (activeTab.value === 'ALL') return true;
    return s === activeTab.value;
  });
});

const tabCounts = computed(() => {
  const counts: Record<string, number> = { ALL: validApps.value.length, APPROVED: 0, DELIVERED: 0, COMPLETED: 0, CANCELLED: 0 };
  validApps.value.forEach(app => {
    const s = getAppStatus(app);
    if (counts[s] !== undefined) counts[s]++;
  });
  return counts;
});

const getStatusType = (status: string) => {
  switch (status) {
    case 'APPROVED': return 'success';
    case 'DELIVERED': return 'primary';
    case 'COMPLETED': return 'success';
    case 'CANCELLED': return 'danger';
    default: return 'info';
  }
};

const translateStatus = (status: string) => {
  const map: Record<string, string> = {
    'APPROVED': '执行中',
    'DELIVERED': '待验收',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
  };
  return map[status] || status;
};
</script>

<template>
  <div class="space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-green-50 text-green-500 flex items-center justify-center">
          <Briefcase class="w-5 h-5" />
        </div>
        <div>
          <h1 class="text-xl font-bold text-gray-800">我的项目</h1>
          <p class="text-xs text-gray-400">正在执行和交付中的任务</p>
        </div>
      </div>
      <div class="flex gap-2">
        <el-button type="primary" @click="router.push('/user/tasks/market')">
          接更多任务
          <ArrowRight class="w-4 h-4 ml-1" />
        </el-button>
      </div>
    </div>

    <!-- Tabs + Search -->
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div class="flex items-center gap-1 bg-gray-50 rounded-lg p-1">
        <button
          v-for="tab in tabs"
          :key="tab.key"
          @click="activeTab = tab.key"
          class="tab-btn"
          :class="{ active: activeTab === tab.key }"
        >
          {{ tab.label }}
          <span class="tab-count">{{ tabCounts[tab.key] || 0 }}</span>
        </button>
      </div>
      <el-input v-model="searchQuery" placeholder="搜索项目名称..." clearable style="width: 240px">
        <template #prefix><Search class="w-4 h-4 text-gray-400" /></template>
      </el-input>
    </div>

    <!-- Project Cards -->
    <div v-loading="isLoading">
      <div v-if="filteredProjects.length > 0" class="grid grid-cols-1 gap-4">
        <div
          v-for="app in filteredProjects"
          :key="app.id"
          class="project-card group"
          @click="router.push(`/user/tasks/${app.task}`)"
        >
          <div class="flex items-start gap-4 p-5">
            <!-- Status icon -->
            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
              :class="getAppStatus(app) === 'APPROVED' ? 'bg-green-50 text-green-500' : 
                      getAppStatus(app) === 'DELIVERED' ? 'bg-blue-50 text-blue-500' :
                      getAppStatus(app) === 'CANCELLED' ? 'bg-red-50 text-red-500' :
                      'bg-gray-100 text-gray-500'">
              <CheckCircle v-if="getAppStatus(app) === 'APPROVED'" class="w-5 h-5" />
              <Truck v-else-if="getAppStatus(app) === 'DELIVERED'" class="w-5 h-5" />
              <Ban v-else-if="getAppStatus(app) === 'CANCELLED'" class="w-5 h-5" />
              <CheckCircle v-else class="w-5 h-5" />
            </div>

            <div class="flex-1 min-w-0">
              <!-- Header -->
              <div class="flex items-center gap-2 mb-1">
                <el-tag :type="(getStatusType(getAppStatus(app)) as any)" size="small" effect="light" round>
                  {{ translateStatus(getAppStatus(app)) }}
                </el-tag>
                <span class="text-xs text-gray-400 font-mono">#{{ app.id?.toString().substring(0, 8) }}</span>
              </div>

              <!-- Title -->
              <h3 class="font-bold text-lg text-gray-800 group-hover:text-blue-600 transition-colors truncate">
                {{ app.task_detail?.title || '任务加载中...' }}
              </h3>

              <!-- Meta -->
              <div class="flex items-center gap-4 mt-2 text-sm">
                <span class="text-orange-500 font-bold">¥{{ app.expected_price?.toLocaleString() || 0 }}</span>
                <span class="text-gray-400 flex items-center gap-1">
                  <Clock class="w-3.5 h-3.5" />{{ app.expected_days || 0 }} 天
                </span>
                <span v-if="app.task_detail?.deadline" class="text-gray-400 text-xs">
                  截止 {{ app.task_detail.deadline }}
                </span>
                <span v-if="app.task_detail?.enterprise_name" class="text-gray-400 text-xs ml-auto">
                  {{ app.task_detail.enterprise_name }}
                </span>
              </div>
            </div>

            <ArrowRight class="w-4 h-4 text-gray-300 flex-shrink-0 self-center opacity-0 group-hover:opacity-100 transition-opacity" />
          </div>

          <!-- Progress bar (visual indicator) -->
          <div class="h-1 bg-gray-50" v-if="['APPROVED', 'DELIVERED'].includes(getAppStatus(app))">
            <div class="h-full transition-all duration-500"
              :class="getAppStatus(app) === 'DELIVERED' ? 'bg-blue-400' : 'bg-green-400'"
              :style="{ width: getAppStatus(app) === 'DELIVERED' ? '80%' : '40%' }">
            </div>
          </div>
        </div>
      </div>

      <el-empty v-else-if="!isLoading" description="暂无项目" class="bg-white rounded-xl py-16">
        <el-button type="primary" @click="router.push('/user/tasks/market')">去接单大厅</el-button>
      </el-empty>
    </div>
  </div>
</template>

<style scoped>
.tab-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tab-btn:hover { color: #374151; }
.tab-btn.active {
  background: #fff;
  color: #10b981;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tab-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #9ca3af;
  font-weight: 500;
}
.tab-btn.active .tab-count {
  background: #ecfdf5;
  color: #10b981;
}

.project-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.project-card:hover {
  border-color: #86efac;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
</style>
