import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/blocs/session/session_bloc.dart';
import 'package:flux/core/theme/theme.dart';
import 'package:flux/features/customers/ui/customers_content.dart';
import 'dashboard_content.dart'; // Importiamo il contenuto della dashboard

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<SessionBloc, SessionState>(
      builder: (context, state) {
        return LayoutBuilder(
          builder: (context, constraints) {
            // Se lo schermo è più largo di 900px usiamo il layout Desktop
            final bool isLargeScreen = constraints.maxWidth > 900;

            return Scaffold(
              body: Row(
                children: [
                  // --- SIDEBAR (Solo Desktop/Tablet) ---
                  if (isLargeScreen)
                    NavigationRail(
                      selectedIndex: _selectedIndex,
                      onDestinationSelected: (index) =>
                          setState(() => _selectedIndex = index),
                      extended: constraints.maxWidth > 1200,
                      backgroundColor: context.background,
                      // 1. Definiamo il colore dell'ellisse (l'indicatore)
                      indicatorColor: context.accent.withValues(alpha: 0.2),

                      selectedIconTheme: IconThemeData(
                        color: context
                            .accent, // O un colore che stacchi bene dall'ellisse
                        size: 28,
                      ),
                      selectedLabelTextStyle: TextStyle(
                        color: context.accent,
                        fontWeight: FontWeight.bold,
                      ),
                      // 3. Forza il colore delle ICONE quando NON selezionate
                      unselectedIconTheme: IconThemeData(
                        color: context.secondaryText,
                        size: 24,
                      ),
                      unselectedLabelTextStyle: TextStyle(
                        color: context.secondaryText,
                      ),
                      leading: _buildRailHeader(constraints.maxWidth > 1200),
                      destinations: const [
                        NavigationRailDestination(
                          icon: Icon(Icons.dashboard_outlined),
                          selectedIcon: Icon(Icons.dashboard),
                          label: Text('Dashboard'),
                        ),
                        NavigationRailDestination(
                          icon: Icon(Icons.people_outlined),
                          selectedIcon: Icon(Icons.people),
                          label: Text('Clienti'),
                        ),
                        NavigationRailDestination(
                          icon: Icon(Icons.receipt_long_outlined),
                          selectedIcon: Icon(Icons.receipt_long),
                          label: Text('Operazioni'),
                        ),
                      ],
                    ),

                  // --- CONTENUTO DINAMICO ---
                  Expanded(
                    child: _buildPageContent(_selectedIndex, isLargeScreen),
                  ),
                ],
              ),
              // --- BOTTOM BAR (Solo Mobile) ---
              bottomNavigationBar: isLargeScreen
                  ? null
                  : BottomNavigationBar(
                      currentIndex: _selectedIndex,
                      onTap: (index) => setState(() => _selectedIndex = index),
                      selectedItemColor: context.accent,
                      unselectedItemColor: context.secondaryText,
                      items: const [
                        BottomNavigationBarItem(
                          icon: Icon(Icons.dashboard),
                          label: 'Home',
                        ),
                        BottomNavigationBarItem(
                          icon: Icon(Icons.people),
                          label: 'Clienti',
                        ),
                        BottomNavigationBarItem(
                          icon: Icon(Icons.receipt_long),
                          label: 'Ops',
                        ),
                      ],
                    ),
            );
          },
        );
      },
    );
  }

  Widget _buildRailHeader(bool isExtended) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 24),
      child: isExtended
          ? Text(
              'FLUX',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 24,
                color: context.accent,
              ),
            )
          : Icon(Icons.bolt, color: context.accent, size: 32),
    );
  }

  // Switch tra le sottopagine
  Widget _buildPageContent(int index, bool isLargeScreen) {
    switch (index) {
      case 0:
        return DashboardContent(
          isLargeScreen: isLargeScreen,
          // Questo pezzo DEVE puntare al setState dello State della HomeScreen
          onTabRequested: (targetIndex) {
            setState(() {
              _selectedIndex = targetIndex;
            });
          },
        );
      case 1:
        return const CustomersContent();
      case 2:
        return const Center(child: Text('Pagina Operazioni (Coming Soon)'));
      default:
        return DashboardContent(isLargeScreen: isLargeScreen);
    }
  }
}