Untitled

"use client"

import { useState } from "react"
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useMetrics } from "@/hooks/useMetrics"

export function HistoricalDataChart() {
  const { metrics, helpers } = useMetrics()
  const [selectedPeriod, setSelectedPeriod] = useState("month")

  if (!metrics || !helpers) return null

  const activeBinIds = helpers.getActiveBinIds()

  // Filter data based on selected period
  const now = new Date()
  const timeRange = {
    start: new Date(now.getTime() - getPeriodInMilliseconds(selectedPeriod)),
    end: now,
  }

  const fillLevelData = helpers.getFillLevelHistory(undefined, timeRange)
  const emptyingEvents = helpers.getEmptyingEvents(undefined, timeRange)

  const chartConfig = activeBinIds.reduce((acc, binId) => {
    acc[binId] = {
      label: binId,
      color: `hsl(${Math.random() * 360}, 70%, 50%)`,
    }
    return acc
  }, {})

  return (
    <Card>
      <CardHeader>
        <CardTitle>Historical Fill Levels</CardTitle>
        <CardDescription>Fill levels over time for all bins</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex justify-end mb-4">
          <Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select period" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="24h">Last 24 hours</SelectItem>
              <SelectItem value="week">Last week</SelectItem>
              <SelectItem value="month">Last month</SelectItem>
              <SelectItem value="year">Last year</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <ChartContainer config={chartConfig} className="h-[300px]">
          <LineChart data={fillLevelData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="timestamp" tickFormatter={(value) => new Date(value).toLocaleDateString()} />
            <YAxis />
            <ChartTooltip content={<ChartTooltipContent />} />
            {activeBinIds.map((binId) => (
              <Line
                key={binId}
                type="monotone"
                dataKey="fill_level"
                stroke={`var(--color-${binId})`}
                strokeWidth={2}
                dot={false}
                data={fillLevelData.filter((d) => d.bin_id === binId)}
              />
            ))}
            {emptyingEvents.map((event, index) => (
              <Line
                key={`emptying-${index}`}
                type="monotone"
                dataKey="fill_level"
                stroke={`var(--color-${event.bin_id})`}
                strokeWidth={0}
                dot={{
                  r: 4,
                  fill: `var(--color-${event.bin_id})`,
                  stroke: "#fff",
                  strokeWidth: 2,
                }}
                data={[event]}
              />
            ))}
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

function getPeriodInMilliseconds(period: string): number {
  switch (period) {
    case "24h":
      return 24 * 60 * 60 * 1000
    case "week":
      return 7 * 24 * 60 * 60 * 1000
    case "month":
      return 30 * 24 * 60 * 60 * 1000
    case "year":
      return 365 * 24 * 60 * 60 * 1000
    default:
      return 30 * 24 * 60 * 60 * 1000
  }
}