import 'package:wanisclient/config/custom_text.dart';
import 'package:wanisclient/models/Wallet_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

import '../models/card_method.dart' as pay;
import '../providers/WalletProvider.dart';
import '../screens/NewPaymentMethode.dart';
import '../utils/colors.dart';

class PaymentHistoryWidget extends StatefulWidget {
  const PaymentHistoryWidget({Key? key}) : super(key: key);

  @override
  State<PaymentHistoryWidget> createState() => _PaymentHistoryWidgetState();
}

class _PaymentHistoryWidgetState extends State<PaymentHistoryWidget> {
  // state
  bool _wanisCashEnabled = true;
  String? _selectedMethodId = 'wanis_cash'; // 'wanis_cash', 'wanis_balance', or any card id

   final List<pay.card_method> _methods = [
    pay.card_method(id: 'visa_5678', brand: 'visa', last4: '5678'),
    pay.card_method(id: 'mc_5678', brand: 'mastercard', last4: '5678'),
  ];

// choose a method and keep logic coherent
  void _select_method(String id) {
    setState(() {
      _selectedMethodId = id;
      if (id == 'wanis_cash' || id == 'wanis_balance') {
        _wanisCashEnabled = true; // selecting within wanis Cash enables it
      }
    });
  }

// square checkbox with radius
  Widget _square_check(bool selected, {bool disabled = false}) {
    final Color border = disabled ? const Color(0xFFDADADA) : const Color(0xFFE0E0E0);
    final Color fill   = selected
        ? (disabled ? const Color(0xFFB9B4FF) : AppNewColors.primaryBtnColor)
        : Colors.white;

    return Container(
      width: 20.w,
      height: 20.w,
      decoration: BoxDecoration(
        color: fill,
        borderRadius: BorderRadius.circular(5.r),
        border: Border.all(color: border),
      ),
      alignment: Alignment.center,
      child: selected
          ? Icon(Icons.check, size: 14.sp, color: Colors.white)
          : null,
    );
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _loadInitial());
  }

  Future<void> _loadInitial() async {
    final walletProvider = Provider.of<WalletProvider>(context, listen: false);
    await walletProvider.loadWallet();
  }

  void _onAddFunds() {
    // TODO: navigate to add funds
    Navigator.push(context, MaterialPageRoute(builder: (context)=> PaymentMethodScreen(),),);
    // debugPrint("add funds tapped");
  }

  void _onAddPaymentMethod() {
    // TODO: add new card flow
    debugPrint("add payment method tapped");
  }

  @override
  Widget build(BuildContext context) {
    final wallet = Provider.of<WalletProvider>(context).wallet;

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.only(bottom: 16.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 20.w),
              // top bar
              Center(
                child: Txt(
                 text:
                  'Payment',
                  style: GoogleFonts.poppins(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ),
              SizedBox(height: 20.w),
              // balance card
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
                child: Container(
                  width: double.infinity,
                  height: MediaQuery.of(context).size.height * 0.15,
                  padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF1ECFF),
                    borderRadius: BorderRadius.circular(20.r),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "${wallet?.balance} TND",
                        style: GoogleFonts.poppins(
                          fontSize: 32.sp,
                          fontWeight: FontWeight.w700,
                          color: Colors.black,
                          height: 1.1,
                        ),
                      ),
                      const Spacer(),
                      Row(
                        children: [
                          Expanded(
                            child: Txt(
                              text:   'Wanis Balance',
                              style: GoogleFonts.poppins(
                                fontSize: 13.sp,
                                color: Colors.black87,

                              ),
                            ),
                          ),
                          GestureDetector(
                            onTap: _onAddFunds,
                            child: Container(
                              padding: EdgeInsets.symmetric(
                                  horizontal: 12.w, vertical: 8.h),
                              decoration: BoxDecoration(
                                color: AppNewColors.primaryBtnColor,
                                borderRadius: BorderRadius.circular(20.r),
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  const Icon(Icons.add, color: Colors.white, size: 16),
                                  SizedBox(width: 6.w),
                                  Txt(
                                   text:  'Add funds',
                                    style: GoogleFonts.poppins(
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.w600,
                                      color: Colors.white,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 25.h),
              // wanis cash card
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 6.h),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16.r),
                    boxShadow: const [
                      BoxShadow(
                        color: Color(0x15000000),
                        blurRadius: 12,
                        offset: Offset(0, 4),
                      ),
                    ],
                    border: Border.all(color: const Color(0xFFF1F1F1)),
                  ),
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.fromLTRB(16.w, 14.h, 12.w, 12.h),
                        child: Row(
                          children: [
                            Expanded(
                              child: InkWell(
                                onTap: _wanisCashEnabled ? () => _select_method('wanis_cash') : null,
                                child: Txt(
                                  text: 'Wanis cash',
                                  style: GoogleFonts.poppins(
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w600,
                                    color: _wanisCashEnabled ? Colors.black : const Color(0xFF9E9E9E),
                                  ),
                                ),
                              ),
                            ),
                            Switch(
                              value: _wanisCashEnabled,
                              activeColor: Colors.white,
                              activeTrackColor: AppNewColors.primaryBtnColor,
                              onChanged: (v) {
                                setState(() {
                                  _wanisCashEnabled = v;
                                  if (!v) {
                                    // if wanis cash turned off and one of its options was selected,
                                    // fall back to first card (if any) or clear selection
                                    if (_selectedMethodId == 'wanis_cash' || _selectedMethodId == 'wanis_balance') {
                                      _selectedMethodId = _methods.isNotEmpty ? _methods.first.id : null;
                                    }
                                  } else {
                                    // default to wanis_cash when toggled on (like screenshot having the tick at header)
                                    _selectedMethodId = 'wanis_cash';
                                  }
                                });
                              },
                            ),

                          ],
                        ),

                      ),
                      const Divider(height: 1, color: Color(0xFFF0F0F0)),
                      InkWell(
                        onTap: _wanisCashEnabled ? () => _select_method('wanis_balance') : null,
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(16.w, 14.h, 12.w, 14.h),
                          child: Row(
                            children: [
                              const Icon(Icons.account_balance_wallet_outlined, color: Colors.black54),
                              SizedBox(width: 10.w),
                              Txt(
                               text:  'Wanis Balance',
                                style: GoogleFonts.poppins(
                                  fontSize: 13.sp,
                                  color: _wanisCashEnabled ? Colors.black : const Color(0xFF9E9E9E),
                                ),
                              ),
                              const Spacer(),
                              _square_check(
                                _wanisCashEnabled && _selectedMethodId == 'wanis_balance',
                                disabled: !_wanisCashEnabled,
                              ),
                            ],
                          ),
                        ),
                      ),

                    ],
                  ),
                ),
              ),
              SizedBox(height: 25.h),
              // payment methods card
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 6.h),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16.r),
                    boxShadow: const [
                      BoxShadow(
                        color: Color(0x15000000),
                        blurRadius: 12,
                        offset: Offset(0, 4),
                      ),
                    ],
                    border: Border.all(color: const Color(0xFFF1F1F1)),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // header
                      Padding(
                        padding: EdgeInsets.fromLTRB(16.w, 14.h, 16.w, 8.h),
                        child: Txt(
text:                           'Payment methods',
                          style: GoogleFonts.poppins(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                      const Divider(height: 1, color: Color(0xFFF0F0F0)),

                      // methods list
                      ..._methods.map((m) => InkWell(
                        onTap: () => _select_method(m.id),
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(16.w, 14.h, 12.w, 14.h),
                          child: Row(
                            children: [
                              _brandIcon(m.brand),
                              SizedBox(width: 10.w),
                              Text('•••• ${m.last4}', style: GoogleFonts.poppins(fontSize: 13.sp)),
                              const Spacer(),
                              _square_check(_selectedMethodId == m.id),
                            ],
                          ),
                        ),
                      )).toList(),


                      const Divider(height: 1, color: Color(0xFFF0F0F0)),

                      // add payment method
                      InkWell(
                        onTap: _onAddPaymentMethod,
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(16.w, 14.h, 16.w, 16.h),
                          child: Row(
                            children: [
                              const Icon(Icons.add, color: Colors.black54),
                              SizedBox(width: 10.w),
                              Txt(
                               text:  'Add payment method',
                                style: GoogleFonts.poppins(
                                  fontSize: 13.sp,
                                  color: Colors.black87,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // ui helpers
  Widget _circleIcon({required IconData icon, VoidCallback? onTap}) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 36.w,
        height: 36.w,
        decoration: const BoxDecoration(
          color: Color(0xFFF6F7F9),
          shape: BoxShape.circle,
        ),
        child: Icon(icon, size: 20.sp, color: Colors.black87),
      ),
    );
  }

  Widget _selectCircle(bool selected) {
    return Container(
      width: 22.w,
      height: 22.w,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: const Color(0xFFE0E0E0)),
        color: selected ? AppNewColors.primaryBtnColor : Colors.white,
      ),
      child: selected
          ? const Icon(Icons.check, color: Colors.white, size: 16)
          : null,
    );
  }

  Widget _brandIcon(String brand) {
    switch (brand.toLowerCase()) {
      case 'visa':
        return Text(
          'VISA',
          style: GoogleFonts.poppins(
            fontWeight: FontWeight.w800,
            letterSpacing: 2,
            fontSize: 14.sp,
          ),
        );
      default: // mastercard
        return SizedBox(
          width: 28.w,
          height: 16.w,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              // left red circle
              Positioned(
                left: 0,
                top: 0,
                child: Container(
                  width: 16.w,
                  height: 16.w,
                  decoration: const BoxDecoration(
                    color: Color(0xFFE41E26),
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              // right orange circle (overlapping)
              Positioned(
                left: 10.w, // overlap amount (no negative margin!)
                top: 0,
                child: Container(
                  width: 16.w,
                  height: 16.w,
                  decoration: const BoxDecoration(
                    color: Color(0xFFF79E1B),
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ],
          ),
        );
    }
  }


}