import React, { useState } from 'react';
import {
  Dimensions,
  Modal,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const { width, height } = Dimensions.get('window');

interface MoodModalProps {
  visible: boolean;
  onClose: () => void;
  onSave: (mood: string, date: string) => void;
}

// 心情日历数据
const generateCalendarData = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const firstDayOfWeek = new Date(year, month, 1).getDay();

  const calendar = [];
  const weeks = [];

  // 添加空白日期
  for (let i = 0; i < firstDayOfWeek; i++) {
    weeks.push(null);
  }

  // 添加实际日期
  for (let day = 1; day <= daysInMonth; day++) {
    weeks.push(day);
  }

  // 按周分组
  for (let i = 0; i < weeks.length; i += 7) {
    calendar.push(weeks.slice(i, i + 7));
  }

  return { calendar, today: today.getDate(), month: month + 1, year };
};

const moodOptions = [
  { emoji: '😊', label: '开心', color: '#4CAF50' },
  { emoji: '😢', label: '难过', color: '#2196F3' },
  { emoji: '😰', label: '焦虑', color: '#FF9800' },
  { emoji: '😴', label: '疲惫', color: '#9C27B0' },
  { emoji: '😡', label: '愤怒', color: '#F44336' },
  { emoji: '😐', label: '平静', color: '#607D8B' },
];

