import React from 'react';
import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
import { ShieldCheck, X } from 'lucide-react-native';
import { useTheme } from '../../../Hooks/useTheme';
import AppText from '../../../components/AppText';

interface Props {
  visible: boolean;
  onClose: () => void;
  onConfirm: () => void;
  bidAmount: number;
  isLoading?: boolean;
}

const ConfirmBidModal = ({ visible, onClose, onConfirm, bidAmount, isLoading }: Props) => {
  const { colors, shadows } = useTheme();

  if (!visible) return null;

  return (
    <View style={styles.overlay}>
        <View style={[styles.modalCard, { backgroundColor: colors.surface, ...shadows.large }]}>
          
          <TouchableOpacity style={[styles.closeBtn, { backgroundColor: colors.background }]} onPress={onClose} disabled={isLoading}>
            <X size={18} color={colors.textSecondary} strokeWidth={2.5} />
          </TouchableOpacity>

          <View style={[styles.iconBox, { backgroundColor: `${colors.primary}15` }]}>
            <ShieldCheck size={32} color={colors.primary} strokeWidth={2} />
          </View>

          <AppText variant="h3" color={colors.text} bold centered style={styles.title}>
            Confirm Your Bid
          </AppText>
          <AppText variant="body" color={colors.textSecondary} centered style={styles.subtitle}>
            Are you sure you want to place this bid? This action cannot be undone.
          </AppText>

          <View style={[styles.amountBox, { backgroundColor: `${colors.primary}10`, borderColor: `${colors.primary}30` }]}>
            <AppText variant="caption" color={colors.primary} bold>
              BID AMOUNT
            </AppText>
            <AppText variant="h1" color={colors.primary} bold>
              ₹{bidAmount?.toLocaleString('en-IN') || 0}
            </AppText>
          </View>

          <View style={styles.btnRow}>
            <TouchableOpacity style={[styles.btn, styles.cancelBtn, { backgroundColor: colors.background }]} onPress={onClose} disabled={isLoading}>
              <AppText variant="button" color={colors.text} bold>Cancel</AppText>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.btn, styles.confirmBtn, { backgroundColor: colors.primary }]} onPress={onConfirm} disabled={isLoading}>
              {isLoading ? (
                <ActivityIndicator color="#fff" size="small" />
              ) : (
                <AppText variant="button" color="#fff" bold>Submit Bid</AppText>
              )}
            </TouchableOpacity>
          </View>
        </View>
    </View>
  );
};

export default ConfirmBidModal;

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.7)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    zIndex: 9999,
    elevation: 9999,
  },
  modalCard: {
    width: '100%',
    borderRadius: 24,
    padding: 24,
    alignItems: 'center',
  },
  closeBtn: {
    position: 'absolute',
    top: 16,
    right: 16,
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconBox: {
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  title: {
    marginBottom: 8,
  },
  subtitle: {
    marginBottom: 24,
    paddingHorizontal: 10,
  },
  amountBox: {
    width: '100%',
    paddingVertical: 16,
    borderRadius: 16,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 24,
    gap: 4,
  },
  btnRow: {
    flexDirection: 'row',
    gap: 12,
    width: '100%',
  },
  btn: {
    flex: 1,
    height: 50,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancelBtn: {},
  confirmBtn: {},
});