import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/application/common/str_extensions.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/features/profile/profile_main/domain/bloc/user_profile_state.dart';

class UserRolesWidget extends StatefulWidget {
  final List<RoleState> roles;

  const UserRolesWidget({super.key, required this.roles});

  @override
  State<UserRolesWidget> createState() => _UserRolesWidgetState();
}

class _UserRolesWidgetState extends State<UserRolesWidget> {
  int expandedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.symmetric(horizontal: 12),
      decoration: KwBoxDecorations.primaryDark,
      child: Column(
        children: [
          const Gap(12),
          Row(
            children: [
              Text(
                'about_me'.tr(),
                style: AppTextStyles.bodyMediumReg.copyWith(
                  color: Colors.white,
                ),
              ),
              const Spacer(),
              GestureDetector(
                onTap: () {
                  context.router.push(RoleRoute());
                },
                child: Assets.images.userProfile.editPhoto.svg(
                  height: 16,
                  width: 16,
                  colorFilter:
                      const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                ),
              ),
            ],
          ),
          if (widget.roles.isEmpty) const Gap(12),
          for (var i = 0; i < widget.roles.length; i++) ...[
            _buildRole(i, context),
            if (i != widget.roles.length - 1) ...[
              const Divider(color: AppColors.darkBgStroke),
            ],
          ]
        ],
      ),
    );
  }

  Widget _buildRole(int index, BuildContext context) {
    return Column(
      children: [
        _buildRoleHeader(index, context, widget.roles[index].name),
        _buildRoleExpandedInfo(expandedIndex == index, widget.roles[index]),
      ],
    );
  }

  GestureDetector _buildRoleHeader(
    int index,
    BuildContext context,
    String roleName,
  ) {
    return GestureDetector(
      onTap: () {
        setState(() {
          expandedIndex = expandedIndex == index ? -1 : index;
        });
      },
      child: Container(
        padding: const EdgeInsets.only(bottom: 12, top: 12),
        color: Colors.transparent,
        child: Row(
          children: [
            Text(
              roleName,
              style: (expandedIndex == index
                      ? AppTextStyles.captionBold
                      : AppTextStyles.captionReg)
                  .copyWith(
                color: Colors.white,
              ),
            ),
            const Spacer(),
            AnimatedRotation(
              turns: expandedIndex == index ? 0.5 : 0,
              duration: const Duration(milliseconds: 200),
              child: (expandedIndex == index
                      ? Assets.images.userProfile.chevronDownSelected
                      : Assets.images.userProfile.chevronDown)
                  .svg(),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildRoleExpandedInfo(bool isExpanded, RoleState role) {
    return AnimatedSize(
      alignment: Alignment.topCenter,
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeInOut,
      child: isExpanded
          ? Column(
              children: [
                _buildRoleTextRow('${'role'.tr()}:', role.name),
                _buildRoleTextRow('${'experience'.tr()}:',
                    '${role.experience} ${'years'.tr()}'),
                _buildRoleTextRow('level:', role.level.name.capitalize()),
              ],
            )
          : SizedBox(
              height: 0,
              width: MediaQuery.of(context).size.width,
            ),
    );
  }

  Widget _buildRoleTextRow(String key, String value) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Row(children: [
        Text(
          key,
          style: AppTextStyles.bodySmallReg.copyWith(
            color: AppColors.darkBgInactive,
          ),
        ),
        Expanded(
          child: Text(
            value,
            maxLines: 1,
            textAlign: TextAlign.end,
            overflow: TextOverflow.ellipsis,
            style: AppTextStyles.bodySmallMed.copyWith(
              color: Colors.white,
            ),
          ),
        ),
      ]),
    );
  }
}
