import 'package:flutter/material.dart';

// Re-defining SidebarItem here for self-containment,
// ideally this would be in a shared utility file if used across many screens.
class SidebarItem {
  final IconData? icon;
  final String label;
  final String? route;
  final List<SidebarItem>? children;
  final bool isParent;
  final String? imagePath;

  const SidebarItem({
    this.icon,
    required this.label,
    this.route,
    this.children,
    this.isParent = false,
    this.imagePath,
  }) : assert(icon != null || imagePath != null, 'Either icon or imagePath must be provided');
}

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

  // Define Air's sub-menu structure (Manual, Continuous, Investigative)
  final List<SidebarItem> _airSubMenus = const [
    SidebarItem(
      icon: Icons.handshake,
      label: "Manual",
      isParent: true,
      children: [
        SidebarItem(icon: Icons.dashboard, label: "Dashboard", route: '/air/manual/dashboard'),
        SidebarItem(icon: Icons.construction, label: "Installation", route: '/air/manual/installation'),
        SidebarItem(icon: Icons.inventory_2, label: "Collection", route: '/air/manual/collection'),
        SidebarItem(icon: Icons.receipt_long, label: "Report", route: '/air/manual/report'),
        SidebarItem(icon: Icons.article, label: "Data Log", route: '/air/manual/data-log'),
        SidebarItem(icon: Icons.image, label: "Image Request", route: '/air/manual/image-request'),
      ],
    ),
    SidebarItem(
      icon: Icons.trending_up,
      label: "Continuous",
      isParent: true,
      children: [
        SidebarItem(icon: Icons.dashboard, label: "Dashboard", route: '/air/continuous/dashboard'),
        SidebarItem(icon: Icons.info, label: "Overview", route: '/air/continuous/overview'),
        SidebarItem(icon: Icons.input, label: "Entry", route: '/air/continuous/entry'),
        SidebarItem(icon: Icons.receipt_long, label: "Report", route: '/air/continuous/report'),
      ],
    ),
    SidebarItem(
      icon: Icons.search,
      label: "Investigative",
      isParent: true,
      children: [
        SidebarItem(icon: Icons.dashboard, label: "Dashboard", route: '/air/investigative/dashboard'),
        SidebarItem(icon: Icons.info, label: "Overview", route: '/air/investigative/overview'),
        SidebarItem(icon: Icons.input, label: "Entry", route: '/air/investigative/entry'),
        SidebarItem(icon: Icons.receipt_long, label: "Report", route: '/air/investigative/report'),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Air Department"),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Explore Air Monitoring Sections",
              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 24),
            Column(
              children: _airSubMenus.map((category) {
                return _buildCategorySection(context, category);
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }

  // Method to build each category section (Manual, Continuous, Investigative)
  Widget _buildCategorySection(BuildContext context, SidebarItem category) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Category header (icon + label)
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Row(
            children: [
              Icon(category.icon, size: 30, color: Theme.of(context).iconTheme.color),
              const SizedBox(width: 12),
              Text(
                category.label,
                style: Theme.of(context).textTheme.titleLarge?.copyWith(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        const Divider(height: 24, thickness: 1, color: Colors.white24),
        // Grid of sub-menu items - changed to 2 columns
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // Changed from 3 to 2 columns
            crossAxisSpacing: 0.0,
            mainAxisSpacing: 0.0,
            childAspectRatio: 4.0, // Adjusted aspect ratio for better 2-column layout
          ),
          itemCount: category.children?.length ?? 0,
          itemBuilder: (context, index) {
            final subItem = category.children![index];
            return InkWell(
              onTap: () {
                if (subItem.route != null) {
                  Navigator.pushNamed(context, subItem.route!);
                }
              },
              borderRadius: BorderRadius.circular(0),
              child: Container(
                margin: const EdgeInsets.all(4.0), // Added margin for better spacing
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white24, width: 0.5), // Optional: subtle border
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      subItem.icon != null
                          ? Icon(subItem.icon, color: Colors.white70, size: 24)
                          : const SizedBox.shrink(),
                      const SizedBox(width: 8),
                      Expanded(
                        child: Text(
                          subItem.label,
                          style: Theme.of(context).textTheme.bodySmall?.copyWith(
                            color: Colors.white70,
                            fontSize: 12, // Slightly increased font size
                          ),
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 2, // Allow for two lines if needed
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
        const SizedBox(height: 16),
      ],
    );
  }
}