'use client'
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'
import { formatCurrency } from '@/lib/utils'
import { Building2, Plus } from 'lucide-react'
import { Card, Badge, Button, PageHeader, Amount, StatCard } from '@/components/ui/components'

export default function BanksPage() {
  const { data, isLoading } = useQuery({
    queryKey: ['bank-accounts'],
    queryFn: () => axios.get('/api/accounting?sub=banks').then(r => r.data.data),
  })
  const accounts = data ?? []
  const totalBalance = accounts.reduce((s: number, a: any) => s + parseFloat(a.currentBalance ?? 0), 0)
  return (
    <div className="p-6 space-y-5 max-w-screen-xl mx-auto">
      <PageHeader title="Bank Accounts" description={`${accounts.length} bank accounts`} icon={<Building2 className="w-6 h-6"/>}
        actions={<Button size="sm" icon={<Plus className="w-4 h-4"/>}>Add Account</Button>}
      />
      <StatCard label="Total Bank Balances" value={formatCurrency(totalBalance)} icon={<Building2 className="w-5 h-5"/>} color="blue" className="max-w-sm"/>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {isLoading ? Array.from({length:4}).map((_,i)=><div key={i} className="h-48 bg-muted/30 rounded-xl animate-pulse"/>) : accounts.map((a: any) => (
          <Card key={a.id}>
            <div className="p-5">
              <div className="flex justify-between items-start mb-3"><div><h3 className="font-semibold">{a.bankName}</h3><p className="text-xs text-muted-foreground">{a.accountType}</p></div><Badge variant={a.isActive?'success':'default'}>{a.isActive?'Active':'Inactive'}</Badge></div>
              <p className="font-mono text-sm text-muted-foreground mb-4">{a.accountNumber}</p>
              <div><p className="text-xs text-muted-foreground mb-1">Current Balance</p><Amount value={a.currentBalance} size="xl" className="text-primary font-bold"/></div>
              <div className="grid grid-cols-2 gap-3 mt-3 pt-3 border-t text-sm">
                <div><p className="text-xs text-muted-foreground">Last Reconciled</p><p className="text-xs">{a.lastReconciledDate ? new Date(a.lastReconciledDate).toLocaleDateString() : 'Never'}</p></div>
                <div><p className="text-xs text-muted-foreground">Branch</p><p className="text-xs">{a.branch?.name}</p></div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}