import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:mirror_ui/mirror_ui.dart';
import 'providers/connection_provider.dart';
import 'screens/connect_screen.dart';
import 'screens/remote_dashboard.dart';
import 'screens/remote_workout.dart';
import 'screens/remote_media.dart';
import 'package:mirror_protocol/mirror_protocol.dart';

class MirrorRemoteApp extends StatelessWidget {
  const MirrorRemoteApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mirror Remote',
      debugShowCheckedModeBanner: false,
      theme: MirrorTheme.dark,
      home: const _RemoteShell(),
    );
  }
}

class _RemoteShell extends ConsumerWidget {
  const _RemoteShell();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final connection = ref.watch(connectionProvider);

    if (!connection.connected) {
      return const ConnectScreen();
    }

    return const _ConnectedRemote();
  }
}

class _ConnectedRemote extends ConsumerStatefulWidget {
  const _ConnectedRemote();

  @override
  ConsumerState<_ConnectedRemote> createState() => _ConnectedRemoteState();
}

class _ConnectedRemoteState extends ConsumerState<_ConnectedRemote> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    final activeScreen = ref.watch(
      mirrorStateProvider.select((s) => s?.activeScreen),
    );

    // Sync tab to mirror's active screen
    final tabIndex = switch (activeScreen) {
      ScreenType.dashboard => 0,
      ScreenType.workout => 1,
      ScreenType.media => 2,
      _ => _currentIndex,
    };

    return Scaffold(
      body: SafeArea(
        child: IndexedStack(
          index: tabIndex,
          children: const [
            RemoteDashboard(),
            RemoteWorkout(),
            RemoteMedia(),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: tabIndex,
        onDestinationSelected: (index) {
          setState(() => _currentIndex = index);
          final target = switch (index) {
            0 => ScreenType.dashboard,
            1 => ScreenType.workout,
            2 => ScreenType.media,
            _ => ScreenType.dashboard,
          };
          ref.read(connectionProvider.notifier).send(
                NavigateCommand(target: target),
              );
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.dashboard), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.fitness_center), label: 'Workout'),
          NavigationDestination(icon: Icon(Icons.music_note), label: 'Media'),
        ],
      ),
    );
  }
}