<template>
  <view class="min-h-screen bg-gray-50 pb-[200rpx]">
    <!-- Navigation Header -->
    <NavHeader title="我的计划书" />

    <!-- Search Bar -->
    <view class="bg-white px-[24rpx] py-[16rpx]">
      <nut-searchbar v-model="searchValue" placeholder="搜索计划书名称、客户姓名..." @search="onSearch" clearable>
        <template #left-in>
          <IconFont name="search" size="14" />
        </template>
      </nut-searchbar>
    </view>

    <!-- Tabs -->
    <view class="bg-white mt-[2rpx] px-[24rpx] py-[20rpx]">
      <div class="flex overflow-x-auto no-scrollbar space-x-[24rpx]">
        <div v-for="(tab, index) in tabs" :key="index"
          class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
          :class="activeTab === index ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
          @click="activeTab = index">
          {{ tab.title }}
        </div>
      </div>
    </view>

    <!-- Plan List -->
    <view class="px-[24rpx] py-[24rpx]">
      <view v-for="(item, index) in filteredList" :key="index"
        class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm">
        <!-- Header -->
        <view class="flex justify-between items-start mb-[16rpx]">
          <view class="flex-1">
            <view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-[8rpx]">{{ item.title }}</view>
            <view class="flex items-center gap-[12rpx]">
              <view class="bg-blue-50 text-blue-600 text-[22rpx] px-[12rpx] py-[4rpx] rounded-[8rpx]" v-if="item.tag">
                {{ item.tag }}
              </view>
            </view>
          </view>
          <view class="ml-[24rpx]">
            <!-- Status Badge or Icon could go here -->
          </view>
        </view>

        <!-- Info -->
        <view class="flex justify-between items-center text-gray-500 text-[24rpx] mb-[24rpx]">
          <text>{{ item.client }}</text>
          <text>{{ item.date }}</text>
        </view>

        <!-- Divider -->
        <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>

        <!-- Actions -->
        <view class="flex justify-end gap-[24rpx]">
          <view class="flex items-center text-gray-500" @tap="onDelete(item)">
            <IconFont name="del" size="14" class="mr-[8rpx]" />
            <text class="text-[24rpx]">删除</text>
          </view>
          <view class="flex items-center text-blue-600" @tap="onView(item)">
            <IconFont name="order" size="14" class="mr-[8rpx]" />
            <text class="text-[24rpx]">查看</text>
          </view>
        </view>
      </view>

      <!-- Empty State -->
      <view v-if="filteredList.length === 0"
        class="flex flex-col items-center justify-center py-[100rpx] text-gray-400">
        <IconFont name="order" size="48" class="mb-[24rpx] opacity-50" />
        <text class="text-[28rpx]">暂无相关计划书</text>
      </view>
    </view>

    <!-- TabBar -->
    <TabBar current="" />
    <!-- Note: Design shows Home/AI/Mine. It doesn't highlight 'Plan'.
         Since Plan is a feature, maybe it shouldn't show TabBar or should show 'Mine' as active if accessed from Mine.
         I'll set current to 'me' if it's considered part of Mine module, or just leave it.
         The design code footer has "首页, AI答疑, 我的".
         I will use 'me' as active since it was accessed from 'Mine'. -->
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGo } from '@/hooks/useGo'
import { IconFont } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'

const go = useGo()
const searchValue = ref('')
const activeTab = ref(0)
const tabs = [
  { title: '全部', key: 'all' },
  { title: '生成中', key: 'processing' },
  { title: '已生成', key: 'generated' }
]

const list = ref([
  {
    id: 1,
    title: '家庭财富传承保障计划（分红）',
    client: '客户：李*生',
    date: '2024-03-15 10:12',
    tag: '年金保险',
    status: 'generated'
  },
  {
    id: 2,
    title: '财富传承保障金融理财计划（分红）',
    client: '客户：孙*',
    date: '2024-03-14 12:01',
    tag: '',
    status: 'processing'
  },
  {
    id: 3,
    title: '企业高管年金计划',
    client: '客户：王*江',
    date: '2024-03-13 09:23',
    tag: '年金保险',
    status: 'generated'
  },
  {
    id: 4,
    title: '家庭财富传承保障计划',
    client: '客户：李*生',
    date: '2024-03-12 15:12',
    tag: '年金保险',
    status: 'generated'
  }
])

const filteredList = computed(() => {
  let result = list.value

  // Filter by Tab
  const currentKey = tabs[activeTab.value].key
  if (currentKey !== 'all') {
    result = result.filter(item => item.status === currentKey)
  }

  // Filter by Search
  if (searchValue.value) {
    const key = searchValue.value.toLowerCase()
    result = result.filter(item =>
      item.title.toLowerCase().includes(key) ||
      item.client.toLowerCase().includes(key)
    )
  }

  return result
})

const onSearch = (val) => {
  console.log('Search:', val)
}

const onView = (item) => {
  Taro.showToast({ title: `查看: ${item.title}`, icon: 'none' })
}

const onDelete = (item) => {
  Taro.showModal({
    title: '提示',
    content: '确定要删除该计划书吗？',
    success: (res) => {
      if (res.confirm) {
        list.value = list.value.filter(i => i.id !== item.id)
        Taro.showToast({ title: '已删除', icon: 'success' })
      }
    }
  })
}
</script>