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

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

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

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

  usePageData(async () => { await fetchTasks(activeTab); }, { throttleMs: 10000 });

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

  const goToDetail = (id: string) => {
    Taro.navigateTo({ url: `/pages/pkg-profile/followups/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 (
    <PageShell className={modeClass}>
      <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>
            {activeTab === tab.key && <View className='tab-indicator' />}
          </View>
        ))}
      </View>

      {error ? (
        <ErrorState onRetry={() => fetchTasks(activeTab)} />
      ) : (
        <>
          <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.follow_up_type}</Text>
                  <Text className={`task-status ${getStatusClass(t.status)}`}>
                    {getStatusLabel(t.status)}
                  </Text>
                </View>
                <Text className='task-desc'>{t.content_template}</Text>
                <Text className='task-due'>截止: {t.planned_date}</Text>
              </View>
            ))}
          </View>

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

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