import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../../config/app_constant.dart';
import '../../../config/size.dart';
import '../../../config/style.dart';
import '../../../providers/booking_provider.dart';
import '../../../providers/service_details_provider.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';

// Payment Method Model
class PaymentMethod {
  final String id;
  final String title;
  final String iconPath;
  final String paymentType;

  PaymentMethod({
    required this.id,
    required this.title,
    required this.iconPath,
    required this.paymentType,
  });
}

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

  @override
  State<PaymentMethodsWidget> createState() => _PaymentMethodsWidgetState();
}

class _PaymentMethodsWidgetState extends State<PaymentMethodsWidget> {
  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;

  String? selectedPaymentId;

  // Payment methods data
  final List<PaymentMethod> paymentMethods = [
    PaymentMethod(
      id: 'cash',
      title: 'Cash',
      iconPath: Consts.cashPayment,
      paymentType: 'CASH',
    ),
    PaymentMethod(
      id: 'bank_transfer',
      title: 'Bank account transfer',
      iconPath: Consts.onlinePayment,
      paymentType: 'BANK_ACCOUNT_TRANSFER',
    ),
    PaymentMethod(
      id: 'pos',
      title: 'POS',
      iconPath: Consts.posPayment,
      paymentType: 'POS',
    ),
  ];

  void _selectPaymentMethod(PaymentMethod method) {
    final serviceDetailsProvider = Provider.of<ServiceDetailsProvider>(context, listen: false);
    final bookingProvider = Provider.of<BookingProvider>(context, listen: false);

    setState(() {
      if (selectedPaymentId == method.id) {
        // Deselect if already selected
        selectedPaymentId = null;
        serviceDetailsProvider.setPayment('NOT_SET');
        _resetAllCheckboxes(bookingProvider);
      } else {
        // Select new method
        selectedPaymentId = method.id;
        serviceDetailsProvider.setPayment(method.paymentType);
        _updateCheckboxes(bookingProvider, method.id);
      }
    });
  }

  void _resetAllCheckboxes(BookingProvider provider) {
    provider.updateCheckbox1(false);
    provider.updateCheckbox2(false);
    provider.updateCheckbox3(false);
  }

  void _updateCheckboxes(BookingProvider provider, String methodId) {
    _resetAllCheckboxes(provider);
    switch (methodId) {
      case 'cash':
        provider.updateCheckbox1(true);
        break;
      case 'bank_transfer':
        provider.updateCheckbox2(true);
        break;
      case 'pos':
        provider.updateCheckbox3(true);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Section Title


        // Payment Methods List
        Container(
          margin: EdgeInsets.symmetric(horizontal: wm * 2),
          decoration: BoxDecoration(
            color: Theme.of(context).cardColor,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Theme.of(context).brightness == Brightness.dark
                    ? Colors.black.withOpacity(0.2)
                    : Colors.grey.withOpacity(0.1),
                spreadRadius: 1,
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Column(
            children: paymentMethods.asMap().entries.map((entry) {
              int index = entry.key;
              PaymentMethod method = entry.value;
              bool isSelected = selectedPaymentId == method.id;
              bool isLast = index == paymentMethods.length - 1;

              return _buildPaymentOption(method, isSelected, isLast);
            }).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildPaymentOption(PaymentMethod method, bool isSelected, bool isLast) {
    return InkWell(
      onTap: () => _selectPaymentMethod(method),
      borderRadius: BorderRadius.circular(12),
      child: Container(
        padding: EdgeInsets.symmetric(
          horizontal: wm * 4,
          vertical: hm * 2,
        ),
        decoration: BoxDecoration(
          color: isSelected
              ? (Theme.of(context).brightness == Brightness.dark
                  ? AppStyle.buttonBlue.withOpacity(0.12)
                  : AppStyle.buttonBlue.withOpacity(0.05))
              : Colors.transparent,
          borderRadius: BorderRadius.circular(12),
          border: isSelected
              ? Border.all(color: AppStyle.buttonBlue.withOpacity(0.3), width: 1)
              : null,
        ),
        child: Row(
          children: [
            // Custom Radio Button
            Container(
              width: 20,
              height: 20,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                  color: isSelected
                      ? AppStyle.buttonBlue
                      : (Theme.of(context).brightness == Brightness.dark
                          ? Colors.white70
                          : AppStyle.black.withOpacity(0.3)),
                  width: 2,
                ),
                color: isSelected ? AppStyle.buttonBlue : Colors.transparent,
              ),
              child: isSelected
                  ? const Icon(
                Icons.check,
                size: 14,
                color: Colors.white,
              )
                  : null,
            ),

            SizedBox(width: wm * 3),

            // Payment Method Title
            Expanded(
              child: Txt(
                text: method.title,
                style: tS(
                  "lato_semi_bold",
                  14,
                  FontWeight.w600,
                  isSelected
                      ? AppStyle.buttonBlue
                      : (Theme.of(context).brightness == Brightness.dark
                          ? AppNewStyle.appBackground
                          : AppStyle.black),
                ),
              ),
            ),

            // Payment Method Icon
            SizedBox(
              width: wm * 8,
              height: hm * 3,
              child: Image.asset(
                method.iconPath,
                fit: BoxFit.contain,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// Alternative Simplified Version (if you prefer even cleaner approach)
class SimplePaymentMethodsWidget extends StatelessWidget {
  final String? selectedMethod;
  final Function(String?) onMethodChanged;

   SimplePaymentMethodsWidget({
    Key? key,
    this.selectedMethod,
    required this.onMethodChanged,
  }) : super(key: key);

  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;

  @override
  Widget build(BuildContext context) {
    final methods = [
      {'title': 'Cash', 'value': 'CASH', 'icon': Consts.cashPayment},
      {'title': 'Bank Transfer', 'value': 'BANK_ACCOUNT_TRANSFER', 'icon': Consts.onlinePayment},
      {'title': 'POS', 'value': 'POS', 'icon': Consts.posPayment},
    ];

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ...methods.map((method) =>
            RadioListTile<String>(
              value: method['value'] as String,
              groupValue: selectedMethod,
              onChanged: onMethodChanged,
              title: Txt(
                text: method['title'] as String,
                style: tS("lato_regular", 14, FontWeight.normal, AppStyle.black),
              ),
              secondary: Image.asset(method['icon'] as String, width: wm * 8),
              activeColor: AppStyle.buttonBlue,
            ),
        ).toList(),
      ],
    );
  }
}