import React, { useState } from 'react';
import {
  Modal,
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  ActivityIndicator,
} from 'react-native';
import { Text } from '../Text';
import { Button } from '../Button';
import Input from '../Input';
import { Colors, fontSz, ms, wp } from '../../utils';
import { useSDKConfig } from '../../contexts/SDKConfigContext';

interface AddPlanModalProps {
  visible: boolean;
  onClose: () => void;
  onCreatePlan: (planName: string) => Promise<void>;
  isLoading?: boolean;
}

const AddPlanModal: React.FC<AddPlanModalProps> = ({
  visible,
  onClose,
  onCreatePlan,
  isLoading = false,
}) => {
  const [planName, setPlanName] = useState('');
  const [error, setError] = useState('');
  const { primaryColor } = useSDKConfig();

  const handleCreate = async () => {
    setError('');
    
    if (!planName.trim()) {
      setError('Plan name is required');
      return;
    }

    if (planName.trim().length < 2) {
      setError('Plan name must be at least 2 characters');
      return;
    }

    try {
      await onCreatePlan(planName.trim());
      setPlanName('');
      setError('');
      onClose();
    } catch (err: any) {
      setError(err.message || 'Failed to create plan');
    }
  };

  const handleClose = () => {
    setPlanName('');
    setError('');
    onClose();
  };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="none"
      onRequestClose={handleClose}>
      <TouchableWithoutFeedback onPress={handleClose}>
        <View style={styles.overlay}>
          <TouchableWithoutFeedback onPress={() => {}}>
            <View style={styles.modalContainer}>
              <View style={styles.header}>
                <Text
                  fontSize={fontSz(18)}
                  fontFamily="Gordita-Medium"
                  fontWeight="500"
                  text="Create Custom Plan"
                  color={Colors.headerText}
                />
              </View>

              <View style={styles.content}>
                <Input
                  label=""
                  placeholder="Enter plan name"
                  value={planName}
                  onChange={setPlanName}
                  onFocus={() => {}}
                  onEndEditing={() => {}}
                  errorMsg={error}
                  editable={!isLoading}
                />
              </View>

              <View style={styles.footer}>
                <Button
                  title="Cancel"
                  onPress={handleClose}
                  outlined
                  style={[styles.cancelButton, { marginRight: ms(10) }]}
                  textStyle={{ color: Colors.headerText }}
                  disabled={isLoading}
                />
                <Button
                  title="Create"
                  onPress={handleCreate}
                  style={[styles.button, { backgroundColor: primaryColor }]}
                  disabled={isLoading || !planName.trim()}
                  isLoading={isLoading}
                />
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContainer: {
    backgroundColor: Colors.white,
    borderTopLeftRadius: ms(20),
    borderTopRightRadius: ms(20),
    width: '100%',
    paddingBottom: ms(20), // Add bottom padding for safe area
    shadowColor: Colors.shadowColor,
    shadowOffset: { width: 0, height: -4 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    elevation: 8,
  },
  header: {
    paddingHorizontal: ms(20),
    paddingTop: ms(20),
    paddingBottom: ms(16),
    borderBottomWidth: 1,
    borderBottomColor: Colors.gray200,
  },
  content: {
    paddingHorizontal: ms(20),
    paddingVertical: ms(20),
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingHorizontal: ms(20),
    paddingBottom: ms(20),
    paddingTop: ms(16),
    borderTopWidth: 1,
    borderTopColor: Colors.gray200,
  },
  button: {
    flex: 1,
    minHeight: ms(44),
  },
  cancelButton: {
    flex: 1,
    minHeight: ms(44),
    backgroundColor: Colors.white,
    borderWidth: 1,
    borderColor: Colors.gray200,
  },
});

export default AddPlanModal;