'use client'

import { useEffect, useState } from 'react'
import { useTranslations } from 'next-intl'
import { Building2, Wallet } from 'lucide-react'

export interface BankAccount {
  id: number
  bankName: string
  accountTitle: string
  accountNumber: string
  iban: string | null
  branchCode: string | null
  swiftCode: string | null
}

export type PaymentMethod = 'cod' | 'bank_transfer'

interface PaymentMethodsProps {
  selectedMethod: PaymentMethod | ''
  onSelect: (method: PaymentMethod) => void
  // Which methods the admin actually enabled (site_settings.enabled_payment_methods,
  // filtered to what this storefront can fulfill) — defaults to both, matching
  // this store's own fallback for an admin who's never touched that setting.
  enabledMethods?: PaymentMethod[]
}

// COD and Bank Transfer are the only two `orders.payment_method` values
// this storefront can actually fulfill without a real payment gateway
// integration (paypal/stripe exist in the DB enum but need merchant
// credentials this project doesn't have) — see Till_Done.md for the scoping
// decision. Each one only shows when the admin has it checked in Settings →
// Order (`enabledMethods`) AND, for Bank Transfer, real active bank accounts
// exist (src/lib/db/queries/getBankAccounts.ts) — same "hide, don't fake it"
// convention as every other empty-state section in this app.
export default function PaymentMethods({ selectedMethod, onSelect, enabledMethods = ['cod', 'bank_transfer'] }: PaymentMethodsProps) {
  const t = useTranslations('Checkout')
  const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    fetch('/api/frontend/bank-accounts')
      .then((res) => res.json())
      .then((data) => {
        if (!cancelled && data.success) setBankAccounts(data.data)
      })
      .catch(() => {})
      .finally(() => {
        if (!cancelled) setLoading(false)
      })
    return () => { cancelled = true }
  }, [])

  const codEnabled = enabledMethods.includes('cod')
  const hasBankTransfer = enabledMethods.includes('bank_transfer') && !loading && bankAccounts.length > 0

  if (!codEnabled && !hasBankTransfer && !loading) {
    return <p className="text-sm text-gray-custom">{t('noPaymentMethodsAvailable')}</p>
  }

  return (
    <div className="space-y-3">
      {codEnabled && (
        <label
          className={`flex items-start gap-3 p-4 border rounded-xl cursor-pointer transition-all ${
            selectedMethod === 'cod' ? 'border-primary bg-primary/5' : 'border-gray-200 hover:border-primary'
          }`}
        >
          <input
            type="radio"
            name="paymentMethod"
            checked={selectedMethod === 'cod'}
            onChange={() => onSelect('cod')}
            className="mt-1 w-4 h-4 text-primary focus:ring-primary"
          />
          <Wallet size={20} className={selectedMethod === 'cod' ? 'text-primary' : 'text-gray-custom'} />
          <div className="flex-1">
            <p className={`font-medium ${selectedMethod === 'cod' ? 'text-primary' : 'text-dark'}`}>{t('cod')}</p>
            <p className="text-xs text-gray-custom">{t('codDescription')}</p>
          </div>
        </label>
      )}

      {hasBankTransfer && (
        <label
          className={`flex items-start gap-3 p-4 border rounded-xl cursor-pointer transition-all ${
            selectedMethod === 'bank_transfer' ? 'border-primary bg-primary/5' : 'border-gray-200 hover:border-primary'
          }`}
        >
          <input
            type="radio"
            name="paymentMethod"
            checked={selectedMethod === 'bank_transfer'}
            onChange={() => onSelect('bank_transfer')}
            className="mt-1 w-4 h-4 text-primary focus:ring-primary"
          />
          <Building2 size={20} className={selectedMethod === 'bank_transfer' ? 'text-primary' : 'text-gray-custom'} />
          <div className="flex-1">
            <p className={`font-medium ${selectedMethod === 'bank_transfer' ? 'text-primary' : 'text-dark'}`}>{t('bankTransfer')}</p>
            <p className="text-xs text-gray-custom">{t('bankTransferDescription')}</p>

            {selectedMethod === 'bank_transfer' && (
              <div className="mt-3 space-y-3">
                {bankAccounts.map((account) => (
                  <div key={account.id} className="bg-light-gray rounded-lg p-3 text-sm space-y-1">
                    <p className="font-semibold text-dark">{account.bankName}</p>
                    <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-custom">
                      <span>{t('accountTitle')}: <span className="text-dark">{account.accountTitle}</span></span>
                      <span>{t('accountNumber')}: <span className="text-dark">{account.accountNumber}</span></span>
                      {account.iban && <span>{t('iban')}: <span className="text-dark">{account.iban}</span></span>}
                      {account.swiftCode && <span>{t('swiftCode')}: <span className="text-dark">{account.swiftCode}</span></span>}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </label>
      )}
    </div>
  )
}