import React, { useMemo } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { spacing, borderRadius, fontSizes, shadows, useAppColors, type AppColors } from '../../theme';
import { routePayloadCache } from '../../stores/routePayloadCache';
import { scheduleService } from '../../services/scheduleService';

const WEEKDAY_NAMES = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const getMergedSectionIndex = (section: number) => Math.ceil(section / 2);

const formatWeekRanges = (weeks: number[]) => {
  if (weeks.length === 0) return '';
  const sorted = [...weeks].sort((a, b) => a - b);
  const ranges: string[] = [];
  let start = sorted[0];
  let prev = sorted[0];

  for (let i = 1; i < sorted.length; i += 1) {
    const current = sorted[i];
    if (current === prev + 1) {
      prev = current;
      continue;
    }
    ranges.push(start === prev ? `${start}` : `${start}-${prev}`);
    start = current;
    prev = current;
  }
  ranges.push(start === prev ? `${start}` : `${start}-${prev}`);
  return ranges.join(', ');
};

function createCourseDetailStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
    },
    mask: {
      flex: 1,
      backgroundColor: 'rgba(0,0,0,0.32)',
      justifyContent: 'center',
      paddingHorizontal: spacing.lg,
    },
    card: {
      backgroundColor: colors.background.paper,
      borderRadius: borderRadius.xl,
      paddingVertical: spacing.lg,
      paddingHorizontal: spacing.lg,
      maxHeight: '82%',
      ...shadows.lg,
    },
    contentScroll: {
      maxHeight: '100%',
    },
    contentScrollContainer: {
      paddingBottom: spacing.xs,
    },
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: spacing.lg,
      borderBottomWidth: 1,
      borderBottomColor: `${colors.divider}AA`,
      paddingBottom: spacing.md,
    },
    headerLeft: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    iconBadge: {
      width: 30,
      height: 30,
      borderRadius: borderRadius.full,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: `${colors.primary.main}12`,
      marginRight: spacing.sm,
    },
    title: {
      fontSize: fontSizes.xl,
      fontWeight: '700',
      color: colors.text.primary,
    },
    closeButton: {
      width: 28,
      height: 28,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: borderRadius.full,
      backgroundColor: colors.background.default,
    },
    row: {
      marginBottom: spacing.lg,
      flexDirection: 'row',
      alignItems: 'flex-start',
    },
    rowLast: {
      marginBottom: 0,
    },
    label: {
      width: 76,
      fontSize: fontSizes.md,
      fontWeight: '600',
      color: colors.text.secondary,
      lineHeight: 22,
      marginTop: 1,
    },
    value: {
      flex: 1,
      fontSize: fontSizes.lg,
      fontWeight: '600',
      color: colors.text.primary,
      lineHeight: 24,
    },
    timeList: {
      flex: 1,
      gap: spacing.sm,
    },
    timeItemCard: {
      borderWidth: 1,
      borderColor: `${colors.primary.main}20`,
      borderRadius: borderRadius.md,
      backgroundColor: `${colors.primary.main}08`,
      paddingHorizontal: spacing.sm,
      paddingVertical: spacing.sm,
    },
    timeItemMain: {
      fontSize: fontSizes.md,
      fontWeight: '600',
      color: colors.text.primary,
      lineHeight: 20,
    },
    timeItemSub: {
      marginTop: spacing.xs,
      fontSize: fontSizes.sm,
      color: colors.text.secondary,
      lineHeight: 18,
    },
    actionRow: {
      marginTop: spacing.lg,
      alignItems: 'flex-end',
    },
    deleteButton: {
      height: 38,
      paddingHorizontal: spacing.md,
      borderRadius: borderRadius.full,
      backgroundColor: `${colors.error.main}10`,
      borderWidth: 1,
      borderColor: `${colors.error.main}25`,
      flexDirection: 'row',
      alignItems: 'center',
      gap: spacing.xs,
    },
    deleteButtonText: {
      fontSize: fontSizes.sm,
      fontWeight: '700',
      color: colors.error.main,
    },
  });
}

const CourseDetailScreen: React.FC = () => {
  const router = useRouter();
  const colors = useAppColors();
  const styles = useMemo(() => createCourseDetailStyles(colors), [colors]);
  const { courseId } = useLocalSearchParams<{ courseId?: string }>();
  const cached = courseId ? routePayloadCache.getCourseDetail(courseId) : undefined;
  const course = cached?.course;
  const relatedCourses = cached?.relatedCourses ?? [];

  const timeLines = relatedCourses.length > 0 ? relatedCourses : course ? [course] : [];

  const handleDeleteCourse = () => {
    if (!course) return;
    Alert.alert('删除课程', '确认删除这条课程安排吗？', [
      { text: '取消', style: 'cancel' },
      {
        text: '删除',
        style: 'destructive',
        onPress: async () => {
          try {
            await scheduleService.deleteCourse(course.id);
            Alert.alert('删除成功', '课程已删除');
            router.back();
          } catch (error) {
            console.error('删除课程失败:', error);
            Alert.alert('删除失败', '删除课程失败，请稍后重试');
          }
        },
      },
    ]);
  };

  if (!course) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.mask}>
          <Pressable style={StyleSheet.absoluteFillObject} onPress={() => router.back()} />
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.mask}>
        <Pressable style={StyleSheet.absoluteFillObject} onPress={() => router.back()} />
        <View style={styles.card}>
          <View style={styles.header}>
            <View style={styles.headerLeft}>
              <View style={styles.iconBadge}>
                <MaterialCommunityIcons name="book-open-page-variant" size={18} color={colors.primary.main} />
              </View>
              <Text style={styles.title}>课程详情</Text>
            </View>
            <TouchableOpacity onPress={() => router.back()} style={styles.closeButton} hitSlop={10}>
              <MaterialCommunityIcons name="close" size={18} color={colors.text.secondary} />
            </TouchableOpacity>
          </View>

          <ScrollView
            style={styles.contentScroll}
            contentContainerStyle={styles.contentScrollContainer}
            nestedScrollEnabled
            showsVerticalScrollIndicator={false}
          >
            <View style={styles.row}>
              <Text style={styles.label}>课程名称</Text>
              <Text style={styles.value} numberOfLines={2}>
                {course.name}
              </Text>
            </View>

            <View style={[styles.row, styles.rowLast]}>
              <Text style={styles.label}>上课时间</Text>
              <View style={styles.timeList}>
                {timeLines.map((item, index) => (
                  <View key={`${item.id}-${index}`} style={styles.timeItemCard}>
                    <Text style={styles.timeItemMain}>
                      第{formatWeekRanges(item.weeks)}周 · {WEEKDAY_NAMES[item.dayOfWeek]} 第
                      {getMergedSectionIndex(item.startSection)}节
                    </Text>
                    <Text style={styles.timeItemSub}>任课教师：{item.teacher || '未填写'}</Text>
                    {item.location ? <Text style={styles.timeItemSub}>{item.location}</Text> : null}
                  </View>
                ))}
              </View>
            </View>

            <View style={styles.actionRow}>
              <TouchableOpacity style={styles.deleteButton} onPress={handleDeleteCourse} activeOpacity={0.85}>
                <MaterialCommunityIcons name="delete-outline" size={16} color={colors.error.main} />
                <Text style={styles.deleteButtonText}>删除本条课程</Text>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default CourseDetailScreen;
