Untitled

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Leaf, TreePine, Recycle, PlaneTakeoff } from "lucide-react";
import { Pie, PieChart } from "recharts";
import { useMetrics } from '@/hooks/useMetrics';
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

const timeOptions = [
  { value: "day", label: "Last 24 Hours" },
  { value: "week", label: "Last Week" },
  { value: "month", label: "Last Month" },
  { value: "year", label: "Last Year" },
];

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

export default function EnvironmentalImpact() {
  const [selectedPeriod, setSelectedPeriod] = useState("month");
  const { metrics, loading, error } = useMetrics();

  if (loading) return <div className="p-4">Loading...</div>;
  if (error) return <div className="p-4">Error: {error}</div>;
  if (!metrics) return null;

  const { environmental_impact: impact } = metrics;

  // Prepare data for the materials pie chart
  const materialsData = [
    { 
      name: "paper",
      value: impact.paper_weight_recycled,
      fill: "var(--color-paper)"
    },
    {
      name: "plastic",
      value: impact.plastic_weight_recycled,
      fill: "var(--color-plastic)"
    },
    {
      name: "organic",
      value: impact.organic_weight_processed,
      fill: "var(--color-organic)"
    }
  ].filter(item => item.value > 0);

  // Calculate flight equivalents (rough estimation)
  const flightsAvoided = Math.round(impact.co2_saved / 0.2); // Assuming 0.2kg CO2 per short flight

  return (
    <div className="space-y-4 p-4">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Environmental Impact</h1>
        <Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select period" />
          </SelectTrigger>
          <SelectContent>
            {timeOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {/* CO2 Saved Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-lg">
              <Leaf className="h-5 w-5 text-green-500" />
              CO₂ Saved
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="mt-2 space-y-2">
              <div className="text-3xl font-bold text-green-500">
                {impact.co2_saved.toFixed(2)} kg
              </div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <PlaneTakeoff className="h-4 w-4" />
                Equivalent to {flightsAvoided} short flights
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Trees Saved Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-lg">
              <TreePine className="h-5 w-5 text-green-700" />
              Trees Saved
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="mt-2 space-y-2">
              <div className="text-3xl font-bold text-green-700">
                {impact.trees_saved.toFixed(3)}
              </div>
              <div className="text-sm text-muted-foreground">
                Preserved through recycling efforts
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Materials Recycled Card */}
        <Card className="xl:col-span-1">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-lg">
              <Recycle className="h-5 w-5 text-blue-500" />
              Materials Recycled
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={materialChartConfig}
              className="mx-auto aspect-square h-[200px]"
            >
              <PieChart>
                <ChartTooltip 
                  content={
                    <ChartTooltipContent 
                      formatter={(value: number) => `${value.toFixed(2)} kg`}
                    />
                  }
                />
                <Pie
                  data={materialsData}
                  dataKey="value"
                  nameKey="name"
                  cx="50%"
                  cy="50%"
                  innerRadius={40}
                  outerRadius={80}
                />
              </PieChart>
            </ChartContainer>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}