'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 { Database, Plus, Search } from 'lucide-react'
import { StatCard, Card, CardHeader, CardTitle, Badge, Button, Modal, Input, Select, PageHeader, Pagination, Amount } from '@/components/ui/components'
import MemberSelect from '@/components/MemberSelect'

export default function FixedDepositsPage() {
  const qc = useQueryClient()
  const [search, setSearch] = useState('')
  const [page, setPage] = useState(1)
  const [newModal, setNewModal] = useState(false)
  const [fdForm, setFdForm] = useState({ memberId:'', principalAmount:'', interestRate:'', tenorDays:'', linkedSavingsId:'' })
  const [selectedMember, setSelectedMember] = useState<any>(null)
  const pageSize = 20

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

  const createMutation = useMutation({
    mutationFn: (payload: any) => axios.post('/api/savings', { ...payload, accountType: 'FIXED_DEPOSIT' }),
    onSuccess: () => {
      toast.success('Fixed deposit created')
      qc.invalidateQueries({ queryKey: ['fixed-deposits'] })
      setNewModal(false)
      setFdForm({ memberId:'', principalAmount:'', interestRate:'', tenorDays:'', linkedSavingsId:'' })
      setSelectedMember(null)
    },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Failed to create fixed deposit'),
  })

  const accounts = data?.data ?? []
  const total    = data?.total ?? 0
  const summary  = data?.summary ?? {}

  return (
    <div className="p-6 space-y-5 max-w-screen-xl mx-auto">
      <PageHeader title="Fixed Deposits" description={`${total.toLocaleString()} active fixed deposits`} icon={<Database className="w-6 h-6"/>}
        actions={<Button size="sm" icon={<Plus className="w-4 h-4"/>} onClick={() => setNewModal(true)}>New Fixed Deposit</Button>}
      />

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <StatCard label="Total FD Portfolio" value={formatCurrency(summary.totalBalance)} icon={<Database className="w-5 h-5"/>} color="blue"/>
        <StatCard label="Active FDs" value={(summary.activeCount ?? 0).toLocaleString()} icon={<Database className="w-5 h-5"/>} color="green"/>
        <StatCard label="Interest Accrued" value={formatCurrency(summary.interestAccrued)} icon={<Database className="w-5 h-5"/>} color="amber"/>
      </div>

      <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, FD number…" className="w-full pl-9 pr-4 py-2 text-sm border rounded-lg focus:outline-none bg-card"/>
      </div>

      <Card>
        <div className="overflow-x-auto">
          <table className="table-lms w-full">
            <thead><tr><th>FD Number</th><th>Member</th><th>Principal</th><th>Interest Rate</th><th>Maturity Date</th><th>Maturity Amount</th><th>Status</th><th>Days Left</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>)
              : accounts.length === 0 ? <tr><td colSpan={8} className="text-center py-8 text-muted-foreground">No fixed deposits found</td></tr>
              : accounts.map((fd: any) => {
                  const daysLeft = fd.maturityDate ? Math.ceil((new Date(fd.maturityDate).getTime() - Date.now()) / 86400000) : null
                  return (
                    <tr key={fd.id}>
                      <td className="font-mono text-sm">{fd.fdRef}</td>
                      <td><p className="text-sm font-medium">{fd.member?.fullName}</p><p className="text-xs text-muted-foreground">{fd.member?.memberNo}</p></td>
                      <td className="font-semibold"><Amount value={fd.principalAmount}/></td>
                      <td className="text-sm">{fd.interestRate}% / {fd.interestRatePeriod}</td>
                      <td className="text-sm">{fmtDate(fd.maturityDate)}</td>
                      <td className="font-bold text-green-600"><Amount value={fd.maturityAmount}/></td>
                      <td><Badge variant={fd.status==='ACTIVE'?'success':fd.status==='MATURED'?'warning':fd.status==='WITHDRAWN'?'default':'danger'}>{fd.status}</Badge></td>
                      <td className={cn('text-sm font-medium', daysLeft !== null && daysLeft < 30 ? 'text-amber-600' : daysLeft !== null && daysLeft < 0 ? 'text-red-600' : '')}>{daysLeft !== null ? (daysLeft < 0 ? `${Math.abs(daysLeft)}d overdue` : `${daysLeft}d`) : '—'}</td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
        </div>
        <Pagination page={page} pages={Math.ceil(total/pageSize)} total={total} pageSize={pageSize} onPage={setPage}/>
      </Card>

      {/* New Fixed Deposit Modal */}
      <Modal open={newModal} onClose={() => setNewModal(false)} title="New Fixed Deposit"
        footer={
          <><Button variant="outline" size="sm" onClick={() => setNewModal(false)}>Cancel</Button>
          <Button size="sm" loading={createMutation.isPending}
            onClick={() => createMutation.mutate({
              memberId: fdForm.memberId,
              principalAmount: parseFloat(fdForm.principalAmount),
              interestRate: parseFloat(fdForm.interestRate),
              tenorDays: parseInt(fdForm.tenorDays),
              ...(fdForm.linkedSavingsId ? { linkedSavingsId: fdForm.linkedSavingsId } : {}),
            })}>
            Create FD
          </Button></>
        }
      >
        <div className="space-y-4">
          <MemberSelect value={fdForm.memberId}
            onChange={(id, member) => { setFdForm(f=>({...f,memberId:id, linkedSavingsId:''})); setSelectedMember(member) }}
            label="Member" required placeholder="Search member by name, ID or phone…"/>
          <Input label="Principal Amount (KES)" required type="number" min={1} value={fdForm.principalAmount}
            onChange={e => setFdForm(f=>({...f,principalAmount:e.target.value}))} placeholder="100000"/>
          <div className="grid grid-cols-2 gap-3">
            <Input label="Interest Rate (%/year)" required type="number" step="0.1" value={fdForm.interestRate}
              onChange={e => setFdForm(f=>({...f,interestRate:e.target.value}))} placeholder="12"/>
            <Input label="Tenor (Days)" required type="number" min={1} value={fdForm.tenorDays}
              onChange={e => setFdForm(f=>({...f,tenorDays:e.target.value}))} placeholder="365"/>
          </div>
          <Select label="Link Savings Account (optional)" value={fdForm.linkedSavingsId}
            onChange={e => setFdForm(f=>({...f,linkedSavingsId:e.target.value}))}
            options={[
              { value: '', label: '— None —' },
              ...(selectedMember?.savingsAccounts ?? [])
                .filter((a: any) => a.isActive)
                .map((a: any) => ({ value: a.id, label: `${a.accountType.replace(/_/g,' ')} — KES ${Number(a.balance).toLocaleString()}` })),
            ]}/>
        </div>
      </Modal>
    </div>
  )
}