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

import '../../../core/theme/app_theme.dart';
import '../onboarding_state.dart';
import '../widgets/onboarding_scaffold.dart';

class ChildStep extends ConsumerStatefulWidget {
  const ChildStep({
    super.key,
    required this.step,
    required this.onBack,
    required this.onNext,
  });

  final int step;
  final VoidCallback onBack;
  final VoidCallback onNext;

  @override
  ConsumerState<ChildStep> createState() => _ChildStepState();
}

class _ChildStepState extends ConsumerState<ChildStep> {
  late final TextEditingController _nameController;

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController(
      text: ref.read(onboardingDraftProvider).childName,
    );
  }

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final draft = ref.watch(onboardingDraftProvider);
    final notifier = ref.read(onboardingDraftProvider.notifier);

    return OnboardingScaffold(
      step: widget.step,
      title: 'Premier enfant',
      subtitle: 'Créez le profil de votre enfant',
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextField(
                autofocus: true,
                controller: _nameController,
                textCapitalization: TextCapitalization.words,
                decoration: const InputDecoration(
                  labelText: 'Prénom',
                  hintText: 'Ex. Léa',
                ),
                onChanged: notifier.setChildName,
              ),
              const SizedBox(height: 24),
              Text(
                'Couleur',
                style: Theme.of(context).textTheme.titleSmall,
              ),
              const SizedBox(height: 12),
              Wrap(
                spacing: 12,
                runSpacing: 12,
                children: AppTheme.childColors.map((hex) {
                  final selected = draft.color == hex;
                  return GestureDetector(
                    onTap: () => notifier.setColor(hex),
                    child: AnimatedContainer(
                      duration: const Duration(milliseconds: 150),
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        color: AppTheme.parseColor(hex),
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: selected ? Colors.black87 : Colors.transparent,
                          width: 3,
                        ),
                        boxShadow: selected
                            ? [
                                BoxShadow(
                                  color: AppTheme.parseColor(hex)
                                      .withValues(alpha: 0.5),
                                  blurRadius: 8,
                                ),
                              ]
                            : null,
                      ),
                      child: selected
                          ? const Icon(Icons.check, color: Colors.white)
                          : null,
                    ),
                  );
                }).toList(),
              ),
              const Spacer(),
              Center(
                child: CircleAvatar(
                  radius: 40,
                  backgroundColor: AppTheme.parseColor(draft.color),
                  child: Text(
                    draft.childName.isNotEmpty
                        ? draft.childName[0].toUpperCase()
                        : '?',
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      bottom: Row(
        children: [
          TextButton(onPressed: widget.onBack, child: const Text('Retour')),
          const Spacer(),
          FilledButton(onPressed: widget.onNext, child: const Text('Suivant')),
        ],
      ),
    );
  }
}