import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'theme/app_theme.dart';
import 'screens/dashboard_screen.dart';
import 'screens/budget_screen.dart';
import 'screens/accounts_screen.dart';
import 'screens/transactions_screen.dart';

final _selectedIndexProvider = StateProvider<int>((ref) => 0);

class YnabApp extends ConsumerStatefulWidget {
  const YnabApp({super.key});

  @override
  ConsumerState<YnabApp> createState() => _YnabAppState();
}

class _YnabAppState extends ConsumerState<YnabApp> {
  late final List<Widget> _screens;
  late final List<_NavItem> _navItems;

  @override
  void initState() {
    super.initState();
    _screens = const [
      DashboardScreen(),
      BudgetScreen(),
      AccountsScreen(),
      TransactionsScreen(),
    ];
    _navItems = const [
      _NavItem(icon: Icons.dashboard_outlined, selectedIcon: Icons.dashboard, label: 'Tableau de bord'),
      _NavItem(icon: Icons.pie_chart_outline, selectedIcon: Icons.pie_chart, label: 'Budget'),
      _NavItem(icon: Icons.account_balance_outlined, selectedIcon: Icons.account_balance, label: 'Comptes'),
      _NavItem(icon: Icons.receipt_long_outlined, selectedIcon: Icons.receipt_long, label: 'Transactions'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    final selectedIndex = ref.watch(_selectedIndexProvider);

    return Scaffold(
      backgroundColor: kSurfaceBg,
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          ref.read(_selectedIndexProvider.notifier).state = index;
        },
        destinations: _navItems.map((item) {
          return NavigationDestination(
            icon: Icon(item.icon),
            selectedIcon: Icon(item.selectedIcon),
            label: item.label,
          );
        }).toList(),
      ),
      body: SafeArea(
        child: Column(
          children: [
            // Header
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              decoration: BoxDecoration(
                color: kSurfaceBg,
                border: Border(
                  bottom: BorderSide(color: kDivider, width: 0.5),
                ),
              ),
              child: Row(
                children: [
                  Text(
                    _navItems[selectedIndex].label,
                    style: const TextStyle(
                      color: kTextPrimary,
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const Spacer(),
                  IconButton(
                    icon: const Icon(Icons.add, color: kGreenAccent),
                    onPressed: () {},
                    tooltip: 'Ajouter une transaction',
                  ),
                  IconButton(
                    icon: const Icon(Icons.search, color: kTextSecondary),
                    onPressed: () {},
                    tooltip: 'Rechercher',
                  ),
                ],
              ),
            ),
            // Content
            Expanded(
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 200),
                child: _screens[selectedIndex],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _NavItem {
  final IconData icon;
  final IconData selectedIcon;
  final String label;
  const _NavItem({required this.icon, required this.selectedIcon, required this.label});
}