Untitled

import React from 'react';
import { Pie, PieChart } from 'recharts';
import { Car, Plane, Leaf, TreePine, Factory, Recycle } 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 } from "@/components/ui/card";

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;

  // Round values to 2 decimal places
  const co2Saved = Math.round(environmental_impact.co2_saved * 100) / 100;
  const treesSaved = Math.round(environmental_impact.trees_saved * 1000) / 1000;

  // Calculate car and flight equivalents
  const carKm = Math.round(co2Saved * 6);
  const flightKm = Math.round(co2Saved * 3);

  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 }
  ];

  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 grid-cols-2">
            {/* CO2 Impact Card */}
            <Card className="bg-card/50 backdrop-blur-sm">
              <CardContent className="p-6">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-muted-foreground mb-2">
                      CO2 Impact
                    </div>
                    <div className="text-3xl font-bold mb-1">{co2Saved} kg</div>
                    <div className="text-sm text-muted-foreground mb-4">
                      CO2 emissions saved
                    </div>
                  </div>
                  <Factory className="h-5 w-5 text-muted-foreground opacity-50" />
                </div>
                <div className="space-y-2">
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Car className="h-4 w-4 mr-2" />
                    <span>Equivalent to {carKm} km not driven by car</span>
                  </div>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Plane className="h-4 w-4 mr-2" />
                    <span>Equivalent to {flightKm} km not flown</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Trees Saved Card */}
            <Card className="bg-card/50 backdrop-blur-sm">
              <CardContent className="p-6">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-muted-foreground mb-2">
                      Trees Saved
                    </div>
                    <div className="text-3xl font-bold mb-1">{treesSaved}</div>
                    <div className="text-sm text-muted-foreground mb-4">
                      Trees preserved through recycling
                    </div>
                  </div>
                  <TreePine className="h-5 w-5 text-muted-foreground opacity-50" />
                </div>
                <div className="space-y-2">
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Leaf className="h-4 w-4 mr-2" />
                    <span>Each tree absorbs ~22kg of CO2 per year</span>
                  </div>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <TreePine className="h-4 w-4 mr-2" />
                    <span>Provides oxygen for 2 people per year</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Materials Recycled Card */}
            <Card className="col-span-2 bg-card/50 backdrop-blur-sm">
              <CardContent className="p-6">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <div className="text-sm font-medium text-muted-foreground">
                      Materials Recycled by Type
                    </div>
                    <div className="text-sm text-muted-foreground">
                      Breakdown of recycled materials by weight (kg)
                    </div>
                  </div>
                  <Recycle className="h-5 w-5 text-muted-foreground opacity-50" />
                </div>
                
                <div className="flex justify-between items-center">
                  <div className="w-[300px] h-[300px]">
                    <PieChart width={300} height={300}>
                      <Pie
                        data={recyclingData}
                        dataKey="value"
                        nameKey="name"
                        cx="50%"
                        cy="50%"
                        outerRadius={120}
                        fill="#8884d8"
                      >
                        {recyclingData.map((entry, index) => (
                          <Cell 
                            key={`cell-${index}`} 
                            fill={`hsl(var(--chart-${index + 1}))`}
                          />
                        ))}
                      </Pie>
                    </PieChart>
                  </div>
                  
                  <div className="flex flex-col gap-3">
                    {recyclingData.map((item, index) => (
                      <div key={item.name} className="flex items-center gap-2">
                        <div 
                          className="w-3 h-3 rounded-full" 
                          style={{ backgroundColor: `hsl(var(--chart-${index + 1}))` }}
                        />
                        <span className="text-sm">
                          {item.name}: {item.value.toFixed(2)} kg
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}