'use client'

import { useEffect, useState } from 'react'
import { getAnalytics, getMe, type AnalyticsData } from '@/lib/api/agent'
import { KpiCard } from '@/components/ui/KpiCard'
import { SkeletonCard } from '@/components/ui/Skeleton'
import { DollarSign, ShoppingCart, Timer, Target } from 'lucide-react'

function formatDuration(seconds: number): string {
  if (seconds < 60) return `${Math.round(seconds)}s`
  const minutes = Math.floor(seconds / 60)
  const rest = Math.round(seconds % 60)
  return `${minutes}m ${rest}s`
}

function formatMoney(amount: number): string {
  return `$${amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}

export function AnalyticsStrip() {
  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        // Check role first — analytics require admin
        const meRes = await getMe()
        if (!meRes.success || meRes.data.role !== 'admin') {
          if (mounted) setLoading(false)
          return
        }
        const res = await getAnalytics()
        if (!res.success) throw new Error(res.message)
        if (mounted) {
          setAnalytics(res.data.analytics)
          setError(null)
        }
      } catch (err) {
        if (mounted) setError(err instanceof Error ? err.message : 'Failed to load analytics')
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    const interval = setInterval(load, 30000)
    return () => {
      mounted = false
      clearInterval(interval)
    }
  }, [])

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

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

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <KpiCard
        title="Completed Revenue"
        value={formatMoney(analytics.revenue)}
        icon={DollarSign}
        trend={`${analytics.revenueOrders} delivered orders`}
        trendUp
      />
      <KpiCard
        title="Procurement Spend"
        value={formatMoney(analytics.procurementSpend)}
        icon={ShoppingCart}
        trend={`${analytics.fulfilledPurchases} fulfilled purchases`}
        trendUp={false}
      />
      <KpiCard
        title="Avg Agent Run"
        value={analytics.avgExecutionSeconds == null ? '—' : formatDuration(analytics.avgExecutionSeconds)}
        icon={Timer}
        trend={`${analytics.executionRuns} total runs`}
        trendUp
      />
      <KpiCard
        title="Agent Success Rate"
        value={analytics.agentSuccessRate == null ? '—' : `${Math.round(analytics.agentSuccessRate)}%`}
        icon={Target}
        trend={`${analytics.tokensUsed.toLocaleString()} tokens used`}
        trendUp={(analytics.agentSuccessRate ?? 0) >= 50}
      />
    </div>
  )
}