import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Modal,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Switch,
  ActivityIndicator,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import DateTimePicker from '@react-native-community/datetimepicker';
import { theme } from '../theme';
import { Event } from '../types';
import { safeParseDate } from '../utils/recurrence';

interface EventModalProps {
  visible: boolean;
  event: Event | null;
  onClose: () => void;
  onSave: (event: Partial<Event>) => void;
}

const WEEKDAY_LABELS = ['一', '二', '三', '四', '五', '六', '日'];

// 15 分钟对齐
const snapTo15 = (date: Date): Date => {
  const d = new Date(date);
  const minutes = d.getMinutes();
  const snapped = Math.round(minutes / 15) * 15;
  d.setMinutes(snapped, 0, 0);
  return d;
};

// 解析循环规则字符串
const parseRecurrence = (str: string | null): { type: 'NONE' | 'DAILY' | 'WEEKLY'; interval: number; by: number[] } => {
  if (!str) return { type: 'NONE', interval: 1, by: [] };
  const parts = str.split(';');
  const type = (parts[0] === 'DAILY' || parts[0] === 'WEEKLY') ? parts[0] as 'DAILY' | 'WEEKLY' : 'NONE';
  let interval = 1;
  let by: number[] = [];
  for (let i = 1; i < parts.length; i++) {
    const [key, val] = parts[i].split('=');
    if (key === 'interval') interval = Math.max(1, parseInt(val) || 1);
    if (key === 'by') by = val.split(',').map(Number).filter(n => n >= 0 && n <= 6);
  }
  return { type, interval, by };
};

