Untitled

import React from 'react';
import { Pie, PieChart } from 'recharts';
import { Leaf, TreePine, Factory, Car, Plane } from 'lucide-react';
import { useMetrics } from '@/hooks/useMetrics';
import { AppSidebar } from "@/components/app-sidebar";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbLink } from "@/components/ui/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

const chartConfig = {
  paper: {
    label: "Paper",
    color: "hsl(var(--chart-1))",
  },
  plastic: {
    label: "Plastic",
    color: "hsl(var(--chart-2))",
  },
  organic: {
    label: "Organic",
    color: "hsl(var(--chart-3))",
  },
};

export default function EnvironmentalImpactPage() {
  const { metrics, loading, error } = useMetrics();

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

  const { environmental_impact } = metrics;

  // Transform data for recycling by type pie chart
  const recyclingData = [
    { name: "Paper", value: environmental_impact.paper_weight_recycled },
    { name: "Plastic", value: environmental_impact.plastic_weight_recycled },
    { name: "Organic", value: environmental_impact.organic_weight_processed }
  ];

  // Calculate equivalents (example calculations - adjust as needed)
  const carKmSaved = environmental_impact.co2_saved * 6; // ~6km per kg CO2
  const flightKmSaved = environmental_impact.co2_saved * 3; // ~3km per kg CO2

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <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="/">Home</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbItem>
                <BreadcrumbLink href="/impact">Environmental Impact</BreadcrumbLink>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>

        <main className="p-4 space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            {/* CO2 Impact Card */}
            <Card className="relative overflow-hidden">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium">
                  CO2 Impact
                </CardTitle>
                <Factory className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{environmental_impact.co2_saved.toFixed(2)} kg</div>
                <p className="text-xs text-muted-foreground">CO2 emissions saved</p>
                <div className="mt-4 space-y-2">
                  <div className="flex items-center text-sm">
                    <Car className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>Equivalent to {carKmSaved.toFixed(0)} km not driven by car</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <Plane className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>Equivalent to {flightKmSaved.toFixed(0)} km not flown</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Trees Saved Card */}
            <Card className="relative overflow-hidden">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium">
                  Trees Saved
                </CardTitle>
                <TreePine className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{environmental_impact.trees_saved.toFixed(3)}</div>
                <p className="text-xs text-muted-foreground">Trees preserved through recycling</p>
                <div className="mt-4 space-y-2">
                  <div className="flex items-center text-sm">
                    <Leaf className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>Each tree absorbs ~22kg of CO2 per year</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <TreePine className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>Provides oxygen for 2 people per year</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Materials Recycled by Type */}
            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium">
                  <Leaf className="h-4 w-4" />
                  Materials Recycled by Type
                </CardTitle>
                <CardDescription>
                  Breakdown of recycled materials by weight (kg)
                </CardDescription>
              </CardHeader>
              <CardContent className="flex justify-between items-center">
                <ChartContainer config={chartConfig} className="h-[200px] w-[200px]">
                  <PieChart>
                    <Pie
                      data={recyclingData}
                      dataKey="value"
                      nameKey="name"
                      cx="50%"
                      cy="50%"
                      outerRadius={80}
                      label
                    >
                    </Pie>
                    <ChartTooltip content={<ChartTooltipContent />} />
                  </PieChart>
                </ChartContainer>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center">
                      <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'hsl(var(--chart-1))' }}></div>
                      <span className="text-sm font-medium">Paper: {environmental_impact.paper_weight_recycled.toFixed(2)} kg</span>
                    </div>
                    <div className="flex items-center">
                      <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'hsl(var(--chart-2))' }}></div>
                      <span className="text-sm font-medium">Plastic: {environmental_impact.plastic_weight_recycled.toFixed(2)} kg</span>
                    </div>
                    <div className="flex items-center">
                      <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'hsl(var(--chart-3))' }}></div>
                      <span className="text-sm font-medium">Organic: {environmental_impact.organic_weight_processed.toFixed(2)} kg</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}