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

import 'package:flutter/material.dart';
import '../models/delivery.dart';
import '../theme/animation_system.dart';
import '../theme/color_system.dart';

class DeliveryListItem extends StatefulWidget {
  final Delivery delivery;
  final bool isSelected;
  final VoidCallback onTap;
  final VoidCallback? onCall;
  final Function(String)? onAction;
  final int? animationIndex;

  const DeliveryListItem({
    super.key,
    required this.delivery,
    required this.isSelected,
    required this.onTap,
    this.onCall,
    this.onAction,
    this.animationIndex,
  });

  @override
  State<DeliveryListItem> createState() => _DeliveryListItemState();
}

class _DeliveryListItemState extends State<DeliveryListItem>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _slideAnimation;
  late Animation<double> _fadeAnimation;
  late Animation<double> _scaleAnimation;
  bool _isHovered = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 400),
      vsync: this,
    );

    final staggerDelay = Duration(
      milliseconds:
          (widget.animationIndex ?? 0) * AppAnimations.staggerDelayMs,
    );

    Future.delayed(staggerDelay, () {
      if (mounted) {
        _controller.forward();
      }
    });

    _slideAnimation = Tween<double>(begin: 20, end: 0).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeOut),
    );

    _fadeAnimation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeOut),
    );

    _scaleAnimation = Tween<double>(begin: 0.95, end: 1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeOut),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Color _getStatusColor(Delivery delivery) {
    if (delivery.isSkipped == true) return SvrntyColors.statusCancelled;
    if (delivery.delivered == true) return SvrntyColors.statusCompleted;
    // Default: in-transit or pending deliveries
    return SvrntyColors.statusInTransit;
  }

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

    return ScaleTransition(
      scale: _scaleAnimation,
      child: FadeTransition(
        opacity: _fadeAnimation,
        child: Transform.translate(
          offset: Offset(_slideAnimation.value, 0),
          child: MouseRegion(
            onEnter: (_) => setState(() => _isHovered = true),
            onExit: (_) => setState(() => _isHovered = false),
            child: GestureDetector(
              onTap: widget.onTap,
              child: AnimatedContainer(
                duration: AppAnimations.durationFast,
                margin: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 10,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: widget.delivery.delivered
                      ? Colors.green.withValues(alpha: 0.15)
                      : (_isHovered || widget.isSelected
                          ? Theme.of(context).colorScheme.surfaceContainer
                          : Colors.transparent),
                  boxShadow: (_isHovered || widget.isSelected) && !widget.delivery.delivered
                      ? [
                          BoxShadow(
                            color: Colors.black.withValues(
                              alpha: isDark ? 0.3 : 0.08,
                            ),
                            blurRadius: 8,
                            offset: const Offset(0, 4),
                          ),
                        ]
                      : [],
                ),
                padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 24),
                child: Column(
                  children: [
                    // Main delivery info row
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // Left accent bar (taller for better visual balance)
                        Container(
                          width: 6,
                          height: 80,
                          decoration: BoxDecoration(
                            color: statusColor,
                            borderRadius: BorderRadius.circular(3),
                          ),
                        ),
                        const SizedBox(width: 16),
                        // Delivery info
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // Customer Name (20% larger - 24px)
                              Text(
                                widget.delivery.name,
                                style: Theme.of(context)
                                    .textTheme
                                    .titleLarge
                                    ?.copyWith(
                                      fontWeight: FontWeight.w600,
                                      fontSize: 24,
                                    ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              const SizedBox(height: 10),
                              // Address (20% larger - 18px)
                              Text(
                                widget.delivery.deliveryAddress
                                        ?.formattedAddress ??
                                    'No address',
                                style: Theme.of(context)
                                    .textTheme
                                    .bodyLarge
                                    ?.copyWith(
                                      fontSize: 18,
                                    ),
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}