'use client'

import { useEffect, useState } from 'react'
import { getKpiData } from '@/lib/api/agent'
import { KpiCard } from '@/components/ui/KpiCard'
import { SkeletonCard } from '@/components/ui/Skeleton'
import { Package, ClipboardList, Activity, AlertTriangle, CheckCircle } from 'lucide-react'

export function KpiCards() {
  const [kpis, setKpis] = useState<{
    orders: number
    pendingApprovals: number
    activeTasks: number
    inventoryAlerts: number
    completedOrders: number
  } | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        const res = await getKpiData()
        if (res.success) {
          if (mounted) setKpis(res.data.kpis)
        } else {
          if (mounted) setError(res.message)
        }
      } catch (err) {
        if (mounted) setError(err instanceof Error ? err.message : 'Failed to load KPIs')
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    const interval = setInterval(load, 10000)
    return () => {
      mounted = false
      clearInterval(interval)
    }
  }, [])

  if (loading) {
    return (
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {Array.from({ length: 5 }).map((_, i) => (
          <SkeletonCard key={i} />
        ))}
      </div>
    )
  }

  if (error || !kpis) {
    return (
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <div className="col-span-full text-center py-8 text-gray-500">
          Failed to load KPIs
        </div>
      </div>
    )
  }

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
      <KpiCard title="Total Orders" value={kpis.orders} icon={Package} />
      <KpiCard title="Pending Approvals" value={kpis.pendingApprovals} icon={ClipboardList} />
      <KpiCard title="Active Tasks" value={kpis.activeTasks} icon={Activity} />
      <KpiCard title="Inventory Alerts" value={kpis.inventoryAlerts} icon={AlertTriangle} />
      <KpiCard title="Completed Orders" value={kpis.completedOrders} icon={CheckCircle} />
    </div>
  )
}