import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/agent_provider.dart';
import '../providers/call_provider.dart';
import '../widgets/agent_status_toggle.dart';
import '../widgets/queue_card.dart';
import 'active_call_screen.dart';
import 'settings_screen.dart';

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

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      context.read<AgentProvider>().refresh();
    });
  }

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

    // Navigate to active call screen when a call comes in
    if (call.callInfo.isActive) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(builder: (_) => const ActiveCallScreen()),
          (route) => route.isFirst,
        );
      });
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('TWP Softphone'),
        actions: [
          // SSE connection indicator
          Padding(
            padding: const EdgeInsets.only(right: 8),
            child: Icon(
              Icons.circle,
              size: 12,
              color: agent.sseConnected ? Colors.green : Colors.red,
            ),
          ),
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () => Navigator.push(context,
                MaterialPageRoute(builder: (_) => const SettingsScreen())),
          ),
        ],
      ),
      body: RefreshIndicator(
        onRefresh: () => agent.refresh(),
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            const AgentStatusToggle(),
            const SizedBox(height: 24),
            Text('Queues',
                style: Theme.of(context).textTheme.titleMedium),
            const SizedBox(height: 8),
            if (agent.queues.isEmpty)
              const Card(
                child: Padding(
                  padding: EdgeInsets.all(24),
                  child: Center(child: Text('No queues assigned')),
                ),
              )
            else
              ...agent.queues.map((q) => Padding(
                    padding: const EdgeInsets.only(bottom: 8),
                    child: QueueCard(queue: q),
                  )),
          ],
        ),
      ),
    );
  }
}