twilio-wp-plugin/mobile/lib/screens/active_call_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/call_provider.dart';
import '../models/call_info.dart';
import '../widgets/call_controls.dart';
import '../widgets/dialpad.dart';

class ActiveCallScreen extends StatefulWidget {
  const ActiveCallScreen({super.key});

  @override
  State<ActiveCallScreen> createState() => _ActiveCallScreenState();
}

class _ActiveCallScreenState extends State<ActiveCallScreen> {
  bool _showDialpad = false;

  @override
  Widget build(BuildContext context) {
    final call = context.watch<CallProvider>();
    final info = call.callInfo;

    // Pop back when call ends
    if (info.state == CallState.idle) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (mounted) Navigator.of(context).pop();
      });
    }

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
      body: SafeArea(
        child: Column(
          children: [
            const Spacer(flex: 2),
            // Caller info
            Text(
              info.callerNumber ?? 'Unknown',
              style: Theme.of(context)
                  .textTheme
                  .headlineMedium
                  ?.copyWith(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(
              _stateLabel(info.state),
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  ),
            ),
            const SizedBox(height: 4),
            if (info.state == CallState.connected)
              Text(
                _formatDuration(info.duration),
                style: Theme.of(context).textTheme.titleMedium,
              ),
            const Spacer(flex: 2),
            // Dialpad overlay
            if (_showDialpad)
              Dialpad(
                onDigit: (d) => call.sendDigits(d),
                onClose: () => setState(() => _showDialpad = false),
              ),
            // Controls
            if (!_showDialpad)
              CallControls(
                callInfo: info,
                onMute: () => call.toggleMute(),
                onSpeaker: () => call.toggleSpeaker(),
                onHold: () =>
                    info.isOnHold ? call.unholdCall() : call.holdCall(),
                onDialpad: () => setState(() => _showDialpad = true),
                onTransfer: () => _showTransferDialog(context, call),
                onHangUp: () => call.hangUp(),
              ),
            const Spacer(),
          ],
        ),
      ),
    );
  }

  String _stateLabel(CallState state) {
    switch (state) {
      case CallState.ringing:
        return 'Ringing...';
      case CallState.connecting:
        return 'Connecting...';
      case CallState.connected:
        return 'Connected';
      case CallState.disconnected:
        return 'Disconnected';
      case CallState.idle:
        return '';
    }
  }

  String _formatDuration(Duration d) {
    final minutes = d.inMinutes.toString().padLeft(2, '0');
    final seconds = (d.inSeconds % 60).toString().padLeft(2, '0');
    return '$minutes:$seconds';
  }

  void _showTransferDialog(BuildContext context, CallProvider call) {
    final controller = TextEditingController();
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('Transfer Call'),
        content: TextField(
          controller: controller,
          decoration: const InputDecoration(
            labelText: 'Extension or Queue ID',
            border: OutlineInputBorder(),
          ),
          keyboardType: TextInputType.number,
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('Cancel'),
          ),
          FilledButton(
            onPressed: () {
              final target = controller.text.trim();
              if (target.isNotEmpty) {
                call.transferCall(target);
                Navigator.pop(ctx);
              }
            },
            child: const Text('Transfer'),
          ),
        ],
      ),
    );
  }
}