Untitled

"use client"

import { useState, useEffect, useMemo } from "react"
import { format, parseISO, subDays } from "date-fns"
import { CartesianGrid, Line, LineChart, XAxis, YAxis, ResponsiveContainer, Scatter } from "recharts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChartLegend, ChartLegendContent, ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
import { useMetrics } from "@/hooks/useMetrics"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { CalendarIcon, X } from "lucide-react"

const timeRanges = [
  { label: "All Time", value: 9999999 },
  { label: "Last 24h", value: 1 },
  { label: "Last Week", value: 7 },
  { label: "Last Month", value: 30 },
  { label: "Last Year", value: 365 },
  { label: "Custom", value: "custom" },
]

const binOptions = ['all', 'bin1', 'bin2', 'bin3', 'bin4']

export function HistoricalFillLevelChart() {
  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
  const [selectedBin, setSelectedBin] = useState<string>("all")
  const [selectedTimeRange, setSelectedTimeRange] = useState<number | "custom">(30)
  const [customDateRange, setCustomDateRange] = useState<{ from: Date | undefined; to: Date | undefined }>({
    from: undefined,
    to: undefined,
  })
  
  const { metrics, helpers, loading, error } = useMetrics()

  const chartData = useMemo(() => {
    if (!helpers) return []

    let startDate: Date
    let endDate = new Date()

    if (selectedTimeRange === "custom" && customDateRange.from && customDateRange.to) {
      startDate = customDateRange.from
      endDate = customDateRange.to
    } else if (typeof selectedTimeRange === "number") {
      startDate = subDays(endDate, selectedTimeRange)
    } else {
      startDate = subDays(endDate, 30)
    }

    const binsToShow = selectedBin === "all" ? ['bin1', 'bin2', 'bin3', 'bin4'] : [selectedBin]
    
    const dataMap = new Map<string, any>()
    
    binsToShow.forEach(binId => {
      const historicalData = helpers.getFillLevelHistory(binId, { start: startDate, end: endDate })
      historicalData.forEach(item => {
        const dateKey = format(parseISO(item.timestamp), 'yyyy-MM-dd HH:mm')
        const existing = dataMap.get(dateKey) || { date: parseISO(item.timestamp) }
        
        dataMap.set(dateKey, {
          ...existing,
          [binId]: item.fill_level,
        })
      })
    })

    // Add emptying events as scatter points
    binsToShow.forEach(binId => {
      const emptyingEvents = helpers.getEmptyingEvents(binId, { start: startDate, end: endDate })
      emptyingEvents.forEach(event => {
        const dateKey = format(parseISO(event.timestamp), 'yyyy-MM-dd HH:mm')
        const existing = dataMap.get(dateKey) || { date: parseISO(event.timestamp) }
        
        dataMap.set(dateKey, {
          ...existing,
          [`${binId}_emptied`]: event.fill_level,
        })
      })
    })

    return Array.from(dataMap.values()).sort((a, b) => a.date - b.date)
  }, [helpers, selectedBin, selectedTimeRange, customDateRange])

  const chartConfig: ChartConfig = {
    bin1: { label: "Organic", color: "hsl(var(--chart-1))" },
    bin2: { label: "Plastic", color: "hsl(var(--chart-2))" },
    bin3: { label: "Paper", color: "hsl(var(--chart-3))" },
    bin4: { label: "Residual", color: "hsl(var(--chart-4))" },
  }

  const handleTimeRangeChange = (value: string) => {
    const newRange = value === "custom" ? "custom" : Number.parseInt(value)
    setSelectedTimeRange(newRange)
    
    if (newRange === "custom") {
      setTimeout(() => {
        setIsCalendarOpen(true)
      }, 0)
    }
  }

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error}</div>

  return (
    <Card>
      <CardHeader>
        <CardTitle>Historical Fill Levels</CardTitle>
        <CardDescription>Fill level trends over time with emptying events</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-4 mb-4">
          <Select value={selectedBin} onValueChange={setSelectedBin}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select a bin" />
            </SelectTrigger>
            <SelectContent>
              {binOptions.map(binId => (
                <SelectItem key={binId} value={binId}>
                  {binId === 'all' ? 'All Bins' : chartConfig[binId]?.label || binId}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select value={selectedTimeRange.toString()} onValueChange={handleTimeRangeChange}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select time range" />
            </SelectTrigger>
            <SelectContent>
              {timeRanges.map((range) => (
                <SelectItem key={range.value} value={range.value.toString()}>
                  {range.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          {selectedTimeRange === "custom" && (
            <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
              <PopoverTrigger asChild>
                <Button variant="outline" className="w-[280px] justify-start text-left font-normal">
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center">
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {customDateRange.from ? (
                        customDateRange.to ? (
                          <>
                            {format(customDateRange.from, "LLL dd, y")} - {format(customDateRange.to, "LLL dd, y")}
                          </>
                        ) : (
                          format(customDateRange.from, "LLL dd, y")
                        )
                      ) : (
                        <span>Pick a date range</span>
                      )}
                    </div>
                    {selectedTimeRange === "custom" && (customDateRange.from || customDateRange.to) && (
                      <div 
                        className="ml-2"
                        onClick={(e) => {
                          e.stopPropagation()
                          setSelectedTimeRange(9999999)
                          setCustomDateRange({ from: undefined, to: undefined })
                        }}
                      >
                        <X className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                      </div>
                    )}
                  </div>
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  initialFocus
                  mode="range"
                  defaultMonth={customDateRange.from}
                  selected={customDateRange}
                  onSelect={(range) => {
                    setCustomDateRange(range)
                    if (range?.from && range?.to) {
                      setIsCalendarOpen(false)
                    }
                  }}
                  numberOfMonths={2}
                />
              </PopoverContent>
            </Popover>
          )}
        </div>

        <ChartContainer config={chartConfig} className="aspect-auto h-[400px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={chartData}>
              <CartesianGrid vertical={false} />
              <XAxis 
                dataKey="date" 
                tickFormatter={(value) => format(value, "MMM dd")} 
                axisLine={false} 
                tickLine={false} 
                tickMargin={8} 
                minTickGap={32}
              />
              <YAxis 
                domain={[0, 100]} 
                axisLine={false} 
                tickLine={false} 
                tickFormatter={(value) => `${value}%`} 
              />

              <ChartTooltip 
                content={({ active, payload }) => {
                  if (!active || !payload?.length) return null
                  
                  const date = format(payload[0].payload.date, "MMM dd, yyyy HH:mm")
                  const bins = Array.from(new Set(payload.map(p => p.name?.replace('_emptied', ''))))
                  
                  return (
                    <div className="rounded-lg border bg-background p-2 shadow-sm">
                      <div className="grid gap-2">
                        <div className="text-sm font-medium">{date}</div>
                        {payload
                          .filter(p => !p.name?.endsWith('_emptied'))
                          .map((entry) => (
                            <div key={entry.dataKey} className="flex items-center gap-2">
                              <div 
                                className="h-2 w-2 rounded-full" 
                                style={{ background: entry.color }} 
                              />
                              <span className="text-sm text-muted-foreground">
                                {chartConfig[entry.dataKey]?.label}:
                              </span>
                              <span className="text-sm font-medium">
                                {entry.value?.toFixed(0)}%
                              </span>
                            </div>
                          ))}
                      </div>
                    </div>
                  )
                }} 
              />

              <ChartLegend content={<ChartLegendContent />} />

              {selectedBin === 'all' ? (
                ['bin1', 'bin2', 'bin3', 'bin4'].map((binId) => (
                  <Line
                    key={binId}
                    type="monotone"
                    dataKey={binId}
                    stroke={`var(--color-${binId})`}
                    strokeWidth={2}
                    dot={false}
                    name={chartConfig[binId]?.label}
                  />
                ))
              ) : (
                <Line
                  type="monotone"
                  dataKey={selectedBin}
                  stroke={`var(--color-${selectedBin})`}
                  strokeWidth={2}
                  dot={false}
                />
              )}

              {/* Emptying events as scatter points */}
              {selectedBin === 'all' 
                ? ['bin1', 'bin2', 'bin3', 'bin4'].map(binId => (
                    <Scatter
                      key={`${binId}_emptied`}
                      dataKey={`${binId}_emptied`}
                      fill={`var(--color-${binId})`}
                      shape={<circle r={4} />}
                    />
                  ))
                : <Scatter
                    dataKey={`${selectedBin}_emptied`}
                    fill={`var(--color-${selectedBin})`}
                    shape={<circle r={4} />}
                  />
              }
            </LineChart>
          </ResponsiveContainer>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}