frontend/src/components/call/CallScreen.tsx

import React, { useEffect, useState } 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 localStream = callStore((s) => s.localStream);
  const endCall = callStore((s) => s.endCall);
  const toggleMute = callStore((s) => s.toggleMute);
  const toggleSpeaker = callStore((s) => s.toggleSpeaker);
  const toggleVideo = callStore((s) => s.toggleVideo);
  const isMinimized = callStore((s) => s.isMinimized);
  const toggleMinimize = callStore((s) => s.toggleMinimize);

  // Track whether peer has video
  const [hasPeerVideo, setHasPeerVideo] = useState(false);
  // Track whether local has video
  const [hasLocalVideo, setHasLocalVideo] = useState(false);

  // Check peer stream for video tracks
  useEffect(() => {
    if (peerStream) {
      const videoTracks = peerStream.getVideoTracks();
      const hasVideo = videoTracks.length > 0 && videoTracks.some((t) => t.enabled);
      setHasPeerVideo(hasVideo);
    } else {
      setHasPeerVideo(false);
    }
  }, [peerStream]);
  // Check local stream for video tracks
  useEffect(() => {
    if (localStream) {
      const videoTracks = localStream.getVideoTracks();
      const hasVideo = videoTracks.length > 0 && videoTracks.some((t) => t.enabled);
      setHasLocalVideo(hasVideo);
    } else {
      setHasLocalVideo(false);
    }
  }, [localStream]);
  // 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 handleToggleVideo = () => {
    toggleVideo();
  };
  const handleMinimize = () => {
    toggleMinimize();
  };
  // Determine if we should show video UI
  const showRemoteVideo = hasPeerVideo;
  const showLocalVideo = hasLocalVideo;
  const isVideoCallActive = showRemoteVideo || showLocalVideo;
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
      {/* Background */}
      <View style={styles.background} />
      {/* Remote video - full screen when peer has video */}
      {showRemoteVideo && peerStream && (
        <RTCView
          streamURL={peerStream.toURL()}
          style={styles.fullScreenVideo}
          objectFit="cover"
          mirror={false}
        />
      )}
      {/* Local video - picture in picture */}
      {showLocalVideo && localStream && (
        <View style={styles.localVideoContainer}>
          <RTCView
            streamURL={localStream.toURL()}
            style={styles.localVideo}
            objectFit="cover"
            mirror={true}
          />
        </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 - only show when no video */}
      {!isVideoCallActive && (
        <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>
      )}
      {/* Peer name overlay when video is active */}
      {isVideoCallActive && (
        <View style={styles.videoOverlayInfo}>
          <Text style={styles.videoPeerName} numberOfLines={1}>
            {currentCall.peerName || '未知用户'}
          </Text>
          <Text style={styles.videoStatus}>{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>
          {/* Video toggle */}
          <TouchableOpacity
            style={[styles.controlButton, hasLocalVideo && styles.controlButtonActive]}
            onPress={handleToggleVideo}
            activeOpacity={0.7}
          >
            <View style={[styles.controlCircle, hasLocalVideo && styles.controlCircleActive]}>
              <MaterialCommunityIcons
                name={hasLocalVideo ? 'video' : 'video-off'}
                size={26}
                color={hasLocalVideo ? '#333' : '#fff'}
              />
            </View>
            <Text style={[styles.controlLabel, hasLocalVideo && styles.controlLabelActive]}>
              {hasLocalVideo ? '关闭摄像头' : '打开摄像头'}
            </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,
    zIndex: 100,
  },
  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,
  },
  fullScreenVideo: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#1A1A2E',
  },
  localVideoContainer: {
    position: 'absolute',
    top: 100,
    right: 20,
    width: 120,
    height: 160,
    borderRadius: 16,
    overflow: 'hidden',
    backgroundColor: '#2A2A4E',
    borderWidth: 2,
    borderColor: 'rgba(255, 255, 255, 0.2)',
    zIndex: 50,
  },
  localVideo: {
    width: '100%',
    height: '100%',
  },
  videoOverlayInfo: {
    position: 'absolute',
    top: 100,
    left: 0,
    right: 0,
    alignItems: 'center',
    zIndex: 50,
  },
  videoPeerName: {
    fontSize: 18,
    fontWeight: '600',
    color: '#FFFFFF',
    textShadowColor: 'rgba(0, 0, 0, 0.5)',
    textShadowOffset: { width: 0, height: 1 },
    textShadowRadius: 2,
  },
  videoStatus: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
    marginTop: 4,
    textShadowColor: 'rgba(0, 0, 0, 0.5)',
    textShadowOffset: { width: 0, height: 1 },
    textShadowRadius: 2,
  },
  controls: {
    position: 'absolute',
    bottom: 60,
    left: 0,
    right: 0,
    alignItems: 'center',
    zIndex: 100,
  },
  controlRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 24,
    marginBottom: 24,
  },
  controlButton: {
    alignItems: 'center',
    width: 70,
  },
  controlCircle: {
    width: 56,
    height: 56,
    borderRadius: 28,
    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,
    textAlign: 'center',
  },
  controlLabelActive: {
    color: '#FFFFFF',
    fontWeight: '500',
  },
  endCallButton: {
    alignItems: 'center',
  },
  endCallCircle: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: '#E54D42',
    justifyContent: 'center',
    alignItems: 'center',
  },
  endCallLabel: {
    fontSize: 11,
    color: 'rgba(255, 255, 255, 0.55)',
    marginTop: 8,
  },
});


export default CallScreen;