import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';

import 'package:design_system/design_system.dart';
import 'package:staff_home/src/domain/entities/shift.dart';
import 'package:core_localization/core_localization.dart';

class RecommendedShiftCard extends StatelessWidget {
  final Shift shift;

  const RecommendedShiftCard({super.key, required this.shift});

  @override
  Widget build(BuildContext context) {
    final recI18n = t.staff.home.recommended_card;
    final duration = 8;
    final totalPay = duration * shift.hourlyRate;

    return GestureDetector(
      onTap: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text(recI18n.applied_for(title: shift.title)),
            backgroundColor: Colors.green,
            duration: const Duration(seconds: 2),
          ),
        );
      },
      child: Container(
        width: 300,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: UiColors.border),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.02),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                Text(
                  recI18n.act_now,
                  style: const TextStyle(
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFFDC2626),
                  ),
                ),
                const SizedBox(width: 8),
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 2,
                  ),
                  decoration: BoxDecoration(
                    color: const Color(0xFFE8F0FF),
                    borderRadius: BorderRadius.circular(999),
                  ),
                  child: Text(
                    recI18n.one_day,
                    style: const TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF0047FF),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 12),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 44,
                  height: 44,
                  decoration: BoxDecoration(
                    color: const Color(0xFFE8F0FF),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Icon(
                    LucideIcons.calendar,
                    color: Color(0xFF0047FF),
                    size: 20,
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Text(
                              shift.title,
                              style: const TextStyle(
                                fontWeight: FontWeight.w600,
                                fontSize: 16,
                                color: UiColors.foreground,
                              ),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Text(
                            '\$${totalPay.round()}',
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: UiColors.foreground,
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 2),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            shift.clientName,
                            style: const TextStyle(
                              fontSize: 12,
                              color: UiColors.mutedForeground,
                            ),
                          ),
                          Text(
                            '\$${shift.hourlyRate.toStringAsFixed(0)}/hr • ${duration}h',
                            style: const TextStyle(
                              fontSize: 10,
                              color: UiColors.mutedForeground,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 12),
            Row(
              children: [
                const Icon(
                  LucideIcons.calendar,
                  size: 14,
                  color: UiColors.mutedForeground,
                ),
                const SizedBox(width: 4),
                Text(
                  recI18n.today,
                  style: const TextStyle(
                    fontSize: 12,
                    color: UiColors.mutedForeground,
                  ),
                ),
                const SizedBox(width: 12),
                const Icon(
                  LucideIcons.clock,
                  size: 14,
                  color: UiColors.mutedForeground,
                ),
                const SizedBox(width: 4),
                Text(
                  recI18n.time_range(
                    start: shift.startTime,
                    end: shift.endTime,
                  ),
                  style: const TextStyle(
                    fontSize: 12,
                    color: UiColors.mutedForeground,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 4),
            Row(
              children: [
                const Icon(
                  LucideIcons.mapPin,
                  size: 14,
                  color: UiColors.mutedForeground,
                ),
                const SizedBox(width: 4),
                Expanded(
                  child: Text(
                    shift.locationAddress ?? shift.location,
                    style: const TextStyle(
                      fontSize: 12,
                      color: UiColors.mutedForeground,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
