import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_images.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

import '../../../../../../shared/components/text_from_field_widget.dart';
import '../../bloc/payment/invest_payment_bloc.dart';
import '../../bloc/payment/invest_payment_event.dart';

class InvestPayTopSection extends StatelessWidget {
  const InvestPayTopSection({super.key});

  @override
  Widget build(BuildContext context) {
    final investPaymentBloc = context.read<InvestPaymentBloc>();

    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextWidget().text15W700(AppText.enterInvestmentAmountText,
              clr: AppColor.plainBlack),
          const Gap(16.0),
          Container(
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
              color: AppColor.plainWhite,
              borderRadius: BorderRadius.circular(22.0),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x14000000),
                  blurRadius: 8,
                  offset: Offset(-2, -2),
                  spreadRadius: 0.50,
                ),
                BoxShadow(
                  color: Color(0x3391978E),
                  blurRadius: 8,
                  offset: Offset(2, 2),
                  spreadRadius: 4,
                )
              ],
            ),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(4),
                        child: Image.asset(
                          'assets/images/portfolio_screen/detailsbg.png',
                          width: 0.2.sw,
                          height: 0.2.sw,
                          fit: BoxFit.cover,
                        ),
                      ),
                      const Gap(16.0),
                      Expanded(
                          child: TextWidget().text17W700(
                        'Multi Family Residential',
                        clr: AppColor.plainBlack,
                      )),
                    ],
                  ),
                ),
                Container(
                  decoration: const ShapeDecoration(
                    color: AppColor.portfolioCardBgColor,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(22),
                        bottomRight: Radius.circular(22),
                      ),
                    ),
                  ),
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Stack(
                          alignment: Alignment.centerLeft,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                TextWidget().text15W700(
                                  "SAR",
                                  clr: AppColor.textLabelColor,
                                ),
                                const Gap(12),
                                Expanded(
                                  child: Form(
                                    child: Column(
                                      children: [
                                        textFormField(
                                          txtAlign: TextAlign.center,
                                          readonly: false,
                                          validator: (value) {
                                            if (investPaymentBloc
                                                .amountController
                                                .text
                                                .isEmpty) {
                                              return AppText
                                                  .pleaseEnterAmountText;
                                            }
                                            return null;
                                          },
                                          onInput: (value) {
                                            context
                                                .read<InvestPaymentBloc>()
                                                .add(FormTextChanged(
                                                    text: value));
                                          },
                                          texttype: TextInputType.number,
                                          textEditingController:
                                              investPaymentBloc
                                                  .amountController,
                                          hintText: AppText.enterAmountText,
                                          suffixIcon: const SizedBox(),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            InvestmentDetailRow(
                              label: AppText.currentExchangeText,
                              value: 'SAR 1 = USD 0.267',
                            ),
                            SizedBox(height: 8.0),
                            InvestmentDetailRow(
                              label: AppText.feeText,
                              value: '3%',
                            ),
                            SizedBox(height: 8.0),
                            InvestmentDetailRow(
                              label: '${AppText.totalInvestmentAmountText}:',
                              value: 'SAR 1000',
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          const Gap(24),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset(
                width: 24,
                height: 24,
                AppImages.orangenInfoIcon,
              ),
              const Gap(8),
              Column(
                children: [
                  SizedBox(
                    width: 0.8.sw,
                    child: TextWidget().text12W500(
                      AppText.retailInvestirCanInvestMaxText,
                      clr: AppColor.infoTextColor,
                    ),
                  ),
                  SizedBox(
                    width: 0.8.sw,
                    child: TextWidget().text12W700(
                      AppText.upgradeYourInvestorStatusToIncreaseText,
                      clr: AppColor.infoTextColor,
                      txtDec: TextDecoration.underline,
                      decClr: AppColor.infoTextColor,
                    ),
                  ),
                ],
              ),
            ],
          ),
          const Gap(15),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset(
                width: 24,
                height: 24,
                AppImages.infoIcon,
              ),
              const Gap(8),
              SizedBox(
                width: 0.8.sw,
                child: TextWidget().text12W500(
                  AppText.thisIsUsdInvestmentOpportunityText,
                  clr: AppColor.languageTextColor,
                ),
              ),
            ],
          ),
          const Gap(24),
        ],
      ),
    );
  }
}

class InvestmentDetailRow extends StatelessWidget {
  final String label;
  final String value;

  const InvestmentDetailRow({
    super.key,
    required this.label,
    required this.value,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        TextWidget().text14W500(
          label,
          clr: AppColor.investPaymentTextColor,
        ),
        TextWidget().text14W700(
          value,
          clr: AppColor.plainBlack,
        ),
      ],
    );
  }
}
