<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { Send, Clock, CheckCircle, XCircle, ArrowRight, Search } 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: 'PENDING', label: '待审核' },
  { key: 'APPROVED', label: '已通过' },
  { key: 'REJECTED', label: '被拒绝' },
  { key: 'WITHDRAWN', 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);

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

const filteredApps = computed(() => {
  return allApps.value.filter(app => {
    // DELIVERED/COMPLETED belong to project management, not applications
    if (['DELIVERED', 'COMPLETED'].includes(app.status)) return false;
    const task = app.task_detail || {};
    const matchSearch = !searchQuery.value || 
      task.title?.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      task.description?.toLowerCase().includes(searchQuery.value.toLowerCase());
    if (!matchSearch) return false;
    if (activeTab.value === 'ALL') return true;
    return app.status === activeTab.value;
  });
});

const tabCounts = computed(() => {
  const appOnly = allApps.value.filter(a => !['DELIVERED', 'COMPLETED'].includes(a.status));
  const counts: Record<string, number> = { ALL: appOnly.length };
  for (const app of appOnly) {
    counts[app.status] = (counts[app.status] || 0) + 1;
  }
  return counts;
});

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

const translateStatus = (status: string) => {
  const map: Record<string, string> = {
    'PENDING': '待审核',
    'APPROVED': '已通过',
    'DELIVERED': '已交付',
    'REJECTED': '被拒绝',
    'WITHDRAWN': '已撤回',
    'COMPLETED': '已完成',
  };
  return map[status] || status;
};

const getTimeAgo = (dateStr: string) => {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 60) return `${mins}分钟前`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}小时前`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `${days}天前`;
  return new Date(dateStr).toLocaleDateString();
};
</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-blue-50 text-blue-500 flex items-center justify-center">
          <Send 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>
      <el-button type="primary" @click="router.push('/user/tasks/market')">
        去接单大厅
        <ArrowRight class="w-4 h-4 ml-1" />
      </el-button>
    </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" size="default">
        <template #prefix><Search class="w-4 h-4 text-gray-400" /></template>
      </el-input>
    </div>

    <!-- List -->
    <div v-loading="isLoading">
      <div v-if="filteredApps.length > 0" class="space-y-3">
        <div
          v-for="app in filteredApps"
          :key="app.id"
          class="app-card"
          @click="router.push(`/user/tasks/${app.task}`)"
        >
          <!-- Status indicator bar -->
          <div class="status-bar"
            :class="{
              'bg-yellow-400': app.status === 'PENDING',
              'bg-green-400': app.status === 'APPROVED',
              'bg-red-400': app.status === 'REJECTED',
              'bg-blue-400': app.status === 'DELIVERED',
              'bg-gray-300': ['WITHDRAWN', 'COMPLETED'].includes(app.status),
            }"
          ></div>

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

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

            <!-- Bottom row -->
            <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?.enterprise_name" class="text-gray-400 text-xs">
                {{ app.task_detail.enterprise_name }}
              </span>
            </div>

            <!-- Rejection reason -->
            <div v-if="app.status === 'REJECTED' && app.reject_reason" class="mt-2 text-xs text-red-500 bg-red-50 rounded-lg px-3 py-2">
              拒绝原因：{{ app.reject_reason }}
            </div>
          </div>

          <ArrowRight class="w-4 h-4 text-gray-300 mr-4 flex-shrink-0 self-center" />
        </div>
      </div>

      <el-empty v-else-if="!isLoading" :description="activeTab === 'ALL' ? '暂无申请记录' : `暂无${tabs.find(t => t.key === activeTab)?.label}的申请`" 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: #3b82f6;
  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: #eff6ff;
  color: #3b82f6;
}

.app-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}
.app-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.status-bar {
  width: 4px;
  flex-shrink: 0;
}
</style>
