import { useEffect, useState } from 'react';
import Taro, { useRouter } from '@tarojs/taro';
import { Button, Text, View } from '@tarojs/components';
import {
  loadFavoriteQuestions,
  loadWrongQuestionReviewPlan,
  resolveWrongQuestion,
  type QuestionItem,
  type WrongQuestionReviewItem,
} from '@/services/learning';
import '../student.css';

type ReviewMode = 'wrong' | 'favorite';

function questionIdOf(item: QuestionItem | WrongQuestionReviewItem) {
  return 'questionId' in item && item.questionId ? item.questionId : (item as QuestionItem).id;
}

export default function StudentReviewPage() {
  const router = useRouter();
  const initialMode = router.params?.type === 'favorite' ? 'favorite' : 'wrong';
  const [mode, setMode] = useState<ReviewMode>(initialMode);
  const [wrongItems, setWrongItems] = useState<WrongQuestionReviewItem[]>([]);
  const [favoriteItems, setFavoriteItems] = useState<QuestionItem[]>([]);
  const [error, setError] = useState('');

  function reload(nextMode = mode) {
    setError('');
    if (nextMode === 'wrong') {
      loadWrongQuestionReviewPlan(30)
        .then(payload => setWrongItems(payload.items || []))
        .catch(nextError => setError(nextError instanceof Error ? nextError.message : '错题加载失败'));
      return;
    }
    loadFavoriteQuestions(50)
      .then(payload => setFavoriteItems(payload.items || []))
      .catch(nextError => setError(nextError instanceof Error ? nextError.message : '收藏加载失败'));
  }

  useEffect(() => {
    reload(mode);
  }, [mode]);

  function startReview() {
    const reviewMode = mode === 'wrong' ? 'wrong_review' : 'favorite_review';
    Taro.navigateTo({ url: `/pages/student/practice/index?mode=${reviewMode}&questionLimit=30` });
  }

  async function markResolved(questionId: string) {
    try {
      await resolveWrongQuestion(questionId);
      Taro.showToast({ title: '已移出错题', icon: 'success' });
      reload('wrong');
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : '移出错题失败');
    }
  }

  const items = mode === 'wrong' ? wrongItems : favoriteItems;

  return (
    <View className='student-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Review</Text>
          <Text className='student-title'>{mode === 'wrong' ? '错题本' : '收藏夹'}</Text>
          <Text className='student-subtitle'>复习组卷由后端按当前用户错题/收藏安全生成，前端不传题目列表。</Text>
        </View>
        <Button className='secondary-button' onClick={() => Taro.navigateBack()}>返回</Button>
      </View>

      <View className='toolbar wrap'>
        <Button className={`pill-button ${mode === 'wrong' ? 'active' : ''}`} onClick={() => setMode('wrong')}>错题</Button>
        <Button className={`pill-button ${mode === 'favorite' ? 'active' : ''}`} onClick={() => setMode('favorite')}>收藏</Button>
        <Button className='primary-button' onClick={startReview}>开始复习</Button>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>{mode === 'wrong' ? '建议复习' : '收藏题目'}</Text>
        <View className='list-stack'>
          {items.map(item => {
            const questionId = questionIdOf(item);
            return (
              <View className='list-row' key={questionId}>
                <Text className='row-main'>{item.content || '未提供题干'}</Text>
                <Text className='row-meta'>{item.typeLabel || item.type || '题目'}{mode === 'wrong' ? ` · 错 ${String((item as WrongQuestionReviewItem).wrongCount || 0)} 次` : ''}</Text>
                {mode === 'wrong' ? (
                  <View className='toolbar'>
                    <Button className='secondary-button' onClick={() => markResolved(questionId)}>移出错题</Button>
                  </View>
                ) : null}
              </View>
            );
          })}
        </View>
        {!items.length ? <View className='empty-state'>{mode === 'wrong' ? '暂无待复习错题。' : '暂无收藏题目。'}</View> : null}
      </View>

      {error ? <Text className='error-text'>{error}</Text> : null}
    </View>
  );
}
