import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../barcode_designer/presentation/barcode_designer_screen.dart';
import '../../../barcode_designer/presentation/saved_templates_screen.dart';

class UtilityItemData {
  final String title;
  final String description;
  final IconData icon;
  final Color color;
  final VoidCallback? onTap;
  final String? badgeText;
  final List<UtilityQuickAction>? actions;

  const UtilityItemData({
    required this.title,
    required this.description,
    required this.icon,
    required this.color,
    this.onTap,
    this.badgeText,
    this.actions,
  });
}

class UtilityQuickAction {
  final String label;
  final IconData icon;
  final VoidCallback onTap;

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

class UtilitiesSection extends StatelessWidget {
  final bool isDesktop;

  const UtilitiesSection({super.key, this.isDesktop = true});

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    final List<UtilityItemData> utilities = [
      UtilityItemData(
        title: 'Barcode & Label Designer',
        description: 'Design custom barcode & jewellery tags with dynamic product fields, live preview & direct printer testing.',
        icon: LucideIcons.barcode,
        color: Colors.indigo,
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => const BarcodeDesignerScreen()),
          );
        },
        badgeText: 'Active',
        actions: [
          UtilityQuickAction(
            label: 'Open Designer',
            icon: LucideIcons.draftingCompass,
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => const BarcodeDesignerScreen()),
              );
            },
          ),
          UtilityQuickAction(
            label: 'Saved Templates',
            icon: LucideIcons.folderOpen,
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => const SavedTemplatesScreen()),
              );
            },
          ),
        ],
      ),
      const UtilityItemData(
        title: 'Bulk Price & Rate Updater',
        description: 'Automate mass price updates across inventory categories and daily commodity rate recalculations.',
        icon: LucideIcons.trendingUp,
        color: Colors.teal,
        badgeText: 'Coming Soon',
      ),
      const UtilityItemData(
        title: 'Data Export & Compliance',
        description: 'Export audit-ready GST reports, physical inventory verification sheets, and tally XML packages.',
        icon: LucideIcons.fileSpreadsheet,
        color: Colors.amber,
        badgeText: 'Coming Soon',
      ),
    ];

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(6),
                  decoration: BoxDecoration(
                    color: Colors.indigo.withValues(alpha: 0.12),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Icon(LucideIcons.sparkles, color: Colors.indigo, size: 18),
                ),
                const SizedBox(width: 10),
                Text(
                  'Utilities & Tools',
                  style: Theme.of(context)
                      .textTheme
                      .titleLarge
                      ?.copyWith(fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ],
        ),
        const SizedBox(height: 14),

        // Responsive Cards Grid
        LayoutBuilder(
          builder: (context, constraints) {
            final double cardWidth = constraints.maxWidth >= 900
                ? (constraints.maxWidth - 32) / 3
                : (constraints.maxWidth >= 600 ? (constraints.maxWidth - 16) / 2 : constraints.maxWidth);

            return Wrap(
              spacing: 16,
              runSpacing: 16,
              children: utilities.map((util) {
                return SizedBox(
                  width: cardWidth,
                  child: _buildUtilityCard(context, util, isDark),
                );
              }).toList(),
            );
          },
        ),
      ],
    );
  }

  Widget _buildUtilityCard(BuildContext context, UtilityItemData util, bool isDark) {
    final bool isAvailable = util.onTap != null;

    return Container(
      decoration: BoxDecoration(
        color: isDark ? const Color(0xFF1E293B) : Colors.white,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: isDark ? Colors.white10 : Colors.grey.shade200,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: isDark ? 0.2 : 0.04),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Material(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(16),
        child: InkWell(
          onTap: util.onTap,
          borderRadius: BorderRadius.circular(16),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: util.color.withValues(alpha: 0.12),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Icon(util.icon, color: util.color, size: 22),
                    ),
                    if (util.badgeText != null)
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                        decoration: BoxDecoration(
                          color: isAvailable
                              ? Colors.green.withValues(alpha: 0.12)
                              : Colors.grey.withValues(alpha: 0.15),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Text(
                          util.badgeText!,
                          style: TextStyle(
                            fontSize: 10,
                            fontWeight: FontWeight.bold,
                            color: isAvailable ? Colors.green : Colors.grey.shade600,
                          ),
                        ),
                      ),
                  ],
                ),
                const SizedBox(height: 12),
                Text(
                  util.title,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                  ),
                ),
                const SizedBox(height: 6),
                Text(
                  util.description,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey.shade500,
                    height: 1.35,
                  ),
                ),
                if (util.actions != null && util.actions!.isNotEmpty) ...[
                  const SizedBox(height: 14),
                  const Divider(height: 1),
                  const SizedBox(height: 8),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: util.actions!.map((action) {
                      return Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        child: TextButton.icon(
                          style: TextButton.styleFrom(
                            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                            textStyle: const TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
                          ),
                          icon: Icon(action.icon, size: 14),
                          label: Text(action.label),
                          onPressed: action.onTap,
                        ),
                      );
                    }).toList(),
                  ),
                ],
              ],
            ),
          ),
        ),
      ),
    );
  }
}