Untitled

import React from 'react';
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { useMetrics } from '@/hooks/useMetrics';
import { useTranslation, type SupportedLanguages } from "@/utils/translations";
import { useSettings } from "@/hooks/useSettings";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { formatDistanceToNow } from 'date-fns';
import { ArrowUpCircle, ArrowDownCircle, Activity, BarChart3, AlarmClock } from 'lucide-react';

export default function BinStatisticsPage() {
  const { metrics, loading, error, helpers } = useMetrics();
  const { settings } = useSettings();
  const { t } = useTranslation((settings?.language as SupportedLanguages) || "EN");

  if (loading) {
    return (
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
          <div>Loading...</div>
        </SidebarInset>
      </SidebarProvider>
    );
  }

  if (error || !metrics) {
    return (
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
          <div>Error loading metrics data</div>
        </SidebarInset>
      </SidebarProvider>
    );
  }

  // Get active bins and their current status
  const activeBins = helpers?.getActiveBinIds() || [];
  const predictions = helpers?.getLatestPredictions() || {};
  const emptyingStats = helpers?.getProactiveEmptyingStats() || [];

  // Calculate some overview statistics
  const totalEmptyings = Object.values(metrics.basic_metrics.bin_emptying_counts).reduce((a, b) => a + b, 0);
  const averageFillLevel = Object.values(predictions).reduce((acc, pred) => acc + pred.current_level, 0) / Object.values(predictions).length;

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        {/* Header */}
        <header className="flex shrink-0 items-center gap-2 border-b px-4 py-6">
          <SidebarTrigger className="-ml-1" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="/">{t("navigation.home")}</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbItem>
                <BreadcrumbLink href="/bins">Bin Management</BreadcrumbLink>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>

        {/* Main Content */}
        <main className="p-4 space-y-6">
          {/* Overview Section */}
          <Card>
            <CardHeader>
              <CardTitle>System Overview</CardTitle>
              <CardDescription>Current status and key metrics</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                <Card>
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between space-x-4">
                      <div className="flex items-center space-x-4">
                        <Activity className="h-6 w-6 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Active Bins</p>
                          <p className="text-2xl font-bold">{activeBins.length}</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between space-x-4">
                      <div className="flex items-center space-x-4">
                        <BarChart3 className="h-6 w-6 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Average Fill Level</p>
                          <p className="text-2xl font-bold">{averageFillLevel.toFixed(1)}%</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between space-x-4">
                      <div className="flex items-center space-x-4">
                        <AlarmClock className="h-6 w-6 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Total Emptyings</p>
                          <p className="text-2xl font-bold">{totalEmptyings}</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between space-x-4">
                      <div className="flex items-center space-x-4">
                        <ArrowUpCircle className="h-6 w-6 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Proactive Emptyings</p>
                          <p className="text-2xl font-bold">{metrics.proactive_emptying.count}</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* Detailed Status */}
              <div className="mt-6">
                <h3 className="font-medium mb-4">Current Bin Status</h3>
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                  {activeBins.map(binId => {
                    const prediction = predictions[binId];
                    if (!prediction) return null;

                    const timeUntilFull = new Date(prediction.predicted_full_time).getTime() - new Date().getTime();
                    const isNearFull = prediction.current_level > 80;

                    return (
                      <Card key={binId} className={isNearFull ? 'border-orange-500' : ''}>
                        <CardContent className="pt-6">
                          <div className="space-y-2">
                            <p className="text-sm font-medium">Bin {binId}</p>
                            <div className="flex justify-between text-sm">
                              <span>Current Level:</span>
                              <span className={isNearFull ? 'text-orange-500 font-medium' : ''}>
                                {prediction.current_level.toFixed(1)}%
                              </span>
                            </div>
                            <div className="flex justify-between text-sm">
                              <span>Fill Rate:</span>
                              <span>{prediction.fill_rate.toFixed(2)}%/hour</span>
                            </div>
                            <div className="flex justify-between text-sm">
                              <span>Time Until Full:</span>
                              <span>{formatDistanceToNow(new Date(prediction.predicted_full_time))}</span>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    );
                  })}
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Charts Section */}
          <Tabs defaultValue="historical" className="space-y-4">
            <TabsList>
              <TabsTrigger value="historical">Historical Data</TabsTrigger>
              <TabsTrigger value="predictions">Fill Predictions</TabsTrigger>
              <TabsTrigger value="proactive">Proactive Emptying</TabsTrigger>
            </TabsList>
            <TabsContent value="historical" className="space-y-4">
              {/* Historical Data Chart will go here */}
              <Card>
                <CardHeader>
                  <CardTitle>Fill Level History</CardTitle>
                  <CardDescription>Historical fill levels and emptying events</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px]">
                    {/* Historical Chart Component will be added here */}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="predictions" className="space-y-4">
              {/* Predictions Chart will go here */}
              <Card>
                <CardHeader>
                  <CardTitle>Fill Level Predictions</CardTitle>
                  <CardDescription>Current and predicted fill levels</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px]">
                    {/* Predictions Chart Component will be added here */}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="proactive" className="space-y-4">
              {/* Proactive Emptying Chart will go here */}
              <Card>
                <CardHeader>
                  <CardTitle>Proactive Emptying Statistics</CardTitle>
                  <CardDescription>Analysis of emptying events by fill level</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px]">
                    {/* Proactive Emptying Chart Component will be added here */}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}