import React, { useEffect, useRef } from 'react'
import { StyleSheet, Text, View, Animated, ToastAndroid } from 'react-native'
import { Ionicons } from '@react-native-vector-icons/ionicons'
import CustomModal from '../../components/common/CustomModal'
import { apiCall } from '../../utils/ApiHelper'
import { BASE_URL } from '../../utils/ApiUrls'

interface WinnerUserProps {
  data: {
    withdrawalDone: boolean
    selectionDone: boolean
    selectionId: string
    currentCycle: number
    pendingParticipants: number
    withdrawalDetails: any
    paidParticipants: number
    selectedUser: {
      firstName: string
      lastName: string
      mobile: string
      id: string
      userId: number
      email: string
    }
    cycleEndDate: number[]
    cycleStartDate: number[]
    allPaid: boolean
    selectionDate: number[]
    totalParticipants: number
    cycleStatus: string
    selectionMethod: string
    canProceedToWithdrawal: boolean
  }
  visible: boolean
  onClose: () => void
  groupId:string
}

const WinnerUser: React.FC<WinnerUserProps> = ({ data, visible, onClose, groupId }) => {
  const {
    withdrawalDone,
    selectionDone,
    currentCycle,
    totalParticipants,
    paidParticipants,
    pendingParticipants,
    allPaid,
    selectedUser,
    cycleStatus,
    selectionMethod,
    canProceedToWithdrawal,
  } = data || {}

  const scaleAnim = useRef(new Animated.Value(0)).current
  const pulseAnim = useRef(new Animated.Value(1)).current
  const fadeAnim = useRef(new Animated.Value(0)).current

  console.log("winner data : ", data)

  useEffect(() => {
    if (visible) {
      Animated.spring(scaleAnim, {
        toValue: 1,
        friction: 5,
        useNativeDriver: true,
      }).start()

      Animated.loop(
        Animated.sequence([
          Animated.timing(pulseAnim, {
            toValue: 1.1,
            duration: 600,
            useNativeDriver: true,
          }),
          Animated.timing(pulseAnim, {
            toValue: 1,
            duration: 600,
            useNativeDriver: true,
          }),
        ])
      ).start()

      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true,
      }).start()
    } else {
      scaleAnim.setValue(0)
      pulseAnim.setValue(1)
      fadeAnim.setValue(0)
    }
  }, [visible])

  const onConfirm = async () => {
    try {
      const res = await apiCall(`${BASE_URL}payments/withdraw/${groupId}/${data?.selectedUser?.id}`, 'PUT')
      console.log("res winner user : ", res)
      ToastAndroid.show('Withdrawal successful', ToastAndroid.SHORT)
      onClose()
    } catch (error) {
      console.log('Confirm payment error : ', error)
    } finally {
      onClose()
    }
  }

  return (
    <CustomModal
      visible={visible}
      onClose={onClose}
      confirmText={canProceedToWithdrawal ? 'Proceed to Withdraw' : 'Close'}
      onConfirm={canProceedToWithdrawal ? onConfirm : onClose}
    >
      <View style={styles.container}>
        <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
          {/* Header */}
          <View style={styles.header}>
            <Ionicons name="trophy" size={24} color="#ff9800" />
            <Text style={styles.cycle}>Cycle {currentCycle} Winner</Text>
            <Ionicons name="trophy" size={24} color="#ff9800" />
          </View>

          {/* Winner Name */}
          <Animated.Text style={[styles.name, { transform: [{ scale: pulseAnim }] }]}>
            {selectedUser?.firstName} {selectedUser?.lastName}
          </Animated.Text>

          {/* Details */}
          <View style={styles.row}>
            <Ionicons name="call" size={18} color="#555" />
            <Text style={styles.label}>Mobile:</Text>
            <Text style={styles.value}>{selectedUser?.mobile}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons name="mail" size={18} color="#555" />
            <Text style={styles.label}>Email:</Text>
            <Text style={styles.value}>{selectedUser?.email}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons name="people" size={18} color="#555" />
            <Text style={styles.label}>Total Participants:</Text>
            <Text style={styles.value}>{totalParticipants}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons name="cash" size={18} color="#555" />
            <Text style={styles.label}>Paid Participants:</Text>
            <Text style={styles.value}>{paidParticipants}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons name="hourglass" size={18} color="#555" />
            <Text style={styles.label}>Pending Participants:</Text>
            <Text style={styles.value}>{pendingParticipants}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons
              name={allPaid ? 'checkmark-circle' : 'close-circle'}
              size={18}
              color={allPaid ? '#4caf50' : '#f44336'}
            />
            <Text style={styles.label}>All Paid:</Text>
            <Text style={styles.value}>{allPaid ? 'Yes' : 'No'}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons
              name={withdrawalDone ? 'checkmark-done' : 'time'}
              size={18}
              color={withdrawalDone ? '#4caf50' : '#ff9800'}
            />
            <Text style={styles.label}>Withdrawal Status:</Text>
            <Text style={styles.value}>{withdrawalDone ? 'Completed' : 'Pending'}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons name="git-branch" size={18} color="#555" />
            <Text style={styles.label}>Selection Method:</Text>
            <Text style={styles.value}>{selectionMethod}</Text>
          </View>

          <View style={styles.row}>
            <Ionicons name="stats-chart" size={18} color="#555" />
            <Text style={styles.label}>Cycle Status:</Text>
            <Text style={styles.value}>{cycleStatus}</Text>
          </View>

          <Animated.Text style={[styles.congrats, { opacity: fadeAnim }]}>
            {selectionDone ? 'Congratulations!' : 'Selection Pending'}
          </Animated.Text>
        </Animated.View>
      </View>
    </CustomModal>
  )
}

export default WinnerUser

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 16,
    justifyContent: 'center',
  },
  cycle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#ff9800',
    marginHorizontal: 8,
    textAlign: 'center',
  },
  name: {
    fontSize: 22,
    fontWeight: '800',
    color: '#333',
    marginBottom: 20,
    textAlign: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    color: '#555',
    marginLeft: 6,
    marginRight: 4,
  },
  value: {
    fontSize: 16,
    color: '#000',
  },
  congrats: {
    fontSize: 20,
    fontWeight: '700',
    color: '#4caf50',
    marginTop: 20,
    textAlign: 'center',
  },
})