import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../../theme.dart';
import '../../widgets/s_card.dart';
import '../../widgets/s_button.dart';
import '../../widgets/s_progress_bar.dart';
import '../../model/quiz_state.dart';
import '../../router.dart';
import 's10_concern_insight.dart';
import '_quiz_nav.dart';

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

class _State extends State<ConcernsScreen> {
  final _selected = <String>[];

  static const _opts = [
    (Icons.face_retouching_natural, 'Breakouts', 'Acne, blackheads, congestion'),
    (Icons.cloud_rounded, 'Dullness', 'Tired, uneven, grey skin'),
    (Icons.air_rounded, 'Dryness', 'Tight, rough, flaking'),
    (Icons.format_align_justify_rounded, 'Fine lines', 'Wrinkles, loss of firmness'),
    (Icons.adjust_rounded, 'Dark spots', 'Hyperpigmentation, melasma'),
    (Icons.local_fire_department_rounded, 'Redness', 'Sensitivity, flushing, rosacea'),
  ];

  void _toggle(String label) {
    setState(() {
      if (_selected.contains(label)) {
        _selected.remove(label);
      } else if (_selected.length < 3) {
        _selected.add(label);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SColors.bgSurface,
      body: SafeArea(
        child: Column(
          children: [
            QuizNav(step: 4, total: 7, onBack: () => Navigator.of(context).pop()),
            const SizedBox(height: 10),
            Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: SProgressBar(value: 4 / 7)),
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.fromLTRB(16, 24, 16, 0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text('Your skin\nconcerns?', style: SText.headline2(SColors.textHead))
                                  .animate().fadeIn(duration: 350.ms),
                              const Spacer(),
                              AnimatedContainer(
                                duration: const Duration(milliseconds: 200),
                                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                decoration: BoxDecoration(
                                  color: _selected.isNotEmpty ? SColors.primary : SColors.borderLight,
                                  borderRadius: BorderRadius.circular(20),
                                ),
                                child: Text(
                                  '${_selected.length}/3',
                                  style: SText.caption(
                                    _selected.isNotEmpty ? Colors.white : SColors.textSub,
                                  ).copyWith(fontWeight: FontWeight.w700),
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 6),
                          Text('Pick up to 3 that bother you most.', style: SText.subtitle(SColors.textSub))
                              .animate().fadeIn(duration: 350.ms, delay: 80.ms),
                          const SizedBox(height: 20),
                        ],
                      ),
                    ),
                    ..._opts.asMap().entries.map((e) {
                      final i = e.key; final (icon, label, sub) = e.value;
                      final isSel = _selected.contains(label);
                      final disabled = !isSel && _selected.length >= 3;
                      return Padding(
                        padding: const EdgeInsets.only(bottom: 8),
                        child: Opacity(
                          opacity: disabled ? 0.35 : 1.0,
                          child: SCard(
                            icon: icon, label: label, sub: sub,
                            isSelected: isSel,
                            onTap: disabled ? () {} : () => _toggle(label),
                          ).animate().fadeIn(duration: 280.ms, delay: (100 + i * 55).ms)
                           .slideX(begin: 0.03, end: 0, duration: 280.ms),
                        ),
                      );
                    }),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 12, 16, 20),
              child: SButton(
                label: 'CONTINUE',
                enabled: _selected.isNotEmpty,
                onTap: _selected.isNotEmpty ? () {
                  widget.state.concerns = List.from(_selected);
                  Navigator.of(context).push(slideRoute(ConcernInsightScreen(state: widget.state)));
                } : null,
              ),
            ),
          ],
        ),
      ),
    );
  }
}