Untitled

// components/overview-cards.tsx
"use client"

import { useMetrics } from "@/hooks/useMetrics"
import { useBinConfig } from "@/hooks/use-bin-config"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Gauge, Clock, Trash2 } from "lucide-react"
import { format, differenceInHours, differenceInDays } from "date-fns"

export function OverviewCards() {
  const { metrics } = useMetrics()
  const { bins } = useBinConfig()

  // Improved time remaining formatting
  const formatTimeRemaining = (endDate: Date) => {
    const hoursTotal = differenceInHours(endDate, new Date())
    if (hoursTotal <= 0) return "Jetzt voll"
    
    if (hoursTotal > 24) {
      const days = Math.floor(hoursTotal / 24)
      const hours = hoursTotal % 24
      return `${days} Tag${days > 1 ? 'e' : ''} ${hours > 0 ? `und ${hours} Std` : ''}`
    }
    return `${hoursTotal} Stunden`
  }

  // Enhanced bin display formatting
  const getBinDisplay = (binId: string) => {
    const binNumber = binId.replace('bin', '')
    const configuredBin = bins.find(b => b.id === binId)
    return {
      name: configuredBin?.name || `Mülleimer ${binNumber}`,
      fullLabel: `${configuredBin?.name} (Mülleimer ${binNumber})`
    }
  }

  // Next full bin calculation with enhanced data
  const nextFullBin = metrics?.fill_predictions 
    ? Object.entries(metrics.fill_predictions).reduce((acc, [binId, prediction]) => {
        const predictedTime = new Date(prediction.predicted_full_time)
        if (!acc || predictedTime < acc.predictedTime) {
          return {
            binId,
            predictedTime,
            currentLevel: prediction.current_level,
            ...getBinDisplay(binId)
          }
        }
        return acc
      }, null as {
        binId: string
        predictedTime: Date
        currentLevel: number
        name: string
        fullLabel: string
      } | null)
    : null

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {/* Next Full Bin Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Nächste volle Tonne</CardTitle>
          <Clock className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          {nextFullBin ? (
            <div className="space-y-2">
              <div className="text-2xl font-bold">
                {nextFullBin.fullLabel}
              </div>
              <div className="text-lg font-semibold text-muted-foreground">
                {Math.round(nextFullBin.currentLevel)}% aktuell
              </div>
              <div className="text-sm">
                <div className="text-muted-foreground">
                  {format(nextFullBin.predictedTime, "dd.MM.yyyy HH:mm")}
                </div>
                <div className="text-primary font-medium">
                  {formatTimeRemaining(nextFullBin.predictedTime)}
                </div>
              </div>
            </div>
          ) : (
            <div className="text-sm text-muted-foreground">Keine Vorhersagen verfügbar</div>
          )}
        </CardContent>
      </Card>