import 'package:cims_apps/application/component/button/back_button_view.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view_model/risk_profile_view_model.dart';
import 'package:cims_apps/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart';
import 'package:flutter/material.dart';

class ResultsView extends StatelessWidget {
  final String totalScore;
  final RiskProfileResult typeResult;
  const ResultsView(
      {super.key, required this.typeResult, required this.totalScore});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 70,
        backgroundColor: Colors.white,
        surfaceTintColor: Colors.white,
        automaticallyImplyLeading: false,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const BackButtonView(),
            const Text('Risk Profile', textAlign: TextAlign.center),
            SizedBox(width: SizeConfig.width * 0.1)
          ],
        ),
        shape: const RoundedRectangleBorder(
            side: BorderSide(color: ColorPalette.slate200)),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Container(
                decoration: BoxDecoration(
                    color: typeResult.color,
                    image: DecorationImage(
                        image: AssetImage(typeResult.img),
                        alignment: Alignment.centerRight)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(24),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            typeResult.type,
                            style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 24,
                                color: ColorPalette.white),
                          ),
                          const SizedBox(
                            height: 16,
                          ),
                          const Text(
                            'Total Score :',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                                color: ColorPalette.white),
                          ),
                          Text(
                            totalScore,
                            style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 28,
                                color: ColorPalette.white),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(
              height: 24,
            ),
            Text(typeResult.desc,
                style: const TextStyle(
                    color: ColorPalette.slate500, fontSize: 16)),
            const SizedBox(
              height: 24,
            ),
            const Text(
              'Suitable Product',
              style: TextStyle(
                  color: ColorPalette.slate800,
                  fontWeight: FontWeight.bold,
                  fontSize: 16),
            ),
            const SizedBox(
              height: 16,
            ),
            Wrap(
              runSpacing: 16,
              children: typeResult.suitableProduct.map((e) {
                return Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    border: Border.all(color: ColorPalette.slate200),
                  ),
                  child: Row(
                    children: [
                      Container(
                          padding: const EdgeInsets.all(8),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: typeResult.color.withOpacity(0.1)),
                          child: Image.asset(e['icon'],
                              width: SizeConfig.width * 0.07,
                              color: typeResult.color)),
                      const SizedBox(
                        width: 12,
                      ),
                      Expanded(
                        child: Text(
                          e['desc'],
                          style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: ColorPalette.slate800),
                        ),
                      )
                    ],
                  ),
                );
              }).toList(),
            ),
            const SizedBox(
              height: 32,
            ),
            ButtonView(
              name: 'Re-test',
              onPressed: () {},
              marginVertical: 0,
              backgroundColor: ColorPalette.white,
              textColor: ColorPalette.primary,
              borderColor: ColorPalette.primary,
              isOutlined: true,
              textSize: 16,
              heightWrapContent: true,
              contentPadding: const EdgeInsets.all(16),
              width: SizeConfig.width,
            ),
            const SizedBox(
              height: 16,
            ),
            ButtonView(
              name: 'Confirm',
              onPressed: () {
                routePush(
                  context,
                  page: const TermsAndConditionView(),
                  routeType: RouteType.pushReplace,
                );
              },
              marginVertical: 0,
              textSize: 16,
              heightWrapContent: true,
              contentPadding: const EdgeInsets.all(16),
              width: SizeConfig.width,
            )
          ],
        ),
      ),
    );
  }
}
