'use client'

import { useEffect, useState } from 'react'
import { getMe, getTeam, TeamMember } from '@/lib/api/agent'
import { Skeleton } from '@/components/ui/Skeleton'
import { AlertTriangle } from 'lucide-react'

export default function KeeperLayout({ children }: { children: React.ReactNode }) {
  const [role, setRole] = useState<string | null>(null)
  const [hasActiveKeepers, setHasActiveKeepers] = useState<boolean | null>(null)
  const [checking, setChecking] = useState(true)

  useEffect(() => {
    let mounted = true
    async function check() {
      try {
        const meRes = await getMe()
        if (!mounted) return
        if (meRes.success) {
          setRole(meRes.data.role)
          if (meRes.data.role === 'admin') {
            const teamRes = await getTeam()
            if (teamRes.success && mounted) {
              const activeKeepers = teamRes.data.members.filter(
                (m: TeamMember) => m.role === 'stock_keeper' && m.status === 'active'
              )
              setHasActiveKeepers(activeKeepers.length > 0)
            }
          }
        }
      } finally {
        if (mounted) setChecking(false)
      }
    }
    check()
  }, [])

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

  return (
    <div className="space-y-6">
      {/* Admin fallback banner */}
      {role === 'admin' && hasActiveKeepers === false && (
        <div className="flex items-center gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/20">
          <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
          <div>
            <p className="text-sm font-semibold text-amber-800 dark:text-amber-300">
              No Stock Keeper assigned
            </p>
            <p className="text-xs text-amber-600 dark:text-amber-400 mt-0.5">
              Stock operations are managed by you because no Stock Keeper is active.{' '}
              <a href="/dashboard/team" className="underline font-medium hover:text-amber-700">
                Invite a Stock Keeper
              </a>{' '}
              to delegate operational tasks.
            </p>
          </div>
        </div>
      )}
      {children}
    </div>
  )
}