import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../theme.dart';
import '../widgets/s_button.dart';
import 'quiz/quiz_flow.dart';

class ResultScreen extends StatefulWidget {
  final QuizData data;
  const ResultScreen({super.key, required this.data});

  @override
  State<ResultScreen> createState() => _ResultScreenState();
}

class _ResultScreenState extends State<ResultScreen> {
  bool _revealed = false;

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 2000), () {
      if (mounted) setState(() => _revealed = true);
    });
  }

  String get _name => widget.data.name.split(' ').first;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: _revealed ? _resultView(context) : _analyzingView(),
    );
  }

  // ── Analysing screen ──────────────────────────────────────────────────────

  Widget _analyzingView() {
    return SafeArea(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Pulsing Shaynee avatar
            Image.asset('assets/images/shaynee_avatar.png', height: 120)
                .animate(onPlay: (c) => c.repeat(reverse: true))
                .scaleXY(begin: 0.95, end: 1.05, duration: 900.ms, curve: Curves.easeInOut),
            const SizedBox(height: 32),
            // Spinner (plain, no color)
            const SizedBox(
              width: 32,
              height: 32,
              child: CircularProgressIndicator(
                strokeWidth: 2.5,
                valueColor: AlwaysStoppedAnimation<Color>(SColors.primary),
              ),
            ),
            const SizedBox(height: 20),
            Text(
              'Analysing your skin...',
              style: SText.title(SColors.textHead),
            ),
            const SizedBox(height: 8),
            Text(
              'Building your personalised routine',
              style: SText.subtitle(SColors.textSub),
            ),
          ],
        ),
      ),
    );
  }

  // ── Result reveal screen ──────────────────────────────────────────────────

  Widget _resultView(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          // Mascot zone (top 35%) — KEY MOMENT
          Expanded(
            flex: 35,
            child: Container(
              color: SColors.primaryLight,
              width: double.infinity,
              child: Center(
                child: Image.asset(
                  'assets/images/shaynee_hero.png',
                  fit: BoxFit.contain,
                )
                    .animate()
                    .fadeIn(duration: 600.ms)
                    .slideY(begin: 0.08, end: 0, duration: 600.ms, curve: Curves.easeOut),
              ),
            ),
          ),

          // Content zone (bottom 65%)
          Expanded(
            flex: 65,
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 20),
                  Text(
                    'Your skin report is\nready, $_name! ✨',
                    style: SText.headline2(SColors.textHead),
                  )
                      .animate()
                      .fadeIn(duration: 500.ms, delay: 200.ms),
                  const SizedBox(height: 6),
                  Text(
                    'Based on your answers, here\'s what we recommend.',
                    style: SText.subtitle(SColors.textSub),
                  )
                      .animate()
                      .fadeIn(duration: 500.ms, delay: 300.ms),
                  const SizedBox(height: 20),

                  // Skin profile card
                  _profileCard()
                      .animate()
                      .fadeIn(duration: 500.ms, delay: 400.ms)
                      .slideY(begin: 0.05, end: 0),
                  const SizedBox(height: 12),

                  // Routine preview card
                  _routineCard()
                      .animate()
                      .fadeIn(duration: 500.ms, delay: 550.ms)
                      .slideY(begin: 0.05, end: 0),
                  const SizedBox(height: 24),

                  // CTA
                  SButton(
                    label: 'START MY ROUTINE',
                    onTap: () {},
                  )
                      .animate()
                      .fadeIn(duration: 400.ms, delay: 700.ms),
                  const SizedBox(height: 12),

                  // Skip link (plain text, no button)
                  Center(
                    child: GestureDetector(
                      onTap: () {},
                      child: Text(
                        'Save my results — create account',
                        style: SText.caption(SColors.textSub),
                      ),
                    ),
                  )
                      .animate()
                      .fadeIn(duration: 400.ms, delay: 800.ms),
                  const SizedBox(height: 24),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _profileCard() {
    final rows = [
      ('Skin type', widget.data.skinType),
      ('Age range', widget.data.age),
      ('Concerns', widget.data.concerns.join(', ')),
      ('Main goal', widget.data.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: 14),
          ...rows
              .where((r) => r.$2.isNotEmpty)
              .map((r) => _profileRow(r.$1, r.$2)),
        ],
      ),
    );
  }

  Widget _profileRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(label, style: SText.body(SColors.textSub)),
          const Spacer(),
          Flexible(
            child: Text(
              value,
              textAlign: TextAlign.end,
              style: SText.body(SColors.textHead).copyWith(fontWeight: FontWeight.w700),
            ),
          ),
        ],
      ),
    );
  }

  Widget _routineCard() {
    const steps = [
      ('🌅', 'Morning', 'Cleanser · Vitamin C · SPF 50'),
      ('🌙', 'Evening', 'Cleanser · Retinol · Moisturiser'),
      ('✨', 'Weekly', 'Exfoliant + Hydrating mask'),
    ];
    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 ROUTINE PREVIEW',
            style: SText.caption(SColors.textSub)
                .copyWith(fontWeight: FontWeight.w700, letterSpacing: 0.8),
          ),
          const SizedBox(height: 14),
          ...steps.map((s) => Padding(
            padding: const EdgeInsets.only(bottom: 12),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(s.$1, style: const TextStyle(fontSize: 20)),
                const SizedBox(width: 12),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(s.$2,
                        style: SText.cardLabel(SColors.textHead)),
                    const SizedBox(height: 2),
                    Text(s.$3, style: SText.cardSub(SColors.textSub)),
                  ],
                ),
              ],
            ),
          )),
        ],
      ),
    );
  }
}