import 'package:flutter/material.dart';
import 'package:flux/core/theme/theme.dart';
import 'package:flux/features/customers/ui/customers_content.dart';
import 'package:flux/features/master_data/products/ui/products_screen.dart';
import 'package:flux/features/master_data/providers/ui/providers_master_data_screen.dart';
import 'package:flux/features/master_data/staff/ui/staff_screen.dart';
import 'package:flux/features/master_data/store/ui/stores_screen.dart';

class MasterDataHubContent extends StatelessWidget {
  final Function(Widget) onOpenPage;

  const MasterDataHubContent({super.key, required this.onOpenPage});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Anagrafiche",
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
              color: context.accent,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            "Gestisci i dati fondamentali del tuo business",
            style: TextStyle(color: context.secondaryText),
          ),
          const SizedBox(height: 32),

          Expanded(
            child: GridView.count(
              crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,
              mainAxisSpacing: 16,
              crossAxisSpacing: 16,
              children: [
                _buildHubCard(
                  context,
                  title: 'Prodotti',
                  subtitle: 'Anagrafica di Marche e Modelli',
                  icon: Icons.inventory_2_outlined,
                  color: Colors.blue,
                  onTap: () => onOpenPage(
                    const ProductsScreen(),
                  ), // Apre ProductsScreen, // Indice per ProductsScreen
                ),
                _buildHubCard(
                  context,
                  title: 'Clienti',
                  subtitle: 'Anagrafica dei clienti del tuo business',
                  icon: Icons.people_outlined,
                  color: Colors.orange,
                  onTap: () => onOpenPage(
                    const CustomersContent(),
                  ), // Indice per CustomersContent
                ),
                _buildHubCard(
                  context,
                  title: 'Addetti',
                  subtitle: 'Anagrafica del personale e dei collaboratori',
                  icon: Icons.badge_outlined,
                  color: Colors.teal,
                  onTap: () => onOpenPage(const StaffScreen()),
                ),
                _buildHubCard(
                  context,
                  title: 'Negozi',
                  subtitle: 'Anagrafica punti vendita della tua azienda',
                  icon: Icons.storefront_outlined,
                  color: Colors.purple,
                  onTap: () => onOpenPage(const StoresScreen()),
                ),
                _buildHubCard(
                  context,
                  title: 'Gestione Provider',
                  subtitle: 'Anagrafica mandati e servizi abilitati',
                  icon: Icons.handshake_rounded,
                  color: Colors.indigo,
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const ProvidersMasterDataScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Widget _buildHubCard(
  BuildContext context, {
  required String title,
  required String subtitle,
  required IconData icon,
  required Color color,
  required VoidCallback onTap,
}) {
  return Card(
    clipBehavior: Clip.antiAlias,
    elevation: 2,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    ), // Un pelo più arrotondato
    child: InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.all(
          24.0,
        ), // Aumentiamo il padding per dare respiro
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // CENTRA VERTICALMENTE
          crossAxisAlignment:
              CrossAxisAlignment.center, // CENTRA ORIZZONTALMENTE
          children: [
            // Icona con un leggero sfondo circolare opaco per farla risaltare
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: color.withValues(alpha: 0.1), // <--- API moderna
                shape: BoxShape.circle,
              ),
              child: Icon(icon, size: 48, color: color),
            ),
            const SizedBox(height: 16),
            Text(
              title,
              textAlign: TextAlign.center, // Centra il testo
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(
              subtitle,
              textAlign: TextAlign.center, // Centra il sottotitolo
              style: TextStyle(fontSize: 13, color: Colors.grey.shade500),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    ),
  );
}