flux/lib/features/master_data/master_data_hub_content.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
// Mantieni i tuoi import per il tema se usi le estensioni (es. context.accent)
// import 'package:flux/core/theme/theme.dart';

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      backgroundColor: theme.colorScheme.surface,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Anagrafiche",
                style: theme.textTheme.headlineMedium?.copyWith(
                  fontWeight: FontWeight.bold,
                  letterSpacing: -0.5,
                  // Se preferisci la tua estensione, usa: color: context.accent,
                  color: theme.colorScheme.primary,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                "Gestisci i dati fondamentali del tuo business",
                style: theme.textTheme.bodyLarge?.copyWith(
                  // Se preferisci: color: context.secondaryText,
                  color: theme.colorScheme.onSurfaceVariant,
                ),
              ),
              const SizedBox(height: 32),

              Expanded(
                child: GridView(
                  // MAGIA RESPONSIVA: invece di contare le colonne, diciamo "Ogni card
                  // occupa massimo 350px". Su PC ne metterà 4, su Tablet 2, su Telefono 1 o 2.
                  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 350,
                    mainAxisSpacing: 16,
                    crossAxisSpacing: 16,
                    mainAxisExtent: 200, // Altezza fissa per impedire overflow
                  ),
                  children: [
                    _buildHubCard(
                      context,
                      title: 'Prodotti',
                      subtitle: 'Anagrafica di Marche e Modelli',
                      icon: Icons.inventory_2_outlined,
                      color: Colors.blue,
                      // Navighiamo dentro la Shell (la BottomBar rimane!)
                      onTap: () => context.go('/master-data/products'),
                    ),
                    _buildHubCard(
                      context,
                      title: 'Clienti',
                      subtitle: 'Anagrafica dei clienti del tuo business',
                      icon: Icons.people_outlined,
                      color: Colors.orange,
                      // Usiamo .push() perché avevamo detto che i clienti
                      // stanno FUORI dalla Shell (niente BottomBar)
                      onTap: () => context.push('/customers'),
                    ),
                    _buildHubCard(
                      context,
                      title: 'Addetti',
                      subtitle: 'Anagrafica del personale e collaboratori',
                      icon: Icons.badge_outlined,
                      color: Colors.teal,
                      onTap: () => context.go('/master-data/staff'),
                    ),
                    _buildHubCard(
                      context,
                      title: 'Negozi',
                      subtitle: 'Anagrafica punti vendita della tua azienda',
                      icon: Icons.storefront_outlined,
                      color: Colors.purple,
                      onTap: () => context.go('/master-data/stores'),
                    ),
                    _buildHubCard(
                      context,
                      title: 'Provider',
                      subtitle: 'Anagrafica mandati e servizi',
                      icon: Icons.handshake_rounded,
                      color: Colors.indigo,
                      onTap: () => context.go('/master-data/providers'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHubCard(
    BuildContext context, {
    required String title,
    required String subtitle,
    required IconData icon,
    required Color color,
    required VoidCallback onTap,
  }) {
    final theme = Theme.of(context);

    return Card(
      clipBehavior: Clip.antiAlias,
      elevation: 0, // Zero elevation, design più flat e moderno
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
        // Stesso bordino elegante della Dashboard
        side: BorderSide(color: theme.dividerColor.withValues(alpha: 0.5)),
      ),
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: color.withValues(alpha: 0.1), // Niente withOpacity! ❤️
                  shape: BoxShape.circle,
                ),
                child: Icon(icon, size: 36, color: color),
              ),
              const SizedBox(height: 12),
              Text(
                title,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              const SizedBox(height: 4),
              Expanded(
                child: Text(
                  subtitle,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 13,
                    color: theme.colorScheme.onSurfaceVariant,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}