import 'package:flutter/material.dart';
import 'package:slrpg_app/l10n/app_localizations.dart';
import '../../../../core/theme/app_theme.dart';
import '../../domain/entities/avatar_config.dart';
import 'avatar_renderer.dart';

class AvatarEditor extends StatefulWidget {
  final AvatarConfig initialConfig;
  final ValueChanged<AvatarConfig> onChanged;

  const AvatarEditor({
    super.key,
    required this.initialConfig,
    required this.onChanged,
  });

  @override
  State<AvatarEditor> createState() => _AvatarEditorState();
}

class _AvatarEditorState extends State<AvatarEditor> {
  late String _gender;
  late int _variant;

  @override
  void initState() {
    super.initState();
    _gender = widget.initialConfig.gender;
    _variant = widget.initialConfig.variant;
  }

  void _update(String gender, int variant) {
    setState(() {
      _gender = gender;
      _variant = variant;
    });
    widget.onChanged(AvatarConfig(gender: _gender, variant: _variant));
  }

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Column(
      children: [
        Container(
          height: 200,
          alignment: Alignment.center,
          color: AppTheme.surfaceColor,
          child: AvatarRenderer(
            config: AvatarConfig(gender: _gender, variant: _variant),
            size: 160,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(16),
          child: SegmentedButton<String>(
            segments: [
              ButtonSegment(value: 'male', label: Text(l10n.genderMale)),
              ButtonSegment(value: 'female', label: Text(l10n.genderFemale)),
            ],
            selected: {_gender},
            onSelectionChanged: (Set<String> newSelection) {
              _update(newSelection.first, 1);
            },
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (states) => states.contains(MaterialState.selected)
                      ? AppTheme.primaryColor
                      : Colors.transparent),
            ),
          ),
        ),
        Expanded(
          child: GridView.builder(
            padding: const EdgeInsets.all(16),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              crossAxisSpacing: 12,
              mainAxisSpacing: 12,
            ),
            itemCount: 8,
            itemBuilder: (context, index) {
              final variantNum = index + 1;
              final isSelected = _variant == variantNum;

              return GestureDetector(
                onTap: () => _update(_gender, variantNum),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: isSelected
                          ? AppTheme.primaryColor
                          : Colors.transparent,
                      width: 3,
                    ),
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.white10,
                  ),
                  padding: const EdgeInsets.all(4),
                  child: Image.asset(
                    'assets/images/avatars/$_gender/$variantNum.png',
                    fit: BoxFit.contain,
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}