export function MoodModal({ visible, onClose, onSave }: MoodModalProps) {
  const [selectedMood, setSelectedMood] = useState<string>('');
  const { calendar, today, month, year } = generateCalendarData();

  const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

  const handleSave = () => {
    if (selectedMood) {
      const now = new Date();
      const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
      onSave(selectedMood, timeString);
      onClose();
      setSelectedMood('');
    }
  };

  const renderMoodIcon = (day: number | null, isToday: boolean) => {
    if (!day) return null;

    if (isToday && selectedMood) {
      const mood = moodOptions.find(m => m.label === selectedMood);
      return (
        <View style={[styles.moodIconContainer, { backgroundColor: mood?.color }]}>
          <View style={styles.bearIcon}>
            <Text style={styles.bearEmoji}>🐻</Text>
          </View>
        </View>
      );
    }

    return (
      <View style={styles.defaultMoodIcon}>
        <Text style={styles.defaultMoodEmoji}>😊</Text>
      </View>
    );
  };

  return (
    <Modal
      visible={visible}
      animationType="slide"
      presentationStyle="pageSheet"
      onRequestClose={onClose}
    >
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <TouchableOpacity onPress={onClose}>
            <Text style={styles.backButton}>←</Text>
          </TouchableOpacity>
          <Text style={styles.headerTitle}>{year}年{monthNames[month - 1]}</Text>
          <TouchableOpacity>
            <Text style={styles.nextButton}>→</Text>
          </TouchableOpacity>
        </View>

        <ScrollView style={styles.content}>
          {/* 日历视图 */}
          <View style={styles.calendar}>
            <View style={styles.weekHeader}>
              {weekDays.map((day, index) => (
                <Text key={index} style={styles.weekDay}>{day}</Text>
              ))}
            </View>

            {calendar.map((week, weekIndex) => (
              <View key={weekIndex} style={styles.weekRow}>
                {week.map((day, dayIndex) => (
                  <View key={dayIndex} style={styles.dayContainer}>
                    {day && (
                      <>
                        <Text style={[
                          styles.dayNumber,
                          day === today && styles.todayNumber
                        ]}>
                          {day.toString().padStart(2, '0')}
                        </Text>
                        {renderMoodIcon(day, day === today)}
                      </>
                    )}
                  </View>
                ))}
              </View>
            ))}
          </View>

          {/* 心情选择 */}
          <View style={styles.moodSection}>
            <Text style={styles.sectionTitle}>选择今日心情</Text>
            <View style={styles.moodOptions}>
              {moodOptions.map((mood, index) => (
                <TouchableOpacity
                  key={index}
                  style={[
                    styles.moodOption,
                    selectedMood === mood.label && styles.selectedMoodOption
                  ]}
                  onPress={() => setSelectedMood(mood.label)}
                >
                  <Text style={styles.moodEmoji}>{mood.emoji}</Text>
                  <Text style={styles.moodLabel}>{mood.label}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>

          {/* 近期记录 */}
          <View style={styles.recentSection}>
            <Text style={styles.sectionTitle}>近期记录</Text>
            <Text style={styles.recentDate}>{year}年{month}月{today}日</Text>

            {selectedMood && (
              <View style={styles.recentRecord}>
                <View style={styles.recordIcon}>
                  <View style={styles.bearIcon}>
                    <Text style={styles.bearEmoji}>🐻</Text>
                  </View>
                </View>
                <Text style={styles.recordMood}>{selectedMood}</Text>
                <View style={styles.spacer} />
                <Text style={styles.recordTime}>
                  {new Date().getHours()}:{new Date().getMinutes().toString().padStart(2, '0')}
                </Text>
              </View>
            )}
          </View>
        </ScrollView>

        {/* 保存按钮 */}
        <View style={styles.footer}>
          <TouchableOpacity
            style={[styles.saveButton, !selectedMood && styles.disabledButton]}
            onPress={handleSave}
            disabled={!selectedMood}
          >
            <Text style={styles.saveButtonText}>保存心情</Text>
          </TouchableOpacity>
        </View>

        {/* 添加按钮 */}
        <TouchableOpacity style={styles.addButton} onPress={handleSave}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
    backgroundColor: '#fff',
  },
  backButton: {
    fontSize: 24,
    color: '#666',
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#333',
  },
  nextButton: {
    fontSize: 24,
    color: '#666',
  },
  content: {
    flex: 1,
  },
  calendar: {
    backgroundColor: '#fff',
    margin: 16,
    borderRadius: 16,
    padding: 16,
  },
  weekHeader: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 16,
  },
  weekDay: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
    width: (width - 64) / 7,
  },
  weekRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 16,
  },
  dayContainer: {
    width: (width - 64) / 7,
    alignItems: 'center',
  },
  dayNumber: {
    fontSize: 14,
    color: '#999',
    marginBottom: 8,
  },
  todayNumber: {
    color: '#333',
    fontWeight: '600',
  },
  moodIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bearIcon: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: 'rgba(255,255,255,0.9)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  bearEmoji: {
    fontSize: 12,
  },
  defaultMoodIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#ddd',
    borderStyle: 'dashed',
    justifyContent: 'center',
    alignItems: 'center',
  },
  defaultMoodEmoji: {
    fontSize: 16,
    opacity: 0.3,
  },
  moodSection: {
    backgroundColor: '#fff',
    margin: 16,
    marginTop: 0,
    borderRadius: 16,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    marginBottom: 16,
  },
  moodOptions: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  moodOption: {
    width: (width - 80) / 3,
    alignItems: 'center',
    paddingVertical: 16,
    marginBottom: 16,
    borderRadius: 12,
    backgroundColor: '#f8f8f8',
  },
  selectedMoodOption: {
    backgroundColor: '#e8f5e8',
    borderWidth: 2,
    borderColor: '#4CAF50',
  },
  moodEmoji: {
    fontSize: 24,
    marginBottom: 8,
  },
  moodLabel: {
    fontSize: 14,
    color: '#333',
  },
  recentSection: {
    backgroundColor: '#fff',
    margin: 16,
    marginTop: 0,
    borderRadius: 16,
    padding: 16,
  },
  recentDate: {
    fontSize: 14,
    color: '#999',
    marginBottom: 16,
  },
  recentRecord: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
  },
  recordIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  recordMood: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
  },
  spacer: {
    flex: 1,
  },
  recordTime: {
    fontSize: 14,
    color: '#999',
  },
  footer: {
    padding: 16,
    backgroundColor: '#fff',
  },
  saveButton: {
    backgroundColor: '#4CAF50',
    borderRadius: 12,
    paddingVertical: 16,
    alignItems: 'center',
  },
  disabledButton: {
    backgroundColor: '#ccc',
  },
  saveButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  addButton: {
    position: 'absolute',
    bottom: 100,
    right: 20,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#00C853',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  addButtonText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '300',
  },
});