frontend/src/components/call/CallScreen.web.tsx

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

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 endCall = callStore((s) => s.endCall);
  const isMinimized = callStore((s) => s.isMinimized);

  // 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 '通话功能暂不支持网页端';
      case 'ending':
        return '通话已结束';
      default:
        return '';
    }
  };

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

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

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

      {/* Center: Peer info */}
      <View style={styles.centerArea}>
        <View style={styles.avatarOuter}>
          <View style={[styles.avatar, styles.avatarPlaceholder]}>
            <MaterialCommunityIcons name="web-off" size={50} color="#fff" />
          </View>
        </View>
        <Text style={styles.peerName} numberOfLines={1}>
          {currentCall.peerName || '未知用户'}
        </Text>
        <Text style={styles.status}>{getStatusText()}</Text>
      </View>

      {/* Bottom controls */}
      <View style={styles.controls}>
        {/* 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 END_CALL_SIZE = 64;

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#1A1A2E',
    zIndex: 9999,
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#1A1A2E',
  },
  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,
  },
  controls: {
    position: 'absolute',
    bottom: 60,
    left: 0,
    right: 0,
    alignItems: 'center',
  },
  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;