import { StyleSheet, Platform } from 'react-native'
import {
    AlertDialog,
    AlertDialogContent,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogDescription,
    AlertDialogFooter,
    DeleteAlertDialogAction,
    CancelAlertDialogAction,
} from './alert-dialog'

interface DeleteConfirmDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    onConfirm: () => void
    title?: string
    description?: string
}

export function DeleteConfirmDialog({
    open,
    onOpenChange,
    onConfirm,
    title = '删除该条记录?',
    description = '删除后不可恢复',
}: DeleteConfirmDialogProps) {
    const handleConfirm = () => {
        onConfirm()
        onOpenChange(false)
    }

    return (
        <AlertDialog open={open} onOpenChange={onOpenChange}>
            <AlertDialogContent style={styles.dialogContent}>
                <AlertDialogHeader>
                    <AlertDialogTitle style={styles.dialogTitle}>
                        {title}
                    </AlertDialogTitle>
                    <AlertDialogDescription style={styles.dialogDescription}>
                        {description}
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter style={styles.dialogFooter}>
                    <CancelAlertDialogAction
                        onPress={() => onOpenChange(false)}
                        style={styles.cancelButton}
                    />
                    <DeleteAlertDialogAction
                        onPress={handleConfirm}
                        style={styles.confirmDeleteButton}
                    />
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    )
}

const styles = StyleSheet.create({
    dialogContent: {
        backgroundColor: '#1C1E22',
        borderRadius: 16,
        padding: 24,
        width: '90%',
        maxWidth: 320,
        borderWidth: 0,
        // Android 阴影效果
        ...Platform.select({
            android: {
                elevation: 24,
            },
            ios: {
                shadowColor: '#000',
                shadowOffset: {
                    width: 0,
                    height: 8,
                },
                shadowOpacity: 0.3,
                shadowRadius: 16,
            },
        }),
    },
    dialogTitle: {
        color: '#F5F5F5',
        fontSize: 15,
        fontWeight: '500',
        textAlign: 'center',
        marginBottom: 8,
        // iOS 字体渲染优化
        ...Platform.select({
            ios: {
                fontWeight: '600',
            },
        }),
    },
    dialogDescription: {
        color: '#8A8A8A',
        fontSize: 13,
        textAlign: 'center',
        lineHeight: 20,
    },
    dialogFooter: {
        flexDirection: 'row',
        gap: 12,
        marginTop: 24,
        justifyContent: 'center',
    },
    cancelButton: {
        flex: 1,
        height: 44,
        borderRadius: 8,
        backgroundColor: '#262A31',
        justifyContent: 'center',
        alignItems: 'center',
        // Android 触摸反馈
        ...Platform.select({
            android: {
                elevation: 0,
            },
        }),
    },
    confirmDeleteButton: {
        flex: 1,
        height: 44,
        borderRadius: 8,
        backgroundColor: '#FA3F2C',
        justifyContent: 'center',
        alignItems: 'center',
        // Android 触摸反馈
        ...Platform.select({
            android: {
                elevation: 0,
            },
        }),
    },
})