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 '../../model/quiz_state.dart';
import '../../router.dart';
import 's08_age.dart';

class SkinInsightScreen extends StatelessWidget {
  final QuizState state;
  const SkinInsightScreen({super.key, required this.state});

  static const _insights = {
    'Oily': ('💧', 'Oily skin ages slower!', 'The extra sebum keeps skin moisturised naturally. With the right routine, you can have a balanced, glowing complexion.'),
    'Dry': ('🌸', 'Dry skin loves rich textures.', 'Ceramides and hyaluronic acid are your BFFs. We\'ll build a routine that keeps your moisture barrier strong.'),
    'Combination': ('⚖️', 'Combination skin needs balance.', 'The trick is targeted treatment — light hydration for the T-zone, richer care for dry areas.'),
    'Normal': ('✨', 'Normal skin is rare!', 'Less than 15% of people have it. The goal is maintaining what you\'ve got with a simple, consistent routine.'),
    'Not sure': ('🔍', 'Let\'s figure it out together.', 'Your skin tells a story — we\'ll decode it for you with a quick deep dive into your habits and concerns.'),
  };

  @override
  Widget build(BuildContext context) {
    final (emoji, title, body) = _insights[state.skinType] ?? _insights['Normal']!;

    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: SafeArea(
        child: Column(
          children: [
            // Illustration zone
            Expanded(
              flex: 42,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Mascot(mood: MascotMood.think, size: 160)
                      .animate().fadeIn(duration: 500.ms).slideY(begin: 0.06, end: 0),
                  Positioned(
                    top: 24,
                    right: 50,
                    child: _bubble(emoji)
                        .animate().fadeIn(duration: 400.ms, delay: 600.ms)
                        .scaleXY(begin: 0.5, end: 1.0, duration: 400.ms, curve: Curves.elasticOut),
                  ),
                ],
              ),
            ),
            // Content zone
            Expanded(
              flex: 58,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 8),
                    _badge('Did you know?')
                        .animate().fadeIn(duration: 350.ms, delay: 100.ms),
                    const SizedBox(height: 14),
                    Text(title, style: SText.headline2(SColors.textHead))
                        .animate().fadeIn(duration: 400.ms, delay: 180.ms)
                        .slideY(begin: 0.05, end: 0),
                    const SizedBox(height: 10),
                    Text(body, style: SText.subtitle(SColors.textSub))
                        .animate().fadeIn(duration: 400.ms, delay: 260.ms),
                    const Spacer(),
                    SButton(
                      label: 'COOL, GOT IT',
                      onTap: () => Navigator.of(context).push(slideRoute(AgeScreen(state: state))),
                    ).animate().fadeIn(duration: 400.ms, delay: 400.ms),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _bubble(String emoji) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: SColors.bgSurface,
        shape: BoxShape.circle,
        border: Border.all(color: SColors.borderLight, width: 1.5),
        boxShadow: [BoxShadow(color: Colors.black.withAlpha(10), blurRadius: 8)],
      ),
      child: Text(emoji, style: const TextStyle(fontSize: 28)),
    );
  }

  Widget _badge(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: SColors.primaryLight,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Text(label, style: SText.caption(SColors.primary).copyWith(fontWeight: FontWeight.w700)),
    );
  }
}