'use client'

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

export default function PortalDashboard() {
  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
  const shareValue = parseFloat(data.shareAccount?.totalShareValue ?? 0)

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Welcome, {data.fullName}</h1>
        <p className="text-sm text-muted-foreground">{data.memberNo} &middot; KYC: {data.kycLevel}</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="bg-white rounded-xl border p-5">
          <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-5">
          <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(shareValue)}</p></div>
          </div>
        </div>
        <div className="bg-white rounded-xl border p-5">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center"><CreditCard className="w-5 h-5 text-amber-600" /></div>
            <div><p className="text-xs text-muted-foreground">Active Loans</p><p className="text-xl font-bold text-amber-600">{data._count?.loans ?? 0}</p></div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div className="bg-white rounded-xl border p-5">
          <h2 className="font-semibold mb-3 flex items-center gap-2"><PiggyBank className="w-4 h-4 text-primary" /> Savings Accounts</h2>
          {!data.savingsAccounts?.length
            ? <p className="text-sm text-muted-foreground">No savings accounts.</p>
            : <div className="space-y-2">{data.savingsAccounts.map((a: any) => (
                <div key={a.id} className="flex items-center justify-between py-2 border-b last:border-0">
                  <div><p className="text-sm font-medium">{a.accountName}</p><p className="text-xs text-muted-foreground font-mono">{a.accountNo}</p></div>
                  <p className="text-sm font-semibold text-green-600">{formatCurrency(a.balance)}</p>
                </div>
              ))}</div>
          }
          <button onClick={() => router.push('/portal/savings')} className="text-xs text-primary hover:underline mt-3">View all &rarr;</button>
        </div>

        <div className="bg-white rounded-xl border p-5">
          <h2 className="font-semibold mb-3 flex items-center gap-2"><CreditCard className="w-4 h-4 text-primary" /> Quick Actions</h2>
          <div className="space-y-2">
            <button onClick={() => router.push('/portal/loans')} className="w-full text-left px-3 py-2.5 rounded-lg border hover:bg-gray-50 text-sm font-medium transition-colors">View My Loans</button>
            <button onClick={() => router.push('/portal/savings')} className="w-full text-left px-3 py-2.5 rounded-lg border hover:bg-gray-50 text-sm font-medium transition-colors">Savings &amp; Shares</button>
            <button onClick={() => router.push('/portal/profile')} className="w-full text-left px-3 py-2.5 rounded-lg border hover:bg-gray-50 text-sm font-medium transition-colors">My Profile</button>
          </div>
        </div>
      </div>
    </div>
  )
}