'use client'

import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/navigation'
import axios from 'axios'
import { toast } from 'sonner'
import { formatCurrency, fmtDate } from '@/lib/utils'
import { DollarSign, CheckCircle2 } from 'lucide-react'
import { StatCard, Card, Badge, Button, Modal, Input, Select, PageHeader, Amount, Alert } from '@/components/ui/components'

// ── Maps disbursement method → GL account code ────────────────────────────────
// Must match your Chart of Accounts:
//   1101  Cash in Hand
//   1102  Bank - Equity   (default for BANK_TRANSFER, CHEQUE, EFT, RTGS)
//   1103  M-Pesa Float
const METHOD_GL_MAP: Record<string, string> = {
  BANK_TRANSFER: '1102',
  CHEQUE:        '1102',
  EFT:           '1102',
  RTGS:          '1102',
  MPESA:         '1103',
  CASH:          '1101',
}

const DISBURSE_METHODS = [
  { value: 'BANK_TRANSFER', label: 'Bank Transfer' },
  { value: 'MPESA',         label: 'M-Pesa'        },
  { value: 'CASH',          label: 'Cash'           },
  { value: 'CHEQUE',        label: 'Cheque'         },
  { value: 'EFT',           label: 'EFT / RTGS'    },
]

export default function DisbursementsPage() {
  const router = useRouter()
  const qc     = useQueryClient()
  const [selected, setSelected] = useState<any>(null)
  const [form, setForm] = useState({
    disbursementMethod:    'BANK_TRANSFER',
    disbursementReference: '',
  })

  const { data, isLoading } = useQuery({
    queryKey: ['approved-loans'],
    queryFn:  () => axios.get('/api/loans?status=APPROVED&pageSize=100').then(r => r.data),
    refetchInterval: 30000,
  })

  const disburseMutation = useMutation({
    mutationFn: ({ loanId, ...payload }: any) =>
      axios.patch(`/api/loans/${loanId}`, { action: 'DISBURSE', ...payload }),
    onSuccess: () => {
      toast.success('Loan disbursed successfully')
      qc.invalidateQueries({ queryKey: ['approved-loans'] })
      setSelected(null)
    },
    onError: (e: any) =>
      toast.error(e.response?.data?.error ?? e.message ?? 'Disbursement failed'),
  })

  const handleDisburse = () => {
    if (!selected) return
    disburseMutation.mutate({
      loanId:                selected.id,
      disbursementMethod:    form.disbursementMethod,
      disbursementReference: form.disbursementReference,
      // Pass the correct GL account code for this method — prevents "GL account not found"
      bankAccountCode:       METHOD_GL_MAP[form.disbursementMethod] ?? '1102',
    })
  }

  const openModal = (loan: any) => {
    setSelected(loan)
    setForm({
      disbursementMethod:    loan.disbursementMethod ?? 'BANK_TRANSFER',
      disbursementReference: '',
    })
  }

  const loans    = data?.data ?? []
  const totalAmt = loans.reduce((s: number, l: any) => s + parseFloat(l.principalAmount ?? 0), 0)

  // For the modal preview — net after fee if deducted
  const selectedPrincipal = parseFloat(selected?.principalAmount ?? 0)
  const selectedFee       = parseFloat(selected?.processingFee ?? 0)
  const selectedNet       = selected?.product?.processingFeeDeducted
    ? selectedPrincipal - selectedFee
    : selectedPrincipal

  return (
    <div className="p-6 space-y-5 max-w-screen-xl mx-auto">
      <PageHeader
        title="Disbursement Queue"
        description="Approved loans ready for disbursement"
        icon={<DollarSign className="w-6 h-6" />}
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <StatCard
          label="Loans Ready to Disburse"
          value={loans.length}
          sub="All approved"
          icon={<DollarSign className="w-5 h-5" />}
          color="green"
        />
        <StatCard
          label="Total Amount to Disburse"
          value={formatCurrency(totalAmt)}
          icon={<DollarSign className="w-5 h-5" />}
          color="blue"
        />
      </div>

      <Card>
        <div className="overflow-x-auto">
          <table className="table-lms w-full">
            <thead>
              <tr>
                <th>Loan Ref</th>
                <th>Member</th>
                <th>Product</th>
                <th>Principal</th>
                <th>Processing Fee</th>
                <th>Net Disbursement</th>
                <th>Method</th>
                <th>Approved</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {isLoading
                ? Array.from({ length: 5 }).map((_, i) => (
                    <tr key={i}>
                      {Array.from({ length: 9 }).map((_, j) => (
                        <td key={j}><div className="h-4 bg-muted rounded animate-pulse" /></td>
                      ))}
                    </tr>
                  ))
                : loans.length === 0
                  ? (
                    <tr>
                      <td colSpan={9} className="text-center py-12 text-muted-foreground">
                        <CheckCircle2 className="w-10 h-10 mx-auto mb-2 text-green-500 opacity-50" />
                        No loans pending disbursement
                      </td>
                    </tr>
                  )
                  : loans.map((l: any) => {
                      const fee = parseFloat(l.processingFee ?? 0)
                      const net = parseFloat(l.principalAmount ?? 0) -
                        (l.product?.processingFeeDeducted ? fee : 0)
                      return (
                        <tr key={l.id}>
                          <td>
                            <a
                              className="text-primary hover:underline font-mono text-sm cursor-pointer"
                              onClick={() => router.push(`/loans/${l.id}`)}
                            >
                              {l.loanRef}
                            </a>
                          </td>
                          <td>
                            <p className="font-medium text-sm">{l.member?.fullName}</p>
                            <p className="text-xs text-muted-foreground">{l.member?.phone}</p>
                          </td>
                          <td className="text-sm">{l.product?.name}</td>
                          <td className="font-semibold"><Amount value={l.principalAmount} /></td>
                          <td><Amount value={fee} size="sm" className="text-muted-foreground" /></td>
                          <td className="font-bold text-green-600"><Amount value={net} /></td>
                          <td className="text-xs">{l.disbursementMethod ?? '—'}</td>
                          <td className="text-xs text-muted-foreground">{fmtDate(l.approvedAt)}</td>
                          <td>
                            <Button
                              size="xs"
                              variant="success"
                              icon={<DollarSign className="w-3.5 h-3.5" />}
                              onClick={() => openModal(l)}
                            >
                              Disburse
                            </Button>
                          </td>
                        </tr>
                      )
                    })
              }
            </tbody>
          </table>
        </div>
      </Card>

      {/* ── Disburse modal ── */}
      <Modal
        open={!!selected}
        onClose={() => setSelected(null)}
        title={`Disburse — ${selected?.loanRef}`}
        footer={
          <>
            <Button variant="outline" size="sm" onClick={() => setSelected(null)}>
              Cancel
            </Button>
            <Button
              variant="success"
              size="sm"
              loading={disburseMutation.isPending}
              onClick={handleDisburse}
            >
              Confirm Disbursement
            </Button>
          </>
        }
      >
        {selected && (
          <div className="space-y-4">
            <Alert variant="warning">
              Disbursing{' '}
              <strong>{formatCurrency(selectedPrincipal)}</strong> to{' '}
              <strong>{selected.member?.fullName}</strong>.
              {selected.product?.processingFeeDeducted && (
                <>
                  {' '}Processing fee of{' '}
                  <strong>{formatCurrency(selectedFee)}</strong> will be deducted.
                </>
              )}
              <br />
              Net disbursement:{' '}
              <strong className="text-green-700">{formatCurrency(selectedNet)}</strong>
            </Alert>

            <Select
              label="Disbursement Method"
              required
              value={form.disbursementMethod}
              onChange={e => setForm(f => ({ ...f, disbursementMethod: e.target.value }))}
              options={DISBURSE_METHODS}
            />

            {/* Show which GL account will be used — helps debug if issues arise */}
            <p className="text-xs text-muted-foreground">
              GL account:{' '}
              <span className="font-mono font-medium">
                {METHOD_GL_MAP[form.disbursementMethod] ?? '1102'}
              </span>{' '}
              ({form.disbursementMethod === 'MPESA'
                ? 'M-Pesa Float'
                : form.disbursementMethod === 'CASH'
                  ? 'Cash in Hand'
                  : 'Bank - Equity'})
            </p>

            <Input
              label="Transaction Reference"
              value={form.disbursementReference}
              onChange={e => setForm(f => ({ ...f, disbursementReference: e.target.value }))}
              placeholder="Bank ref, M-Pesa confirmation, cheque no…"
            />
          </div>
        )}
      </Modal>
    </div>
  )
}