import { useWaterDataByDate } from '@/hooks/useWaterData';
import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import React, { useState } from 'react';
import {
  KeyboardAvoidingView,
  Modal,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

interface AddWaterModalProps {
  visible: boolean;
  onClose: () => void;
  selectedDate?: string; // 新增：选中的日期，格式为 YYYY-MM-DD
}

interface TabButtonProps {
  title: string;
  isActive: boolean;
  onPress: () => void;
}

const TabButton: React.FC<TabButtonProps> = ({ title, isActive, onPress }) => (
  <TouchableOpacity
    style={[styles.tabButton, isActive && styles.activeTabButton]}
    onPress={onPress}
  >
    <Text style={[styles.tabButtonText, isActive && styles.activeTabButtonText]}>
      {title}
    </Text>
  </TouchableOpacity>
);

const AddWaterModal: React.FC<AddWaterModalProps> = ({ visible, onClose, selectedDate }) => {
  const [activeTab, setActiveTab] = useState<'add' | 'goal'>('add');
  const [waterAmount, setWaterAmount] = useState<string>('250');
  const [note, setNote] = useState<string>('');
  const [dailyGoal, setDailyGoal] = useState<string>('2000');

  // 使用新的 hook 来处理指定日期的饮水数据
  const { addWaterRecord, updateWaterGoal } = useWaterDataByDate(selectedDate);

  const quickAmounts = [100, 150, 200, 250, 300, 350, 400, 500];
  const goalPresets = [1500, 2000, 2500, 3000, 3500, 4000];

  const handleAddWater = async () => {
    const amount = parseInt(waterAmount);
    if (amount > 0) {
      // 如果有选中日期，则为该日期添加记录；否则为今天添加记录
      const recordedAt = selectedDate ? dayjs(selectedDate).toISOString() : dayjs().toISOString();

      const success = await addWaterRecord(amount, recordedAt);
      if (success) {
        setWaterAmount('250');
        setNote('');
        onClose();
      }
    }
  };

  const handleUpdateGoal = async () => {
    const goal = parseInt(dailyGoal);
    if (goal >= 500 && goal <= 10000) {
      const success = await updateWaterGoal(goal);
      if (success) {
        setDailyGoal('2000');
        onClose();
      }
    }
  };

  const renderAddRecordTab = () => (
    <View style={styles.tabContent}>
      <Text style={styles.sectionTitle}>饮水量 (ml)</Text>
      <TextInput
        style={styles.input}
        value={waterAmount}
        onChangeText={setWaterAmount}
        keyboardType="numeric"
        placeholder="请输入饮水量"
        placeholderTextColor="#999"
      />

      <Text style={styles.sectionTitle}>快速选择</Text>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.quickAmountsContainer}
      >
        <View style={styles.quickAmountsWrapper}>
          {quickAmounts.map((amount) => (
            <TouchableOpacity
              key={amount}
              style={[
                styles.quickAmountButton,
                parseInt(waterAmount) === amount && styles.quickAmountButtonActive
              ]}
              onPress={() => setWaterAmount(amount.toString())}
            >
              <Text style={[
                styles.quickAmountText,
                parseInt(waterAmount) === amount && styles.quickAmountTextActive
              ]}>
                {amount}ml
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>

      <Text style={styles.sectionTitle}>备注 (可选)</Text>
      <TextInput
        style={[styles.input, styles.remarkInput]}
        value={note}
        onChangeText={setNote}
        placeholder="添加备注..."
        placeholderTextColor="#999"
        multiline
      />

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
          <Text style={styles.cancelButtonText}>取消</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.button, styles.confirmButton]} onPress={handleAddWater}>
          <Text style={styles.confirmButtonText}>添加记录</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  const renderGoalTab = () => (
    <View style={styles.tabContent}>
      <Text style={styles.sectionTitle}>每日饮水目标 (ml)</Text>
      <TextInput
        style={styles.input}
        value={dailyGoal}
        onChangeText={setDailyGoal}
        keyboardType="numeric"
        placeholder="请输入每日饮水目标"
        placeholderTextColor="#999"
      />

      <Text style={styles.sectionTitle}>推荐目标</Text>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.quickAmountsContainer}
      >
        <View style={styles.quickAmountsWrapper}>
          {goalPresets.map((goal) => (
            <TouchableOpacity
              key={goal}
              style={[
                styles.quickAmountButton,
                parseInt(dailyGoal) === goal && styles.quickAmountButtonActive
              ]}
              onPress={() => setDailyGoal(goal.toString())}
            >
              <Text style={[
                styles.quickAmountText,
                parseInt(dailyGoal) === goal && styles.quickAmountTextActive
              ]}>
                {goal}ml
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
          <Text style={styles.cancelButtonText}>取消</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.button, styles.confirmButton]} onPress={handleUpdateGoal}>
          <Text style={styles.confirmButtonText}>更新目标</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={onClose}
    >
      <KeyboardAvoidingView
        style={styles.centeredView}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <View style={styles.modalView}>
          <View style={styles.header}>
            <Text style={styles.modalTitle}>配置饮水</Text>
            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
              <Ionicons name="close" size={24} color="#666" />
            </TouchableOpacity>
          </View>

          <View style={styles.tabContainer}>
            <TabButton
              title="添加记录"
              isActive={activeTab === 'add'}
              onPress={() => setActiveTab('add')}
            />
            <TabButton
              title="设置目标"
              isActive={activeTab === 'goal'}
              onPress={() => setActiveTab('goal')}
            />
          </View>

          <ScrollView style={styles.contentScrollView}>
            {activeTab === 'add' ? renderAddRecordTab() : renderGoalTab()}
          </ScrollView>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalView: {
    width: '90%',
    maxWidth: 350,
    maxHeight: '80%',
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
  closeButton: {
    padding: 5,
  },
  tabContainer: {
    flexDirection: 'row',
    marginBottom: 20,
    borderRadius: 10,
    backgroundColor: '#f5f5f5',
    padding: 4,
  },
  tabButton: {
    flex: 1,
    paddingVertical: 10,
    alignItems: 'center',
    borderRadius: 8,
  },
  activeTabButton: {
    backgroundColor: '#007AFF',
  },
  tabButtonText: {
    fontSize: 14,
    color: '#666',
    fontWeight: '500',
  },
  activeTabButtonText: {
    color: 'white',
    fontWeight: '600',
  },
  contentScrollView: {
    maxHeight: 400,
  },
  tabContent: {
    paddingVertical: 10,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 10,
    paddingHorizontal: 15,
    paddingVertical: 12,
    fontSize: 16,
    color: '#333',
    marginBottom: 15,
  },
  remarkInput: {
    height: 80,
    textAlignVertical: 'top',
  },
  quickAmountsContainer: {
    marginBottom: 15,
  },
  quickAmountsWrapper: {
    flexDirection: 'row',
    gap: 10,
    paddingRight: 10,
  },
  quickAmountButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    backgroundColor: '#f9f9f9',
    minWidth: 60,
    alignItems: 'center',
  },
  quickAmountButtonActive: {
    backgroundColor: '#007AFF',
    borderColor: '#007AFF',
  },
  quickAmountText: {
    fontSize: 14,
    color: '#666',
    fontWeight: '500',
  },
  quickAmountTextActive: {
    color: 'white',
    fontWeight: '600',
  },
  buttonContainer: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 20,
  },
  button: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: 10,
    alignItems: 'center',
  },
  cancelButton: {
    backgroundColor: '#f5f5f5',
  },
  confirmButton: {
    backgroundColor: '#007AFF',
  },
  cancelButtonText: {
    fontSize: 16,
    color: '#666',
    fontWeight: '500',
  },
  confirmButtonText: {
    fontSize: 16,
    color: 'white',
    fontWeight: '600',
  },
});

export default AddWaterModal;