'use client'

import { useCallback, useEffect, useState } from 'react'
import { sales } from '@/lib/api/index'
import type { SaleResponse } from '@/types/api'
import { Skeleton } from '@/components/ui/skeleton'

export function TodaySalesWidget() {
  const [items, setItems] = useState<SaleResponse[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(true)

  const fetchData = useCallback(async () => {
    setLoading(true)
    const today = new Date().toISOString().split('T')[0]
    try {
      const res = await sales.list({ from: today, to: today, pageSize: 50, page: 1 })
      setItems(res.items ?? [])
      setTotal(res.total ?? 0)
    } catch {
      // silent
    } finally {
      setLoading(false)
    }
  }, [])

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

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

  const revenue = items.reduce((sum, s) => sum + s.totalAmount, 0)
  const completed = items.filter(s => s.status === 'Completed').length
  const pending = items.filter(s => s.status === 'Pending').length

  return (
    <div className="flex h-full flex-col gap-4">
      <div className="flex flex-col">
        <span className="text-3xl font-bold">
          Rs.&nbsp;{revenue.toLocaleString('en-LK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
        </span>
        <span className="text-sm text-muted-foreground">revenue today</span>
      </div>
      <div className="grid grid-cols-3 gap-2">
        <div className="flex flex-col rounded-xl border px-3 py-2">
          <span className="text-xl font-bold">{total}</span>
          <span className="text-xs text-muted-foreground">total</span>
        </div>
        <div className="flex flex-col rounded-xl border px-3 py-2">
          <span className="text-xl font-bold text-green-600">{completed}</span>
          <span className="text-xs text-muted-foreground">completed</span>
        </div>
        <div className="flex flex-col rounded-xl border px-3 py-2">
          <span className="text-xl font-bold text-amber-500">{pending}</span>
          <span className="text-xs text-muted-foreground">pending</span>
        </div>
      </div>
    </div>
  )
}