'use client'

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'
import { formatCurrency, formatNumber, formatPercent, fmtDate, loanStatusVariant, sasraClassVariant, cn } from '@/lib/utils'
import { TrendingUp, TrendingDown, Users, CreditCard, AlertTriangle, DollarSign, BarChart2, Clock, CheckCircle2, Loader2 } from 'lucide-react'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'

function StatCard({ label, value, sub, icon, trend, color = 'blue' }: {
  label: string; value: string; sub?: string; icon: React.ReactNode; trend?: 'up' | 'down' | null; color?: string
}) {
  const colors: Record<string, string> = {
    blue:  'bg-blue-50 text-blue-600 dark:bg-blue-900/20',
    green: 'bg-green-50 text-green-600 dark:bg-green-900/20',
    amber: 'bg-amber-50 text-amber-600 dark:bg-amber-900/20',
    red:   'bg-red-50 text-red-600 dark:bg-red-900/20',
  }
  return (
    <div className="bg-card border rounded-xl p-5">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">{label}</p>
          <p className="text-2xl font-semibold text-foreground">{value}</p>
          {sub && <p className="text-xs text-muted-foreground mt-1">{sub}</p>}
        </div>
        <div className={cn('p-2.5 rounded-lg', colors[color])}>{icon}</div>
      </div>
      {trend && (
        <div className={cn('flex items-center gap-1 mt-2 text-xs font-medium', trend === 'up' ? 'text-green-600' : 'text-red-500')}>
          {trend === 'up' ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
          <span>{trend === 'up' ? '+' : ''}8.2% vs last month</span>
        </div>
      )}
    </div>
  )
}

const SASRA_COLORS: Record<string, string> = {
  NORMAL:      '#3b6d11',
  WATCH:       '#854f0b',
  SUBSTANDARD: '#993c1d',
  DOUBTFUL:    '#a32d2d',
  LOSS:        '#7a1f1f',
}

export default function DashboardPage() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['dashboard'],
    queryFn: () => axios.get('/api/dashboard').then(r => r.data.data),
    refetchInterval: 60_000,
  })

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <Loader2 className="w-8 h-8 animate-spin text-primary" />
      </div>
    )
  }

  if (isError || !data) {
    return <div className="p-8 text-center text-muted-foreground">Failed to load dashboard data. Please refresh.</div>
  }

  const { portfolio, members, savings, delinquency, operations, portfolioByClass, recentLoans, topOverdue } = data

  const pieData = portfolioByClass?.map((p: any) => ({
    name: p.class,
    value: p.amount,
    percentage: p.percentage,
    fill: SASRA_COLORS[p.class] ?? '#ccc',
  })) ?? []

  return (
    <div className="p-6 space-y-6 max-w-screen-2xl mx-auto">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold">Dashboard</h1>
        <p className="text-sm text-muted-foreground mt-0.5">Nairobi Main Branch · {new Date().toLocaleDateString('en-KE', { weekday:'long', year:'numeric', month:'long', day:'numeric' })}</p>
      </div>

      {/* KPI Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        <StatCard
          label="Loan Portfolio"
          value={formatCurrency(portfolio?.outstandingPrincipal)}
          sub={`${formatNumber(portfolio?.totalActiveLoans)} active loans`}
          icon={<CreditCard className="w-5 h-5" />}
          trend="up" color="blue"
        />
        <StatCard
          label="Active Members"
          value={formatNumber(members?.activeMembers)}
          sub="Total registered members"
          icon={<Users className="w-5 h-5" />}
          trend="up" color="green"
        />
        <StatCard
          label="Portfolio At Risk (PAR)"
          value={formatPercent(delinquency?.parRate)}
          sub={`${formatNumber(delinquency?.overdueLoans)} overdue loans`}
          icon={<AlertTriangle className="w-5 h-5" />}
          trend={delinquency?.parRate > 5 ? 'down' : 'up'}
          color={delinquency?.parRate > 5 ? 'red' : 'amber'}
        />
        <StatCard
          label="Disbursed This Month"
          value={formatCurrency(operations?.disbursedThisMonth?.amount)}
          sub={`${operations?.disbursedThisMonth?.count} disbursements`}
          icon={<DollarSign className="w-5 h-5" />}
          trend="up" color="green"
        />
      </div>

      {/* Second row stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        <StatCard label="Total Savings" value={formatCurrency(savings?.totalSavings)} sub="FOSA + BOSA" icon={<BarChart2 className="w-5 h-5" />} color="blue" />
        <StatCard label="Share Capital" value={formatCurrency(savings?.totalShares)} sub="Member shares" icon={<TrendingUp className="w-5 h-5" />} color="green" />
        <StatCard label="Pending Approvals" value={formatNumber(operations?.pendingApprovals)} sub="Loans awaiting decision" icon={<Clock className="w-5 h-5" />} color={operations?.pendingApprovals > 0 ? 'amber' : 'green'} />
        <StatCard label="Repayments (MTD)" value={formatCurrency(operations?.repaymentsThisMonth?.amount)} sub={`${operations?.repaymentsThisMonth?.count} payments`} icon={<CheckCircle2 className="w-5 h-5" />} color="green" />
      </div>

      {/* Charts + Tables */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        {/* Portfolio quality pie */}
        <div className="bg-card border rounded-xl p-5">
          <h3 className="font-medium mb-4">Portfolio Quality</h3>
          <ResponsiveContainer width="100%" height={200}>
            <PieChart>
              <Pie data={pieData} cx="50%" cy="50%" outerRadius={80} dataKey="value" label={({ name, percentage }) => `${name} ${percentage}%`} labelLine={false}>
                {pieData.map((entry: any, i: number) => <Cell key={i} fill={entry.fill} />)}
              </Pie>
              <Tooltip formatter={(v: any) => formatCurrency(v)} />
            </PieChart>
          </ResponsiveContainer>
          <div className="mt-3 space-y-1.5">
            {pieData.map((p: any) => (
              <div key={p.name} className="flex items-center justify-between text-xs">
                <div className="flex items-center gap-1.5">
                  <div className="w-2.5 h-2.5 rounded-full" style={{ background: p.fill }} />
                  <span className="text-muted-foreground">{p.name}</span>
                </div>
                <span className="font-medium">{p.percentage}%</span>
              </div>
            ))}
          </div>
        </div>

        {/* Recent loans */}
        <div className="xl:col-span-2 bg-card border rounded-xl">
          <div className="flex items-center justify-between px-5 py-4 border-b">
            <h3 className="font-medium">Recent Loan Applications</h3>
            <a href="/loans" className="text-xs text-primary hover:underline">View all →</a>
          </div>
          <div className="overflow-x-auto">
            <table className="table-lms w-full">
              <thead>
                <tr>
                  <th>Member</th><th>Loan Ref</th><th>Product</th><th>Amount</th><th>Status</th><th>Date</th>
                </tr>
              </thead>
              <tbody>
                {recentLoans?.slice(0, 8).map((loan: any) => (
                  <tr key={loan.id}>
                    <td>
                      <div>
                        <p className="font-medium text-sm">{loan.member?.fullName}</p>
                        <p className="text-xs text-muted-foreground">{loan.member?.memberNo}</p>
                      </div>
                    </td>
                    <td><a href={`/loans/${loan.id}`} className="text-primary hover:underline text-sm">{loan.loanRef}</a></td>
                    <td className="text-sm">{loan.product?.name}</td>
                    <td className="text-sm font-medium">{formatCurrency(loan.principalAmount)}</td>
                    <td>
                      <span className={cn('badge', `badge-${loanStatusVariant(loan.status)}`)}>
                        {loan.status.replace('_', ' ')}
                      </span>
                    </td>
                    <td className="text-xs text-muted-foreground">{fmtDate(loan.createdAt)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Overdue loans */}
      {topOverdue?.length > 0 && (
        <div className="bg-card border rounded-xl">
          <div className="flex items-center justify-between px-5 py-4 border-b">
            <div className="flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 text-destructive" />
              <h3 className="font-medium">Top Overdue Loans</h3>
            </div>
            <a href="/collections" className="text-xs text-primary hover:underline">Manage collections →</a>
          </div>
          <div className="overflow-x-auto">
            <table className="table-lms w-full">
              <thead>
                <tr>
                  <th>Member</th><th>Loan Ref</th><th>DPD</th><th>Outstanding</th><th>Arrears</th><th>Classification</th>
                </tr>
              </thead>
              <tbody>
                {topOverdue.map((loan: any) => (
                  <tr key={loan.id}>
                    <td>
                      <div>
                        <p className="font-medium text-sm">{loan.member?.fullName}</p>
                        <p className="text-xs text-muted-foreground">{loan.member?.phone}</p>
                      </div>
                    </td>
                    <td><a href={`/loans/${loan.id}`} className="text-primary hover:underline text-sm">{loan.loanRef}</a></td>
                    <td>
                      <span className={cn('font-semibold text-sm', loan.daysOverdue > 90 ? 'text-destructive' : loan.daysOverdue > 30 ? 'text-amber-600' : 'text-yellow-600')}>
                        {loan.daysOverdue} days
                      </span>
                    </td>
                    <td className="text-sm font-medium">{formatCurrency(loan.outstandingBalance)}</td>
                    <td className="text-sm text-destructive font-medium">{formatCurrency(loan.accruedPenalties)}</td>
                    <td>
                      <span className={cn('badge', `badge-${sasraClassVariant(loan.sasraClass)}`)}>
                        {loan.sasraClass}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  )
}