sozsoft-platform/ui/src/components/orders/PaymentForm.tsx

import React, { useEffect, useState } from 'react'
import { FaCreditCard, FaLock, FaArrowLeft, FaCalendarAlt, FaClock } from 'react-icons/fa'
import {
  BillingCycle,
  BasketItem,
  InstallmentOptionDto,
  PaymentMethodDto,
} from '@/proxy/order/models'
import { OrderService } from '@/services/order.service'
import { CustomTenantDto } from '@/proxy/config/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Button } from '@/components/ui'

interface BasketData {
  items: BasketItem[]
  subtotal: number
  vatTotal: number
  total: number
  globalBillingCycle: BillingCycle
  globalPeriod: number
}

interface PaymentFormProps {
  tenant: CustomTenantDto
  onBack: () => void
  onComplete: (paymentData: Record<string, unknown>) => void
  basketData: BasketData
}

export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, basketData }) => {
  const defaultPaymentMethod = 'Kredi Kartı'
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>(defaultPaymentMethod)
  const [selectedInstallment, setSelectedInstallment] = useState<InstallmentOptionDto>()
  const [paymentData, setPaymentData] = useState({
    cardNumber: '',
    expiryDate: '',
    cvv: '',
    cardName: '',
  })
  const [licenseStartTime, setLicenseStartTime] = useState(() =>
    new Date().toISOString().slice(0, 10),
  )

  const { translate } = useLocalization()
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethodDto[]>([])
  const [installmentOptions, setInstallmentOptions] = useState<InstallmentOptionDto[]>([])
  const [loading, setLoading] = useState<boolean>(true)

  useEffect(() => {
    const fetchData = async () => {
      const orderService = new OrderService()
      try {
        const paymentResponse = await orderService.getPaymentMethodList()
        setPaymentMethods(paymentResponse.data)
        if (paymentResponse.data.length > 0) {
          setSelectedPaymentMethod(paymentResponse.data[1].name)
        }

        const installmentResponse = await orderService.getInstallmentOptionList()
        setInstallmentOptions(installmentResponse.data)
      } catch (err) {
        console.error('Ödeme şekilleri ve Komisyon Bilgileri alınamadı', err)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  const selectedMethod = paymentMethods.find((m) => m.name === selectedPaymentMethod)

  let commission = 0
  if (selectedPaymentMethod === defaultPaymentMethod && selectedInstallment) {
    commission = basketData.total * selectedInstallment.commission
  } else if (selectedMethod) {
    commission = basketData.total * selectedMethod.commission
  }

  const finalTotal = basketData.total + commission
  const period = basketData.globalPeriod > 0 ? basketData.globalPeriod : 1
  const billingCycle = basketData.globalBillingCycle || 'yearly'
  const licenseEndTime = calculateLicenseEndTime(new Date(licenseStartTime), billingCycle, period)

  const formatPrice = (price: number) =>
    new Intl.NumberFormat('tr-TR', {
      style: 'currency',
      currency: 'TRY',
      minimumFractionDigits: 2,
    }).format(price)

  const vatRateLabel = (() => {
    const rates = Array.from(
      new Set(basketData.items.map((item) => Math.round((item.vatRate ?? 0) * 100))),
    ).filter((rate) => rate > 0)

    return rates.length > 0 ? ` (${rates.map((rate) => `%${rate}`).join(', ')})` : ''
  })()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onComplete({
      ...paymentData,
      licenseStartTime: new Date(licenseStartTime).toISOString(),
      licenseEndTime: licenseEndTime.toISOString(),
      paymentMethodId: selectedMethod?.id,
      installment:
        selectedPaymentMethod === defaultPaymentMethod
          ? (selectedInstallment?.installment ?? 1)
          : 1,
      commission,
      total: finalTotal,
    })
  }

  const handleInputChange = (field: string, value: string) => {
    setPaymentData((prev) => ({ ...prev, [field]: value }))
  }

  function calculateLicenseEndTime(
    startTime: Date,
    selectedBillingCycle: string,
    selectedPeriod: number,
  ) {
    const stopTime = new Date(startTime)

    if (selectedBillingCycle === 'monthly') {
      stopTime.setMonth(stopTime.getMonth() + selectedPeriod)
    } else {
      stopTime.setFullYear(stopTime.getFullYear() + selectedPeriod)
    }

    return stopTime
  }

  const formatDate = (date: Date) =>
    new Intl.DateTimeFormat('tr-TR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    }).format(date)

  const billingCycleLabel =
    billingCycle === 'monthly'
      ? translate('::Public.products.billingcycle.monthly')
      : billingCycle === 'yearly'
        ? translate('::Public.products.billingcycle.yearly')
        : '-'

  return (
    <div className="mx-auto px-4 lg:px-8 mt-5">
      {loading ? (
        <div className="text-center py-12 text-gray-500">{translate('::App.Loading')}</div>
      ) : (
        <form onSubmit={handleSubmit} className="flex flex-col lg:flex-row gap-6">
          {/* 3 Sütun: Ödeme Yöntemi | Taksit Seçenekleri | Sipariş Özeti */}
          <div className="w-full lg:w-1/3 flex flex-col gap-6">
            <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
              <h2 className="text-lg font-semibold mb-4 flex items-center text-gray-900 dark:text-gray-100">
                <FaCalendarAlt className="w-5 h-5 text-green-600 mr-2" />
                Lisans Bilgileri
              </h2>
              <div className="space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    License Start Time
                  </label>
                  <input
                    type="date"
                    required
                    value={licenseStartTime}
                    onChange={(e) => setLicenseStartTime(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                </div>
                <div className="grid grid-cols-1 gap-3 text-sm text-gray-700 dark:text-gray-300">
                  <div className="flex items-center justify-between rounded-lg bg-gray-50 px-4 py-3 dark:bg-gray-800/70">
                    <span className="font-medium">Period</span>
                    <span>{period}</span>
                  </div>
                  <div className="flex items-center justify-between rounded-lg bg-gray-50 px-4 py-3 dark:bg-gray-800/70">
                    <span className="font-medium">Billing Cycle</span>
                    <span>{billingCycleLabel}</span>
                  </div>
                  <div className="flex items-center justify-between rounded-lg bg-blue-50 px-4 py-3 text-blue-800 dark:bg-blue-950/40 dark:text-blue-200">
                    <span className="font-medium flex items-center gap-2">
                      <FaClock className="h-4 w-4" />
                      License End Time
                    </span>
                    <span>{formatDate(licenseEndTime)}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="w-full lg:w-1/3 flex flex-col gap-6">
            {/* 1. Sütun: Ödeme Yöntemi */}
            <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
              <h2 className="text-lg font-semibold mb-4 flex items-center">
                <FaLock className="w-5 h-5 text-green-600 mr-2" />{' '}
                {translate('::Public.payment.method.title')}
              </h2>
              <div className="space-y-3">
                {paymentMethods.map((method) => (
                  <label
                    key={method.id}
                    className={`group flex items-center gap-3 rounded-xl border p-4 cursor-pointer transition-all ${
                      selectedPaymentMethod === method.name
                        ? 'border-blue-500 bg-blue-50 shadow-sm ring-1 ring-blue-500/20 dark:border-blue-400 dark:bg-blue-950/30 dark:ring-blue-400/20'
                        : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
                    }`}
                  >
                    <input
                      type="radio"
                      name="paymentMethodId"
                      value={method.name}
                      checked={selectedPaymentMethod === method.name}
                      onChange={(e) => {
                        setSelectedPaymentMethod(e.target.value)
                      }}
                      className="sr-only"
                    />
                    <span
                      className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xl ${
                        selectedPaymentMethod === method.name
                          ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200'
                          : 'bg-gray-100 text-gray-500 group-hover:bg-blue-50 group-hover:text-blue-600 dark:bg-gray-800 dark:text-gray-300 dark:group-hover:bg-blue-900/30 dark:group-hover:text-blue-200'
                      }`}
                    >
                      {method.logo}
                    </span>
                    <div className="min-w-0 flex-1">
                      <div className="font-semibold text-gray-900 dark:text-gray-100">
                        {method.name}
                      </div>
                      <div className="text-sm text-gray-600 dark:text-gray-400">
                        {method.name === defaultPaymentMethod
                          ? translate('::Public.payment.method.installmentsAvailable')
                          : translate('::Public.payment.method.noCommission')}
                      </div>
                    </div>
                    <span
                      className={`h-3 w-3 shrink-0 rounded-full border ${
                        selectedPaymentMethod === method.name
                          ? 'border-blue-500 bg-blue-500 dark:border-blue-300 dark:bg-blue-300'
                          : 'border-gray-300 dark:border-gray-600'
                      }`}
                    />
                  </label>
                ))}
              </div>
            </div>

            {/* Taksit Seçenekleri */}
            {selectedPaymentMethod === defaultPaymentMethod && (
              <div className="bg-white rounded-xl shadow border p-4 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
                <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-2">
                  {translate('::App.Orders.InstallmentOptions')}
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                  {installmentOptions.map((option) => (
                    <label
                      key={option.id}
                      className={`flex flex-col items-center justify-center h-full p-4 border-2 rounded-xl cursor-pointer transition-all text-xs md:text-sm text-center select-none ${
                        selectedInstallment?.installment === option.installment
                          ? 'border-blue-500 bg-blue-50 shadow-md scale-105 dark:border-blue-400 dark:bg-blue-950/30 dark:shadow-blue-950/20'
                          : 'border-gray-200 bg-white hover:border-blue-200 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
                      }`}
                    >
                      <input
                        type="radio"
                        name="installment"
                        value={option.installment}
                        checked={selectedInstallment?.installment === option.installment}
                        onChange={() => setSelectedInstallment(option)}
                        className="sr-only"
                      />
                      <div className="font-semibold text-base mb-1">{option.name}</div>
                      <div className="text-gray-500 mb-1">
                        {translate('::Public.payment.installments.commission')}{' '}
                        <span className="font-semibold">
                          %{(option.commission * 100).toFixed(1)}
                        </span>
                      </div>
                      <div className="font-bold mb-1">
                        {option.installment > 1
                          ? `${option.installment} ${translate('::Public.payment.installments.monthly')}`
                          : translate('::Public.payment.installments.single')}
                      </div>
                      <div className="font-extrabold text-lg text-gray-900 dark:text-gray-100 mt-1">
                        {formatPrice(
                          (basketData.total + basketData.total * option.commission) /
                            option.installment,
                        )}
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* 3. Sütun: Kart Bilgileri + Sipariş Özeti ve Butonlar */}
          <div className="w-full lg:w-1/3 flex flex-col gap-6">
            {/* Kart Bilgileri */}
            {selectedPaymentMethod === defaultPaymentMethod && (
              <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40 space-y-3">
                <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-3">
                  {translate('::Public.payment.card.title')}
                </h3>
                <input
                  type="text"
                  required
                  value={paymentData.cardName}
                  onChange={(e) => handleInputChange('cardName', e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                  placeholder={translate('::Public.payment.card.name')}
                />
                <input
                  type="text"
                  required
                  value={paymentData.cardNumber}
                  onChange={(e) => handleInputChange('cardNumber', e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                  placeholder={translate('::Public.payment.card.number')}
                  maxLength={19}
                />
                <div className="grid grid-cols-2 gap-3">
                  <input
                    type="text"
                    required
                    value={paymentData.expiryDate}
                    onChange={(e) => handleInputChange('expiryDate', e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                    placeholder="MM/YY"
                    maxLength={5}
                  />
                  <input
                    type="text"
                    required
                    value={paymentData.cvv}
                    onChange={(e) => handleInputChange('cvv', e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                    placeholder="CVV"
                    maxLength={4}
                  />
                </div>
              </div>
            )}

            {/* Sipariş Özeti ve Butonlar */}
            <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                {translate('::Public.payment.summary.title')}
              </h3>

              <div className="space-y-4 mb-4">
                {basketData.items.map((item, index) => (
                  <div key={`${item.product.id}-${index}`} className="text-sm">
                    <div className="flex items-center justify-between gap-4">
                      <div className="flex min-w-0 items-center gap-3">
                        {item.product.imageUrl && (
                          <img
                            src={item.product.imageUrl}
                            alt={translate('::' + item.product.name)}
                            className="h-10 w-10 shrink-0 rounded-md object-cover"
                          />
                        )}
                        <div className="min-w-0">
                          <div className="truncate font-medium">
                            {translate('::' + item.product.name)}
                          </div>
                          {item.product.isQuantityBased && (
                            <div className="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
                              x {item.quantity}
                            </div>
                          )}
                        </div>
                      </div>
                      <div className="font-medium text-right">{formatPrice(item.totalPrice)}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="space-y-1 text-sm border-t border-gray-200 dark:border-gray-700 pt-4 text-gray-600 dark:text-gray-300">
                <div className="flex justify-between">
                  <span>{translate('::Public.payment.summary.subtotal')}</span>
                  <span>{formatPrice(basketData.subtotal)}</span>
                </div>
                <div className="flex justify-between">
                  <span>{translate('::Public.products.kdv')}{vatRateLabel}</span>
                  <span>{formatPrice(basketData.vatTotal)}</span>
                </div>
                <div className="flex justify-between">
                  <span>{translate('::Public.payment.installments.commission')}</span>
                  <span>{formatPrice(commission)}</span>
                </div>
                {selectedPaymentMethod === defaultPaymentMethod &&
                  selectedInstallment?.installment &&
                  selectedInstallment.installment > 1 && (
                    <div className="flex justify-between text-blue-600">
                      <span>{translate('::Public.payment.summary.monthlyInstallment')}: </span>
                      <span>
                        {formatPrice(finalTotal / selectedInstallment.installment)} x{' '}
                        {selectedInstallment.installment}
                      </span>
                    </div>
                  )}
                <div className="flex justify-between text-base font-bold pt-2 text-gray-900 dark:text-gray-100">
                  <span>{translate('::App.Listform.ListformField.Total')}</span>
                  <span className="text-blue-600">{formatPrice(finalTotal)}</span>
                </div>
              </div>

              {/* Butonlar */}
              <div className="flex justify-between items-center mt-6">
                <Button
                  type="button"
                  onClick={onBack}
                  icon={<FaArrowLeft className="w-4 h-4" />}
                  variant="default"
                  size="sm"
                >
                  {translate('::Back')}
                </Button>
                <Button
                  type="submit"
                  icon={<FaCreditCard className="w-5 h-5" />}
                  variant="solid"
                  size="sm"
                >
                  {selectedPaymentMethod === 'bank-transfer'
                    ? translate('::Public.payment.buttons.completeOrder')
                    : translate('::Public.payment.buttons.pay')}
                </Button>
              </div>
            </div>
          </div>
        </form>
      )}
    </div>
  )
}