import 'package:flutter/material.dart';
import 'package:sigap/src/features/personalization/data/models/index.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/sizes.dart';

class RoleSelector extends StatelessWidget {
  final List<RoleModel> roles;
  final String selectedRoleId;
  final Function(String) onRoleSelected;

  const RoleSelector({
    super.key,
    required this.roles,
    required this.selectedRoleId,
    required this.onRoleSelected,
  });

  @override
  Widget build(BuildContext context) {
    if (roles.isEmpty) {
      return const Center(child: CircularProgressIndicator());
    }

    return ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: roles.length,
      itemBuilder: (context, index) {
        final role = roles[index];
        final isSelected = role.id == selectedRoleId;

        return GestureDetector(
          onTap: () => onRoleSelected(role.id),
          child: Container(
            margin: const EdgeInsets.only(bottom: TSizes.spaceBtwItems),
            padding: const EdgeInsets.all(TSizes.md),
            decoration: BoxDecoration(
              color:
                  isSelected ? TColors.primary.withOpacity(0.1) : Colors.white,
              borderRadius: BorderRadius.circular(TSizes.borderRadiusMd),
              border: Border.all(
                color: isSelected ? TColors.primary : Colors.grey.shade300,
                width: isSelected ? 2 : 1,
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.1),
                  blurRadius: 5,
                  spreadRadius: 1,
                ),
              ],
            ),
            child: Row(
              children: [
                // Role Icon
                Container(
                  padding: const EdgeInsets.all(TSizes.md),
                  decoration: BoxDecoration(
                    color: isSelected ? TColors.primary : Colors.grey.shade100,
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    role.isOfficer ? Icons.security : Icons.person,
                    color: isSelected ? Colors.white : Colors.grey.shade600,
                  ),
                ),

                const SizedBox(width: TSizes.md),

                // Role Info
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        role.name,
                        style: TextStyle(
                          fontSize: TSizes.fontSizeMd,
                          fontWeight: FontWeight.bold,
                          color:
                              isSelected
                                  ? TColors.primary
                                  : TColors.textPrimary,
                        ),
                      ),
                      const SizedBox(height: TSizes.xs),
                      Text(
                        (role.description ?? '').length > 70
                            ? '${(role.description ?? '').substring(0, 70)}...'
                            : (role.description ?? ''),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: TSizes.fontSizeSm,
                          color: TColors.textSecondary,
                        ),
                      ),
                    ],
                  ),
                ),

                // Selected indicator
                if (isSelected)
                  const Icon(
                    Icons.check_circle,
                    color: TColors.primary,
                    size: TSizes.iconMd,
                  ),
              ],
            ),
          ),
        );
      },
    );
  }
}
