'use client'

import { useCallback, useEffect, useState } from 'react'
import { stock } from '@/lib/api/index'
import type { StockBalanceResponse } from '@/types/api'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'

const LOW_STOCK_THRESHOLD = 10

export function StockAlertsWidget() {
  const [alerts, setAlerts] = useState<StockBalanceResponse[]>([])
  const [loading, setLoading] = useState(true)

  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
      const res = await stock.balances({ pageSize: 100, page: 1 })
      const low = (res.items ?? []).filter(b => b.quantity <= LOW_STOCK_THRESHOLD)
      setAlerts(low)
    } catch {
      // silent
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchData() }, [fetchData])

  if (loading) {
    return (
      <div className="flex flex-col gap-2">
        <Skeleton className="h-8 w-16" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-10 w-full" />
      </div>
    )
  }

  const outOfStock = alerts.filter(a => a.quantity === 0)
  const lowStock = alerts.filter(a => a.quantity > 0)

  return (
    <div className="flex h-full flex-col gap-3 overflow-hidden">
      <div className="flex items-baseline gap-2">
        <span className="text-3xl font-bold">{alerts.length}</span>
        <span className="text-sm text-muted-foreground">
          alert{alerts.length !== 1 ? 's' : ''}
          {outOfStock.length > 0 && (
            <span className="ml-1 text-destructive">({outOfStock.length} out of stock)</span>
          )}
        </span>
      </div>
      <div className="flex flex-col gap-1.5 overflow-auto">
        {alerts.length === 0 ? (
          <p className="text-sm text-muted-foreground">All stock levels are healthy</p>
        ) : (
          alerts.map(b => (
            <div key={`${b.itemId}-${b.locationId}`} className="flex items-center justify-between rounded-xl border px-3 py-2">
              <div className="flex min-w-0 flex-col">
                <span className="truncate text-sm font-medium">{b.itemName}</span>
                <span className="text-xs text-muted-foreground capitalize">{b.locationType}</span>
              </div>
              <Badge
                variant={b.quantity === 0 ? 'destructive' : 'outline'}
                className="ml-2 shrink-0"
              >
                {b.quantity === 0 ? 'Out of stock' : `${b.quantity} left`}
              </Badge>
            </div>
          ))
        )}
      </div>
    </div>
  )
}