import CreateGoalModal from '@/components/CreateGoalModal';
import { TaskCard } from '@/components/TaskCard';
import { TaskProgressCard } from '@/components/TaskProgressCard';
import { Colors } from '@/constants/Colors';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useColorScheme } from '@/hooks/useColorScheme';
import { clearErrors, createGoal } from '@/store/goalsSlice';
import { clearErrors as clearTaskErrors, completeTask, fetchTasks, loadMoreTasks, skipTask } from '@/store/tasksSlice';
import { CreateGoalRequest, TaskListItem } from '@/types/goals';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { useFocusEffect } from '@react-navigation/native';
import dayjs from 'dayjs';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import React, { useCallback, useEffect, useState } from 'react';
import { Alert, FlatList, RefreshControl, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function GoalsScreen() {
  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
  const colorTokens = Colors[theme];
  const dispatch = useAppDispatch();
  const router = useRouter();

  // Redux状态
  const {
    tasks,
    tasksLoading,
    tasksError,
    tasksPagination,
    completeLoading,
    completeError,
    skipLoading,
    skipError,
  } = useAppSelector((state) => state.tasks);

  const {
    createLoading,
    createError
  } = useAppSelector((state) => state.goals);

  const [showCreateModal, setShowCreateModal] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  // 页面聚焦时重新加载数据
  useFocusEffect(
    useCallback(() => {
      console.log('useFocusEffect - loading tasks');
      loadTasks();
    }, [dispatch])
  );

  // 加载任务列表
  const loadTasks = async () => {
    try {
      await dispatch(fetchTasks({
        startDate: dayjs().startOf('day').toISOString(),
        endDate: dayjs().endOf('day').toISOString(),
      })).unwrap();
    } catch (error) {
      console.error('Failed to load tasks:', error);
    }
  };

  // 下拉刷新
  const onRefresh = async () => {
    setRefreshing(true);
    try {
      await loadTasks();
    } finally {
      setRefreshing(false);
    }
  };

  // 加载更多任务
  const handleLoadMoreTasks = async () => {
    if (tasksPagination.hasMore && !tasksLoading) {
      try {
        await dispatch(loadMoreTasks()).unwrap();
      } catch (error) {
        console.error('Failed to load more tasks:', error);
      }
    }
  };

  // 处理错误提示
  useEffect(() => {
    console.log('tasksError', tasksError);
    console.log('createError', createError);
    console.log('completeError', completeError);
    console.log('skipError', skipError);

    if (tasksError) {
      Alert.alert('错误', tasksError);
      dispatch(clearTaskErrors());
    }
    if (createError) {
      Alert.alert('创建失败', createError);
      dispatch(clearErrors());
    }
    if (completeError) {
      Alert.alert('完成失败', completeError);
      dispatch(clearTaskErrors());
    }
    if (skipError) {
      Alert.alert('跳过失败', skipError);
      dispatch(clearTaskErrors());
    }
  }, [tasksError, createError, completeError, skipError, dispatch]);

  // 创建目标处理函数
  const handleCreateGoal = async (goalData: CreateGoalRequest) => {
    try {
      await dispatch(createGoal(goalData)).unwrap();
      setShowCreateModal(false);
      Alert.alert('成功', '目标创建成功！');
      // 创建目标后重新加载任务列表
      loadTasks();
    } catch (error) {
      // 错误已在useEffect中处理
    }
  };

  // 任务点击处理
  const handleTaskPress = (task: TaskListItem) => {
    console.log('Task pressed:', task.title);
    // 这里可以导航到任务详情页面
  };

  // 完成任务处理
  const handleCompleteTask = async (task: TaskListItem) => {
    try {
      await dispatch(completeTask({
        taskId: task.id,
        completionData: {
          count: 1,
          notes: '通过任务卡片完成'
        }
      })).unwrap();
    } catch (error) {
      Alert.alert('错误', '完成任务失败');
    }
  };

  // 跳过任务处理
  const handleSkipTask = async (task: TaskListItem) => {
    try {
      await dispatch(skipTask({
        taskId: task.id,
        skipData: {
          reason: '用户主动跳过'
        }
      })).unwrap();
    } catch (error) {
      Alert.alert('错误', '跳过任务失败');
    }
  };

  // 导航到目标管理页面
  const handleNavigateToGoals = () => {
    router.push('/goals-detail');
  };

  // 渲染任务项
  const renderTaskItem = ({ item }: { item: TaskListItem }) => (
    <TaskCard
      task={item}
      onPress={handleTaskPress}
      onComplete={handleCompleteTask}
      onSkip={handleSkipTask}
    />
  );

  // 渲染空状态
  const renderEmptyState = () => (
    <View style={styles.emptyState}>
      <Text style={[styles.emptyStateTitle, { color: colorTokens.text }]}>
        暂无任务
      </Text>
      <Text style={[styles.emptyStateSubtitle, { color: colorTokens.textSecondary }]}>
        创建目标后，系统会自动生成相应的任务
      </Text>
    </View>
  );

  // 渲染加载更多
  const renderLoadMore = () => {
    if (!tasksPagination.hasMore) return null;
    return (
      <View style={styles.loadMoreContainer}>
        <Text style={[styles.loadMoreText, { color: colorTokens.textSecondary }]}>
          {tasksLoading ? '加载中...' : '上拉加载更多'}
        </Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        backgroundColor="transparent"
        translucent
      />

      {/* 背景渐变 */}
      <LinearGradient
        colors={['#F0F9FF', '#E0F2FE']}
        style={styles.gradientBackground}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      />

      {/* 装饰性圆圈 */}
      <View style={styles.decorativeCircle1} />
      <View style={styles.decorativeCircle2} />

      <View style={styles.content}>
        {/* 标题区域 */}
        <View style={styles.header}>
          <Text style={[styles.pageTitle, { color: colorTokens.text }]}>
            任务
          </Text>
          <View style={styles.headerButtons}>
            <TouchableOpacity
              style={styles.goalsButton}
              onPress={handleNavigateToGoals}
            >
              <MaterialIcons name="flag" size={16} color="#0EA5E9" />
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.addButton}
              onPress={() => setShowCreateModal(true)}
            >
              <Text style={styles.addButtonText}>+</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 任务进度卡片 */}
        <TaskProgressCard tasks={tasks} />

        {/* 任务列表 */}
        <View style={styles.taskListContainer}>
          <FlatList
            data={tasks}
            renderItem={renderTaskItem}
            keyExtractor={(item) => item.id}
            contentContainerStyle={styles.taskList}
            showsVerticalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={onRefresh}
                colors={['#0EA5E9']}
                tintColor="#0EA5E9"
              />
            }
            onEndReached={handleLoadMoreTasks}
            onEndReachedThreshold={0.1}
            ListEmptyComponent={renderEmptyState}
            ListFooterComponent={renderLoadMore}
          />
        </View>

        {/* 创建目标弹窗 */}
        <CreateGoalModal
          visible={showCreateModal}
          onClose={() => setShowCreateModal(false)}
          onSubmit={handleCreateGoal}
          loading={createLoading}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradientBackground: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    opacity: 0.6,
  },
  decorativeCircle1: {
    position: 'absolute',
    top: -20,
    right: -20,
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#0EA5E9',
    opacity: 0.1,
  },
  decorativeCircle2: {
    position: 'absolute',
    bottom: -15,
    left: -15,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#0EA5E9',
    opacity: 0.05,
  },
  content: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 20,
    paddingBottom: 16,
  },
  headerButtons: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  goalsButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  pageTitle: {
    fontSize: 28,
    fontWeight: '800',
    marginBottom: 4,
  },
  addButton: {
    width: 30,
    height: 30,
    borderRadius: 20,
    backgroundColor: '#0EA5E9',
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  addButtonText: {
    color: '#FFFFFF',
    fontSize: 22,
    fontWeight: '600',
    lineHeight: 22,
  },

  taskListContainer: {
    flex: 1,
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    overflow: 'hidden',
  },
  taskList: {
    paddingHorizontal: 20,
    paddingTop: 20,
    paddingBottom: 20,
  },
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 60,
  },
  emptyStateTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  emptyStateSubtitle: {
    fontSize: 14,
    textAlign: 'center',
    lineHeight: 20,
  },
  loadMoreContainer: {
    alignItems: 'center',
    paddingVertical: 20,
  },
  loadMoreText: {
    fontSize: 14,
    fontWeight: '500',
  },
});