import 'package:carousel_slider/carousel_slider.dart';
import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_title/text_title.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/dashboard/dashboard_account/view/invest_type/invest_type_view.dart';
import 'package:flutter/material.dart';

class InvestType {
  String name;
  String iconImage;

  InvestType(this.name, this.iconImage);
}

class StepVerification {
  int currentStep;
  List<String> nameStep;

  StepVerification(this.currentStep, this.nameStep);
}

class Article {
  String image;
  String title;
  String type;

  Article(this.type, this.title, this.image);
}

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  bool seePortofolioValue = false;

  List<InvestType> listPortofolioType = [
    InvestType('Money Market', PathAssets.iconPortofolioMoneyMarket),
    InvestType('Shares', PathAssets.iconPortofolioShares),
    InvestType('Bonds', PathAssets.iconPortofolioBonds),
    InvestType('Sharia', PathAssets.iconPortofolioSharia)
  ];

  StepVerification listStepVerification = StepVerification(1, [
    'Registration', 'Verification', 'Complete'
  ]);

  List<Article> listArticle = [
    Article('Education', 'Menggali Potensi Pasar: Analisis Sebelum Memulai Investasi', PathAssets.imgArticles),
    Article('News', 'Tren Investasi 2024: Peluang dan Risiko yang Perlu Diketahui', PathAssets.imgArticles),
    Article('Education', 'Investasi Berkelanjutan: Mengenal Portofolio Hijau untuk Masa Depan', PathAssets.imgArticles),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF8FAFC),
      body: SizedBox(
        width: SizeConfig.width,
        height: SizeConfig.height,
        child: Stack(
          children: [
            const ImageView(image: PathAssets.imgDashboardAccount),
            Column(
              children: [
                const SizedBox(
                  height: 50,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 24, right: 16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        'Home',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.w700
                        ),
                      ),
                      ElevatedButton(
                          onPressed: () {

                          },
                          style: ElevatedButton.styleFrom(
                              padding: const EdgeInsets.all(0),
                              backgroundColor: Colors.white,
                              foregroundColor: const Color(0xff2563EB),
                              elevation: 0,
                              shape: const CircleBorder()
                          ),
                          child: const Icon(Icons.notifications_outlined)
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 32,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  child: portofolioValue(),
                ),
                const SizedBox(
                  height: 24,
                ),
                cardInvestType(),
                const SizedBox(
                  height: 32,
                ),
                Expanded(
                  child: ListView(
                    padding: const EdgeInsets.all(0),
                    children: [
                      cardVerification(),
                      const SizedBox(
                        height: 24,
                      ),
                      infoAndPromo(),
                      const SizedBox(
                        height: 24,
                      ),
                      articles(),
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget portofolioValue() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            const Text('Portofolio Value', style: TextStyle(color: Colors.white)),
            const SizedBox(
              width: 12,
            ),
            GestureDetector(
                onTap: () {
                  setState(() {
                    seePortofolioValue = !seePortofolioValue;
                  });
                },
                child: const Icon(Icons.visibility_outlined, color: Color(0xff93C5FD))
            )
          ],
        ),
        const SizedBox(
          height: 4,
        ),
        Row(
          children: [
            AnimatedCrossFade(
              duration: const Duration(milliseconds: 300),
              alignment: Alignment.center,
              crossFadeState: seePortofolioValue ? CrossFadeState.showSecond : CrossFadeState.showFirst,
              firstChild: RichText(
                  text: const TextSpan(
                      text: 'Rp ',
                      style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope',),
                      children: [
                        TextSpan(
                          text: '22.500.000',
                          style: TextStyle(
                              fontSize: 32,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                              fontFamily: 'Manrope',
                          ),
                        )
                      ]
                  )
              ),
              secondChild: Padding(
                padding: const EdgeInsets.symmetric(vertical: 16),
                child: Wrap(
                  spacing: 7,
                  children: [
                    for (int i = 0; i < 6; i++)
                      Container(
                        width: 12,
                        height: 12,
                        decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle),
                      ),
                  ],
                ),
              ),
            ),
          ],
        )
      ],
    );
  }

  Widget cardInvestType() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
                spreadRadius: 2,
                blurRadius: 4,
                color: const Color(0xff1E293B).withOpacity(0.04)
            )
          ]
      ),
      child: Wrap(
        spacing: 10,
        children: listPortofolioType.asMap().entries.map((e) {
          return  GestureDetector(
            onTap: () {
              routePush(context, page: InvestTypeView(e.value.name));
            },
            child: Container(
              color: Colors.white,
              width: SizeConfig.width * .18,
              child: Column(
                children: [
                  ImageView(image: e.value.iconImage, height: SizeConfig.width * .12, width: SizeConfig.width * .12,),
                  const SizedBox(
                    height: 8,
                  ),
                  Text(
                    e.value.name,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w600
                    ),
                  )
                ],
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  Widget cardVerification() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 24),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          stepVerification(),
          const SizedBox(
            height: 24,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Row(
                children: [
                  Icon(Icons.verified, size: 18,),
                  SizedBox(
                    width: 12,
                  ),
                  Text(
                    'Verified by PT Gemilang',
                    style: TextStyle(
                      color: ColorPalette.slate500
                    ),
                  )
                ],
              ),
              Container(
                width: 16,
                height: 16,
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: const Color(0xffCBD5E1), width: 1.5),
                    shape: BoxShape.circle
                ),
              )
            ],
          ),
          const SizedBox(
            height: 16,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Icon(Icons.verified, size: 18,),
                  SizedBox(
                    width: 12,
                  ),
                  Text(
                    'Verified by KSEI',
                    style: TextStyle(
                        color: ColorPalette.slate500
                    ),
                  )
                ],
              ),
              Container(
                width: 16,
                height: 16,
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: const Color(0xffCBD5E1), width: 1.5),
                    shape: BoxShape.circle
                ),
              )
            ],
          ),
          const SizedBox(
            height: 16,
          ),
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
                color: ColorPalette.blue50,
                borderRadius: BorderRadius.circular(12)
            ),
            child: const Column(
              children: [
                Text(
                  'Your registration is currently being verified by PT Gemilang',
                  style: TextStyle(
                      color: ColorPalette.slate500
                  ),
                ),
                SizedBox(
                  height: 16,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Estimated:',
                      style: TextStyle(
                        color: ColorPalette.slate500
                      ),
                    ),
                    Text(
                      'January 30 2024',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          color: Color(0xff1E293B)
                      ),
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget stepVerification() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: listStepVerification.nameStep.asMap().entries.map((e) {
        return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if(e.key != 0)
              SizedBox(
                width: 30,
                height: 30,
                child: Divider(color: listStepVerification.currentStep >= e.key ? const Color(0xff2563EB) : const Color(0xffCBD5E1),),
              ),
            Column(
              children: [
                Container(
                  width: 30,
                  height: 30,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: listStepVerification.currentStep <= e.key ? Colors.white : const Color(0xff2563EB),
                      border: Border.all(
                          color: listStepVerification.currentStep < e.key ? const Color(0xffCBD5E1) : const Color(0xff2563EB),
                          width: 2
                      )
                  ),
                  child: listStepVerification.currentStep <= e.key ? const SizedBox() : const Icon(Icons.done_rounded, color: Colors.white,),
                ),
                const SizedBox(
                  height: 8,
                ),
                Text(e.value, style: TextStyle(color: listStepVerification.currentStep == e.key ? const Color(0xff2563EB) : Colors.black),)
              ],
            ),
          ],
        );
      }).toList(),
    );
  }

  Widget infoAndPromo() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const TextTitle(title: 'Info and Special Promo', color: ColorPalette.slate800,),
          const SizedBox(
            height: 16,
          ),
          CarouselSlider(
            items: [1,2,3].map((e) {
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: ImageView(image: PathAssets.imgCarousel, height: 150, width: SizeConfig.width * .9,),
              );
            }).toList(),
            options: CarouselOptions(
              height: 150,
              autoPlay: true,
              pageSnapping: true,
              viewportFraction: 0.9,
              autoPlayInterval: const Duration(seconds: 5),
              autoPlayCurve: Curves.fastOutSlowIn,
            ),
          )
        ],
      ),
    );
  }

  Widget articles() {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(vertical: 24),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const TextTitle(title: 'Article', color: ColorPalette.slate800),
                GestureDetector(
                  onTap: () {

                  },
                  child: const Text('See More',
                    style: TextStyle(
                      color: ColorPalette.primary,
                      fontWeight: FontWeight.bold
                    ),),
                )
              ],
            ),
          ),
          const SizedBox(
            height: 16,
          ),
          ...listArticle.asMap().entries.map((e) {
            return Column(
              children: [
                if(e.key != 0)...[
                  const Padding(
                    padding: EdgeInsets.symmetric(vertical: 12),
                    child: Divider(color: ColorPalette.slate200,),
                  )
                ],
                cardArticle(e.value),
              ],
            );
          })
        ],
      ),
    );
  }

  Widget cardArticle(Article article) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: Row(
        children: [
          ImageView(image: PathAssets.imgArticles, width: SizeConfig.width * .17, height: SizeConfig.height * .08, borderRadius: 8,),
          const SizedBox(
            width: 16,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(article.title,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(
                  height: 8,
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    color: ColorPalette.colorSwitchButtonActive
                  ),
                  child: Text(article.type),
                ),
              ],
            )
          )
        ],
      ),
    );
  }
}
