/**
 * PhotoPickerModal — Light-themed photo source picker.
 * Replaces dark Alert.alert() on Android dark mode.
 */
import React from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { green, dark, line } from '../constants/theme';

interface PhotoPickerModalProps {
  visible: boolean;
  onTakePhoto: () => void;
  onChoosePhoto: () => void;
  onCancel: () => void;
}

export function PhotoPickerModal({ visible, onTakePhoto, onChoosePhoto, onCancel }: PhotoPickerModalProps) {
  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
      <TouchableOpacity style={s.overlay} activeOpacity={1} onPress={onCancel}>
        <View style={s.card}>
          <Text style={s.title}>Add Photo</Text>
          <Text style={s.subtitle}>Choose how you want to add this photo.</Text>
          <TouchableOpacity style={s.optionButton} activeOpacity={0.86} onPress={onTakePhoto}>
            <Text style={s.optionText}>📷  Take Photo</Text>
          </TouchableOpacity>
          <TouchableOpacity style={s.optionButton} activeOpacity={0.86} onPress={onChoosePhoto}>
            <Text style={s.optionText}>🖼️  Choose Photo</Text>
          </TouchableOpacity>
          <TouchableOpacity style={s.cancelButton} activeOpacity={0.86} onPress={onCancel}>
            <Text style={s.cancelText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </Modal>
  );
}

const s = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(16, 42, 16, 0.6)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
  },
  card: {
    width: '100%',
    maxWidth: 340,
    backgroundColor: '#FFFCF5',
    borderRadius: 24,
    padding: 24,
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 20,
    elevation: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: '800',
    color: dark,
    textAlign: 'center',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 13,
    color: '#5D5A4E',
    textAlign: 'center',
    marginBottom: 20,
    lineHeight: 18,
  },
  optionButton: {
    minHeight: 48,
    borderRadius: 999,
    backgroundColor: green,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
    paddingHorizontal: 20,
  },
  optionText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '900',
  },
  cancelButton: {
    minHeight: 44,
    borderRadius: 999,
    borderWidth: 1.5,
    borderColor: '#B85C4A',
    backgroundColor: '#FCE9E6',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  cancelText: {
    color: '#8E2F1E',
    fontSize: 14,
    fontWeight: '900',
  },
});