import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:krow_domain/krow_domain.dart';

/// A widget that allows clients to reorder recent shifts.
class ReorderWidget extends StatelessWidget {
  /// Recent completed orders for reorder.
  final List<ReorderItem> orders;

  /// Callback when a reorder button is pressed.
  final Function(Map<String, dynamic> shiftData) onReorderPressed;

  /// Creates a [ReorderWidget].
  const ReorderWidget({
    super.key,
    required this.orders,
    required this.onReorderPressed,
  });

  @override
  Widget build(BuildContext context) {
    final TranslationsClientHomeReorderEn i18n = t.client_home.reorder;

    final List<ReorderItem> recentOrders = orders;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          i18n.title,
          style: UiTypography.footnote1b.textSecondary.copyWith(
            letterSpacing: 0.5,
          ),
        ),
        const SizedBox(height: UiConstants.space2),
        SizedBox(
          height: 140,
          child: ListView.separated(
            scrollDirection: Axis.horizontal,
            itemCount: recentOrders.length,
            separatorBuilder: (BuildContext context, int index) =>
                const SizedBox(width: UiConstants.space3),
            itemBuilder: (BuildContext context, int index) {
              final ReorderItem order = recentOrders[index];
              final double totalCost =
                  order.hourlyRate * order.hours * order.workers;

              return Container(
                width: 260,
                padding: const EdgeInsets.all(UiConstants.space3),
                decoration: BoxDecoration(
                  color: UiColors.white,
                  borderRadius: UiConstants.radiusLg,
                  border: Border.all(color: UiColors.border),
                  boxShadow: <BoxShadow>[
                    BoxShadow(
                      color: UiColors.black.withValues(alpha: 0.02),
                      blurRadius: 4,
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Expanded(
                          child: Row(
                            children: <Widget>[
                              Container(
                                width: 36,
                                height: 36,
                                decoration: BoxDecoration(
                                  color: UiColors.primary.withValues(
                                    alpha: 0.1,
                                  ),
                                  borderRadius: UiConstants.radiusLg,
                                ),
                                child: const Icon(
                                  UiIcons.building,
                                  size: 16,
                                  color: UiColors.primary,
                                ),
                              ),
                              const SizedBox(width: UiConstants.space2),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(
                                      order.title,
                                      style: UiTypography.body2b,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                    Text(
                                      order.location,
                                      style:
                                          UiTypography.footnote1r.textSecondary,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Text(
                              '\$${totalCost.toStringAsFixed(0)}',
                              style: UiTypography.body1b,
                            ),
                            Text(
                              i18n.per_hr(
                                    amount: order.hourlyRate.toString(),
                                  ) +
                                  ' · ${order.hours}h',
                              style: UiTypography.footnote2r.textSecondary,
                            ),
                          ],
                        ),
                      ],
                    ),
                    const SizedBox(height: UiConstants.space3),
                    Row(
                      children: <Widget>[
                        _Badge(
                          icon: UiIcons.success,
                          text: order.type,
                          color: const Color(0xFF2563EB),
                          bg: const Color(0xFF2563EB),
                          textColor: UiColors.white,
                        ),
                        const SizedBox(width: UiConstants.space2),
                        _Badge(
                          icon: UiIcons.building,
                          text: '${order.workers}',
                          color: const Color(0xFF334155),
                          bg: const Color(0xFFF1F5F9),
                          textColor: const Color(0xFF334155),
                        ),
                      ],
                    ),
                    const Spacer(),
                    SizedBox(
                      height: 28,
                      width: double.infinity,
                      child: ElevatedButton.icon(
                        onPressed: () => onReorderPressed(<String, dynamic>{
                          'orderId': order.orderId,
                          'title': order.title,
                          'location': order.location,
                          'hourlyRate': order.hourlyRate,
                          'hours': order.hours,
                          'workers': order.workers,
                          'type': order.type,
                        }),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: UiColors.primary,
                          foregroundColor: UiColors.white,
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: UiConstants.radiusMd,
                          ),
                          elevation: 0,
                        ),
                        icon: const Icon(UiIcons.zap, size: 12),
                        label: Text(
                          i18n.reorder_button,
                          style: UiTypography.footnote1m,
                        ),
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

class _Badge extends StatelessWidget {
  final IconData icon;
  final String text;
  final Color color;
  final Color bg;
  final Color textColor;

  const _Badge({
    required this.icon,
    required this.text,
    required this.color,
    required this.bg,
    required this.textColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: UiConstants.space2,
        vertical: UiConstants.space1,
      ),
      decoration: BoxDecoration(color: bg, borderRadius: UiConstants.radiusSm),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Icon(icon, size: 10, color: bg == textColor ? UiColors.white : color),
          const SizedBox(width: UiConstants.space1),
          Text(text, style: UiTypography.footnote2b.copyWith(color: textColor)),
        ],
      ),
    );
  }
}
