ionic-planb-logistic-app-flutter/lib/components/mobile_map_with_overlay.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../models/delivery.dart';
import '../providers/providers.dart';
import '../l10n/app_localizations.dart';
import 'dark_mode_map.dart';
import 'unified_delivery_list.dart';

/// Mobile-optimized map layout with toggleable deliveries list overlay
///
/// This component provides a full-screen map view for mobile devices with
/// a bottom overlay that can be toggled to show the deliveries list.
class MobileMapWithOverlay extends ConsumerStatefulWidget {
  final List<Delivery> deliveries;
  final Delivery? selectedDelivery;
  final ValueChanged<Delivery?> onDeliverySelected;
  final Function(Delivery, String) onDeliveryAction;

  const MobileMapWithOverlay({
    super.key,
    required this.deliveries,
    this.selectedDelivery,
    required this.onDeliverySelected,
    required this.onDeliveryAction,
  });

  @override
  ConsumerState<MobileMapWithOverlay> createState() => _MobileMapWithOverlayState();
}

class _MobileMapWithOverlayState extends ConsumerState<MobileMapWithOverlay>
    with SingleTickerProviderStateMixin {
  late ScrollController _listScrollController;
  late AnimationController _animationController;
  late Animation<double> _slideAnimation;

  @override
  void initState() {
    super.initState();
    _listScrollController = ScrollController();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _slideAnimation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    _listScrollController.dispose();
    _animationController.dispose();
    super.dispose();
  }

  void _toggleList() {
    final isOpen = ref.read(mobileDeliveriesListOpenProvider);
    if (isOpen) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
    ref.read(mobileDeliveriesListOpenProvider.notifier).toggle();
  }

  int get _completedCount {
    return widget.deliveries.where((d) => d.delivered).length;
  }

  int get _totalCount {
    // Exclude warehouse delivery from total count
    return widget.deliveries.where((d) => !d.isWarehouseDelivery).length;
  }

  @override
  Widget build(BuildContext context) {
    final isListOpen = ref.watch(mobileDeliveriesListOpenProvider);
    final l10n = AppLocalizations.of(context);
    final screenHeight = MediaQuery.of(context).size.height;
    final overlayHeight = screenHeight * 0.7;

    return Stack(
      children: [
        // Full-screen map
        Positioned.fill(
          child: DarkModeMapComponent(
            deliveries: widget.deliveries,
            selectedDelivery: widget.selectedDelivery,
            onDeliverySelected: widget.onDeliverySelected,
            onAction: (action) {
              if (widget.selectedDelivery != null) {
                widget.onDeliveryAction(widget.selectedDelivery!, action);
              }
            },
          ),
        ),

        // Dimmed overlay when list is open
        if (isListOpen)
          Positioned.fill(
            child: GestureDetector(
              onTap: _toggleList,
              child: AnimatedOpacity(
                duration: const Duration(milliseconds: 300),
                opacity: isListOpen ? 0.3 : 0.0,
                child: Container(
                  color: Colors.black,
                ),
              ),
            ),
          ),

        // Animated deliveries overlay
        AnimatedBuilder(
          animation: _slideAnimation,
          builder: (context, child) {
            return Positioned(
              left: 0,
              right: 0,
              bottom: -overlayHeight * (1 - _slideAnimation.value),
              height: overlayHeight,
              child: GestureDetector(
                onVerticalDragEnd: (details) {
                  // Swipe down to close
                  if (details.primaryVelocity != null && details.primaryVelocity! > 500) {
                    _toggleList();
                  }
                },
                child: Container(
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.surface,
                    borderRadius: const BorderRadius.vertical(
                      top: Radius.circular(16),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withValues(alpha: 0.2),
                        blurRadius: 10,
                        offset: const Offset(0, -2),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      // Drag handle
                      Container(
                        height: 32,
                        alignment: Alignment.center,
                        child: Container(
                          height: 4,
                          width: 40,
                          decoration: BoxDecoration(
                            color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.3),
                            borderRadius: BorderRadius.circular(2),
                          ),
                        ),
                      ),
                      // Header with close button
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              color: Theme.of(context).dividerColor,
                              width: 1,
                            ),
                          ),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              l10n.deliveries,
                              style: Theme.of(context).textTheme.titleLarge?.copyWith(
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            IconButton(
                              icon: const Icon(Icons.close),
                              onPressed: _toggleList,
                              tooltip: l10n.close,
                            ),
                          ],
                        ),
                      ),
                      // Deliveries list
                      Expanded(
                        child: UnifiedDeliveryListView(
                          deliveries: widget.deliveries,
                          selectedDelivery: widget.selectedDelivery,
                          scrollController: _listScrollController,
                          onDeliverySelected: (delivery) {
                            widget.onDeliverySelected(delivery);
                            // Auto-close the overlay after selection for better mobile UX
                            _toggleList();
                          },
                          onItemAction: (delivery, action) {
                            widget.onDeliveryAction(delivery, action);
                          },
                          isCollapsed: false,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),

        // Floating toggle button (FAB) - only show when list is closed
        if (!isListOpen)
          Positioned(
            bottom: 110, // Slightly lowered for better positioning
            right: 16,
            child: FloatingActionButton.extended(
              heroTag: 'mobile_deliveries_toggle_fab',
              onPressed: _toggleList,
              icon: const Icon(Icons.list),
              label: Text(
                '$_completedCount/$_totalCount',
                style: const TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 15,
                ),
              ),
              backgroundColor: Theme.of(context).colorScheme.primary,
              foregroundColor: Colors.white,
              elevation: 4,
            ),
          ),
      ],
    );
  }
}