'use client'

import { useEffect, useState } from 'react'
import { getMe } from '@/lib/api/agent'
import { KpiCards } from '@/components/dashboard/KpiCards'
import { AnalyticsStrip } from '@/components/dashboard/AnalyticsStrip'
import { ActivityPanel } from '@/components/dashboard/ActivityPanel'
import { StockKeeperJobs } from '@/components/dashboard/StockKeeperJobs'
import { StockKeeperDashboard } from '@/components/dashboard/StockKeeperDashboard'
import { Skeleton } from '@/components/ui/Skeleton'

export function DashboardContent() {
  const [role, setRole] = useState<'admin' | 'stock_keeper' | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getMe().then(res => {
      if (res.success) setRole(res.data.role)
    }).catch(() => {}).finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-40 w-full rounded-2xl" />
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
          {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-24 rounded-xl" />)}
        </div>
      </div>
    )
  }

  if (role === 'stock_keeper') {
    return <StockKeeperDashboard />
  }

  // Admin dashboard (full view)
  return (
    <>
      <KpiCards />
      <AnalyticsStrip />
      <StockKeeperJobs />
    </>
  )
}