export default function EventModal({
  visible,
  event,
  onClose,
  onSave,
}: EventModalProps) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [allDay, setAllDay] = useState(false);
  const [enableReminder, setEnableReminder] = useState(true);
  const [remindDate, setRemindDate] = useState(new Date());
  const [recurrenceType, setRecurrenceType] = useState<'NONE' | 'DAILY' | 'WEEKLY'>('NONE');
  const [interval, setInterval_] = useState(1);
  const [weekdays, setWeekdays] = useState<number[]>([]);
  const [saving, setSaving] = useState(false);
  const [showStartPicker, setShowStartPicker] = useState(false);
  const [showEndPicker, setShowEndPicker] = useState(false);
  const [showRemindPicker, setShowRemindPicker] = useState(false);

  useEffect(() => {
    if (event) {
      setTitle(event.title);
      setContent(event.content || '');
      setStartDate(safeParseDate(event.start));
      setEndDate(event.end ? safeParseDate(event.end) : null);
      setAllDay(!!event.allDay);
      setEnableReminder(!!event.remindAt);
      setRemindDate(event.remindAt ? safeParseDate(event.remindAt) : new Date());

      const parsed = parseRecurrence(event.recurrence);
      setRecurrenceType(parsed.type);
      setInterval_(parsed.interval);
      setWeekdays(parsed.by);
    } else {
      resetForm();
    }
  }, [event, visible]);

  const resetForm = () => {
    setTitle('');
    setContent('');
    setStartDate(snapTo15(new Date()));
    setEndDate(null);
    setAllDay(false);
    setEnableReminder(true);
    setRemindDate(snapTo15(new Date()));
    setRecurrenceType('NONE');
    setInterval_(1);
    setWeekdays([]);
    setSaving(false);
  };

  const handleSave = () => {
    if (!title.trim()) {
      alert('请输入标题');
      return;
    }
    if (!startDate) {
      alert('请设置开始时间');
      return;
    }

    setSaving(true);

    // 结束时间自动补全：未设置时 +1h（全天则 +24h）
    let finalEnd = endDate;
    if (!finalEnd) {
      finalEnd = new Date(startDate.getTime() + (allDay ? 24 : 1) * 3600 * 1000);
    }

    // 组装循环规则
    let recurrence = '';
    if (recurrenceType === 'DAILY') {
      recurrence = `DAILY;interval=${interval}`;
    } else if (recurrenceType === 'WEEKLY') {
      recurrence = `WEEKLY;interval=${interval}`;
      if (weekdays.length > 0) {
        recurrence += `;by=${weekdays.join(',')}`;
      }
    }

    const eventData: Partial<Event> = {
      title: title.trim(),
      content: content.trim(),
      start: startDate.toISOString(),
      end: finalEnd.toISOString(),
      allDay,
      remindAt: enableReminder ? remindDate.toISOString() : null,
      recurrence: recurrence || null,
      completed: event?.completed || false,
    };

    onSave(eventData);
  };

  const toggleWeekday = (day: number) => {
    setWeekdays(prev =>
      prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day].sort()
    );
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  return (
    <Modal
      visible={visible}
      animationType="slide"
      transparent={true}
      onRequestClose={onClose}
    >
      <View style={styles.overlay}>
        <View style={styles.container}>
          <View style={styles.header}>
            <TouchableOpacity onPress={onClose}>
              <Ionicons name="close" size={28} color={theme.colors.text} />
            </TouchableOpacity>
            <Text style={styles.headerTitle}>
              {event ? '编辑事件' : '新建事件'}
            </Text>
            <TouchableOpacity onPress={handleSave} disabled={saving}>
              {saving ? (
                <ActivityIndicator size="small" color={theme.colors.primary} />
              ) : (
                <Text style={styles.saveButton}>保存</Text>
              )}
            </TouchableOpacity>
          </View>

          <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
            <View style={styles.field}>
              <Text style={styles.label}>标题</Text>
              <TextInput
                style={styles.input}
                value={title}
                onChangeText={setTitle}
                placeholder="输入事件标题"
                placeholderTextColor={theme.colors.textSecondary}
              />
            </View>

            <View style={styles.field}>
              <Text style={styles.label}>内容</Text>
              <TextInput
                style={[styles.input, styles.textArea]}
                value={content}
                onChangeText={setContent}
                placeholder="输入事件内容（可选）"
                placeholderTextColor={theme.colors.textSecondary}
                multiline
                numberOfLines={4}
              />
            </View>

            <View style={styles.switchField}>
              <Text style={styles.label}>全天事件</Text>
              <Switch
                value={allDay}
                onValueChange={setAllDay}
                trackColor={{ false: theme.colors.border, true: theme.colors.primary }}
                thumbColor={theme.colors.text}
              />
            </View>

            <View style={styles.field}>
              <Text style={styles.label}>开始时间</Text>
              <TouchableOpacity
                style={styles.dateButton}
                onPress={() => setShowStartPicker(true)}
              >
                <Text style={styles.dateButtonText}>{formatDate(startDate)}</Text>
              </TouchableOpacity>
            </View>

            <View style={styles.field}>
              <Text style={styles.label}>结束时间（可选，默认+1小时）</Text>
              <TouchableOpacity
                style={styles.dateButton}
                onPress={() => setShowEndPicker(true)}
              >
                <Text style={styles.dateButtonText}>
                  {endDate ? formatDate(endDate) : '未设置'}
                </Text>
                {endDate && (
                  <TouchableOpacity
                    onPress={() => setEndDate(null)}
                    style={styles.clearButton}
                  >
                    <Ionicons name="close-circle" size={20} color={theme.colors.textSecondary} />
                  </TouchableOpacity>
                )}
              </TouchableOpacity>
            </View>

            <View style={styles.switchField}>
              <Text style={styles.label}>启用提醒</Text>
              <Switch
                value={enableReminder}
                onValueChange={setEnableReminder}
                trackColor={{ false: theme.colors.border, true: theme.colors.primary }}
                thumbColor={theme.colors.text}
              />
            </View>

            {enableReminder && (
              <View style={styles.field}>
                <Text style={styles.label}>提醒时间</Text>
                <TouchableOpacity
                  style={styles.dateButton}
                  onPress={() => setShowRemindPicker(true)}
                >
                  <Text style={styles.dateButtonText}>{formatDate(remindDate)}</Text>
                </TouchableOpacity>
              </View>
            )}

            <View style={styles.field}>
              <Text style={styles.label}>重复</Text>
              <View style={styles.recurrenceOptions}>
                {[
                  { label: '不重复', value: 'NONE' },
                  { label: '每天', value: 'DAILY' },
                  { label: '每周', value: 'WEEKLY' },
                ].map((option) => (
                  <TouchableOpacity
                    key={option.value}
                    style={[
                      styles.recurrenceButton,
                      recurrenceType === option.value && styles.recurrenceButtonActive,
                    ]}
                    onPress={() => setRecurrenceType(option.value as any)}
                  >
                    <Text
                      style={[
                        styles.recurrenceButtonText,
                        recurrenceType === option.value && styles.recurrenceButtonTextActive,
                      ]}
                    >
                      {option.label}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>

            {recurrenceType !== 'NONE' && (
              <View style={styles.field}>
                <Text style={styles.label}>
                  每 {interval} {recurrenceType === 'DAILY' ? '天' : '周'}
                </Text>
                <View style={styles.intervalRow}>
                  <TouchableOpacity
                    style={styles.intervalBtn}
                    onPress={() => setInterval_(Math.max(1, interval - 1))}
                  >
                    <Ionicons name="remove" size={20} color={theme.colors.text} />
                  </TouchableOpacity>
                  <Text style={styles.intervalValue}>{interval}</Text>
                  <TouchableOpacity
                    style={styles.intervalBtn}
                    onPress={() => setInterval_(interval + 1)}
                  >
                    <Ionicons name="add" size={20} color={theme.colors.text} />
                  </TouchableOpacity>
                </View>
              </View>
            )}

            {recurrenceType === 'WEEKLY' && (
              <View style={styles.field}>
                <Text style={styles.label}>重复星期</Text>
                <View style={styles.weekdayRow}>
                  {WEEKDAY_LABELS.map((label, idx) => (
                    <TouchableOpacity
                      key={idx}
                      style={[
                        styles.weekdayBtn,
                        weekdays.includes(idx) && styles.weekdayBtnActive,
                      ]}
                      onPress={() => toggleWeekday(idx)}
                    >
                      <Text
                        style={[
                          styles.weekdayBtnText,
                          weekdays.includes(idx) && styles.weekdayBtnTextActive,
                        ]}
                      >
                        {label}
                      </Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>
            )}
          </ScrollView>

          {showStartPicker && (
            <DateTimePicker
              value={startDate}
              mode="datetime"
              minuteInterval={15}
              onChange={(event, date) => {
                setShowStartPicker(false);
                if (date) setStartDate(snapTo15(date));
              }}
            />
          )}

          {showEndPicker && (
            <DateTimePicker
              value={endDate || new Date(startDate.getTime() + 3600000)}
              mode="datetime"
              minuteInterval={15}
              onChange={(event, date) => {
                setShowEndPicker(false);
                if (date) setEndDate(snapTo15(date));
              }}
            />
          )}

          {showRemindPicker && (
            <DateTimePicker
              value={remindDate}
              mode="datetime"
              minuteInterval={15}
              onChange={(event, date) => {
                setShowRemindPicker(false);
                if (date) setRemindDate(snapTo15(date));
              }}
            />
          )}
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  container: {
    backgroundColor: theme.colors.background,
    borderTopLeftRadius: theme.borderRadius.xl,
    borderTopRightRadius: theme.borderRadius.xl,
    maxHeight: '90%',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: theme.spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
  headerTitle: {
    ...theme.typography.h3,
    color: theme.colors.text,
  },
  saveButton: {
    ...theme.typography.body,
    color: theme.colors.primary,
    fontWeight: '600',
  },
  content: {
    padding: theme.spacing.md,
  },
  field: {
    marginBottom: theme.spacing.lg,
  },
  label: {
    ...theme.typography.body,
    color: theme.colors.text,
    marginBottom: theme.spacing.sm,
  },
  input: {
    backgroundColor: theme.colors.surface,
    borderRadius: theme.borderRadius.md,
    padding: theme.spacing.md,
    color: theme.colors.text,
    fontSize: 16,
  },
  textArea: {
    height: 100,
    textAlignVertical: 'top',
  },
  dateButton: {
    backgroundColor: theme.colors.surface,
    borderRadius: theme.borderRadius.md,
    padding: theme.spacing.md,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  dateButtonText: {
    ...theme.typography.body,
    color: theme.colors.text,
  },
  clearButton: {
    marginLeft: theme.spacing.sm,
  },
  switchField: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing.lg,
  },
  recurrenceOptions: {
    flexDirection: 'row',
    gap: theme.spacing.sm,
  },
  recurrenceButton: {
    flex: 1,
    paddingVertical: theme.spacing.sm,
    paddingHorizontal: theme.spacing.md,
    backgroundColor: theme.colors.surface,
    borderRadius: theme.borderRadius.md,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: theme.colors.border,
  },
  recurrenceButtonActive: {
    borderColor: theme.colors.primary,
    backgroundColor: theme.colors.surfaceVariant,
  },
  recurrenceButtonText: {
    ...theme.typography.bodySmall,
    color: theme.colors.text,
  },
  recurrenceButtonTextActive: {
    color: theme.colors.primary,
    fontWeight: '600',
  },
  intervalRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: theme.spacing.md,
  },
  intervalBtn: {
    width: 40,
    height: 40,
    borderRadius: theme.borderRadius.md,
    backgroundColor: theme.colors.surface,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: theme.colors.border,
  },
  intervalValue: {
    ...theme.typography.h3,
    color: theme.colors.text,
    minWidth: 30,
    textAlign: 'center',
  },
  weekdayRow: {
    flexDirection: 'row',
    gap: theme.spacing.xs,
  },
  weekdayBtn: {
    flex: 1,
    paddingVertical: theme.spacing.sm,
    borderRadius: theme.borderRadius.md,
    backgroundColor: theme.colors.surface,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: theme.colors.border,
  },
  weekdayBtnActive: {
    borderColor: theme.colors.primary,
    backgroundColor: theme.colors.surfaceVariant,
  },
  weekdayBtnText: {
    ...theme.typography.bodySmall,
    color: theme.colors.textSecondary,
  },
  weekdayBtnTextActive: {
    color: theme.colors.primary,
    fontWeight: '600',
  },
});