'use client'

import { useState } from 'react'
import { useRouter } from '@/i18n/navigation'
import { useTranslations } from 'next-intl'
import { Wallet, Building2, AlertCircle, CheckCircle } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'
import { MIN_WITHDRAWAL_AMOUNT } from '@/lib/referral/withdrawalRules'
import { getApiErrorMessage } from '@/lib/utils/apiError'

interface WithdrawFormProps {
  availableBalance: number
}

// Bank Transfer only — this app's real payment infra (see the earlier
// checkout work) never built EasyPaisa/JazzCash integrations, so offering
// them here would be the same "looks real but isn't" trap already avoided
// at checkout. `bank_name`/`account_title`/`account_number` match the real
// `withdrawal_requests` schema exactly.
export default function WithdrawForm({ availableBalance }: WithdrawFormProps) {
  const router = useRouter()
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('Account.earnings')
  const [amount, setAmount] = useState('')
  const [bankName, setBankName] = useState('')
  const [accountTitle, setAccountTitle] = useState('')
  const [accountNumber, setAccountNumber] = useState('')
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const amountNum = parseFloat(amount) || 0

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!amount || amountNum < MIN_WITHDRAWAL_AMOUNT) {
      setError(t('minWithdrawalError', { amount: formatAmount(MIN_WITHDRAWAL_AMOUNT) }))
      return
    }
    if (amountNum > availableBalance) {
      setError(t('insufficientBalance', { amount: formatAmount(availableBalance) }))
      return
    }
    if (!bankName || !accountTitle || !accountNumber) {
      setError(t('bankDetailsRequired'))
      return
    }

    setIsSubmitting(true)
    try {
      const res = await fetch('/api/frontend/earnings/withdraw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ amount: amountNum, bank_name: bankName, account_title: accountTitle, account_number: accountNumber }),
      })
      const data = await res.json()
      if (!res.ok || !data.success) {
        setError(getApiErrorMessage(data, t('withdrawFailed')))
        return
      }
      setSuccess(true)
      setTimeout(() => router.push('/account/earnings'), 2000)
    } catch {
      setError(t('networkError'))
    } finally {
      setIsSubmitting(false)
    }
  }

  if (success) {
    return (
      <div className="text-center py-8">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle size={32} className="text-green-600" />
        </div>
        <h3 className="text-lg font-semibold text-dark mb-2">{t('withdrawSubmittedTitle')}</h3>
        <p className="text-gray-custom text-sm">{t('withdrawSubmittedDescription')}</p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Balance Info */}
      <div className="bg-primary/10 rounded-lg p-4 text-center">
        <p className="text-sm text-gray-custom">{t('availableBalance')}</p>
        <p className="text-2xl font-bold text-primary">{formatAmount(availableBalance)}</p>
      </div>

      {/* Amount */}
      <div>
        <label className="block text-dark font-medium mb-2">{t('amount')}</label>
        <div className="relative">
          <Wallet size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder={t('minAmountPlaceholder', { amount: formatAmount(MIN_WITHDRAWAL_AMOUNT) })}
            className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none"
          />
        </div>
      </div>

      {/* Bank Details */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 text-dark font-medium">
          <Building2 size={18} className="text-primary" />
          {t('bankDetails')}
        </div>
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">{t('bankName')}</label>
          <input
            type="text"
            value={bankName}
            onChange={(e) => setBankName(e.target.value)}
            className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none"
          />
        </div>
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">{t('accountTitle')}</label>
          <input
            type="text"
            value={accountTitle}
            onChange={(e) => setAccountTitle(e.target.value)}
            placeholder={t('accountTitlePlaceholder')}
            className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none"
          />
        </div>
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">{t('accountNumber')}</label>
          <input
            type="text"
            value={accountNumber}
            onChange={(e) => setAccountNumber(e.target.value)}
            className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none"
          />
        </div>
      </div>

      {/* Error Message */}
      {error && (
        <div className="flex items-center gap-2 p-3 bg-red-50 text-red-600 rounded-lg text-sm">
          <AlertCircle size={16} />
          {error}
        </div>
      )}

      {/* Submit Button */}
      <button
        type="submit"
        disabled={isSubmitting || !amount || !bankName || !accountTitle || !accountNumber}
        className="w-full bg-gradient-primary text-white py-3 rounded-lg font-semibold hover:shadow-md transition disabled:opacity-50"
      >
        {isSubmitting ? (
          <div className="flex items-center justify-center gap-2">
            <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
            {t('processing')}
          </div>
        ) : (
          t('requestWithdrawal')
        )}
      </button>

      <p className="text-xs text-gray-custom text-center">{t('withdrawalReviewNote')}</p>
    </form>
  )
}