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';

class DashboardContent extends StatelessWidget {
  final bool? isLargeScreen;

  const DashboardContent({super.key, this.isLargeScreen});

  @override
  Widget build(BuildContext context) {
    // Ascoltiamo il SessionBloc per avere i dati in tempo reale
    return BlocBuilder<SessionBloc, SessionState>(
      builder: (context, state) {
        final store = state.selectedStore;
        final company = state.company;

        return Scaffold(
          body: CustomScrollView(
            slivers: [
              // Un'AppBar elegante che si rimpicciolisce
              SliverAppBar(
                expandedHeight: 120.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text(
                    store?.nome ?? 'Flux Dashboard',
                    style: TextStyle(color: context.primaryText),
                  ),
                  background: Container(color: context.background),
                ),
                actions: [
                  IconButton(
                    icon: const Icon(Icons.settings_outlined),
                    onPressed: () => Navigator.pushNamed(context, '/settings'),
                  ),
                ],
              ),

              SliverToBoxAdapter(
                child: Center(
                  child: Container(
                    constraints: const BoxConstraints(
                      maxWidth: 1200,
                    ), // Larghezza massima "confortevole"
                    padding: const EdgeInsets.all(24.0),
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          _buildWelcomeHeader(context, company?.ragioneSociale),
                          const SizedBox(height: 30),
                          _SectionTitle(title: 'AZIONI RAPIDE'),
                          const SizedBox(height: 16),
                          _buildGridActions(context),
                          const SizedBox(height: 32),
                          _SectionTitle(title: 'STATO NEGOZIO'),
                          const SizedBox(height: 16),
                          _buildInfoCard(context, store),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildWelcomeHeader(BuildContext context, String? companyName) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Bentornato,',
          style: TextStyle(color: context.secondaryText, fontSize: 16),
        ),
        Text(
          companyName ?? 'La tua Azienda',
          style: TextStyle(
            color: context.primaryText,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }

  Widget _buildGridActions(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // Calcoliamo il numero di colonne in base alla larghezza
        // Sotto i 600px (mobile): 2 colonne
        // Tra 600 e 1000px (tablet): 3 o 4 colonne
        // Sopra i 1000px (desktop): 6 colonne
        int crossAxisCount = 2;
        if (constraints.maxWidth > 1000) {
          crossAxisCount = 6;
        } else if (constraints.maxWidth > 600) {
          crossAxisCount = 4;
        }

        return GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: crossAxisCount,
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
          // Su desktop rendiamo i tasti un po' più squadrati (1.0)
          // Su mobile manteniamo il rettangolo (1.5)
          childAspectRatio: constraints.maxWidth > 600 ? 1.2 : 1.5,
          children: [
            _ActionCard(
              label: 'Nuova Op',
              icon: Icons.add_task_rounded,
              color: context.accent,
              onTap: () {},
            ),
            _ActionCard(
              label: 'Clienti',
              icon: Icons.people_alt_rounded,
              color: Colors.orange,
              onTap: () {},
            ),
            _ActionCard(
              label: 'Campagne',
              icon: Icons.campaign_rounded,
              color: Colors.purple,
              onTap: () {},
            ),
            _ActionCard(
              label: 'Report',
              icon: Icons.analytics_rounded,
              color: Colors.teal,
              onTap: () {},
            ),
            // Se siamo su desktop, possiamo aggiungere altri slot senza affollare
            if (constraints.maxWidth > 600) ...[
              _ActionCard(
                label: 'Impostazioni',
                icon: Icons.settings,
                color: Colors.grey,
                onTap: () {},
              ),
              _ActionCard(
                label: 'Supporto',
                icon: Icons.help_outline,
                color: Colors.blueGrey,
                onTap: () {},
              ),
            ],
          ],
        );
      },
    );
  }

  Widget _buildInfoCard(BuildContext context, dynamic store) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: context.accent.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        children: [
          Icon(Icons.location_on_rounded, color: context.accent),
          const SizedBox(width: 12),
          Expanded(
            child: Text(
              '${store?.indirizzo}, ${store?.comune}',
              style: TextStyle(color: context.primaryText),
            ),
          ),
        ],
      ),
    );
  }
}

class _ActionCard extends StatelessWidget {
  final String label;
  final IconData icon;
  final Color color;
  final VoidCallback onTap;

  const _ActionCard({
    required this.label,
    required this.icon,
    required this.color,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(20),
      child: Container(
        decoration: BoxDecoration(
          color: context.background,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: context.accent.withValues(alpha: 0.1)),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, color: color, size: 32),
            const SizedBox(height: 8),
            Text(label, style: const TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

class _SectionTitle extends StatelessWidget {
  final String title;
  const _SectionTitle({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(
        color: context.secondaryText,
        fontWeight: FontWeight.bold,
        fontSize: 12,
        letterSpacing: 1.1,
      ),
    );
  }
}