import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Modal, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, spacing, radii, shadows } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface ConfirmDialogProps {
  visible: boolean;
  title: string;
  message?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  variant?: 'danger' | 'primary';
  danger?: boolean;
  loading?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  children?: React.ReactNode;
}

export function ConfirmDialog({
  visible,
  title,
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  variant,
  danger,
  loading,
  onConfirm,
  onCancel,
  children,
}: ConfirmDialogProps) {
  const { fontSize } = useResponsive();
  const isDanger = variant === 'danger' || danger;
  const confirmColor = isDanger ? colors.danger[600] : colors.primary[600];

  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.overlay}>
        <View style={styles.dialog}>
          <View style={[styles.iconContainer, { backgroundColor: isDanger ? colors.danger[50] : colors.primary[50] }]}>
            <Ionicons
              name={isDanger ? 'warning-outline' : 'help-circle-outline'}
              size={28}
              color={confirmColor}
            />
          </View>
          <Text style={[styles.title, { fontSize: fontSize.h3 }]}>{title}</Text>
          {message ? <Text style={[styles.message, { fontSize: fontSize.body }]}>{message}</Text> : null}
          {children}
          <View style={styles.actions}>
            <TouchableOpacity style={styles.cancelBtn} onPress={onCancel} activeOpacity={0.7} disabled={loading}>
              <Text style={[styles.cancelText, { fontSize: fontSize.body }]}>{cancelLabel}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.confirmBtn, { backgroundColor: confirmColor }]}
              onPress={onConfirm}
              activeOpacity={0.7}
              disabled={loading}
            >
              {loading ? (
                <ActivityIndicator size="small" color={colors.white} />
              ) : (
                <Text style={[styles.confirmText, { fontSize: fontSize.body }]}>{confirmLabel}</Text>
              )}
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: spacing.xxl,
  },
  dialog: {
    backgroundColor: colors.white,
    borderRadius: radii.xl,
    padding: spacing.xxl,
    width: '100%',
    maxWidth: 380,
    alignItems: 'center',
    ...shadows.lg,
  },
  iconContainer: {
    width: 56,
    height: 56,
    borderRadius: radii.full,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: spacing.lg,
  },
  title: {
    fontWeight: '700',
    color: colors.gray[900],
    marginBottom: spacing.sm,
    textAlign: 'center',
  },
  message: {
    color: colors.gray[500],
    textAlign: 'center',
    lineHeight: 20,
    marginBottom: spacing.xl,
  },
  actions: {
    flexDirection: 'row',
    gap: spacing.md,
    width: '100%',
    marginTop: spacing.lg,
  },
  cancelBtn: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: radii.md,
    backgroundColor: colors.gray[100],
    alignItems: 'center',
  },
  cancelText: {
    fontWeight: '600',
    color: colors.gray[700],
  },
  confirmBtn: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: radii.md,
    alignItems: 'center',
  },
  confirmText: {
    fontWeight: '600',
    color: colors.white,
  },
});