import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/routes/route_name.dart';
import 'package:tanami_app/core/routes/routes.dart';
import 'package:tanami_app/core/styles/app_text.dart';

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

  @override
  State<WithdrawalPreview> createState() => _WithdrawalPreviewState();
}

class _WithdrawalPreviewState extends State<WithdrawalPreview> {
  @override
  Widget build(BuildContext context) {
    List titles = [
      AppText.accountHolderName,
      AppText.iban,
      AppText.beneficiaryAddress,
      AppText.bankName,
      AppText.branchAddress,
      AppText.SWIFTcode,
    ];
    List values = [
      'Name Surname',
      'DE 1234 5678 9012 3456',
      'Hohenzollernring 58, 95444',
      'Name Bank',
      'Hohenzollernring 58, 95444',
      'BC12345',
    ];
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        scrolledUnderElevation: 0.0,
        centerTitle: true,
        title: Text(
          AppText.previewTitle,
          style: GoogleFonts.dmSans(
            color: const Color(0xFF272727),
            fontSize: 20.sp,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/wallet_screen/info.png',
                    height: 25.h,
                  ),
                  Gap(
                    10.w,
                  ),
                  Expanded(
                    child: Text(
                      AppText.info1,
                      style: GoogleFonts.dmSans(
                        color: const Color(0xFF015698),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20.h,
              ),
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: '${AppText.balance}: ',
                      style: GoogleFonts.dmSans(
                        color: Colors.grey,
                        fontSize: 12.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    TextSpan(
                      text: 'SAR 178,000',
                      style: GoogleFonts.dmSans(
                        color: Colors.black,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 20.h,
              ),
              Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22.r),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.15),
                      spreadRadius: 2,
                      blurRadius: 10,
                      offset: const Offset(0, 5),
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Row(
                        children: [
                          Container(
                            decoration: const BoxDecoration(
                                shape: BoxShape.circle,
                                color: Color(0xFFE6681F)),
                            child: Padding(
                              padding: const EdgeInsets.all(12.0),
                              child: Image.asset(
                                'assets/images/wallet_screen/withdraw_list.png',
                                height: 36.h,
                              ),
                            ),
                          ),
                          SizedBox(
                            width: 12.w,
                          ),
                          Text(
                            AppText.withdrawTitle,
                            style: GoogleFonts.dmSans(
                              color: Colors.black,
                              fontSize: 17.sp,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(22.r),
                          bottomRight: Radius.circular(22.r),
                        ),
                        color: const Color(0xFFD8D8D8).withOpacity(0.4),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 16.0, horizontal: 12.0),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              AppText.withdrawAmt,
                              style: GoogleFonts.dmSans(
                                color: const Color(0xFF535353),
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            Text(
                              'SAR 1000',
                              style: GoogleFonts.dmSans(
                                color: Colors.black,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 20.h,
              ),
              Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22.r),
                  color: const Color(0xFFEEF6FB),
                  border: Border.all(color: const Color(0xFF90D4FF)),
                  boxShadow: const [
                    BoxShadow(
                      color: Color(0xFFB0D3EF),
                      spreadRadius: 1,
                      blurRadius: 10,
                      offset: Offset(0, 3),
                    ),
                  ],
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      vertical: 12.0, horizontal: 16.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/images/wallet_screen/info.png',
                        height: 25.h,
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      Expanded(
                        child: Text(
                          AppText.info2,
                          style: GoogleFonts.dmSans(
                            color: const Color(0xFF015698),
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(
                height: 20.h,
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    AppText.withdrawDetails,
                    style: GoogleFonts.dmSans(
                      color: Colors.black,
                      fontSize: 15.sp,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  SizedBox(
                    height: 10.h,
                  ),
                  const Divider(
                    color: Color(0xFFE3E3E3),
                  ),
                  SizedBox(
                    height: 10.h,
                  ),
                  ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: titles.length,
                    shrinkWrap: true,
                    itemBuilder: (context, index) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            titles[index],
                            style: GoogleFonts.dmSans(
                              color: Colors.black,
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                          SizedBox(
                            height: 8.h,
                          ),
                          Text(
                            values[index],
                            style: GoogleFonts.dmSans(
                              color: const Color(0xFF191B1E),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                          (index != titles.length - 1)
                              ? Column(
                                  children: [
                                    SizedBox(
                                      height: 10.h,
                                    ),
                                    const Divider(
                                      color: Color(0xFFE3E3E3),
                                    ),
                                    SizedBox(
                                      height: 10.h,
                                    ),
                                  ],
                                )
                              : SizedBox(
                                  height: 10.h,
                                ),
                        ],
                      );
                    },
                  )
                ],
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: GestureDetector(
        onTap: () {
          goRouter.pushNamed(RouteName.otpScreen, pathParameters: {
            "fromScreen": 'withdrawal',
          });
        },
        child: Container(
          margin: const EdgeInsets.all(10.0),
          height: 65.h,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(22.r),
            color: const Color(0xFF004717),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            child: Center(
              child: Text(
                AppText.submit,
                style: GoogleFonts.dmSans(
                  color: Colors.white,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
