ChatApp/apps/mobile/app/(app)/call.tsx

import { useRouter } from 'expo-router';
import { useEffect, useMemo, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import { Avatar } from '../../components/Avatar';
import { useCall } from '../../lib/callContext';
import { colors } from '../../theme/colors';

export default function CallScreen() {
  const router = useRouter();
  const { state, toggleMute, toggleSpeaker, endCall } = useCall();
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    if (state.kind !== 'connected') return;
    setSeconds(0);
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, [state.kind]);

  useEffect(() => {
    if (state.kind === 'idle') {
      router.back();
    }
  }, [state.kind, router]);

  const duration = useMemo(() => {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return [m, s].map((n) => String(n).padStart(2, '0')).join(':');
  }, [seconds]);

  if (state.kind === 'idle' || state.kind === 'ended') {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Anruf beendet</Text>
      </View>
    );
  }

  if (state.kind === 'incoming') {
    return null;
  }

  const connecting = state.kind === 'connecting' || state.kind === 'outgoing';
  const participants = state.kind === 'connected' ? state.participants : [];
  const muted = state.kind === 'connected' ? state.muted : false;
  const speakerOn = state.kind === 'connected' ? state.speakerOn : false;

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>{connecting ? 'Verbinde …' : 'Anruf läuft'}</Text>
        {state.kind === 'connected' && <Text style={styles.duration}>{duration}</Text>}
      </View>

      <View style={styles.participantList}>
        {participants.length === 0 && (
          <Text style={styles.empty}>Warten auf Teilnehmer …</Text>
        )}
        {participants.map((p) => (
          <View key={p.identity} style={styles.participantRow}>
            <Avatar name={p.name} size={48} />
            <View style={styles.participantText}>
              <Text style={styles.participantName}>{p.name}</Text>
              <Text style={[styles.participantStatus, p.speaking && styles.participantSpeaking]}>
                {p.speaking ? 'Spricht …' : 'Stumm'}
              </Text>
            </View>
          </View>
        ))}
      </View>

      <View style={styles.toolbar}>
        <ToolbarButton
          label={muted ? 'Stumm' : 'Mikro'}
          active={muted}
          onPress={() => {
            void toggleMute();
          }}
        />
        <ToolbarButton
          label={speakerOn ? 'Lautsprecher' : 'Hörer'}
          active={speakerOn}
          onPress={() => {
            void toggleSpeaker();
          }}
        />
        <Pressable
          style={styles.hangup}
          onPress={() => {
            void endCall();
          }}
        >
          <Text style={styles.hangupText}>Auflegen</Text>
        </Pressable>
      </View>
    </View>
  );
}

function ToolbarButton({
  label,
  active,
  onPress,
}: {
  label: string;
  active: boolean;
  onPress: () => void;
}) {
  return (
    <Pressable
      onPress={onPress}
      style={[styles.toolbarButton, active && styles.toolbarButtonActive]}
    >
      <Text style={[styles.toolbarButtonText, active && styles.toolbarButtonTextActive]}>
        {label}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: colors.bg, padding: 24 },
  header: { alignItems: 'center', marginTop: 24, gap: 6 },
  title: { color: colors.text, fontSize: 24, fontWeight: '700' },
  duration: { color: colors.textMuted, fontSize: 16, fontVariant: ['tabular-nums'] },
  participantList: { flex: 1, marginTop: 24, gap: 12 },
  empty: { color: colors.textMuted, textAlign: 'center', marginTop: 32 },
  participantRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    backgroundColor: colors.surface,
    padding: 12,
    borderRadius: 12,
    borderColor: colors.border,
    borderWidth: 1,
  },
  participantText: { flex: 1 },
  participantName: { color: colors.text, fontSize: 16, fontWeight: '600' },
  participantStatus: { color: colors.textMuted, fontSize: 12, marginTop: 2 },
  participantSpeaking: { color: colors.success, fontWeight: '700' },
  toolbar: { flexDirection: 'row', gap: 12, paddingBottom: 16 },
  toolbarButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 14,
    backgroundColor: colors.surface,
    borderColor: colors.border,
    borderWidth: 1,
    alignItems: 'center',
  },
  toolbarButtonActive: { backgroundColor: colors.accentMuted, borderColor: colors.accent },
  toolbarButtonText: { color: colors.text, fontWeight: '600' },
  toolbarButtonTextActive: { color: colors.accent },
  hangup: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 14,
    backgroundColor: colors.danger,
    alignItems: 'center',
  },
  hangupText: { color: colors.text, fontWeight: '700' },
});