/// Payment Method Section Widget
///
/// Payment method selection with dynamic options from API.
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';
import 'package:worker/features/orders/domain/entities/payment_term.dart';

/// Payment Method Section
///
/// Displays payment options from API matching checkout.html design.
class PaymentMethodSection extends HookWidget {
  final ValueNotifier<String> paymentMethod;
  final List<PaymentTerm> paymentTerms;

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

  @override
  Widget build(BuildContext context) {
    // Show empty state if no payment terms available
    if (paymentTerms.isEmpty) {
      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: const Center(
          child: Text(
            'Không có phương thức thanh toán khả dụng',
            style: TextStyle(
              fontSize: 14,
              color: AppColors.grey500,
            ),
          ),
        ),
      );
    }

    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),

          // Dynamic Payment Options from API
          ...paymentTerms.asMap().entries.map((entry) {
            final index = entry.key;
            final term = entry.value;

            // Choose icon based on payment term name
            IconData icon = FontAwesomeIcons.buildingColumns;
            if (term.name.toLowerCase().contains('trả trước') ||
                term.name.toLowerCase().contains('một phần')) {
              icon = FontAwesomeIcons.creditCard;
            }

            return Column(
              children: [
                if (index > 0) const Divider(height: 1),
                InkWell(
                  onTap: () => paymentMethod.value = term.name,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: Row(
                      children: [
                        Radio<String>(
                          value: term.name,
                          groupValue: paymentMethod.value,
                          onChanged: (value) {
                            paymentMethod.value = value!;
                          },
                          activeColor: AppColors.primaryBlue,
                        ),
                        const SizedBox(width: 12),
                        Icon(
                          icon,
                          color: AppColors.grey500,
                          size: 24,
                        ),
                        const SizedBox(width: 12),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                term.name,
                                style: const TextStyle(
                                  fontSize: 15,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                term.customDescription,
                                style: const TextStyle(
                                  fontSize: 13,
                                  color: AppColors.grey500,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            );
          }),
        ],
      ),
    );
  }
}