// ignore_for_file: avoid_unnecessary_containers, sized_box_for_whitespace

import 'package:flutter/material.dart';
import 'package:flutter_phosphor_icons/flutter_phosphor_icons.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:monita/router/app_router.dart';
import 'package:monita/screens/Transfer/sendMoney/widget/send_money_model.dart';
import 'package:monita/utils/utils_size.dart';
import 'package:monita/widgets/appbar.dart';
import 'package:monita/widgets/global_widgets.dart';
import 'package:monita/widgets/icon_widget.dart';
import 'package:palette_generator/palette_generator.dart';
import '../../../constants/constants.dart';
import '../../../controller/general_provider.dart';

class SendMoneyScreen extends StatefulWidget {
  const SendMoneyScreen({super.key});
  static String routeName = "/sendMoneyScreen";

  @override
  _SendMoneyScreenState createState() => _SendMoneyScreenState();
}

class _SendMoneyScreenState extends State<SendMoneyScreen> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    Size size = MediaQuery.of(context).size;
    return Consumer(
      builder: (_, ref, __) {
        return Scaffold(
          backgroundColor:
              ref.watch(generalNotifierProvider) ? lightBlack : darkLemond2,
          appBar: AppBar(
            backgroundColor:
                ref.watch(generalNotifierProvider) ? lightBlack : darkLemond2,
            surfaceTintColor: transparent,
            automaticallyImplyLeading: false,
            elevation: 0,
            title: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                appBar1(context, sendMoneyToText,
                    titleColor:
                        ref.watch(generalNotifierProvider) ? white : white),
              ],
            ),
            centerTitle: true,
          ),
          body: Column(
            children: [
              verticalSpace(getProportionateScreenHeight(20)),
              Padding(
                padding: EdgeInsets.symmetric(
                  horizontal: getProportionateScreenWidth(15),
                ),
                child: buildSearchField(
                  borderColor: transparent,
                  background: ref.watch(generalNotifierProvider)
                      ? primaryBaseDarkmode
                      : const Color(0xFF5e6c0b),
                  hintText: "Search Bannk or Beneficiary",
                  prifixIconColor: ref.watch(generalNotifierProvider)
                      ? white.withOpacity(0.72)
                      : white.withOpacity(0.72),
                  hintTextColor: ref.watch(generalNotifierProvider)
                      ? white.withOpacity(0.72)
                      : white.withOpacity(0.72),
                  textColor: ref.watch(generalNotifierProvider)
                      ? white.withOpacity(0.72)
                      : white.withOpacity(0.72),
                  onChanged: (value) {},
                ),
              ),
              verticalSpace(getProportionateScreenHeight(20)),
              Expanded(
                child: Container(
                  width: size.width,
                  decoration: BoxDecoration(
                      color: ref.watch(generalNotifierProvider)
                          ? primaryBaseDarkmode
                          : white,
                      borderRadius: const BorderRadius.vertical(
                        top: Radius.circular(30),
                      )),
                  child: const SendMoneyContent(),
                ),
              )
            ],
          ),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(16),
      children: [
        const RecentBeneficiaries(),
        const SizedBox(height: 16),
        BankListSection(),
      ],
    );
  }
}

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

  @override
  State<RecentBeneficiaries> createState() => _RecentBeneficiariesState();
}

class _RecentBeneficiariesState extends State<RecentBeneficiaries> {
  Color backgroundColor = Colors.grey.shade200;
  final List<BeneficiaryBank> beneficiaryList = [
    const BeneficiaryBank(
      firstName: "Macsmith",
      lastName: "Okorie",
      imagePath: "assets/banks/firstbank.png",
    ),
    const BeneficiaryBank(
      firstName: "Emmanuel",
      lastName: "Omobude",
      imagePath: "assets/banks/paycom.png",
    ),
    const BeneficiaryBank(
      firstName: "Toheeb",
      lastName: "Asuwanju",
      imagePath: "assets/banks/stanbic-ibtc-bank.png",
    ),
    const BeneficiaryBank(
      firstName: "Musa",
      lastName: "Babalola",
      imagePath: "assets/banks/jaiz-bank.png",
    ),
    const BeneficiaryBank(
      firstName: "Tola",
      lastName: "Timothy",
      imagePath: "assets/banks/suntrust-bank.png",
    ),
    const BeneficiaryBank(
      firstName: "Mary",
      lastName: "Bisola",
      imagePath: "assets/banks/gtb.png",
    ),
    const BeneficiaryBank(
      firstName: "Tola",
      lastName: "Timothy",
      imagePath: "assets/banks/sterling-bank.png",
    ),
  ];

