cloudsolutions-atoms/lib/modules/cx_module/chat/call/audio_call_page.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/modules/cx_module/chat/chat_provider.dart';
import 'package:test_sa/modules/cx_module/chat/model/call_session.dart';
import 'package:test_sa/modules/cx_module/chat/call/video_call_page.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/app_style/app_themes.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';

class AudioCallPage extends StatefulWidget {
  const AudioCallPage({Key? key}) : super(key: key);

  @override
  State<AudioCallPage> createState() => _AudioCallPageState();
}

class _AudioCallPageState extends State<AudioCallPage> {
  @override
  void initState() {
    super.initState();
    // Listen for call end and navigate back
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final chatProvider = context.read<ChatProvider>();
      // Add listener to detect when call ends
      chatProvider.addListener(_checkCallStatus);
    });
  }

  void _checkCallStatus() {
    final chatProvider = context.read<ChatProvider>();
    // If call status is idle (call ended), navigate back to chat
    if (chatProvider.callStatus == CallStatus.idle && mounted) {
      // Remove listener before popping to avoid memory leaks
      chatProvider.removeListener(_checkCallStatus);
      Navigator.of(context).pop();
    }
  }

  @override
  void dispose() {
    // Clean up listener
    try {
      context.read<ChatProvider>().removeListener(_checkCallStatus);
    } catch (e) {
      // Provider might already be disposed
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.backgroundTabBarDark,
      appBar: const DefaultAppBar(
        backgroundColor: Colors.transparent,
        arrowBackColor: AppColor.white10,
      ),
      body: SafeArea(
        child: Selector<ChatProvider, CallSession?>(
          selector: (_, provider) => provider.currentCall,
          builder: (context, session, _) {
            if (session == null) {
              return const Center(child: Text('No active call'));
            }
            return Column(
              children: [
                const Spacer(flex: 2),
                _buildContactInfo(context, session),
                8.height,
                _buildCallStatusOrDuration(context),
                const Spacer(flex: 4),
                _buildControls(context, session),
                32.height,
              ],
            );
          },
        ),
      ),
    );
  }

  Widget _buildTopBar(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: [
          IconButton(
            icon: const Icon(Icons.arrow_back, color: Colors.white),
            onPressed: () => Navigator.pop(context),
          ),
          const Spacer(),
          Text(
            'Audio Call',
            style: AppTextStyles.heading6.copyWith(
              color: Colors.white,
              fontWeight: FontWeight.w600,
            ),
          ),
          const Spacer(),
          const SizedBox(width: 48), // Balance the back button
        ],
      ),
    );
  }

  Widget _buildContactInfo(BuildContext context, CallSession session) {
    return Column(
      children: [
        Stack(
          alignment: Alignment.center,
          children: [
            Container(
              padding: const EdgeInsets.all(14),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColor.whiteF8d,
                //TODO need to check opacity
                border: Border.all(color: AppColor.white10.withOpacity(0.2), width: 1),
              ),
              child: ClipOval(
                child: session.peerAvatar != null
                    ? CachedNetworkImage(
                        imageUrl: session.peerAvatar!,
                        fit: BoxFit.cover,
                        placeholder: (context, url) => Center(
                          child: CircularProgressIndicator(
                            color: Colors.white.withOpacity(0.5),
                          ),
                        ),
                        errorWidget: (context, url, error) => 'call_user_avatar'.toSvgAsset(height: 48, width: 48),
                      )
                    : 'call_user_avatar'.toSvgAsset(height: 48, width: 48),
              ),
            ),
            // Show mute indicator when peer is muted
            Selector<ChatProvider, bool>(
              selector: (_, provider) => provider.isPeerMuted,
              builder: (context, isPeerMuted, _) {
                if (!isPeerMuted) return const SizedBox.shrink();

                return Positioned(
                  bottom: 0,
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: AppColor.red30,
                      shape: BoxShape.circle,
                      border: Border.all(color: AppColor.white10, width: 2),
                    ),
                    child: 'mic_disable'.toSvgAsset(
                      width: 16,
                      height: 16,
                      color: AppColor.white10,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
        24.height,
        Text(
          session.peerName,
          style: AppTextStyles.heading2.copyWith(
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
          textAlign: TextAlign.center,
        ),
        // Show "Microphone is off" text when peer is muted
        Selector<ChatProvider, bool>(
          selector: (_, provider) => provider.isPeerMuted,
          builder: (context, isPeerMuted, _) {
            if (!isPeerMuted) return const SizedBox.shrink();

            return Column(
              children: [
                8.height,
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  decoration: BoxDecoration(
                    color: AppColor.red30.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      'mic_disable'.toSvgAsset(
                        width: 14,
                        height: 14,
                        color: AppColor.white10,
                      ),
                      6.width,
                      Text(
                        'Microphone is off',
                        style: AppTextStyles.bodyText2.copyWith(
                          color: AppColor.white10,
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ],
    );
  }

  Widget _buildCallStatusOrDuration(BuildContext context) {
    return Selector<ChatProvider, CallStatus>(
      selector: (_, provider) => provider.callStatus,
      builder: (context, status, _) {
        String statusText;
        switch (status) {
          case CallStatus.outgoingRinging:
            statusText = 'Calling...';
            break;
          case CallStatus.incomingRinging:
            statusText = 'Incoming call...';
            break;
          case CallStatus.connecting:
            statusText = 'Connecting...';
            break;
          case CallStatus.connected:
            return _buildDuration(context);
          default:
            statusText = '';
        }
        return Text(
          statusText,
          style: AppTextStyles.heading5.copyWith(
            color: AppColor.neutral100,
          ),
        );
      },
    );
  }

  Widget _buildDuration(BuildContext context) {
    return Selector<ChatProvider, Duration>(
      selector: (_, provider) => provider.callDuration,
      builder: (context, duration, _) {
        if (duration.inSeconds == 0) {
          return const SizedBox.shrink();
        }

        String twoDigits(int n) => n.toString().padLeft(2, '0');
        final minutes = twoDigits(duration.inMinutes.remainder(60));
        final seconds = twoDigits(duration.inSeconds.remainder(60));

        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            color: Colors.white.withAlpha(51),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text(
            '$minutes:$seconds',
            style: AppTextStyles.heading5.copyWith(
              color: AppColor.neutral100,
              fontWeight: FontWeight.w400,
            ),
          ),
        );
      },
    );
  }

  Widget _buildControls(BuildContext context, CallSession session) {
    final chatProvider = context.read<ChatProvider>();
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Selector<ChatProvider, bool>(
              selector: (_, provider) => provider.isMuted,
              builder: (context, isMuted, _) {
                return _buildControlButton(
                  icon: isMuted ? 'mic_disable' : 'mic_enable',
                  label: isMuted ? 'Unmute' : 'Mute',
                  isActive: isMuted,
                  onPressed: () {
                    chatProvider.toggleMute();
                  },
                );
              },
            ),
            // _buildControlButton(
            //   icon: 'video_call_icon',
            //   label: 'Video',
            //   isActive: false,
            //   onPressed: () {
            //     // Switch to video call view
            //     Navigator.pushReplacement(
            //       context,
            //       MaterialPageRoute(
            //         builder: (context) => const VideoCallPage(),
            //       ),
            //     );
            //   },
            // ),
            Selector<ChatProvider, bool>(
              selector: (_, provider) => provider.isSpeakerOn,
              builder: (context, isSpeakerOn, _) {
                return _buildControlButton(
                  icon: 'speaker_enable',
                  label: 'Speaker',
                  isActive: isSpeakerOn,
                  onPressed: () {
                    chatProvider.toggleSpeaker();
                  },
                );
              },
            ),
          ],
        ),
        48.height,
        _buildEndCallButton(context, chatProvider),
      ],
    );
  }

  Widget _buildControlButton({
    required String icon,
    required String label,
    required bool isActive,
    required VoidCallback onPressed,
  }) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(18),
          decoration: BoxDecoration(color: isActive ? AppColor.primary10 : AppColor.black2E, shape: BoxShape.circle, border: BoxBorder.all(color: AppColor.white10.withOpacity(0.2))),
          child: icon.toSvgAsset(width: 24, height: 24, color: AppColor.white10),
        ).onPress(() {
          onPressed();
        }),
        8.height,
        Text(
          label,
          style: AppTextStyles.heading5.copyWith(color: AppColor.neutral100, fontWeight: FontWeight.w400),
        ),
      ],
    );
  }

  Widget _buildEndCallButton(BuildContext context, ChatProvider provider) {
    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: AppColor.red30,
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      alignment: Alignment.center,
      child: 'end_call'.toSvgAsset(height: 32, width: 32, color: AppColor.white10),
    ).onPress(() async {
      await provider.hangUp();
      // Removed Navigator.pop() - automatic listener will handle navigation
    });
  }
}