'use client'

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

const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  Pending: 'outline',
  DispatchConfirmed: 'secondary',
  ReceiptConfirmed: 'default',
  DiscrepancyFlagged: 'destructive',
  Resolved: 'default',
}

const STATUS_LABEL: Record<string, string> = {
  Pending: 'Pending',
  DispatchConfirmed: 'Dispatched',
  ReceiptConfirmed: 'Received',
  DiscrepancyFlagged: 'Discrepancy',
  Resolved: 'Resolved',
}

export function LoadingSheetsWidget() {
  const [data, setData] = useState<LoadingSheetResponse[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(true)

  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
      const res = await loadingSheets.list({ status: 'Pending', pageSize: 5, page: 1 })
      setData(res.items ?? [])
      setTotal(res.total ?? 0)
    } 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-12 w-full" />
        <Skeleton className="h-12 w-full" />
      </div>
    )
  }

  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">{total}</span>
        <span className="text-sm text-muted-foreground">pending sheet{total !== 1 ? 's' : ''}</span>
      </div>
      <div className="flex flex-col gap-1.5 overflow-auto">
        {data.length === 0 ? (
          <p className="text-sm text-muted-foreground">No pending loading sheets</p>
        ) : (
          data.map(sheet => (
            <div key={sheet.id} 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">{sheet.warehouseName}</span>
                <span className="text-xs text-muted-foreground">
                  {sheet.items.length} item{sheet.items.length !== 1 ? 's' : ''}
                </span>
              </div>
              <Badge variant={STATUS_VARIANT[sheet.status] ?? 'outline'} className="ml-2 shrink-0">
                {STATUS_LABEL[sheet.status] ?? sheet.status}
              </Badge>
            </div>
          ))
        )}
      </div>
    </div>
  )
}