import React from 'react';
import { Button, Icon } from '@akinon/next/components';
import type { InstallmentListProps } from '../types/custom-render.types';

const InstallmentList: React.FC<InstallmentListProps> = ({
  installments,
  cardType,
  onInstallmentSelect,
  selectedInstallment,
  isLoading,
  onProceedToPayment,
  paymentLoading,
  texts
}) => {
  return (
    <div className="bg-white border border-[#eeeeee] shadow-sm">
      <div className="border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
        <div className="flex items-center gap-2">
          <Icon name="credit-card" size={20} className="text-gray-600" />
          <span className="text-[#181818] text-lg font-medium sm:text-xl">
            {texts.installmentOptionsText}
          </span>
        </div>
      </div>

      <div className="p-4 sm:p-6">
        {/* Card Type Display */}
        {cardType && (
          <div className="mb-4 p-3 bg-[#f7f7f7] border border-[#eeeeee]">
            <div className="flex items-center gap-2">
              <Icon name="credit-card" size={16} className="text-gray-600" />
              <span className="text-sm font-medium text-[#686868]">
                {texts.cardTypeLabel}
              </span>
              <img
                src={cardType.logo}
                alt={cardType.name}
                className="h-6 object-contain"
              />
            </div>
          </div>
        )}

        {/* Installment Options */}
        <div className="space-y-3">
          {installments.map((installment) => {
            const isSelected = selectedInstallment?.pk === installment.pk;
            const isNoInterest = installment.installment_count === 1;

            return (
              <div
                key={installment.pk}
                onClick={() => onInstallmentSelect(installment)}
                className={`
                  relative flex items-center justify-between p-3 border transition-all cursor-pointer
                  ${
                    isSelected
                      ? 'border-[#000000] bg-[#000000]/5'
                      : 'border-[#eeeeee] hover:border-[#ebebeb]'
                  }
                `}
              >
                {/* Radio Button */}
                <div
                  className={`
                    w-4 h-4 border-2 rounded-full flex items-center justify-center
                    ${
                      isSelected
                        ? 'border-[#000000] bg-[#000000]'
                        : 'border-[#ebebeb]'
                    }
                  `}
                >
                  {isSelected && (
                    <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
                  )}
                </div>

                {/* Installment Info */}
                <div className="flex-1 ml-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <span className="font-medium text-[#4a4f54]">
                        {installment.installment_count === 1
                          ? texts.singlePaymentText
                          : texts.installmentsText?.replace(
                              '{count}',
                              installment.installment_count.toString()
                            )}
                      </span>
                      {isNoInterest && (
                        <span className="text-xs bg-[#84978a] text-[#004e21] px-2 py-1 ml-2">
                          {texts.noInterestText}
                        </span>
                      )}
                    </div>
                    <div className="text-right">
                      <div className="font-semibold text-[#4a4f54]">
                        {installment.price_with_accrued_interest}
                      </div>
                      {installment.installment_count > 1 && (
                        <div className="text-sm text-[#f7f7f7]">
                          {installment.monthly_price_with_accrued_interest}
                          {texts.perMonthText}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Payment Button */}
        {selectedInstallment && onProceedToPayment && (
          <div className="pt-4 border-t border-[#eeeeee]">
            <Button
              onClick={onProceedToPayment}
              disabled={isLoading || paymentLoading}
              className="w-full cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {paymentLoading ? (
                <div className="flex items-center justify-center">
                  <div className="animate-spin h-4 w-4 border-b-2 border-[#ffffff]"></div>
                  <span className="ml-2">{texts.processingPaymentText}</span>
                </div>
              ) : (
                texts.proceedToPaymentText
              )}
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default InstallmentList;