import React from 'react';
import {
    Alert,
    Modal,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
} from 'react-native';
import { saveServerDomain } from '../services/api';

const PRESETS = [
    { label: 'aa.pfgame.org', host: 'aa.pfgame.org', port: '443' },
    { label: '192.168.1.117:16000', host: '192.168.1.117', port: '16000' },
];

type Props = {
    visible: boolean;
    host: string;
    port: string;
    onHostChange: (host: string) => void;
    onPortChange: (port: string) => void;
    onClose: () => void;
};

export const ServerSettingsModal: React.FC<Props> = ({
    visible,
    host,
    port,
    onHostChange,
    onPortChange,
    onClose,
}) => (
    <Modal visible={visible} transparent animationType="fade">
        <View style={styles.overlay}>
            <View style={styles.box}>
                <Text style={styles.title}>Server Settings</Text>
                <View style={styles.presets}>
                    {PRESETS.map((p) => (
                        <TouchableOpacity
                            key={p.label}
                            onPress={() => {
                                onHostChange(p.host);
                                onPortChange(p.port);
                            }}
                            style={[styles.presetBtn, host === p.host && port === p.port && styles.presetBtnActive]}
                        >
                            <Text
                                style={{
                                    fontSize: 12,
                                    color: host === p.host && port === p.port ? '#fff' : '#333',
                                }}
                            >
                                {p.label}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </View>
                <Text style={styles.inputLabel}>Host</Text>
                <TextInput
                    style={styles.textInput}
                    value={host}
                    onChangeText={onHostChange}
                    placeholder="192.168.1.198"
                    autoCapitalize="none"
                />
                <Text style={styles.inputLabel}>Port</Text>
                <TextInput
                    style={[styles.textInput, { marginBottom: 20 }]}
                    value={port}
                    onChangeText={onPortChange}
                    placeholder="16000"
                    keyboardType="number-pad"
                />
                <View style={styles.actions}>
                    <TouchableOpacity onPress={onClose} style={styles.cancelBtn}>
                        <Text style={{ color: '#666' }}>Cancel</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={async () => {
                            const domain = port ? `${host}:${port}` : host;
                            await saveServerDomain(domain, port === '443');
                            onClose();
                            Alert.alert('Saved', 'Restart app to take effect');
                        }}
                        style={styles.saveBtn}
                    >
                        <Text style={{ color: '#fff', fontWeight: 'bold' }}>Save</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    </Modal>
);

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    box: {
        backgroundColor: '#fff',
        borderRadius: 10,
        padding: 20,
        width: '85%',
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 12,
    },
    presets: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 6,
        marginBottom: 14,
    },
    presetBtn: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 6,
        backgroundColor: '#f0f0f0',
    },
    presetBtnActive: { backgroundColor: '#3498db' },
    inputLabel: {
        fontSize: 13,
        color: '#666',
        marginBottom: 4,
    },
    textInput: {
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 6,
        paddingHorizontal: 10,
        paddingVertical: 8,
        marginBottom: 12,
        fontSize: 14,
    },
    actions: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    cancelBtn: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        marginRight: 10,
    },
    saveBtn: {
        backgroundColor: '#3498db',
        paddingHorizontal: 16,
        paddingVertical: 8,
        borderRadius: 6,
    },
});