'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, cn } from '@/lib/utils'
import { FileText, Plus, Search, Eye } from 'lucide-react'
import { Card, Badge, Button, PageHeader, Amount, Pagination, Modal, Textarea, Select } from '@/components/ui/components'

const STATUSES = ['DRAFT','PENDING_APPRAISAL','PENDING_L1','PENDING_L2','APPROVED','DECLINED','CANCELLED']

export default function ApplicationsPage() {
  const router = useRouter()
  const qc     = useQueryClient()
  const [search, setSearch] = useState('')
  const [status, setStatus] = useState('')
  const [page, setPage]     = useState(1)
  const [selected, setSelected] = useState<any>(null)
  const [comments, setComments] = useState('')
  const pageSize = 20

  const { data, isLoading } = useQuery({
    queryKey: ['applications', { search, status, page }],
    queryFn: () => {
      const p = new URLSearchParams({ page: String(page), pageSize: String(pageSize) })
      if (search) p.set('search', search)
      if (status) p.set('status', status)
      return axios.get(`/api/loans?${p}`).then(r => r.data)
    },
    placeholderData: (prev: unknown) => prev,
  })

  const submitMutation = useMutation({
    mutationFn: (loanId: string) => axios.patch(`/api/loans/${loanId}`, { action: 'SUBMIT' }),
    onSuccess: () => { toast.success('Submitted for approval'); qc.invalidateQueries({ queryKey: ['applications'] }) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to submit'),
  })

  const cancelMutation = useMutation({
    mutationFn: ({ loanId, reason }: any) => axios.patch(`/api/loans/${loanId}`, { action: 'CANCEL', reason }),
    onSuccess: () => { toast.success('Application cancelled'); qc.invalidateQueries({ queryKey: ['applications'] }); setSelected(null) },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to cancel'),
  })

  const loans = data?.data ?? []
  const total = data?.total ?? 0
  const pages = Math.ceil(total / pageSize)

  return (
    <div className="p-6 space-y-5 max-w-screen-2xl mx-auto">
      <PageHeader title="Loan Applications" description={`${total} applications`} icon={<FileText className="w-6 h-6"/>}
        actions={<Button size="sm" icon={<Plus className="w-4 h-4"/>} onClick={() => router.push('/loans/new')}>New Application</Button>}
      />
      <div className="flex gap-3 flex-wrap">
        <div className="relative flex-1 min-w-48">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"/>
          <input value={search} onChange={e => { setSearch(e.target.value); setPage(1) }}
            placeholder="Search by ref, member…"
            className="w-full pl-9 pr-4 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 bg-card"/>
        </div>
        <Select label="" value={status} onChange={e => { setStatus(e.target.value); setPage(1) }}
          options={[{value:'',label:'All Statuses'},...STATUSES.map(s=>({value:s,label:s.replace(/_/g,' ')}))]}/>
      </div>
      <Card>
        <div className="overflow-x-auto">
          <table className="table-lms w-full">
            <thead><tr><th>Ref</th><th>Member</th><th>Product</th><th>Amount</th><th>Tenor</th><th>Applied</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
              {isLoading
                ? Array.from({length:6}).map((_,i)=><tr key={i}>{Array.from({length:8}).map((_,j)=><td key={j}><div className="h-4 bg-muted rounded animate-pulse"/></td>)}</tr>)
                : loans.length === 0
                ? <tr><td colSpan={8} className="text-center py-10 text-muted-foreground">No applications found</td></tr>
                : loans.map((l: any) => (
                  <tr key={l.id}>
                    <td><button onClick={() => router.push(`/loans/${l.id}`)} className="font-mono text-sm text-primary hover:underline font-semibold">{l.loanRef}</button></td>
                    <td><p className="text-sm font-medium">{l.member?.fullName}</p><p className="text-xs text-muted-foreground">{l.member?.memberNo}</p></td>
                    <td className="text-sm">{l.product?.name}</td>
                    <td><Amount value={l.principalAmount} size="sm"/></td>
                    <td className="text-sm">{l.tenor} mo</td>
                    <td className="text-xs text-muted-foreground">{fmtDate(l.createdAt)}</td>
                    <td><Badge variant={['APPROVED'].includes(l.status)?'success':['DECLINED','CANCELLED'].includes(l.status)?'danger':l.status==='DRAFT'?'default':'warning'}>{l.status.replace(/_/g,' ')}</Badge></td>
                    <td>
                      <div className="flex gap-1.5">
                        <Button size="xs" variant="ghost" icon={<Eye className="w-3.5 h-3.5"/>} onClick={() => router.push(`/loans/${l.id}`)}>View</Button>
                        {l.status === 'DRAFT' && <Button size="xs" loading={submitMutation.isPending} onClick={() => submitMutation.mutate(l.id)}>Submit</Button>}
                        {['DRAFT','PENDING_L1','PENDING_L2'].includes(l.status) && <Button size="xs" variant="outline" onClick={() => { setSelected(l); setComments('') }}>Cancel</Button>}
                      </div>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
        <Pagination page={page} pages={pages} total={total} pageSize={pageSize} onPage={setPage}/>
      </Card>
      <Modal open={!!selected} onClose={() => setSelected(null)} title="Cancel Application"
        footer={<><Button variant="outline" size="sm" onClick={() => setSelected(null)}>Back</Button>
          <Button size="sm" variant="destructive" loading={cancelMutation.isPending}
            onClick={() => cancelMutation.mutate({ loanId: selected?.id, reason: comments })}>Confirm Cancel</Button></>}
      >
        <div className="space-y-3">
          <p className="text-sm">Cancel <strong>{selected?.loanRef}</strong> — <strong>{selected?.member?.fullName}</strong>?</p>
          <Textarea label="Reason" rows={3} value={comments} onChange={e => setComments(e.target.value)} placeholder="Reason for cancellation..."/>
        </div>
      </Modal>
    </div>
  )
}