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

import 'package:core_localization/core_localization.dart';
import 'package:krow_domain/krow_domain.dart';

class AttireGrid extends StatelessWidget {
  final List<AttireItem> items;
  final List<String> selectedIds;
  final Map<String, String> photoUrls;
  final Map<String, bool> uploadingStatus;
  final Function(String id) onToggle;
  final Function(String id) onUpload;

  const AttireGrid({
    super.key,
    required this.items,
    required this.selectedIds,
    required this.photoUrls,
    required this.uploadingStatus,
    required this.onToggle,
    required this.onUpload,
  });

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: UiConstants.space3,
        mainAxisSpacing: UiConstants.space3,
        childAspectRatio: 0.8,
      ),
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        final AttireItem item = items[index];
        final bool isSelected = selectedIds.contains(item.id);
        final bool hasPhoto = photoUrls.containsKey(item.id);
        final bool isUploading = uploadingStatus[item.id] ?? false;

        return _buildCard(item, isSelected, hasPhoto, isUploading);
      },
    );
  }

  Widget _buildCard(
    AttireItem item,
    bool isSelected,
    bool hasPhoto,
    bool isUploading,
  ) {
    return Container(
      decoration: BoxDecoration(
        color: isSelected ? UiColors.primary.withOpacity(0.1) : Colors.transparent,
        borderRadius: UiConstants.radiusSm,
        border: Border.all(
          color: isSelected ? UiColors.primary : UiColors.border,
          width: 2,
        ),
      ),
      child: Stack(
        children: <Widget>[
          if (item.isMandatory)
            Positioned(
              top: UiConstants.space2,
              left: UiConstants.space2,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 6,
                  vertical: 2,
                ),
                decoration: BoxDecoration(
                  color: UiColors.destructive, // Red
                  borderRadius: UiConstants.radiusSm,
                ),
                child: Text(
                  t.staff_profile_attire.status.required,
                  style: UiTypography.body3m.copyWith( // 12px Medium -> Bold
                    fontWeight: FontWeight.bold,
                    fontSize: 9, 
                    color: UiColors.white,
                  ),
                ),
              ),
            ),
          if (hasPhoto)
            Positioned(
              top: UiConstants.space2,
              right: UiConstants.space2,
              child: Container(
                width: 20,
                height: 20,
                decoration: const BoxDecoration(
                  color: UiColors.primary,
                  shape: BoxShape.circle,
                ),
                child: const Center(
                  child: Icon(
                    UiIcons.check,
                    color: UiColors.white,
                    size: 12,
                  ),
                ),
              ),
            ),
          Padding(
            padding: const EdgeInsets.all(UiConstants.space3),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                GestureDetector(
                  onTap: () => onToggle(item.id),
                  child: Column(
                    children: <Widget>[
                      item.imageUrl != null
                          ? Container(
                              height: 80,
                              width: 80,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(UiConstants.radiusBase),
                                image: DecorationImage(
                                  image: NetworkImage(item.imageUrl!),
                                  fit: BoxFit.cover,
                                ),
                              ),
                            )
                          : Icon(
                              _getIcon(item.iconName),
                              size: 48,
                              color: UiColors.textPrimary, // Was charcoal
                            ),
                      const SizedBox(height: UiConstants.space2),
                      Text(
                        item.label,
                        textAlign: TextAlign.center,
                        style: UiTypography.body2m.copyWith(
                          color: UiColors.textPrimary,
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: UiConstants.space3),
                InkWell(
                  onTap: () => onUpload(item.id),
                  borderRadius: BorderRadius.circular(UiConstants.radiusBase),
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                      vertical: UiConstants.space2,
                      horizontal: UiConstants.space3,
                    ),
                    decoration: BoxDecoration(
                      color: hasPhoto
                          ? UiColors.primary.withOpacity(0.05)
                          : UiColors.white,
                      border: Border.all(
                        color: hasPhoto ? UiColors.primary : UiColors.border,
                      ),
                      borderRadius: BorderRadius.circular(UiConstants.radiusBase),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        if (isUploading)
                          const SizedBox(
                            width: 12,
                            height: 12,
                            child: CircularProgressIndicator(
                              strokeWidth: 2,
                              valueColor: AlwaysStoppedAnimation<Color>(UiColors.primary),
                            ),
                          )
                        else if (hasPhoto)
                          const Icon(
                            UiIcons.check,
                            size: 12,
                            color: UiColors.primary,
                          )
                        else
                          const Icon(
                            UiIcons.camera,
                            size: 12,
                            color: UiColors.textSecondary, // Was muted
                          ),
                        const SizedBox(width: 6),
                        Text(
                          isUploading
                              ? '...'
                              : hasPhoto
                                  ? t.staff_profile_attire.status.added
                                  : t.staff_profile_attire.status.add_photo,
                          style: UiTypography.body3m.copyWith(
                            color: hasPhoto ? UiColors.primary : UiColors.textSecondary,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                if (hasPhoto)
                  Padding(
                    padding: const EdgeInsets.only(top: 4),
                    child: Text(
                      t.staff_profile_attire.status.pending,
                      style: UiTypography.body3r.copyWith(
                        fontSize: 10,
                        color: UiColors.textSecondary,
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  IconData _getIcon(String? name) {
    switch (name) {
      case 'footprints':
        return UiIcons.footprints;
      case 'scissors':
        return UiIcons.scissors;
      case 'user':
        return UiIcons.user;
      case 'shirt':
        return UiIcons.shirt;
      case 'hardHat':
        return UiIcons.hardHat;
      case 'chefHat':
        return UiIcons.chefHat;
      default:
        return UiIcons.help;
    }
  }
}
