import React from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import Like from '../assets/image/Like.svg'
import DeleteIcon from '../assets/image/delete.svg'
import RightIcon from '../assets/image/RightIcon.svg'
import { SvgXml } from 'react-native-svg';

const CompletionModal = ({ visible, onClose, correct, wrong, total, PlayerObj }) => {
  const percentage = total > 0 ? (correct / total) * 100 : 0;
  const getMessage = () => {
    if (percentage === 100) {
      return "Congrats! Perfect score!!!";
    } else if (percentage >= 71) {
      return "Well done - just a bit more !";
    } else {
      return "Can do better !";
    }
  };

  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
           <Like width={150} height={150}/>
          {/* <Text style={styles.title}>Congratulations!</Text> */}
          {/* <Text style={styles.subtitle}>
            Great job! You're doing fantastic.{"\n"}Keep up the excellent work!
          </Text> */}

          <Text style={styles.subtitle}>
            {getMessage()}
          </Text>

          <Text style={[styles.total, { marginBottom: "10%" }]}>
            TOTAL QUESTIONS: <Text style={{ fontWeight: 'bold', fontSize: 17 }}>{total}</Text>
          </Text>

          <View style={styles.statsRow}>
            <View style={styles.statBox}>
              <View style={{ flexDirection: "row", marginBottom: 5 }} >
               <RightIcon width={20} height={20} />
                <Text style={styles.statValue}>{correct}</Text>
              </View>
              <Text style={styles.total}>CORRECT</Text>
            </View>
            <View style={styles.statBox}>
              <View style={{ flexDirection: "row", marginBottom: 5 }} >
                <DeleteIcon width={20} height={20} />
                <RightIcon width={20} height={20} />
                <Text style={styles.statValue}>{wrong}</Text>
              </View>
              <Text style={styles.total}>WRONG</Text>
            </View>
          </View>

          <TouchableOpacity onPress={onClose} style={styles.okButton}>
            <Text style={styles.okText}>Okay</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  modalContent: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    alignItems: 'center',
    width: '85%',
  },
  image: {
    width: 80,
    height: 80,
    marginBottom: 16,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
  subtitle: {
    textAlign: 'center',
    fontSize: 20,
    color: '#666',
    marginBottom: 16,
  },
  total: {
    fontSize: 14,
    marginBottom: 12,
    color: '#000',
  },
  statsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '80%',
    marginBottom: 20,
  },
  statBox: {
    alignItems: 'center',
  },
  correctIcon: {
    fontSize: 24,
    color: 'green',
  },
  wrongIcon: {
    fontSize: 24,
    color: 'red',
  },
  statValue: {
    fontSize: 20,
    fontWeight: 'bold',
    marginLeft: 10
  },
  statLabel: {
    fontSize: 12,
    color: '#555',
  },
  okButton: {
    backgroundColor: '#007bff',
    borderRadius: 30,
    paddingVertical: 10,
    paddingHorizontal: 40,
  },
  okText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default CompletionModal;
