Untitled

import { useState } from 'react';
import { Card, CardContent, 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 { LineChart, Line, ResponsiveContainer, XAxis, YAxis, Tooltip, BarChart, Bar, PieChart, Pie, Cell } from 'recharts';
import { Leaf, TreePine, Recycle, Plane } from 'lucide-react';
import { cn } from '@/lib/utils';

// Mock data - replace with your actual data fetching
const mockData = {
  environmental_impact: {
    co2_saved: 1.83,
    trees_saved: 0.0289,
    paper_weight_recycled: 1.70,
    plastic_weight_recycled: 0.0,
    organic_weight_processed: 0.60
  }
};

const timeRanges = ['Last Week', 'Last Month', 'Last 3 Months', 'Last Year', 'All Time'];

function StatCard({ title, value, icon: Icon, className }: { title: string; value: string; icon: any; className?: string }) {
  return (
    <Card className={cn("relative overflow-hidden", className)}>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
      </CardContent>
    </Card>
  );
}

function App() {
  const [timeRange, setTimeRange] = useState('Last Month');
  const [selectedView, setSelectedView] = useState('summary');

  // Mock time series data - replace with actual data
  const timeSeriesData = [
    { date: '2024-01', co2: 0.5, trees: 0.01 },
    { date: '2024-02', co2: 1.2, trees: 0.02 },
    { date: '2024-03', co2: 1.83, trees: 0.0289 },
  ];

  const materialsData = [
    { name: 'Paper', value: mockData.environmental_impact.paper_weight_recycled },
    { name: 'Plastic', value: mockData.environmental_impact.plastic_weight_recycled },
    { name: 'Organic', value: mockData.environmental_impact.organic_weight_processed },
  ];

  const COLORS = ['hsl(var(--chart-1))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))'];

  return (
    <div className="min-h-screen bg-background p-8">
      <div className="mx-auto max-w-7xl">
        <h1 className="text-4xl font-bold mb-8">Environmental Impact</h1>
        
        <div className="mb-8">
          <Tabs defaultValue="summary" onValueChange={setSelectedView}>
            <TabsList>
              <TabsTrigger value="summary">Summary</TabsTrigger>
              <TabsTrigger value="detailed">Detailed Breakdown</TabsTrigger>
            </TabsList>
          </Tabs>
        </div>

        <div className="grid gap-6">
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <StatCard
              title="CO₂ Saved"
              value={`${mockData.environmental_impact.co2_saved.toFixed(2)} kg`}
              icon={Leaf}
            />
            <StatCard
              title="Trees Saved"
              value={mockData.environmental_impact.trees_saved.toFixed(3)}
              icon={TreePine}
            />
            <StatCard
              title="Materials Recycled"
              value={`${(mockData.environmental_impact.paper_weight_recycled + 
                mockData.environmental_impact.plastic_weight_recycled + 
                mockData.environmental_impact.organic_weight_processed).toFixed(2)} kg`}
              icon={Recycle}
            />
            <StatCard
              title="Flights Equivalent"
              value={`${(mockData.environmental_impact.co2_saved / 200).toFixed(3)}`}
              icon={Plane}
            />
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>Environmental Savings Over Time</CardTitle>
                  <Select value={timeRange} onValueChange={setTimeRange}>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Select time range" />
                    </SelectTrigger>
                    <SelectContent>
                      {timeRanges.map((range) => (
                        <SelectItem key={range} value={range}>{range}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </CardHeader>
              <CardContent>
                <div className="h-[300px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={timeSeriesData}>
                      <XAxis dataKey="date" />
                      <YAxis />
                      <Tooltip />
                      <Line type="monotone" dataKey="co2" stroke="hsl(var(--chart-1))" name="CO₂ Saved (kg)" />
                      <Line type="monotone" dataKey="trees" stroke="hsl(var(--chart-2))" name="Trees Saved" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>Materials Recycled by Type</CardTitle>
                  <Select value={timeRange} onValueChange={setTimeRange}>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Select time range" />
                    </SelectTrigger>
                    <SelectContent>
                      {timeRanges.map((range) => (
                        <SelectItem key={range} value={range}>{range}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </CardHeader>
              <CardContent>
                <div className="h-[300px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={materialsData}
                        cx="50%"
                        cy="50%"
                        innerRadius={60}
                        outerRadius={80}
                        fill="#8884d8"
                        paddingAngle={5}
                        dataKey="value"
                        label={({ name, value }) => `${name}: ${value.toFixed(2)}kg`}
                      >
                        {materialsData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;