/// Payment Method Section Widget
///
/// Payment method selection with two options:
/// 1. Full payment via bank transfer
/// 2. Partial payment (>=20%, 30 day terms)
library;

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';

/// Payment Method Section
///
/// Two payment options matching checkout.html design.
class PaymentMethodSection extends HookWidget {
  final ValueNotifier<String> paymentMethod;

  const PaymentMethodSection({super.key, required this.paymentMethod});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
      padding: const EdgeInsets.all(AppSpacing.md),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppRadius.card),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.05),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Section Title
          const Text(
            'Phương thức thanh toán',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Color(0xFF212121),
            ),
          ),

          const SizedBox(height: AppSpacing.md),

          // Full Payment Option
          InkWell(
            onTap: () => paymentMethod.value = 'full_payment',
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Row(
                children: [
                  Radio<String>(
                    value: 'full_payment',
                    groupValue: paymentMethod.value,
                    onChanged: (value) {
                      paymentMethod.value = value!;
                    },
                    activeColor: AppColors.primaryBlue,
                  ),
                  const SizedBox(width: 12),
                  const Icon(
                    FontAwesomeIcons.buildingColumns,
                    color: AppColors.grey500,
                    size: 24,
                  ),
                  const SizedBox(width: 12),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Thanh toán hoàn toàn',
                          style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        SizedBox(height: 4),
                        Text(
                          'Thanh toán qua tài khoản ngân hàng',
                          style: TextStyle(
                            fontSize: 13,
                            color: AppColors.grey500,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          const Divider(height: 1),

          // Partial Payment Option
          InkWell(
            onTap: () => paymentMethod.value = 'partial_payment',
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Row(
                children: [
                  Radio<String>(
                    value: 'partial_payment',
                    groupValue: paymentMethod.value,
                    onChanged: (value) {
                      paymentMethod.value = value!;
                    },
                    activeColor: AppColors.primaryBlue,
                  ),
                  const SizedBox(width: 12),
                  const Icon(
                    FontAwesomeIcons.creditCard,
                    color: AppColors.grey500,
                    size: 24,
                  ),
                  const SizedBox(width: 12),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Thanh toán một phần',
                          style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        SizedBox(height: 4),
                        Text(
                          'Trả trước(≥20%), còn lại thanh toán trong vòng 30 ngày',
                          style: TextStyle(
                            fontSize: 13,
                            color: AppColors.grey500,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}