'use client'

import { useEffect, useState } from 'react'
import { Wallet, ArrowDownCircle, ArrowUpCircle, Loader2, Send, TrendingUp, TrendingDown, Clock, CheckCircle, XCircle, AlertCircle, Settings } from 'lucide-react'
import Link from 'next/link'
import toast from 'react-hot-toast'
import { formatCurrency } from '@/lib/utils'
import Pagination, { PaginationData } from '@/components/Pagination'

const WITHDRAWAL_STATUS: Record<string, { label: string; color: string; icon: any }> = {
  pending: { label: 'Menunggu', color: 'bg-yellow-100 text-yellow-800', icon: Clock },
  approved: { label: 'Disetujui', color: 'bg-green-100 text-green-800', icon: CheckCircle },
  rejected: { label: 'Ditolak', color: 'bg-red-100 text-red-800', icon: XCircle },
  completed: { label: 'Selesai', color: 'bg-blue-100 text-blue-800', icon: CheckCircle },
}

export default function WalletPage() {
  const [loading, setLoading] = useState(true)
  const [walletData, setWalletData] = useState<any>(null)
  const [withdrawals, setWithdrawals] = useState<any[]>([])
  const [tab, setTab] = useState<'transactions' | 'withdrawals' | 'withdraw'>('transactions')
  const [submitting, setSubmitting] = useState(false)
  const [txPagination, setTxPagination] = useState<PaginationData>({ page: 1, limit: 20, total: 0, totalPages: 0 })
  const [wdPagination, setWdPagination] = useState<PaginationData>({ page: 1, limit: 20, total: 0, totalPages: 0 })

  // Withdrawal form
  const [withdrawAmount, setWithdrawAmount] = useState('')
  const [bankName, setBankName] = useState('')
  const [bankAccount, setBankAccount] = useState('')
  const [bankHolder, setBankHolder] = useState('')
  const [withdrawNotes, setWithdrawNotes] = useState('')

  const fetchWallet = async (page = 1) => {
    try {
      const res = await fetch(`/api/wallet?page=${page}`)
      const data = await res.json()
      setWalletData(data)
      if (data.pagination) setTxPagination(data.pagination)
    } catch {}
  }

  const fetchWithdrawals = async (page = 1) => {
    try {
      const res = await fetch(`/api/wallet/withdrawals?page=${page}`)
      const data = await res.json()
      setWithdrawals(data.withdrawals || [])
      if (data.pagination) setWdPagination(data.pagination)
    } catch {}
  }

  const fetchData = async () => {
    try {
      const [,, settingsRes] = await Promise.all([
        fetchWallet(1),
        fetchWithdrawals(1),
        fetch('/api/settings').then(r => r.json()),
      ])
      // Pre-fill bank info from saved settings
      if (settingsRes.settings) {
        if (settingsRes.settings.bank_name && !bankName) setBankName(settingsRes.settings.bank_name)
        if (settingsRes.settings.bank_account && !bankAccount) setBankAccount(settingsRes.settings.bank_account)
        if (settingsRes.settings.bank_holder && !bankHolder) setBankHolder(settingsRes.settings.bank_holder)
      }
    } catch { toast.error('Gagal memuat data wallet') }
    finally { setLoading(false) }
  }

  useEffect(() => { fetchData() }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const handleWithdraw = async () => {
    if (!withdrawAmount || !bankName || !bankAccount || !bankHolder) {
      toast.error('Lengkapi semua data penarikan')
      return
    }
    setSubmitting(true)
    try {
      const res = await fetch('/api/wallet/withdraw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: parseInt(withdrawAmount),
          bankName, bankAccount, bankHolder,
          notes: withdrawNotes || null,
        }),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error)
      toast.success('Penarikan berhasil diajukan!')
      setWithdrawAmount(''); setBankName(''); setBankAccount(''); setBankHolder(''); setWithdrawNotes('')
      setTab('withdrawals')
      fetchWallet(1)
      fetchWithdrawals(1)
    } catch (err: any) { toast.error(err.message || 'Gagal mengajukan penarikan') }
    finally { setSubmitting(false) }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
      </div>
    )
  }

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dompet</h1>
        <p className="text-gray-600 dark:text-gray-300 mt-1">Kelola saldo dan penarikan dana Anda.</p>
      </div>

      {/* Balance Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="card bg-gradient-to-br from-primary-600 to-primary-700 text-white">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
              <Wallet className="w-5 h-5" />
            </div>
            <p className="text-sm text-primary-100">Saldo Tersedia</p>
          </div>
          <p className="text-3xl font-bold">{formatCurrency(walletData?.balance || 0)}</p>
        </div>
        <div className="card">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-green-600" />
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400">Total Pemasukan</p>
          </div>
          <p className="text-2xl font-bold text-gray-900 dark:text-white">{formatCurrency(walletData?.totalIncome || 0)}</p>
        </div>
        <div className="card">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
              <TrendingDown className="w-5 h-5 text-red-600" />
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400">Total Penarikan</p>
          </div>
          <p className="text-2xl font-bold text-gray-900 dark:text-white">{formatCurrency(walletData?.totalWithdrawn || 0)}</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 bg-gray-100 dark:bg-gray-700/50 rounded-lg p-1 mb-6">
        {[
          { key: 'transactions', label: 'Riwayat Transaksi' },
          { key: 'withdrawals', label: 'Penarikan Dana' },
          { key: 'withdraw', label: 'Tarik Dana' },
        ].map(t => (
          <button key={t.key} onClick={() => setTab(t.key as any)}
            className={`flex-1 py-2 rounded-md text-sm font-medium transition-colors ${
              tab === t.key ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
            }`}>
            {t.label}
          </button>
        ))}
      </div>

      {/* Transactions Tab */}
      {tab === 'transactions' && (
        <div className="card">
          {walletData?.transactions?.length === 0 ? (
            <p className="text-center text-gray-500 dark:text-gray-400 py-12">Belum ada transaksi</p>
          ) : (
            <div className="space-y-3">
              {walletData?.transactions?.map((tx: any) => (
                <div key={tx.id} className="flex items-center justify-between py-3 border-b border-gray-100 dark:border-gray-700 last:border-0">
                  <div className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      tx.type === 'credit' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
                    }`}>
                      {tx.type === 'credit'
                        ? <ArrowDownCircle className="w-4 h-4 text-green-600" />
                        : <ArrowUpCircle className="w-4 h-4 text-red-600" />}
                    </div>
                    <div>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">{tx.description}</p>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{new Date(tx.createdAt).toLocaleString('id-ID')}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className={`font-bold ${tx.type === 'credit' ? 'text-green-600' : 'text-red-600'}`}>
                      {tx.type === 'credit' ? '+' : '-'}{formatCurrency(tx.amount)}
                    </p>
                    <p className="text-xs text-gray-400 dark:text-gray-500">Saldo: {formatCurrency(tx.balanceAfter)}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
          <Pagination pagination={txPagination} onPageChange={(page) => fetchWallet(page)} itemLabel="transaksi" />
        </div>
      )}

      {/* Withdrawals Tab */}
      {tab === 'withdrawals' && (
        <div className="card">
          {withdrawals.length === 0 ? (
            <p className="text-center text-gray-500 dark:text-gray-400 py-12">Belum ada penarikan</p>
          ) : (
            <div className="space-y-3">
              {withdrawals.map((w: any) => {
                const status = WITHDRAWAL_STATUS[w.status] || WITHDRAWAL_STATUS.pending
                const StatusIcon = status.icon
                return (
                  <div key={w.id} className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <span className={`text-xs font-medium px-2 py-1 rounded-full inline-flex items-center gap-1 ${status.color}`}>
                        <StatusIcon className="w-3 h-3" /> {status.label}
                      </span>
                      <p className="font-bold text-gray-900 dark:text-white">{formatCurrency(w.amount)}</p>
                    </div>
                    <div className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                      <p>{w.bankName} - {w.bankAccount} ({w.bankHolder})</p>
                      <p className="text-xs text-gray-400 dark:text-gray-500">{new Date(w.createdAt).toLocaleString('id-ID')}</p>
                      {w.adminNotes && (
                        <div className="mt-2 bg-gray-50 dark:bg-gray-900 rounded p-2">
                          <p className="text-xs text-gray-500 dark:text-gray-400"><strong>Catatan Admin:</strong> {w.adminNotes}</p>
                        </div>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          )}
          <Pagination pagination={wdPagination} onPageChange={(page) => fetchWithdrawals(page)} itemLabel="penarikan" />
        </div>
      )}

      {/* Withdraw Form Tab */}
      {tab === 'withdraw' && (
        <div className="card max-w-lg">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <Send className="w-5 h-5 text-primary-600" /> Ajukan Penarikan Dana
          </h3>

          {walletData?.balance > 0 ? (
            <div className="space-y-4">
              {!bankName && !bankAccount && (
                <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                  <div className="flex gap-2">
                    <Settings className="w-4 h-4 text-blue-600 flex-shrink-0 mt-0.5" />
                    <p className="text-xs text-blue-800 dark:text-blue-300">
                      Simpan data rekening di <Link href="/dashboard/settings" className="font-medium underline">Pengaturan</Link> agar otomatis terisi saat penarikan.
                    </p>
                  </div>
                </div>
              )}
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Jumlah Penarikan</label>
                <input type="number" className="input-field" placeholder="Minimum 50.000"
                  value={withdrawAmount} onChange={(e) => setWithdrawAmount(e.target.value)} />
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Saldo tersedia: {formatCurrency(walletData?.balance || 0)}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nama Bank</label>
                <select className="input-field" value={bankName} onChange={(e) => setBankName(e.target.value)}>
                  <option value="">Pilih Bank</option>
                  <option value="BCA">BCA</option>
                  <option value="BNI">BNI</option>
                  <option value="BRI">BRI</option>
                  <option value="Mandiri">Mandiri</option>
                  <option value="CIMB Niaga">CIMB Niaga</option>
                  <option value="Permata">Permata</option>
                  <option value="BSI">BSI</option>
                  <option value="Danamon">Danamon</option>
                  <option value="Lainnya">Lainnya</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nomor Rekening</label>
                <input type="text" className="input-field" placeholder="Masukkan nomor rekening"
                  value={bankAccount} onChange={(e) => setBankAccount(e.target.value)} />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nama Pemilik Rekening</label>
                <input type="text" className="input-field" placeholder="Sesuai buku tabungan"
                  value={bankHolder} onChange={(e) => setBankHolder(e.target.value)} />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Catatan (opsional)</label>
                <textarea className="input-field" rows={2} placeholder="Catatan tambahan"
                  value={withdrawNotes} onChange={(e) => setWithdrawNotes(e.target.value)} />
              </div>

              <div className="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
                <div className="flex gap-2">
                  <AlertCircle className="w-4 h-4 text-yellow-600 flex-shrink-0 mt-0.5" />
                  <p className="text-xs text-yellow-800 dark:text-yellow-300">
                    Penarikan akan diproses setelah disetujui oleh admin. Proses biasanya memakan waktu 1-3 hari kerja.
                  </p>
                </div>
              </div>

              <button onClick={handleWithdraw} disabled={submitting}
                className="btn-primary w-full flex items-center justify-center gap-2">
                {submitting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
                {submitting ? 'Mengajukan...' : 'Ajukan Penarikan'}
              </button>
            </div>
          ) : (
            <div className="text-center py-8">
              <Wallet className="w-12 h-12 text-gray-300 dark:text-gray-500 mx-auto mb-3" />
              <p className="text-gray-500 dark:text-gray-400">Saldo Anda kosong</p>
              <p className="text-sm text-gray-400 dark:text-gray-500">Saldo akan bertambah saat ada pembayaran online dari customer</p>
            </div>
          )}
        </div>
      )}
    </div>
  )
}