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

import React, { useEffect, useState } from 'react'
import {
  CreditCard,
  Lock,
  ArrowLeft,
  User,
  Building,
  Mail,
  Phone,
  MapPin,
  Map,
  Globe,
  Banknote,
  BadgeDollarSign,
  UserPlus,
} from 'lucide-react'
import {
  BillingCycle,
  BasketItem,
  InstallmentOptionDto,
  PaymentMethodDto,
} from '@/proxy/order/models'
import { OrderService } from '@/services/order.service'
import { CustomTenantDto } from '@/proxy/config/models'

interface CartState {
  items: BasketItem[]
  total: number
  globalBillingCycle: BillingCycle
  globalPeriod: number
}

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

export const PaymentForm: React.FC<PaymentFormProps> = ({
  tenant,
  onBack,
  onComplete,
  cartState,
}) => {
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>('credit-card')
  const [selectedInstallment, setSelectedInstallment] = useState<InstallmentOptionDto>()
  const [paymentData, setPaymentData] = useState({
    cardNumber: '',
    expiryDate: '',
    cvv: '',
    cardName: '',
  })

  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].id)
        }

        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.id === selectedPaymentMethod)

  let commission = 0
  if (selectedPaymentMethod === 'credit-card' && selectedInstallment) {
    commission = cartState.total * selectedInstallment.commission
  } else if (selectedMethod) {
    commission = cartState.total * selectedMethod.commission
  }

  const finalTotal = cartState.total + commission

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onComplete({
      ...paymentData,
      paymentMethod: selectedMethod?.name ?? '',
      installments: selectedPaymentMethod === 'credit-card' ? (selectedInstallment?.id ?? 1) : 1,
      installmentName:
        selectedPaymentMethod === 'credit-card' ? (selectedInstallment?.name ?? '') : 'Tek Ödeme',
      commission,
      total: finalTotal,
    })
  }

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

  return (
    <div className="mx-auto px-4 lg:px-8 mb-6">
      {loading ? (
        <div className="text-center py-12 text-gray-500">Yükleniyor...</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">
              {tenant && (
                <>
                  <h2 className="text-lg font-semibold mb-4 flex items-center">
                    <User className="w-5 h-5 text-green-600 mr-2" /> Müşteri Bilgileri
                  </h2>
                  <div className="pt-4 border-t border-gray-200">
                    <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700">
                      <div className="flex items-center gap-2">
                        <User className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Kurum Kodu:</span>
                        <span>{tenant.name}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <User className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Kurucu:</span>
                        <span>{tenant.founder}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <Building className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Şirket:</span>
                        <span>{tenant.institutionName}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <Mail className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">E-posta:</span>
                        <span>{tenant.email}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <Phone className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Telefon:</span>
                        <span>{tenant.phone}</span>
                      </div>

                      <div className="flex items-start gap-2">
                        <MapPin className="w-4 h-4 text-gray-500 mt-0.5" />
                        <div>
                          <span className="font-medium">Adres:</span>
                          <div>{tenant.address}</div>
                        </div>
                      </div>

                      <div className="flex items-center gap-2">
                        <Globe className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Ülke:</span>
                        <span>{tenant.country}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <Globe className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Şehir:</span>
                        <span>{tenant.city}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <Map className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">İlçe:</span>
                        <span>{tenant.district}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <MapPin className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Posta Kodu:</span>
                        <span>{tenant.postalCode}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <Banknote className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Vergi Dairesi:</span>
                        <span>{tenant.taxOffice}</span>
                      </div>

                      <div className="flex items-center gap-2">
                        <BadgeDollarSign className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Vergi No:</span>
                        <span>{tenant.vknTckn}</span>
                      </div>

                      {tenant.reference && (
                        <div className="flex items-center gap-2">
                          <UserPlus className="w-4 h-4 text-gray-500" />
                          <span className="font-medium">Referans:</span>
                          <span>{tenant.reference}</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">
              <h2 className="text-lg font-semibold mb-4 flex items-center">
                <Lock className="w-5 h-5 text-green-600 mr-2" /> Ödeme Yöntemi
              </h2>
              <div className="space-y-2">
                {paymentMethods.map((method) => (
                  <label
                    key={method.id}
                    className={`flex items-center p-3 border-2 rounded-lg cursor-pointer transition-all ${
                      selectedPaymentMethod === method.id
                        ? 'border-blue-500 bg-blue-50'
                        : 'border-gray-200 hover:border-gray-300'
                    }`}
                  >
                    <input
                      type="radio"
                      name="paymentMethod"
                      value={method.id}
                      checked={selectedPaymentMethod === method.id}
                      onChange={(e) => setSelectedPaymentMethod(e.target.value)}
                      className="sr-only"
                    />
                    <span className="text-2xl mr-3">{method.logo}</span>
                    <div>
                      <div className="font-medium text-gray-900">{method.name}</div>
                      <div className="text-sm text-gray-600">
                        {method.id === 'credit-card' ? 'Taksit seçenekleri mevcut' : 'Komisyon yok'}
                      </div>
                    </div>
                  </label>
                ))}
              </div>
            </div>

            {/* Taksit Seçenekleri */}
            {selectedPaymentMethod === 'credit-card' && (
              <div className="bg-white rounded-xl shadow border p-4">
                <h3 className="text-md font-medium text-gray-800 mb-2">Taksit Seçenekleri</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?.id === option.id
                          ? 'border-blue-500 bg-blue-50 shadow-md scale-105'
                          : 'border-gray-200 hover:border-blue-200'
                      }`}
                    >
                      <input
                        type="radio"
                        name="installment"
                        value={option.id}
                        checked={selectedInstallment?.id === option.id}
                        onChange={() => setSelectedInstallment(option)}
                        className="sr-only"
                      />
                      <div className="font-semibold text-base mb-1">{option.name}</div>
                      <div className="text-gray-500 mb-1">
                        Komisyon:{' '}
                        <span className="font-semibold">
                          %{(option.commission * 100).toFixed(1)}
                        </span>
                      </div>
                      <div className="text-blue-700 font-bold mb-1">
                        {option.id > 1 ? `${option.id} x aylık` : 'Tek ödeme'}
                      </div>
                      <div className="font-extrabold text-lg text-gray-900 mt-1">
                        {formatPrice(
                          (cartState.total + cartState.total * option.commission) / option.id,
                        )}
                      </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 !== 'bank-transfer' && (
              <div className="bg-white rounded-xl shadow border p-6 space-y-3">
                <h3 className="text-md font-medium text-gray-800 mb-3">Kart Bilgileri</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"
                  placeholder="Kart Üzerindeki İsim"
                />
                <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"
                  placeholder="Kart Numarası"
                  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"
                    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"
                    placeholder="CVV"
                    maxLength={4}
                  />
                </div>
              </div>
            )}

            {/* Sipariş Özeti ve Butonlar */}
            <div className="bg-white rounded-xl shadow border p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Sipariş Özeti</h3>

              <div className="space-y-4 mb-4">
                {cartState.items.map((item, index) => (
                  <div key={`${item.product.id}-${index}`} className="flex justify-between text-sm">
                    <div>
                      <div className="font-medium">{item.product.name}</div>
                      <div className="text-gray-500">
                        {item.quantity}x -{' '}
                        {item.billingCycle === 'monthly'
                          ? 'Aylık'
                          : item.billingCycle === 'yearly'
                            ? 'Yıllık'
                            : 'Aylık'}{' '}
                        {cartState.globalPeriod > 1 &&
                          `(${cartState.globalPeriod} ${item.billingCycle === 'monthly' ? 'Ay' : 'Yıl'})`}
                      </div>
                    </div>
                    <div className="font-medium">{formatPrice(item.totalPrice)}</div>
                  </div>
                ))}
              </div>

              <div className="space-y-1 text-sm border-t border-gray-200 pt-4 text-gray-600">
                <div className="flex justify-between">
                  <span>Ara Toplam:</span>
                  <span>{formatPrice(cartState.total)}</span>
                </div>
                <div className="flex justify-between">
                  <span>Komisyon:</span>
                  <span>{formatPrice(commission)}</span>
                </div>
                {selectedPaymentMethod === 'credit-card' &&
                  selectedInstallment?.id &&
                  selectedInstallment.id > 1 && (
                    <div className="flex justify-between text-blue-600">
                      <span>Aylık Taksit:</span>
                      <span>
                        {formatPrice(finalTotal / selectedInstallment.id)} x{' '}
                        {selectedInstallment.id}
                      </span>
                    </div>
                  )}
                <div className="flex justify-between text-base font-bold pt-2 text-gray-900">
                  <span>Toplam:</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}
                  className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg"
                >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Geri
                </button>
                <button
                  type="submit"
                  className="flex items-center justify-center px-6 py-3 bg-green-600 text-white rounded-lg"
                >
                  <CreditCard className="w-5 h-5 mr-2" />
                  {selectedPaymentMethod === 'bank-transfer' ? 'Siparişi Tamamla' : 'Ödeme Yap'}
                </button>
              </div>
            </div>
          </div>
        </form>
      )}
    </div>
  )
}