import 'package:comwell_key_app/themes/light_theme.dart';
import 'package:comwell_key_app/up_sales/components/facility_icon_text.dart';
import 'package:comwell_key_app/up_sales/models/facility_type.dart';
import 'package:comwell_key_app/utils/l10n_utils.dart';
import 'package:flutter/material.dart';

class FacilitiesBottomSheet extends StatelessWidget {
  final List<FacilityType> facilities;
  const FacilitiesBottomSheet({super.key, required this.facilities});

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

    // Group facilities by groupName
    final Map<String, List<FacilityType>> grouped = {};
    for (final facility in facilities) {
      if (!grouped.containsKey(facility.groupName)) {
        grouped[facility.groupName] = [];
      }
      grouped[facility.groupName]!.add(facility);
    }

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      decoration: BoxDecoration(
        color: theme.colorScheme.surface,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
      ),
      child: ListView(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(context.strings.facilities, style: theme.textTheme.labelLarge),
              IconButton(
                icon: const Icon(
                  Icons.close,
                  size: 24,
                ),
                style: IconButton.styleFrom(
                  backgroundColor: sandColor[40],
                ),
                onPressed: () => Navigator.of(context).pop(),
              ),
            ],
          ),
          const SizedBox(height: 12),
          ...grouped.entries.map((entry) => Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(entry.key,
                      style: theme.textTheme.bodySmall?.copyWith(
                          fontWeight: FontWeight.bold,
                          color: theme.colorScheme.onSurface)),
                  const SizedBox(height: 8),
                  Wrap(
                    direction: entry.key == "Bed types"
                        ? Axis.horizontal
                        : Axis.vertical,
                    spacing: 16,
                    runSpacing: 8,
                    children: entry.value
                        .map((f) => Container(
                              key: ValueKey(f.name),
                              width: entry.key == "Bed types" ? 175 : null,
                              height: entry.key == "Bed types" ? 56 : null,
                              decoration: BoxDecoration(
                                border: entry.key == "Bed types"
                                    ? Border.all(
                                        color: colorDivider,
                                      )
                                    : null,
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: Center(
                                  child: FacilityIconText(
                                      facility: f, showDivider: false)),
                            ))
                        .toList(),
                  ),
                  const SizedBox(height: 16),
                  if (entry.key != "Bed types")
                    const Column(
                      children: [
                        Divider(
                          color: colorDivider,
                          height: 0,
                        ),
                        SizedBox(height: 12),
                      ],
                    )
                ],
              )),
          const SizedBox(height: 12),
        ],
      ),
    );
  }
}