import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../../theme.dart';
import '../../widgets/mascot.dart';
import '../../widgets/s_button.dart';
import '../../widgets/confetti.dart';
import '../../model/quiz_state.dart';
import '../../router.dart';
import 's16_routine_am.dart';

class ResultScreen extends StatefulWidget {
  final QuizState state;
  const ResultScreen({super.key, required this.state});
  @override
  State<ResultScreen> createState() => _State();
}

class _State extends State<ResultScreen> {
  bool _showConfetti = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 2500), () {
      if (mounted) setState(() => _showConfetti = false);
    });
  }

  String get _firstName => widget.state.name.split(' ').first;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: Stack(
        children: [
          SafeArea(
            child: Column(
              children: [
                // Mascot zone — KEY MOMENT
                Expanded(
                  flex: 38,
                  child: Container(
                    width: double.infinity,
                    color: SColors.primaryLight,
                    child: Center(
                      child: Mascot(mood: MascotMood.celebrate, size: 180)
                          .animate()
                          .fadeIn(duration: 700.ms)
                          .slideY(begin: 0.1, end: 0, duration: 700.ms, curve: Curves.easeOut),
                    ),
                  ),
                ),
                // Content
                Expanded(
                  flex: 62,
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SizedBox(height: 20),
                        Text("Your skin report\nis ready, $_firstName! ✨",
                            style: SText.headline2(SColors.textHead))
                            .animate().fadeIn(duration: 500.ms, delay: 300.ms)
                            .slideY(begin: 0.06, end: 0),
                        const SizedBox(height: 6),
                        Text("Based on your answers, here's what we found.",
                            style: SText.subtitle(SColors.textSub))
                            .animate().fadeIn(duration: 500.ms, delay: 420.ms),
                        const SizedBox(height: 20),
                        _profileCard()
                            .animate().fadeIn(duration: 500.ms, delay: 500.ms)
                            .slideY(begin: 0.05, end: 0),
                        const SizedBox(height: 12),
                        _skinScoreCard()
                            .animate().fadeIn(duration: 500.ms, delay: 600.ms)
                            .slideY(begin: 0.05, end: 0),
                        const SizedBox(height: 24),
                        SButton(
                          label: 'SEE MY ROUTINE',
                          onTap: () => Navigator.of(context).push(slideRoute(RoutineAmScreen(state: widget.state))),
                        ).animate().fadeIn(duration: 400.ms, delay: 700.ms),
                        const SizedBox(height: 24),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          if (_showConfetti) const Positioned.fill(child: IgnorePointer(child: ConfettiOverlay())),
        ],
      ),
    );
  }

  Widget _profileCard() {
    final rows = [
      ('Skin type', widget.state.skinType),
      ('Age range', widget.state.age),
      ('Concerns', widget.state.concerns.join(', ')),
      ('Main goal', widget.state.goal),
    ];
    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: SColors.bgSurface,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: SColors.borderLight, width: 1.5),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('YOUR SKIN PROFILE', style: SText.caption(SColors.textSub).copyWith(fontWeight: FontWeight.w700, letterSpacing: 0.8)),
          const SizedBox(height: 12),
          ...rows.where((r) => r.$2.isNotEmpty).map((r) => Padding(
            padding: const EdgeInsets.only(bottom: 8),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(r.$1, style: SText.body(SColors.textSub)),
                const Spacer(),
                Flexible(child: Text(r.$2, textAlign: TextAlign.end,
                    style: SText.body(SColors.textHead).copyWith(fontWeight: FontWeight.w700))),
              ],
            ),
          )),
        ],
      ),
    );
  }

  Widget _skinScoreCard() {
    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: SColors.primaryLight,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: SColors.borderLight),
      ),
      child: Row(
        children: [
          Container(
            width: 64, height: 64,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: SColors.bgSurface,
              border: Border.all(color: SColors.primary, width: 2),
            ),
            child: Center(
              child: Text('87', style: SText.headline2(SColors.primary).copyWith(fontSize: 22)),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Skin potential score', style: SText.cardLabel(SColors.textHead)),
                const SizedBox(height: 4),
                Text('With the right routine, you can reach 95+ in 4 weeks.',
                    style: SText.cardSub(SColors.textSub)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}