import React, { useState, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { listTasks, FollowUpTask } from '../../../services/followup';
import EmptyState from '../../../components/EmptyState';
import Loading from '../../../components/Loading';
import './index.scss';

const TABS = [
  { key: 'pending', label: '待完成' },
  { key: 'completed', label: '已完成' },
  { key: 'overdue', label: '已过期' },
];

export default function MyFollowUps() {
  const [activeTab, setActiveTab] = useState('pending');
  const [tasks, setTasks] = useState<FollowUpTask[]>([]);
  const [loading, setLoading] = useState(false);

  const fetchTasks = useCallback(async (status: string) => {
    setLoading(true);
    try {
      const res = await listTasks(status);
      setTasks(res.data || []);
    } catch {
      Taro.showToast({ title: '加载失败', icon: 'none' });
    } finally {
      setLoading(false);
    }
  }, []);

  useDidShow(() => {
    fetchTasks(activeTab);
  });

  const handleTabChange = (key: string) => {
    setActiveTab(key);
    fetchTasks(key);
  };

  const goToDetail = (id: string) => {
    Taro.navigateTo({ url: `/pages/followup/detail/index?id=${id}` });
  };

  const getStatusClass = (status: string) => {
    if (status === 'completed') return 'completed';
    if (status === 'overdue') return 'overdue';
    return 'pending';
  };

  const getStatusLabel = (status: string) => {
    if (status === 'completed') return '已完成';
    if (status === 'overdue') return '已过期';
    return '待完成';
  };

  return (
    <View className='my-followups-page'>
      <View className='tab-bar'>
        {TABS.map((tab) => (
          <View
            className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
            key={tab.key}
            onClick={() => handleTabChange(tab.key)}
          >
            <Text className='tab-text'>{tab.label}</Text>
          </View>
        ))}
      </View>

      <View className='task-list'>
        {tasks.map((t) => (
          <View
            className='task-card'
            key={t.id}
            onClick={() => goToDetail(t.id)}
          >
            <View className='task-top'>
              <Text className='task-name'>{t.task_type}</Text>
              <Text className={`task-status ${getStatusClass(t.status)}`}>
                {getStatusLabel(t.status)}
              </Text>
            </View>
            <Text className='task-desc'>{t.description}</Text>
            <Text className='task-due'>截止日期：{t.due_date}</Text>
          </View>
        ))}
      </View>

      {tasks.length === 0 && !loading && (
        <EmptyState text={`暂无${(() => {
          const tab = TABS.find((t) => t.key === activeTab);
          return tab ? tab.label : '';
        })()}任务`} />
      )}

      {loading && (
        <Loading />
      )}
    </View>
  );
}