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

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 CallScreen: React.FC = () => {
  const currentCall = callStore((s) => s.currentCall);
  const callDuration = callStore((s) => s.callDuration);
  const peerStream = callStore((s) => s.peerStream);
  const endCall = callStore((s) => s.endCall);
  const toggleMute = callStore((s) => s.toggleMute);
  const toggleSpeaker = callStore((s) => s.toggleSpeaker);
  const isMinimized = callStore((s) => s.isMinimized);
  const toggleMinimize = callStore((s) => s.toggleMinimize);

  // Don't render full screen when minimized or no call
  if (!currentCall || isMinimized) return null;

  const getStatusText = (): string => {
    switch (currentCall.status) {
      case 'ringing':
        return '正在等待对方接听...';
      case 'connecting':
        return '连接中...';
      case 'connected':
        return formatDuration(callDuration);
      case 'ending':
        return '通话已结束';
      default:
        return '';
    }
  };

  const handleEndCall = () => {
    endCall('hangup');
  };

  const handleToggleMute = () => {
    toggleMute();
  };

  const handleToggleSpeaker = () => {
    toggleSpeaker();
  };

  const handleMinimize = () => {
    toggleMinimize();
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />

      {/* Background - single consistent color */}
      <View style={styles.background} />

      {/* Remote video preview */}
      {peerStream && (
        <View style={styles.remoteVideoContainer}>
          <RTCView
            streamURL={peerStream?.toURL()}
            style={styles.remoteVideo}
            objectFit="cover"
            mirror
          />
        </View>
      )}

      {/* Top area: minimize button */}
      <View style={styles.topBar}>
        <TouchableOpacity
          style={styles.topButton}
          onPress={handleMinimize}
          activeOpacity={0.7}
        >
          <MaterialCommunityIcons name="chevron-down" size={28} color="#fff" />
        </TouchableOpacity>
      </View>

      {/* Center: Peer info */}
      <View style={styles.centerArea}>
        <View style={styles.avatarOuter}>
          {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>
        <Text style={styles.peerName} numberOfLines={1}>
          {currentCall.peerName || '未知用户'}
        </Text>
        <Text style={styles.status}>{getStatusText()}</Text>
      </View>

      {/* Bottom controls */}
      <View style={styles.controls}>
        <View style={styles.controlRow}>
          {/* Mute */}
          <TouchableOpacity
            style={[styles.controlButton, currentCall.isMuted && styles.controlButtonActive]}
            onPress={handleToggleMute}
            activeOpacity={0.7}
          >
            <View style={[styles.controlCircle, currentCall.isMuted && styles.controlCircleActive]}>
              <MaterialCommunityIcons
                name={currentCall.isMuted ? 'microphone-off' : 'microphone'}
                size={26}
                color={currentCall.isMuted ? '#333' : '#fff'}
              />
            </View>
            <Text style={[styles.controlLabel, currentCall.isMuted && styles.controlLabelActive]}>
              {currentCall.isMuted ? '取消静音' : '静音'}
            </Text>
          </TouchableOpacity>

          {/* Speaker */}
          <TouchableOpacity
            style={[styles.controlButton, currentCall.isSpeakerOn && styles.controlButtonActive]}
            onPress={handleToggleSpeaker}
            activeOpacity={0.7}
          >
            <View style={[styles.controlCircle, currentCall.isSpeakerOn && styles.controlCircleActive]}>
              <MaterialCommunityIcons
                name={currentCall.isSpeakerOn ? 'volume-high' : 'cellphone'}
                size={26}
                color={currentCall.isSpeakerOn ? '#333' : '#fff'}
              />
            </View>
            <Text style={[styles.controlLabel, currentCall.isSpeakerOn && styles.controlLabelActive]}>
              {currentCall.isSpeakerOn ? '免提' : '听筒'}
            </Text>
          </TouchableOpacity>
        </View>

        {/* End call - prominent red button */}
        <TouchableOpacity
          style={styles.endCallButton}
          onPress={handleEndCall}
          activeOpacity={0.8}
        >
          <View style={styles.endCallCircle}>
            <MaterialCommunityIcons name="phone-hangup" size={32} color="#fff" />
          </View>
          <Text style={styles.endCallLabel}>挂断</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const CONTROL_CIRCLE_SIZE = 56;
const END_CALL_SIZE = 64;

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#1A1A2E',
    zIndex: 9999,
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#1A1A2E',
  },
  topBar: {
    position: 'absolute',
    top: 50,
    left: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 44,
  },
  topButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerArea: {
    position: 'absolute',
    top: '28%',
    left: 0,
    right: 0,
    alignItems: 'center',
    paddingHorizontal: 30,
  },
  avatarOuter: {
    marginBottom: 16,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#3A3A5C',
  },
  avatarPlaceholder: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    fontSize: 40,
    color: '#fff',
    fontWeight: '600',
  },
  peerName: {
    fontSize: 22,
    fontWeight: '600',
    color: '#FFFFFF',
    marginBottom: 6,
    textAlign: 'center',
    maxWidth: 280,
  },
  status: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.5)',
    letterSpacing: 0.3,
  },
  remoteVideoContainer: {
    position: 'absolute',
    top: 70,
    right: 20,
    width: 100,
    height: 140,
    borderRadius: 14,
    overflow: 'hidden',
    backgroundColor: '#1A1A2E',
  },
  remoteVideo: {
    width: '100%',
    height: '100%',
  },
  controls: {
    position: 'absolute',
    bottom: 60,
    left: 0,
    right: 0,
    alignItems: 'center',
  },
  controlRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 36,
    marginBottom: 24,
  },
  controlButton: {
    alignItems: 'center',
    width: 70,
  },
  controlCircle: {
    width: CONTROL_CIRCLE_SIZE,
    height: CONTROL_CIRCLE_SIZE,
    borderRadius: CONTROL_CIRCLE_SIZE / 2,
    backgroundColor: 'rgba(255, 255, 255, 0.12)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  controlCircleActive: {
    backgroundColor: '#FFFFFF',
  },
  controlButtonActive: {},
  controlLabel: {
    fontSize: 11,
    color: 'rgba(255, 255, 255, 0.55)',
    marginTop: 8,
  },
  controlLabelActive: {
    color: '#FFFFFF',
    fontWeight: '500',
  },
  endCallButton: {
    alignItems: 'center',
  },
  endCallCircle: {
    width: END_CALL_SIZE,
    height: END_CALL_SIZE,
    borderRadius: END_CALL_SIZE / 2,
    backgroundColor: '#E54D42',
    justifyContent: 'center',
    alignItems: 'center',
  },
  endCallLabel: {
    fontSize: 11,
    color: 'rgba(255, 255, 255, 0.55)',
    marginTop: 8,
  },
});

export default CallScreen;