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,
      body: SafeArea(
        child: Row(
          children: [
            // ── Side Navigation ──
            Container(
              width: 72,
              decoration: BoxDecoration(
                color: kSurfaceCard,
                border: Border(
                  right: BorderSide(color: kDivider, width: 1),
                ),
              ),
              child: Column(
                children: [
                  const SizedBox(height: 20),
                  // App logo / icon
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: kGreenAccent.withAlpha(30),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: const Center(
                      child: Icon(Icons.currency_bitcoin, color: kGreenAccent, size: 22),
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    'YNAB\nLite',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 9,
                      color: kGreenAccent,
                      fontWeight: FontWeight.w700,
                      height: 1.2,
                    ),
                  ),
                  const SizedBox(height: 28),
                  // Navigation items
                  ...List.generate(_navItems.length, (i) {
                    final item = _navItems[i];
                    final active = i == selectedIndex;
                    return _NavRailItem(
                      icon: active ? item.selectedIcon : item.icon,
                      label: item.label,
                      active: active,
                      onTap: () => ref.read(_selectedIndexProvider.notifier).state = i,
                    );
                  }),
                  const Spacer(),
                  // Settings at bottom
                  _NavRailItem(
                    icon: Icons.settings_outlined,
                    selectedIcon: Icons.settings,
                    label: 'Paramètres',
                    active: false,
                    onTap: () {},
                  ),
                  const SizedBox(height: 20),
                ],
              ),
            ),
            // ── Main Content ──
            Expanded(
              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});
}

class _NavRailItem extends StatelessWidget {
  final IconData icon;
  final IconData? selectedIcon;
  final String label;
  final bool active;
  final VoidCallback onTap;

  const _NavRailItem({
    required this.icon,
    this.selectedIcon,
    required this.label,
    required this.active,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 2),
      child: Tooltip(
        message: label,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            borderRadius: BorderRadius.circular(12),
            child: Container(
              width: 56,
              height: 48,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: active ? kGreenAccent.withAlpha(20) : null,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    icon,
                    size: 22,
                    color: active ? kGreenAccent : kTextSecondary,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}