import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { callStore } from '../../stores/call';

const formatDuration = (seconds: number): string => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

const FloatingCallWindow: React.FC = () => {
  const currentCall = callStore((s) => s.currentCall);
  const callDuration = callStore((s) => s.callDuration);
  const isMinimized = callStore((s) => s.isMinimized);
  const toggleMinimize = callStore((s) => s.toggleMinimize);
  const endCall = callStore((s) => s.endCall);

  // Only show when there's an active call and it's minimized
  if (!currentCall || !isMinimized) return null;

  const getStatusText = (): string => {
    switch (currentCall.status) {
      case 'calling':
        return '等待接听...';
      case 'ringing':
        return '来电响铃...';
      case 'connecting':
        return '连接中...';
      case 'connected':
        return formatDuration(callDuration);
      case 'reconnecting':
        return '重连中...';
      case 'ended':
        return '已结束';
      case 'failed':
        return '连接失败';
      default:
        return '';
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.window}
        onPress={toggleMinimize}
        activeOpacity={0.9}
      >
        {/* Avatar */}
        <View style={styles.avatarContainer}>
          {currentCall.peerAvatar ? (
            <Image
              source={{ uri: currentCall.peerAvatar }}
              style={styles.avatar}
            />
          ) : (
            <View style={[styles.avatar, styles.avatarPlaceholder]}>
              <Text style={styles.avatarText}>
                {currentCall.peerName?.charAt(0).toUpperCase() || '?'}
              </Text>
            </View>
          )}
        </View>

        {/* Info */}
        <View style={styles.info}>
          <Text style={styles.name} numberOfLines={1}>
            {currentCall.peerName || '未知用户'}
          </Text>
          <Text style={styles.status}>{getStatusText()}</Text>
        </View>

        {/* End call button */}
        <TouchableOpacity
          style={styles.endButton}
          onPress={(e) => {
            e.stopPropagation();
            endCall('hangup');
          }}
          activeOpacity={0.7}
        >
          <MaterialCommunityIcons name="phone-hangup" size={20} color="#fff" />
        </TouchableOpacity>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 100,
    left: 16,
    right: 16,
    zIndex: 10000,
  },
  window: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#2A2A4E',
    borderRadius: 16,
    padding: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
  },
  avatarContainer: {
    marginRight: 12,
  },
  avatar: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: '#3A3A5C',
  },
  avatarPlaceholder: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    fontSize: 18,
    color: '#fff',
    fontWeight: '600',
  },
  info: {
    flex: 1,
    justifyContent: 'center',
  },
  name: {
    fontSize: 15,
    fontWeight: '600',
    color: '#FFFFFF',
    marginBottom: 2,
  },
  status: {
    fontSize: 12,
    color: 'rgba(255, 255, 255, 0.6)',
  },
  endButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: '#E54D42',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 8,
  },
});

export default FloatingCallWindow;