'use client'

import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import axios from 'axios'
import { toast } from 'sonner'
import { formatCurrency, fmtDate, cn } from '@/lib/utils'
import { PiggyBank, Search, Plus, ArrowDownCircle, ArrowUpCircle, Edit, Trash2, RotateCw } from 'lucide-react'
import { StatCard, Card, Modal, Input, Select, Textarea, CardHeader, CardTitle, CardContent, Badge, Button, Amount, Pagination, PageHeader, Toggle, ConfirmDialog } from '@/components/ui/components'
import MemberSelect from '@/components/MemberSelect'
import FeeSettings from '@/components/FeeSettings'
import ExcessReconcileModal from '@/components/ExcessReconcileModal'

export default function BosaPage() {
  const qc = useQueryClient()
  const [search, setSearch]   = useState('')
  const [page, setPage]       = useState(1)
  const [selected, setSelected] = useState<any>(null)
  const [txnModal, setTxnModal] = useState<'deposit'|'withdrawal'|null>(null)
  const [txnForm, setTxnForm]   = useState({ amount:'', narration:'', method:'CASH', reference:'' })
  const [openModal, setOpenModal] = useState(false)
  const [openForm, setOpenForm]   = useState({ memberId:'', accountType:'BOSA_SAVINGS', interestRate:'0.5' })
  const [editModal, setEditModal] = useState(false)
  const [editForm, setEditForm]   = useState({ accountName:'', interestRate:'', isActive:true })
  const [deleteId, setDeleteId]   = useState<string | null>(null)
  const [reconcileOpen, setReconcileOpen] = useState(false)
  const pageSize = 20

  const { data, isLoading } = useQuery({
    queryKey: ['bosa', { search, page }],
    queryFn: () => axios.get(`/api/savings?type=BOSA&search=${search}&page=${page}&pageSize=${pageSize}`).then(r => r.data),
    placeholderData: (prev: unknown) => prev,
  })

  const { data: detailData } = useQuery({
    queryKey: ['savings-detail', selected?.id],
    queryFn: () => selected ? axios.get(`/api/savings/${selected.id}`).then(r => r.data.data) : null,
    enabled: !!selected?.id,
  })

  const txnMutation = useMutation({
    mutationFn: (payload: any) => axios.post(`/api/savings/${selected?.id}/transactions`, payload),
    onSuccess: () => {
      toast.success('Transaction recorded')
      qc.invalidateQueries({ queryKey: ['bosa'] })
      qc.invalidateQueries({ queryKey: ['savings-detail'] })
      setTxnModal(null)
      setTxnForm({ amount:'', narration:'', method:'CASH', reference:'' })
    },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Transaction failed'),
  })

  const openMutation = useMutation({
    mutationFn: (payload: any) => axios.post('/api/savings', payload),
    onSuccess: () => {
      toast.success('BOSA account opened successfully')
      qc.invalidateQueries({ queryKey: ['bosa'] })
      setOpenModal(false)
      setOpenForm({ memberId:'', accountType:'BOSA_SAVINGS', interestRate:'0.5' })
    },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to open account'),
  })

  const updateMutation = useMutation({
    mutationFn: (payload: any) => axios.patch(`/api/savings/${selected?.id}`, payload),
    onSuccess: () => {
      toast.success('Account updated')
      qc.invalidateQueries({ queryKey: ['bosa'] })
      qc.invalidateQueries({ queryKey: ['savings-detail'] })
      setEditModal(false)
    },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to update account'),
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => axios.delete(`/api/savings/${id}`),
    onSuccess: () => {
      toast.success('Account closed')
      qc.invalidateQueries({ queryKey: ['bosa'] })
      setSelected(null)
      setDeleteId(null)
    },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to close account'),
  })

  function openEdit() {
    if (!selected) return
    setEditForm({
      accountName:   selected.accountName ?? '',
      interestRate:  String(selected.interestRate ?? ''),
      isActive:      selected.isActive,
    })
    setEditModal(true)
  }

  const accounts = data?.data ?? []
  const total    = data?.total ?? 0
  const pages    = Math.ceil(total / pageSize)
  const summary  = data?.summary ?? {}

  return (
    <div className="p-6 space-y-5 max-w-screen-2xl mx-auto">
      <PageHeader title="BOSA Savings" description={`${total.toLocaleString()} savings accounts`} icon={<PiggyBank className="w-6 h-6"/>}
        actions={<div className="flex gap-2"><Button size="sm" variant="outline" icon={<RotateCw className="w-4 h-4"/>} onClick={() => setReconcileOpen(true)}>Refresh</Button><Button size="sm" icon={<Plus className="w-4 h-4"/>} onClick={() => setOpenModal(true)}>Open Account</Button></div>}
      />

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <StatCard label="Total BOSA Savings" value={formatCurrency(summary.totalBalance)} icon={<PiggyBank className="w-5 h-5"/>} color="blue"/>
        <StatCard label="Active Accounts" value={(summary.activeCount ?? 0).toLocaleString()} icon={<PiggyBank className="w-5 h-5"/>} color="green"/>
        <StatCard label="Deposits This Month" value={formatCurrency(summary.depositsThisMonth)} icon={<ArrowDownCircle className="w-5 h-5"/>} color="teal"/>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div className="lg:col-span-2 space-y-3">
          <div className="relative">
            <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 member, account no…"
              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>
          <Card>
            <div className="overflow-x-auto">
              <table className="table-lms w-full">
                <thead><tr><th>Account</th><th>Member</th><th>Balance</th><th>Rate</th><th>Status</th><th>Opened</th></tr></thead>
                <tbody>
                  {isLoading
                    ? Array.from({length:8}).map((_,i) => <tr key={i}>{Array.from({length:6}).map((_,j) => <td key={j}><div className="h-4 bg-muted rounded animate-pulse"/></td>)}</tr>)
                    : accounts.length === 0
                    ? <tr><td colSpan={6} className="text-center py-8 text-muted-foreground">No BOSA accounts found</td></tr>
                    : accounts.map((a: any) => (
                      <tr key={a.id} className={cn('cursor-pointer', selected?.id === a.id && 'bg-primary/5')} onClick={() => setSelected(a)}>
                        <td><p className="font-mono text-sm">{a.accountNo}</p><p className="text-xs text-muted-foreground">{a.accountType?.replace(/_/g,' ')}</p></td>
                        <td><p className="text-sm font-medium">{a.member?.fullName}</p><p className="text-xs text-muted-foreground">{a.member?.memberNo}</p></td>
                        <td className="font-semibold text-sm text-primary">{formatCurrency(a.balance)}</td>
                        <td className="text-sm">{a.interestRate}%/mo</td>
                        <td><Badge variant={a.isActive ? 'success' : 'default'}>{a.isActive ? 'ACTIVE' : 'INACTIVE'}</Badge></td>
                        <td className="text-xs text-muted-foreground">{fmtDate(a.openedAt)}</td>
                      </tr>
                    ))
                  }
                </tbody>
              </table>
            </div>
            <Pagination page={page} pages={pages} total={total} pageSize={pageSize} onPage={setPage}/>
          </Card>
        </div>

        <div>
          {selected ? (
            <div className="space-y-4">
              <Card>
                <CardHeader><CardTitle className="text-sm font-mono">{selected.accountNo}</CardTitle></CardHeader>
                <CardContent className="space-y-3">
                  <div><p className="text-xs text-muted-foreground">Balance</p><Amount value={selected.balance} size="xl" className="text-primary"/></div>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div><p className="text-xs text-muted-foreground">Available</p><Amount value={selected.availableBalance}/></div>
                    <div><p className="text-xs text-muted-foreground">Rate</p><p className="font-medium">{selected.interestRate}%/mo</p></div>
                    <div><p className="text-xs text-muted-foreground">Deposits</p><Amount value={selected.totalDeposits}/></div>
                    <div><p className="text-xs text-muted-foreground">Withdrawals</p><Amount value={selected.totalWithdrawals}/></div>
                  </div>
                  <div className="flex gap-2 pt-2">
                    <Button size="sm" icon={<ArrowDownCircle className="w-4 h-4"/>} className="flex-1" onClick={() => setTxnModal('deposit')}>Deposit</Button>
                    <Button size="sm" variant="outline" icon={<ArrowUpCircle className="w-4 h-4"/>} className="flex-1" onClick={() => setTxnModal('withdrawal')}>Withdraw</Button>
                  </div>
                  <div className="flex gap-2 pt-1">
                    <Button size="xs" variant="outline" icon={<Edit className="w-3 h-3"/>} onClick={openEdit}>Edit</Button>
                    <Button size="xs" variant="outline" icon={<Trash2 className="w-3 h-3 text-red-500"/>} onClick={() => setDeleteId(selected.id)} className="text-red-600 hover:text-red-700">Close</Button>
                  </div>
                  <button onClick={() => window.open(`/api/savings/${selected.id}?sub=statement`, '_blank')}
                    className="w-full text-xs text-primary hover:underline text-center mt-1">
                    Download Statement (CSV)
                  </button>
                  <FeeSettings accountType="BOSA"/>
                </CardContent>
              </Card>
              <Card>
                <CardHeader><CardTitle>Recent Transactions</CardTitle></CardHeader>
                <div className="divide-y">
                  {detailData?.transactions?.slice(0,10).map((t: any) => (
                    <div key={t.id} className="flex items-center justify-between px-4 py-2.5">
                      <div>
                        <p className="text-sm font-medium">{t.transactionType.replace(/_/g,' ')}</p>
                        <p className="text-xs text-muted-foreground">{fmtDate(t.transactionDate)}</p>
                      </div>
                      <Amount value={t.amount} size="sm" className={['WITHDRAWAL','CHARGE'].includes(t.transactionType) ? 'text-red-600 font-medium' : 'text-green-600 font-medium'}/>
                    </div>
                  ))}
                </div>
              </Card>
            </div>
          ) : (
            <div className="h-48 border rounded-xl bg-muted/20 flex items-center justify-center text-muted-foreground text-sm">
              Select an account to view details
            </div>
          )}
        </div>
      </div>

      {/* Deposit / Withdrawal Modal */}
      <Modal open={!!txnModal} onClose={() => setTxnModal(null)}
        title={txnModal === 'deposit' ? `Deposit — ${selected?.accountNo}` : `Withdrawal — ${selected?.accountNo}`}
        footer={
          <><Button variant="outline" size="sm" onClick={() => setTxnModal(null)}>Cancel</Button>
          <Button size="sm" loading={txnMutation.isPending}
            onClick={() => txnMutation.mutate({ type: txnModal, ...txnForm, amount: parseFloat(txnForm.amount) })}>
            {txnModal === 'deposit' ? 'Record Deposit' : 'Record Withdrawal'}
          </Button></>
        }
      >
        <div className="space-y-4">
          {selected && <div className="p-3 bg-muted/40 rounded-lg text-sm">
            <p className="font-medium">{selected.member?.fullName}</p>
            <p className="text-muted-foreground">Balance: {formatCurrency(selected.balance)}</p>
          </div>}
          <Input label="Amount (KES)" required type="number" min={1} value={txnForm.amount}
            onChange={e => setTxnForm(f=>({...f,amount:e.target.value}))} placeholder="5000.00"/>
          <Select label="Payment Method" value={txnForm.method} onChange={e => setTxnForm(f=>({...f,method:e.target.value}))}
            options={[{value:'CASH',label:'Cash'},{value:'MPESA',label:'M-Pesa'},{value:'BANK_TRANSFER',label:'Bank Transfer'},{value:'CHEQUE',label:'Cheque'}]}/>
          <Input label="Reference" value={txnForm.reference}
            onChange={e => setTxnForm(f=>({...f,reference:e.target.value}))} placeholder="M-Pesa ref, bank ref…"/>
          <Textarea label="Narration" rows={2} value={txnForm.narration}
            onChange={e => setTxnForm(f=>({...f,narration:e.target.value}))} placeholder="Member deposit over counter…"/>
        </div>
      </Modal>

      {/* Open Account Modal */}
      <Modal open={openModal} onClose={() => setOpenModal(false)} title="Open New BOSA Savings Account"
        footer={
          <><Button variant="outline" size="sm" onClick={() => setOpenModal(false)}>Cancel</Button>
          <Button size="sm" loading={openMutation.isPending}
            onClick={() => openMutation.mutate({...openForm, interestRate: parseFloat(openForm.interestRate)})}>
            Open Account
          </Button></>
        }
      >
        <div className="space-y-4">
          <MemberSelect value={openForm.memberId}
            onChange={(id) => setOpenForm(f=>({...f,memberId:id}))}
            label="Member" required placeholder="Search member by name, ID or phone…"/>
          <Input label="Interest Rate (%/month)" type="number" step="0.1" value={openForm.interestRate}
            onChange={e => setOpenForm(f=>({...f,interestRate:e.target.value}))} hint="Default: 0.5% per month"/>
        </div>
      </Modal>

      {/* Edit Account Modal */}
      <Modal open={editModal} onClose={() => setEditModal(false)} title={`Edit Account — ${selected?.accountNo}`}
        footer={
          <><Button variant="outline" size="sm" onClick={() => setEditModal(false)}>Cancel</Button>
          <Button size="sm" loading={updateMutation.isPending}
            onClick={() => updateMutation.mutate({
              accountName:  editForm.accountName,
              interestRate: parseFloat(editForm.interestRate) || 0,
              isActive:     editForm.isActive,
            })}>
            Save Changes
          </Button></>
        }
      >
        <div className="space-y-4">
          <Input label="Account Name" value={editForm.accountName}
            onChange={e => setEditForm(f=>({...f,accountName:e.target.value}))}/>
          <Input label="Interest Rate (%/month)" type="number" step="0.1" value={editForm.interestRate}
            onChange={e => setEditForm(f=>({...f,interestRate:e.target.value}))}/>
          <Toggle checked={editForm.isActive} onChange={v => setEditForm(f=>({...f,isActive:v}))}
            label={editForm.isActive ? 'Account Active' : 'Account Inactive'}/>
        </div>
      </Modal>

      {/* Close Account Confirmation */}
      <ConfirmDialog open={!!deleteId} onClose={() => setDeleteId(null)}
        onConfirm={() => deleteMutation.mutate(deleteId!)}
        title="Close Account"
        message={`Are you sure you want to close account ${selected?.accountNo}? This will mark it as inactive. This action can be reversed by reactivating the account.`}
        confirmLabel="Close Account"
        loading={deleteMutation.isPending}/>

      {/* Excess Payment Reconciliation Modal */}
      <ExcessReconcileModal open={reconcileOpen} onClose={() => setReconcileOpen(false)} />
    </div>
  )
}