'use client'

import { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useQuery, useMutation } from '@tanstack/react-query'
import axios from 'axios'
import { toast } from 'sonner'
import { formatCurrency, cn } from '@/lib/utils'
import { ChevronLeft, CreditCard, Calculator, Users, Shield } from 'lucide-react'
import { Button, Card, CardHeader, CardTitle, CardContent, Input, Select, Textarea, FormGrid, Alert, Amount, Badge, PageHeader } from '@/components/ui/components'

export default function NewLoanPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const preMemberId = searchParams.get('memberId') ?? ''

  const [step, setStep] = useState(1)
  const [form, setForm] = useState({
    memberId: preMemberId,
    productId: '',
    principalAmount: '',
    tenor: '',
    purpose: '',
    groupId: '',
    disbursementMethod: 'BANK_TRANSFER',
    disbursementBankName: '',
    disbursementAccountNo: '',
    disbursementAccountName: '',
    fosaAutoDebit: false,
    fosaAccountId: '',
    notes: '',
  })
  const [preview, setPreview] = useState<any>(null)
  const [previewLoading, setPreviewLoading] = useState(false)

  const { data: memberData } = useQuery({
    queryKey: ['member-mini', form.memberId],
    queryFn: () => form.memberId ? axios.get(`/api/members/${form.memberId}`).then(r => r.data.data) : null,
    enabled: !!form.memberId,
  })

  const { data: products } = useQuery({
    queryKey: ['loan-products'],
    queryFn: () => axios.get('/api/loans/products').then(r => r.data.data),
  })

  const { data: membersSearch } = useQuery({
    queryKey: ['members-search'],
    queryFn: () => axios.get('/api/members?pageSize=100&status=ACTIVE').then(r => r.data.data),
  })

  const selectedProduct = products?.find((p: any) => p.id === form.productId)

  async function computePreview() {
    if (!form.productId || !form.principalAmount || !form.tenor) return
    setPreviewLoading(true)
    try {
      const res = await axios.post('/api/loans', {
        memberId: form.memberId || '00000000-0000-0000-0000-000000000000',
        productId: form.productId,
        principalAmount: parseFloat(form.principalAmount),
        tenor: parseInt(form.tenor),
        purpose: 'preview',
        _preview: true,
      })
      setPreview(res.data.schedule?.slice(0, 6))
    } catch {
      setPreview(null)
    } finally { setPreviewLoading(false) }
  }

  function validateBeforeSubmit() {
    if (!form.memberId) { toast.error('Please select a member'); setStep(1); return false }
    if (!form.productId) { toast.error('Please select a loan product'); setStep(1); return false }
    if (!form.principalAmount || parseFloat(form.principalAmount) <= 0) { toast.error('Enter a valid loan amount'); setStep(2); return false }
    if (!form.tenor || parseInt(form.tenor) <= 0) { toast.error('Enter a valid tenor'); setStep(2); return false }
    return true
  }

  const submitMutation = useMutation({
    mutationFn: () => {
      const payload: any = { ...form, principalAmount: parseFloat(form.principalAmount), tenor: parseInt(form.tenor) }
      if (!payload.groupId) delete payload.groupId
      return axios.post('/api/loans', payload)
    },
    onSuccess: (res) => {
      toast.success(`Loan application ${res.data.data.loanRef} submitted successfully!`)
      router.push(`/loans/${res.data.data.id}`)
    },
    onError: (e: any) => {
      const msg = e.response?.data?.error ?? 'Failed to submit application'
      const fields = e.response?.data?.details
      if (fields) {
        const errs = Object.entries(fields).map(([k,v]) => `${k}: ${(v as string[]).join(', ')}`).join(' | ')
        toast.error(`Validation: ${errs}`)
      } else {
        toast.error(msg)
      }
    },
  })

  const steps = [
    { n:1, label:'Member & Product', icon:<Users className="w-4 h-4"/> },
    { n:2, label:'Loan Terms',       icon:<CreditCard className="w-4 h-4"/> },
    { n:3, label:'Disbursement',     icon:<Calculator className="w-4 h-4"/> },
    { n:4, label:'Review & Submit',  icon:<Shield className="w-4 h-4"/> },
  ]

  const processingFee = selectedProduct
    ? selectedProduct.processingFeeType === 'FLAT'
      ? parseFloat(selectedProduct.processingFeeValue)
      : parseFloat(form.principalAmount || '0') * parseFloat(selectedProduct.processingFeeValue) / 100
    : 0
  const netDisbursed = parseFloat(form.principalAmount || '0') - (selectedProduct?.processingFeeDeducted ? processingFee : 0)

  return (
    <div className="p-6 max-w-4xl mx-auto space-y-5">
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="sm" icon={<ChevronLeft className="w-4 h-4"/>} onClick={() => router.back()}>Loans</Button>
      </div>
      <PageHeader title="New Loan Application" description="Complete all steps to submit a loan application" icon={<CreditCard className="w-6 h-6"/>}/>

      {/* Steps */}
      <div className="flex items-center gap-1 overflow-x-auto pb-1">
        {steps.map((s, i) => (
          <div key={s.n} className="flex items-center gap-1">
            <div className={cn('flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors whitespace-nowrap', step === s.n ? 'bg-primary text-primary-foreground' : step > s.n ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground')}>
              {s.icon}{s.label}
            </div>
            {i < steps.length - 1 && <div className={cn('h-px w-4 shrink-0', step > s.n ? 'bg-primary' : 'bg-border')}/>}
          </div>
        ))}
      </div>

      {/* Step 1: Member & Product */}
      {step === 1 && (
        <Card>
          <CardHeader><CardTitle>Select Member & Loan Product</CardTitle></CardHeader>
          <CardContent className="space-y-5">
            {/* Member */}
            <div>
              <Select label="Member" required placeholder="Search and select member..."
                value={form.memberId}
                onChange={e => setForm(f => ({...f, memberId: e.target.value}))}
                options={membersSearch?.map((m: any) => ({ value: m.id, label: `${m.memberNo} — ${m.fullName} (${m.phone})` })) ?? []}
              />
              {memberData && (
                <div className="mt-2 p-3 bg-muted/40 rounded-lg text-sm flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-primary/10 text-primary font-bold text-xs flex items-center justify-center">
                    {memberData.fullName?.split(' ').map((n: string) => n[0]).join('').slice(0,2)}
                  </div>
                  <div>
                    <p className="font-medium">{memberData.fullName} · <span className="text-muted-foreground">{memberData.memberNo}</span></p>
                    <p className="text-xs text-muted-foreground">{memberData.employmentType} · Income: {formatCurrency(memberData.monthlyIncome)}</p>
                  </div>
                  <div className="ml-auto flex gap-1">
                    <Badge variant={memberData.crbStatus === 'CLEAR' ? 'success' : 'danger'}>{memberData.crbStatus}</Badge>
                    <Badge variant={memberData.riskLevel === 'LOW' ? 'success' : memberData.riskLevel === 'MEDIUM' ? 'warning' : 'danger'}>{memberData.riskLevel}</Badge>
                  </div>
                </div>
              )}
              {memberData?.status === 'BLACKLISTED' && <Alert variant="error" className="mt-2">This member is <strong>blacklisted</strong> and cannot apply for loans.</Alert>}
            </div>

            {/* Product */}
            <Select label="Loan Product" required placeholder="Select loan product..."
              value={form.productId}
              onChange={e => setForm(f => ({...f, productId: e.target.value}))}
              options={products?.map((p: any) => ({ value: p.id, label: `${p.name} (${p.code}) — ${p.interestRate}%/${p.interestRatePeriod}` })) ?? []}
            />
            {selectedProduct && (
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 bg-muted/40 rounded-lg text-sm">
                {[
                  { l:'Interest Model',      v: selectedProduct.interestModel?.replace(/_/g,' ') },
                  { l:'Interest Rate',       v: `${selectedProduct.interestRate}% / ${selectedProduct.interestRatePeriod}` },
                  { l:'Loan Range',          v: `${formatCurrency(selectedProduct.minAmount)} – ${formatCurrency(selectedProduct.maxAmount)}` },
                  { l:'Tenor Range',         v: `${selectedProduct.minTenor} – ${selectedProduct.maxTenor} months` },
                  { l:'Processing Fee',      v: `${selectedProduct.processingFeeType === 'FLAT' ? formatCurrency(selectedProduct.processingFeeValue) : selectedProduct.processingFeeValue+'%'}${selectedProduct.processingFeeDeducted ? ' (deducted)' : ''}` },
                  { l:'Penalty Rate',        v: `${selectedProduct.penaltyRate}% / ${selectedProduct.penaltyFrequency}` },
                  { l:'Grace Days',          v: `${selectedProduct.graceDays} days` },
                  { l:'Approval Levels',     v: selectedProduct.approvalLevels },
                ].map(i => <div key={i.l}><p className="text-xs text-muted-foreground">{i.l}</p><p className="font-medium">{i.v}</p></div>)}
              </div>
            )}

            {memberData?.groupMemberships?.length > 0 && (
              <div>
                <Select label="Group (optional)" placeholder="— No group —"
                  value={form.groupId}
                  onChange={e => setForm(f => ({...f, groupId: e.target.value}))}
                  options={[
                    { value: '', label: '— Individual loan (no group) —' },
                    ...memberData.groupMemberships.map((gm: any) => ({ value: gm.groupId, label: `${gm.group.name} (${gm.group.groupNo})` }))
                  ]}
                />
                <p className="text-xs text-muted-foreground mt-1">Associate this loan with a group for group lending tracking.</p>
              </div>
            )}
            <div className="flex justify-end">
              <Button onClick={() => setStep(2)} disabled={!form.memberId || !form.productId || memberData?.status === 'BLACKLISTED'}>Next: Loan Terms →</Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Step 2: Loan Terms */}
      {step === 2 && (
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
          <div className="lg:col-span-3">
            <Card>
              <CardHeader><CardTitle>Loan Terms</CardTitle></CardHeader>
              <CardContent className="space-y-4">
                <FormGrid>
                  <Input label="Loan Amount (KES)" required type="number" placeholder={`${selectedProduct?.minAmount} – ${selectedProduct?.maxAmount}`}
                    value={form.principalAmount} onChange={e => setForm(f => ({...f, principalAmount: e.target.value}))}
                    hint={selectedProduct ? `Min: ${formatCurrency(selectedProduct.minAmount)}, Max: ${formatCurrency(selectedProduct.maxAmount)}` : ''}
                  />
                  <Input label={`Repayment Tenor (${selectedProduct?.tenorUnit ?? 'months'})`} required type="number"
                    placeholder={`${selectedProduct?.minTenor} – ${selectedProduct?.maxTenor}`}
                    value={form.tenor} onChange={e => setForm(f => ({...f, tenor: e.target.value}))}
                    hint={selectedProduct ? `Min: ${selectedProduct.minTenor}, Max: ${selectedProduct.maxTenor} ${selectedProduct.tenorUnit}` : ''}
                  />
                </FormGrid>
                <Textarea label="Loan Purpose" required rows={3} placeholder="Describe the purpose of the loan in detail..."
                  value={form.purpose} onChange={e => setForm(f => ({...f, purpose: e.target.value}))}
                />
                {form.principalAmount && form.tenor && selectedProduct && (
                  <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm border border-blue-100 dark:border-blue-800 space-y-1.5">
                    <p className="font-semibold text-blue-900 dark:text-blue-300 mb-2">Loan Summary (Estimate)</p>
                    <div className="grid grid-cols-2 gap-2">
                      <div><p className="text-xs text-blue-700/70">Principal</p><p className="font-medium">{formatCurrency(form.principalAmount)}</p></div>
                      <div><p className="text-xs text-blue-700/70">Processing Fee</p><p className="font-medium">{formatCurrency(processingFee)}</p></div>
                      <div><p className="text-xs text-blue-700/70">Net Disbursed</p><p className="font-medium text-green-700">{formatCurrency(netDisbursed)}</p></div>
                      <div><p className="text-xs text-blue-700/70">Frequency</p><p className="font-medium">{selectedProduct.repaymentFrequency}</p></div>
                    </div>
                  </div>
                )}
                <div className="flex items-center justify-between">
                  <Button variant="outline" onClick={() => setStep(1)}>← Back</Button>
                  <div className="flex gap-2">
                    <Button variant="outline" onClick={computePreview}>Preview Schedule</Button>
                    <Button onClick={() => setStep(3)} disabled={!form.principalAmount || !form.tenor || !form.purpose}>Next: Disbursement →</Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Schedule preview */}
          {preview && (
            <div className="lg:col-span-2">
              <Card>
                <CardHeader><CardTitle>Schedule Preview</CardTitle><span className="text-xs text-muted-foreground">First 6 instalments</span></CardHeader>
                <div className="overflow-x-auto">
                  <table className="table-lms w-full text-xs">
                    <thead><tr><th>#</th><th>Due Date</th><th>Principal</th><th>Interest</th><th>Total</th></tr></thead>
                    <tbody>
                      {preview.map((s: any) => (
                        <tr key={s.instalmentNo}>
                          <td className="text-center">{s.instalmentNo}</td>
                          <td>{new Date(s.dueDate).toLocaleDateString('en-KE',{month:'short',year:'numeric'})}</td>
                          <td>{formatCurrency(s.principalDue)}</td>
                          <td>{formatCurrency(s.interestDue)}</td>
                          <td className="font-medium">{formatCurrency(s.totalDue)}</td>
                        </tr>
                      ))}
                      <tr className="bg-muted/40 font-medium">
                        <td colSpan={4} className="text-right text-xs text-muted-foreground">Monthly instalment:</td>
                        <td>{preview[0] ? formatCurrency(preview[0].totalDue) : '—'}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </Card>
            </div>
          )}
        </div>
      )}

      {/* Step 3: Disbursement */}
      {step === 3 && (
        <Card>
          <CardHeader><CardTitle>Disbursement Details</CardTitle></CardHeader>
          <CardContent className="space-y-4">
            <Alert variant="info">Net disbursement amount: <strong>{formatCurrency(netDisbursed)}</strong> (after {formatCurrency(processingFee)} processing fee)</Alert>
            <Select label="Disbursement Method" required value={form.disbursementMethod}
              onChange={e => setForm(f => ({...f, disbursementMethod: e.target.value}))}
              options={[{value:'BANK_TRANSFER',label:'Bank Transfer'},{value:'MPESA',label:'M-Pesa'},{value:'CASH',label:'Cash'},{value:'CHEQUE',label:'Cheque'},{value:'EFT',label:'EFT / RTGS'}]}
            />
            {form.disbursementMethod === 'BANK_TRANSFER' && (
              <FormGrid>
                <Input label="Bank Name" placeholder="Equity Bank" value={form.disbursementBankName} onChange={e => setForm(f=>({...f,disbursementBankName:e.target.value}))}/>
                <Input label="Account Number" placeholder="0023441019" value={form.disbursementAccountNo} onChange={e => setForm(f=>({...f,disbursementAccountNo:e.target.value}))}/>
                <Input label="Account Name" placeholder="Grace Wanjiku Kamau" value={form.disbursementAccountName} onChange={e => setForm(f=>({...f,disbursementAccountName:e.target.value}))}/>
              </FormGrid>
            )}
            {selectedProduct?.fosaAutoDebit && (
              <div className="flex items-center gap-3 p-3 bg-muted/40 rounded-lg">
                <input type="checkbox" id="fosa" checked={form.fosaAutoDebit} onChange={e => setForm(f=>({...f,fosaAutoDebit:e.target.checked}))} className="w-4 h-4"/>
                <label htmlFor="fosa" className="text-sm cursor-pointer">Enable FOSA Auto-debit (repayments deducted automatically from FOSA account)</label>
              </div>
            )}
            <Textarea label="Internal Notes" placeholder="Any special instructions or notes..." value={form.notes} onChange={e => setForm(f=>({...f,notes:e.target.value}))}/>
            <div className="flex items-center justify-between">
              <Button variant="outline" onClick={() => setStep(2)}>← Back</Button>
              <Button onClick={() => setStep(4)}>Next: Review →</Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Step 4: Review */}
      {step === 4 && (
        <Card>
          <CardHeader><CardTitle>Review & Submit Application</CardTitle></CardHeader>
          <CardContent className="space-y-5">
            <Alert variant="warning">Please review all details before submitting. The application will be sent for credit appraisal and approval.</Alert>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div className="space-y-3">
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Member</p>
                <p className="font-medium">{memberData?.fullName}</p>
                <p className="text-sm text-muted-foreground">{memberData?.memberNo} · {memberData?.phone}</p>
              </div>
              <div className="space-y-3">
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Loan Product</p>
                <p className="font-medium">{selectedProduct?.name}</p>
                <p className="text-sm text-muted-foreground">{selectedProduct?.code} · {selectedProduct?.interestRate}% / {selectedProduct?.interestRatePeriod}</p>
              </div>
              <div>
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Financial Summary</p>
                <div className="space-y-1.5 text-sm">
                  <div className="flex justify-between"><span className="text-muted-foreground">Principal Amount</span><strong>{formatCurrency(form.principalAmount)}</strong></div>
                  <div className="flex justify-between"><span className="text-muted-foreground">Tenor</span><strong>{form.tenor} {selectedProduct?.tenorUnit}</strong></div>
                  <div className="flex justify-between"><span className="text-muted-foreground">Processing Fee</span><strong>{formatCurrency(processingFee)}</strong></div>
                  <div className="flex justify-between border-t pt-1.5"><span className="text-muted-foreground">Net Disbursement</span><strong className="text-green-600">{formatCurrency(netDisbursed)}</strong></div>
                </div>
              </div>
              <div>
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Purpose & Notes</p>
                <p className="text-sm">{form.purpose}</p>
                <p className="text-xs text-muted-foreground mt-2">{form.disbursementMethod} · {form.disbursementBankName} {form.disbursementAccountNo}</p>
              </div>
            </div>

            <div className="flex items-center justify-between border-t pt-5">
              <Button variant="outline" onClick={() => setStep(3)}>← Back</Button>
              <Button loading={submitMutation.isPending} onClick={() => { if (validateBeforeSubmit()) submitMutation.mutate() }} icon={<CreditCard className="w-4 h-4"/>}>
                Submit Application
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}