  @override
  void initState() {
    super.initState();
    _updatePalette();
  }

  Color lightenColor(Color color, [double amount = 0.3]) {
    final hsl = HSLColor.fromColor(color);
    final lightened =
        hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));
    return lightened.toColor();
  }

  Future<void> _updatePalette() async {
    final imageProvider = AssetImage(beneficiaryList[0].imagePath);

    final paletteGenerator = await PaletteGenerator.fromImageProvider(
      imageProvider,
      size: const Size(300, 300),
      maximumColorCount: 20,
    );

    Color? rawColor = paletteGenerator.dominantColor?.color ??
        paletteGenerator.vibrantColor?.color ??
        paletteGenerator.mutedColor?.color;

    setState(() {
      backgroundColor = rawColor != null
          ? lightenColor(rawColor, 0.4) // You can adjust brightness (0.1–0.5)
          : Colors.grey.shade200;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (_, ref, __) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          verticalSpace(getProportionateScreenHeight(10)),
          textWidget(
            "Recents",
            fontWeight: FontWeight.w700,
            fontSize: getProportionateScreenWidth(17),
            color: ref.watch(generalNotifierProvider) ? white : lightBlack,
          ),
          verticalSpace(getProportionateScreenHeight(10)),
          SizedBox(
            height: getProportionateScreenHeight(90),
            child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemCount: beneficiaryList.length,
              itemBuilder: (context, index) {
                final beneficiary = beneficiaryList[index];
                return RecentBeneficiaryCards(beneficiaryBank: beneficiary);
              },
              separatorBuilder: (_, __) => const SizedBox(width: 16),
            ),
          ),
        ],
      );
    });
  }
}

class BankListSection extends StatelessWidget {
  BankListSection({super.key});

  final List<Bank> banks = [
    const Bank(name: "Kuda Bank", imagePath: "assets/banks/kuda-bank.png"),
    const Bank(
        name: "First Bank Of Nigeria", imagePath: "assets/banks/firstbank.png"),
    const Bank(name: "Fidelity Bank", imagePath: "assets/banks/fidelity.png"),
    const Bank(
        name: "United Bank for Africa",
        imagePath: "assets/banks/united-bank-for-africa.png"),
    const Bank(
        name: "Sterling Bank", imagePath: "assets/banks/sterling-bank.png"),
    const Bank(name: "Jaiz Bank", imagePath: "assets/banks/jaiz-bank.png"),
    const Bank(name: "Paycom", imagePath: "assets/banks/paycom.png"),
    const Bank(name: "GTB", imagePath: "assets/banks/gtb.png"),
    const Bank(
        name: "Stanbic IBTC Bank",
        imagePath: "assets/banks/stanbic-ibtc-bank.png"),
    const Bank(
        name: "Suntrust Bank", imagePath: "assets/banks/suntrust-bank.png"),
    const Bank(name: "Zenith Bank", imagePath: "assets/banks/zenith-bank.png"),
    const Bank(name: "Wema Bank", imagePath: "assets/banks/wema-bank.png"),
  ];

  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (_, ref, __) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          textWidget(
            "Select Bank",
            fontWeight: FontWeight.w700,
            fontSize: getProportionateScreenWidth(17),
            color: ref.watch(generalNotifierProvider) ? white : lightBlack,
          ),
          verticalSpace(getProportionateScreenHeight(10)),
          ...banks.map((bank) {
            return BankTile(
              bank: bank,
              onTap: () {
                ref
                    .read(routerProvider)
                    .pushNamed(AppRoute.sendMoneyContinueScreen.name);
              },
            );
          }),
        ],
      );
    });
  }
}

class BankTile extends StatefulWidget {
  final Bank bank;

  final VoidCallback? onTap;
  const BankTile({
    super.key,
    required this.bank,
    required this.onTap,
  });

  @override
  State<BankTile> createState() => _BankTileState();
}

class _BankTileState extends State<BankTile> {
  Color backgroundColor = Colors.grey.shade200;

  @override
  void initState() {
    super.initState();
    _updatePalette();
  }

