'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import axios from 'axios'
import { formatCurrency, fmtDate } from '@/lib/utils'
import { Loader2, PiggyBank, TrendingUp } from 'lucide-react'

export default function PortalSavings() {
  const router = useRouter()
  const [data, setData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    axios.get('/api/auth/member/me')
      .then(r => setData(r.data.data))
      .catch(() => router.push('/portal/login'))
      .finally(() => setLoading(false))
  }, [router])

  if (loading) return <div className="flex items-center justify-center h-64"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>
  if (!data) return null

  const totalSavings = data.savingsAccounts?.reduce((s: number, a: any) => s + parseFloat(a.balance ?? 0), 0) ?? 0

  return (
    <div className="space-y-6">
      <div><h1 className="text-2xl font-bold">Savings &amp; Shares</h1><p className="text-sm text-muted-foreground">Your savings accounts and share holdings</p></div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="bg-white rounded-xl border p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center"><PiggyBank className="w-5 h-5 text-blue-600" /></div>
            <div><p className="text-xs text-muted-foreground">Total Savings</p><p className="text-xl font-bold text-blue-600">{formatCurrency(totalSavings)}</p></div>
          </div>
        </div>
        <div className="bg-white rounded-xl border p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center"><TrendingUp className="w-5 h-5 text-purple-600" /></div>
            <div><p className="text-xs text-muted-foreground">Share Value</p><p className="text-xl font-bold text-purple-600">{formatCurrency(data.shareAccount?.totalShareValue)}</p></div>
          </div>
        </div>
      </div>

      {data.savingsAccounts?.map((acc: any) => (
        <div key={acc.id} className="bg-white rounded-xl border">
          <div className="px-5 py-4 border-b flex items-center justify-between">
            <div><p className="font-semibold">{acc.accountName}</p><p className="text-xs text-muted-foreground font-mono">{acc.accountNo}</p></div>
            <p className="text-lg font-bold text-green-600">{formatCurrency(acc.balance)}</p>
          </div>
          <div className="px-5 py-3 grid grid-cols-2 gap-4 text-sm">
            <div><p className="text-xs text-muted-foreground">Available Balance</p><p className="font-medium">{formatCurrency(acc.availableBalance)}</p></div>
            <div><p className="text-xs text-muted-foreground">Status</p><p className="font-medium text-green-600">Active</p></div>
          </div>
        </div>
      ))}

      {data.shareAccount && (
        <div className="bg-white rounded-xl border">
          <div className="px-5 py-4 border-b"><p className="font-semibold">Share Account</p><p className="text-xs text-muted-foreground font-mono">{data.shareAccount.accountNo}</p></div>
          <div className="px-5 py-3 grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
            <div><p className="text-xs text-muted-foreground">Shares Held</p><p className="text-lg font-bold">{(data.shareAccount.sharesHeld || 0).toLocaleString()}</p></div>
            <div><p className="text-xs text-muted-foreground">Total Value</p><p className="text-lg font-bold text-purple-600">{formatCurrency(data.shareAccount.totalShareValue)}</p></div>
          </div>
        </div>
      )}
    </div>
  )
}