import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_tabler_icons/flutter_tabler_icons.dart';
import 'package:hyper_local/config/theme.dart';
import 'package:hyper_local/screens/my_orders/model/order_status.dart';
import 'package:hyper_local/utils/widgets/custom_button.dart';
import 'package:hyper_local/utils/widgets/custom_image_container.dart';

import '../../../config/helper.dart';

class OrderDeliveryCard extends StatelessWidget {
  final String status;
  final String dateTime;
  final List<String> productImages;
  final VoidCallback onRateOrder;
  final VoidCallback onTrackOrder;
  final bool isDelivered;
  final bool isDeliveryBoyAssigned;
  final String orderSlug;
  final String orderId;
  final String? deliveryType;

  const OrderDeliveryCard({
    super.key,
    required this.status,
    required this.dateTime,
    required this.productImages,
    required this.onRateOrder,
    required this.onTrackOrder,
    required this.isDelivered,
    required this.isDeliveryBoyAssigned,
    required this.orderSlug,
    required this.orderId,
    this.deliveryType,
  });

  @override
  Widget build(BuildContext context) {
    final String deliveryTypeDisplay = _getDeliveryTypeDisplay(deliveryType);
    final dark = Theme.of(context).brightness == Brightness.dark;
    final orderStatus = OrderStatusX.fromString(status);
    final palette = orderStatus.palette(context);

    // Custom fulfillment badge styling
    final isPickup = deliveryTypeDisplay.toLowerCase() == 'pickup';
    final fulfillmentBg = isPickup
        ? (dark ? const Color(0xFF064E3B) : const Color(0xFFD1FAE5))
        : (dark ? const Color(0xFF1E3A8A) : const Color(0xFFDBEAFE));
    final fulfillmentFg = isPickup
        ? (dark ? const Color(0xFF6EE7B7) : const Color(0xFF065F46))
        : (dark ? const Color(0xFF93C5FD) : const Color(0xFF1E40AF));
    final fulfillmentIcon = isPickup ? TablerIcons.building_store : TablerIcons.truck_delivery;

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(16.r),
        border: Border.all(
          color: Theme.of(context).colorScheme.outline.withValues(alpha: dark ? 0.15 : 0.08),
          width: 1,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: dark ? 0.05 : 0.02),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Padding(
        padding: EdgeInsets.all(16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Header Row
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // Order ID
                Text(
                  'Order #$orderId',
                  style: TextStyle(
                    fontSize: isTablet(context) ? 18.sp : 13.sp,
                    color: Theme.of(context).colorScheme.onSurface,
                    fontWeight: FontWeight.w700,
                    letterSpacing: 0.2,
                  ),
                ),
                // Fulfillment Type Badge
                if (deliveryTypeDisplay.isNotEmpty)
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
                    decoration: BoxDecoration(
                      color: fulfillmentBg,
                      borderRadius: BorderRadius.circular(6.r),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(
                          fulfillmentIcon,
                          size: 12.sp,
                          color: fulfillmentFg,
                        ),
                        SizedBox(width: 4.w),
                        Text(
                          deliveryTypeDisplay,
                          style: TextStyle(
                            fontSize: isTablet(context) ? 14.sp : 10.sp,
                            color: fulfillmentFg,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                  ),
              ],
            ),
            SizedBox(height: 12.h),

            // Status & Time Row
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // Frosted status badge
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 5.h),
                  decoration: BoxDecoration(
                    color: palette.bg,
                    borderRadius: BorderRadius.circular(20.r),
                    border: Border.all(
                      color: palette.accent.withValues(alpha: 0.2),
                      width: 0.5,
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(
                        orderStatus.icon,
                        size: 12.sp,
                        color: palette.fg,
                      ),
                      SizedBox(width: 4.w),
                      Text(
                        status,
                        style: TextStyle(
                          fontSize: isTablet(context) ? 14.sp : 11.sp,
                          fontWeight: FontWeight.w700,
                          color: palette.fg,
                        ),
                      ),
                    ],
                  ),
                ),

                // Date Time
                Text(
                  dateTime,
                  style: TextStyle(
                    color: Theme.of(context).colorScheme.onSurfaceVariant.withValues(alpha: 0.7),
                    fontSize: isTablet(context) ? 15.sp : 11.5.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),

            SizedBox(height: 14.h),
            const Divider(height: 1, thickness: 0.5),
            SizedBox(height: 14.h),

            // Product Images List
            SizedBox(
              height: 72.h,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: productImages.length,
                itemBuilder: (context, index) {
                  final imageUrl = productImages[index];
                  return Padding(
                    padding: EdgeInsets.only(
                      right: index < productImages.length - 1 ? 12.w : 0,
                    ),
                    child: Container(
                      width: 72.w,
                      height: 72.h,
                      decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.surfaceContainerHighest,
                        borderRadius: BorderRadius.circular(10.r),
                        border: Border.all(
                          color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.1),
                          width: 0.5,
                        ),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10.r),
                        child: imageUrl.isNotEmpty
                            ? CustomImageContainer(
                                imagePath: imageUrl,
                                fit: BoxFit.contain,
                              )
                            : Icon(
                                TablerIcons.package,
                                size: 24.sp,
                                color: Theme.of(context).colorScheme.onSurfaceVariant,
                              ),
                      ),
                    ),
                  );
                },
              ),
            ),

            SizedBox(height: 14.h),
            const Divider(height: 1, thickness: 0.5),
            SizedBox(height: 14.h),

            // Action Button
            if (isDelivered)
              GestureDetector(
                onTap: onRateOrder,
                child: SizedBox(
                  height: 44.h,
                  width: double.infinity,
                  child: CustomButton(
                    onPressed: onRateOrder,
                    child: Text(
                      'Rate Order',
                      style: TextStyle(
                        fontSize: isTablet(context) ? 18.sp : 14.sp,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              )
            else if (!isDelivered && isDeliveryBoyAssigned)
              GestureDetector(
                onTap: onTrackOrder,
                child: SizedBox(
                  height: 44.h,
                  width: double.infinity,
                  child: CustomButton(
                    onPressed: onTrackOrder,
                    child: Text(
                      'Track your order',
                      style: TextStyle(
                        fontSize: isTablet(context) ? 18.sp : 14.sp,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              )
            else
              Container(
                height: 44.h,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: AppTheme.primaryColor.withValues(alpha: 0.08),
                  borderRadius: BorderRadius.circular(8.r),
                  border: Border.all(
                    color: AppTheme.primaryColor.withValues(alpha: 0.15),
                    width: 1,
                  ),
                ),
                alignment: Alignment.center,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'View Details',
                      style: TextStyle(
                        fontSize: isTablet(context) ? 18.sp : 14.sp,
                        fontWeight: FontWeight.w600,
                        color: AppTheme.primaryColor,
                      ),
                    ),
                    SizedBox(width: 4.w),
                    Icon(
                      TablerIcons.chevron_right,
                      size: 15.sp,
                      color: AppTheme.primaryColor,
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }

  String _getDeliveryTypeDisplay(String? type) {
    if (type == null) return '';
    switch (type.toLowerCase()) {
      case 'pos':
        return 'POS';
      case 'regular':
      case 'delivery':
        return 'Delivery';
      case 'pickup':
        return 'Pickup';
      default:
        return capitalizeFirstLetter(type);
    }
  }
}