  Color lightenColor(Color color, [double amount = 0.3]) {
    final hsl = HSLColor.fromColor(color);
    final lightened =
        hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));
    return lightened.toColor();
  }

  Future<void> _updatePalette() async {
    final imageProvider = AssetImage(widget.bank.imagePath);

    final paletteGenerator = await PaletteGenerator.fromImageProvider(
      imageProvider,
      size: const Size(300, 300),
      maximumColorCount: 20,
    );

    Color? rawColor = paletteGenerator.dominantColor?.color ??
        paletteGenerator.vibrantColor?.color ??
        paletteGenerator.mutedColor?.color;

    setState(() {
      backgroundColor = rawColor != null
          ? lightenColor(rawColor, 0.4) // adjust brightness (0.1–0.5)
          : Colors.grey.shade200;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (_, ref, __) {
      return InkWell(
        onTap: widget.onTap,
        splashColor: transparent,
        highlightColor: transparent,
        child: Container(
          margin: EdgeInsets.only(bottom: getProportionateScreenHeight(10)),
          padding: EdgeInsets.only(bottom: getProportionateScreenHeight(15)),
          decoration: BoxDecoration(
              border: Border(
            bottom: BorderSide(
              color: ref.watch(generalNotifierProvider)
                  ? white.withOpacity(0.05)
                  : lightBlack.withOpacity(0.05),
            ),
          )),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(7),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: backgroundColor,
                ),
                child: Container(
                  height: 25,
                  width: 25,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      image: AssetImage(widget.bank.imagePath),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              horizontalSpace(
                getProportionateScreenWidth(10),
              ),
              textWidget2(
                widget.bank.name,
                fontWeight: FontWeight.w500,
                fontSize: getProportionateScreenWidth(14),
                color: ref.watch(generalNotifierProvider)
                    ? white.withOpacity(0.9)
                    : lightBlack.withOpacity(0.9),
              ),
              const Spacer(),
              Container(
                padding: const EdgeInsets.all(3),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: (ref.watch(generalNotifierProvider)
                      ? primaryBaseDarkmode
                      : primaryBaseWhite),
                ),
                child: iconWidget(PhosphorIcons.caret_right_bold,
                    size: 16,
                    color: ref.watch(generalNotifierProvider)
                        ? white.withOpacity(0.64)
                        : lightBlack.withOpacity(0.64)),
              ),
            ],
          ),
        ),
      );
    });
  }
}

class RecentBeneficiaryCards extends StatefulWidget {
  final BeneficiaryBank beneficiaryBank;
  const RecentBeneficiaryCards({super.key, required this.beneficiaryBank});

  @override
  State<RecentBeneficiaryCards> createState() => _RecentBeneficiaryCardsState();
}

class _RecentBeneficiaryCardsState extends State<RecentBeneficiaryCards> {
  Color backgroundColor = Colors.grey.shade200;

  @override
  void initState() {
    super.initState();
    _updatePalette();
  }

  Color lightenColor(Color color, [double amount = 0.3]) {
    final hsl = HSLColor.fromColor(color);
    final lightened =
        hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));
    return lightened.toColor();
  }

  Future<void> _updatePalette() async {
    final imageProvider = AssetImage(widget.beneficiaryBank.imagePath);

    final paletteGenerator = await PaletteGenerator.fromImageProvider(
      imageProvider,
      size: const Size(300, 300),
      maximumColorCount: 20,
    );

    Color? rawColor = paletteGenerator.dominantColor?.color ??
        paletteGenerator.vibrantColor?.color ??
        paletteGenerator.mutedColor?.color;

    setState(() {
      backgroundColor = rawColor != null
          ? lightenColor(rawColor, 0.5) // adjust brightness–
          : Colors.grey.shade200;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(7),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: backgroundColor,
          ),
          child: Container(
            height: 25,
            width: 25,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                image: AssetImage(widget.beneficiaryBank.imagePath),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        const SizedBox(height: 5),
        SizedBox(
          width: 70,
          child: Text(
            widget.beneficiaryBank.firstName,
            style: GoogleFonts.poppins(
              fontSize: getProportionateScreenWidth(12),
              fontWeight: FontWeight.w400,
            ),
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.center,
          ),
        ),
        SizedBox(
          width: 70,
          child: Text(
            widget.beneficiaryBank.lastName,
            style: GoogleFonts.poppins(
              fontSize: getProportionateScreenWidth(12),
              fontWeight: FontWeight.w400,
            ),
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

//