import { useState, useEffect } from 'react'
import { Button } from "/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card"
import { Input } from "/components/ui/input"
import { Label } from "/components/ui/label"
import { Slider } from "/components/ui/slider"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "/components/ui/select"
import { Switch } from "/components/ui/switch"
import { TreePalm } from "lucide-react"
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
PieChart,
Pie,
Cell,
ResponsiveContainer
} from "recharts"
// Constants
const CO2_ABSORBED_PER_TREE_PER_YEAR = 21.77 // kg of CO2 per tree per year
// Electricity rates by Indian state (per kWh)
const electricityRates = {
"Andhra Pradesh": 6.5,
"Arunachal Pradesh": 6.0,
"Assam": 6.2,
"Bihar": 6.8,
"Chhattisgarh": 6.3,
"Goa": 7.0,
"Gujarat": 7.2,
"Haryana": 7.0,
"Himachal Pradesh": 6.5,
"Jharkhand": 6.7,
"Karnataka": 6.8,
"Kerala": 7.0,
"Madhya Pradesh": 6.5,
"Maharashtra": 7.5,
"Manipur": 6.0,
"Meghalaya": 6.0,
"Mizoram": 6.0,
"Nagaland": 6.0,
"Odisha": 6.5,
"Punjab": 7.0,
"Rajasthan": 7.0,
"Sikkim": 6.0,
"Tamil Nadu": 6.8,
"Telangana": 6.7,
"Tripura": 6.0,
"Uttar Pradesh": 7.0,
"Uttarakhand": 6.5,
"West Bengal": 6.8,
"Delhi": 7.0,
// Petrol prices by Indian state (per liter)
const petrolPrices = {
"Andhra Pradesh": 110.0,
"Arunachal Pradesh": 108.0,
"Assam": 107.0,
"Bihar": 112.0,
"Chhattisgarh": 109.0,
"Goa": 105.0,
"Gujarat": 108.0,
"Haryana": 110.0,
"Himachal Pradesh": 109.0,
"Jharkhand": 111.0,
"Karnataka": 109.0,
"Kerala": 110.0,
"Madhya Pradesh": 110.0,
"Maharashtra": 115.0,
"Manipur": 106.0,
"Meghalaya": 106.0,
"Mizoram": 106.0,
"Nagaland": 106.0,
"Odisha": 110.0,
"Punjab": 110.0,
"Rajasthan": 110.0,
"Sikkim": 108.0,
"Tamil Nadu": 110.0,
"Telangana": 110.0,
"Tripura": 106.0,
"Uttar Pradesh": 110.0,
"Uttarakhand": 110.0,
"West Bengal": 110.0,
"Delhi": 107.0,
// Colors for pie chart
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']
export default function SavingsCalculator() {
// State with updated ranges
const [batteryCapacity, setBatteryCapacity] = useState<number>(5) // 1-15 kWh range
const [vehicleRange, setVehicleRange] = useState<number>(120) // 40-200 km range
const [dailyDistance, setDailyDistance] = useState<number>(50) // 5-200 km range
const [petrolMileage, setPetrolMileage] = useState<number>(45)
const [region, setRegion] = useState<string>("Delhi")
const [useCustomElectricityRate, setUseCustomElectricityRate] = useState(false)
const [customElectricityRate, setCustomElectricityRate] = useState<number>(7.0)
const [useCustomPetrolPrice, setUseCustomPetrolPrice] = useState(false)
const [customPetrolPrice, setCustomPetrolPrice] = useState<number>(107.0)
const [results, setResults] = useState<any>(null)
// Calculate efficiency (kWh per km)
const efficiency = batteryCapacity / vehicleRange
// Get current electricity rate based on user selection
const currentElectricityRate = useCustomElectricityRate
? customElectricityRate
: electricityRates[region as keyof typeof electricityRates]
// Get current petrol price based on user selection
const currentPetrolPrice = useCustomPetrolPrice
? customPetrolPrice
: petrolPrices[region as keyof typeof petrolPrices]
// Calculate results when inputs change
useEffect(() => {
calculateResults()
}, [batteryCapacity, vehicleRange, dailyDistance, petrolMileage, region,
useCustomElectricityRate, customElectricityRate, useCustomPetrolPrice, customPetrolPrice])
const calculateResults = () => {
// Monthly travel distance
const monthlyDistance = dailyDistance * 30
// Electric scooter calculations
const electricityCostPerKm = efficiency * currentElectricityRate
const monthlyElectricityCost = electricityCostPerKm * monthlyDistance
const yearlyElectricityCost = monthlyElectricityCost * 12
const electricMaintenanceCost = 200 // Estimated monthly maintenance for electric
// Petrol scooter calculations
const petrolCostPerKm = currentPetrolPrice / petrolMileage
const monthlyPetrolCost = petrolCostPerKm * monthlyDistance
const yearlyPetrolCost = monthlyPetrolCost * 12
const petrolMaintenanceCost = 500 // Estimated monthly maintenance for petrol
// Savings calculations
const monthlyRunningSavings = monthlyPetrolCost - monthlyElectricityCost
const yearlyRunningSavings = monthlyRunningSavings * 12
const monthlyMaintenanceSavings = petrolMaintenanceCost - electricMaintenanceCost
const yearlyMaintenanceSavings = monthlyMaintenanceSavings * 12
const totalMonthlySavings = monthlyRunningSavings + monthlyMaintenanceSavings
const totalYearlySavings = yearlyRunningSavings + yearlyMaintenanceSavings
// Emissions calculations (grams CO2 per km)
const electricEmissions = 0.82 * efficiency * 1000 // 0.82 kg CO2 per kWh in India
const petrolEmissions = 2.3 * 1000 // 2.3 kg CO2 per liter
const monthlyEmissionsReduction = (petrolEmissions - electricEmissions) * monthlyDistance /
1000 // in kg
const yearlyEmissionsReduction = monthlyEmissionsReduction * 12
// Trees equivalent calculation
const treesEquivalentMonthly = monthlyEmissionsReduction /
CO2_ABSORBED_PER_TREE_PER_YEAR * 12 // Adjusted for monthly view
const treesEquivalentYearly = yearlyEmissionsReduction / CO2_ABSORBED_PER_TREE_PER_YEAR
setResults({
electricityCostPerKm,
monthlyElectricityCost,
yearlyElectricityCost,
petrolCostPerKm,
monthlyPetrolCost,
yearlyPetrolCost,
monthlyRunningSavings,
yearlyRunningSavings,
monthlyMaintenanceSavings,
yearlyMaintenanceSavings,
totalMonthlySavings,
totalYearlySavings,
monthlyEmissionsReduction,
yearlyEmissionsReduction,
electricMaintenanceCost,
petrolMaintenanceCost,
electricityRate: currentElectricityRate,
petrolPrice: currentPetrolPrice,
treesEquivalentMonthly,
treesEquivalentYearly
})
// Data for charts
const costComparisonData = [
name: 'Electric Scooter',
running: results?.monthlyElectricityCost,
maintenance: results?.electricMaintenanceCost,
total: (results?.monthlyElectricityCost || 0) + (results?.electricMaintenanceCost || 0)
},
name: 'Petrol Scooter',
running: results?.monthlyPetrolCost,
maintenance: results?.petrolMaintenanceCost,
total: (results?.monthlyPetrolCost || 0) + (results?.petrolMaintenanceCost || 0)
const savingsBreakdownData = [
{ name: 'Running Cost Savings', value: results?.monthlyRunningSavings },
{ name: 'Maintenance Savings', value: results?.monthlyMaintenanceSavings }
return (
<div className="min-h-screen bg-gray-50 py-8 px-4">
<div className="max-w-6xl mx-auto">
<Card className="mb-8">
<CardHeader>
<CardTitle className="text-2xl font-bold">Electric vs Petrol Scooter Savings
Calculator</CardTitle>
<CardDescription>
Compare the costs and savings between electric and petrol scooters in India
</CardDescription>
</CardHeader>
</Card>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Input Section */}
<div className="lg:col-span-1 space-y-6">
<Card>
<CardHeader>
<CardTitle>Vehicle Parameters</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div>
<Label htmlFor="battery-capacity">Battery Capacity (kWh)</Label>
<div className="flex items-center gap-4">
<Slider
id="battery-capacity"
min={1}
max={15}
step={0.1}
value={[batteryCapacity]}
onValueChange={(value) => setBatteryCapacity(value[0])}
className="flex-1"
/>
<span className="w-16 text-center">{batteryCapacity.toFixed(1)}</span>
</div>
<div className="text-xs text-muted-foreground mt-1">
Range: 1 kWh to 15 kWh
</div>
</div>
<div>
<Label htmlFor="vehicle-range">Vehicle Range (km)</Label>
<div className="flex items-center gap-4">
<Slider
id="vehicle-range"
min={40}
max={200}
step={5}
value={[vehicleRange]}
onValueChange={(value) => setVehicleRange(value[0])}
className="flex-1"
/>
<span className="w-16 text-center">{vehicleRange}</span>
</div>
<div className="text-xs text-muted-foreground mt-1">
Range: 40 km to 200 km
</div>
</div>
<div>
<Label htmlFor="daily-distance">Daily Travel Distance (km)</Label>
<div className="flex items-center gap-4">
<Slider
id="daily-distance"
min={5}
max={200}
step={5}
value={[dailyDistance]}
onValueChange={(value) => setDailyDistance(value[0])}
className="flex-1"
/>
<span className="w-16 text-center">{dailyDistance}</span>
</div>
<div className="text-xs text-muted-foreground mt-1">
Range: 5 km to 200 km
</div>
</div>
<div>
<Label htmlFor="petrol-mileage">Petrol Scooter Mileage (km/liter)</Label>
<Input
id="petrol-mileage"
type="number"
value={petrolMileage}
onChange={(e) => setPetrolMileage(Number(e.target.value))}
/>
</div>
<div>
<Label htmlFor="region">Select Your Region</Label>
<Select
value={region}
onValueChange={setRegion}
disabled={useCustomElectricityRate || useCustomPetrolPrice}
>
<SelectTrigger>
<SelectValue placeholder="Select region" />
</SelectTrigger>
<SelectContent>
{Object.keys(electricityRates).map((state) => (
<SelectItem key={state} value={state}>
{state}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-4 pt-2">
<div className="flex items-center space-x-2">
<Switch
id="custom-rate-toggle"
checked={useCustomElectricityRate}
onCheckedChange={setUseCustomElectricityRate}
/>
<Label htmlFor="custom-rate-toggle">Use custom electricity rate</Label>
</div>
{useCustomElectricityRate && (
<div>
<Label htmlFor="custom-electricity-rate">Custom Electricity Rate (₹/kWh)</Label>
<div className="flex items-center gap-4">
<Slider
id="custom-electricity-rate"
min={2}
max={15}
step={0.1}
value={[customElectricityRate]}
onValueChange={(value) => setCustomElectricityRate(value[0])}
className="flex-1"
/>
<span className="w-16 text-center">{customElectricityRate.toFixed(1)}</span>
</div>
</div>
)}
</div>
<div className="space-y-4 pt-2">
<div className="flex items-center space-x-2">
<Switch
id="custom-petrol-toggle"
checked={useCustomPetrolPrice}
onCheckedChange={setUseCustomPetrolPrice}
/>
<Label htmlFor="custom-petrol-toggle">Use custom petrol price</Label>
</div>
{useCustomPetrolPrice && (
<div>
<Label htmlFor="custom-petrol-price">Custom Petrol Price (₹/liter)</Label>
<div className="flex items-center gap-4">
<Slider
id="custom-petrol-price"
min={80}
max={150}
step={1}
value={[customPetrolPrice]}
onValueChange={(value) => setCustomPetrolPrice(value[0])}
className="flex-1"
/>
<span className="w-16 text-center">₹{customPetrolPrice}</span>
</div>
</div>
)}
</div>
</CardContent>
</Card>
</div>
{/* Results Section */}
<div className="lg:col-span-2 space-y-6">
{results && (
<>
<Card>
<CardHeader>
<CardTitle>Savings Summary</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-green-50 p-4 rounded-lg">
<h3 className="font-medium text-green-800">Monthly Savings</h3>
<p className="text-2xl font-bold">₹{results.totalMonthlySavings.toFixed(0)}</p>
</div>
<div className="bg-green-50 p-4 rounded-lg">
<h3 className="font-medium text-green-800">Yearly Savings</h3>
<p className="text-2xl font-bold">₹{results.totalYearlySavings.toFixed(0)}</p>
</div>
<div className="bg-blue-50 p-4 rounded-lg">
<h3 className="font-medium text-blue-800">Cost per km (Electric)</h3>
<p className="text-2xl font-bold">₹{results.electricityCostPerKm.toFixed(2)}</p>
</div>
<div className="bg-blue-50 p-4 rounded-lg">
<h3 className="font-medium text-blue-800">Cost per km (Petrol)</h3>
<p className="text-2xl font-bold">₹{results.petrolCostPerKm.toFixed(2)}</p>
</div>
</div>
<div className="mt-4 text-sm text-muted-foreground">
<p>Current electricity rate: ₹{results.electricityRate.toFixed(2)}/kWh</p>
<p>Current petrol price: ₹{results.petrolPrice.toFixed(2)}/liter</p>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Environmental Impact</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-purple-50 p-4 rounded-lg">
<h3 className="font-medium text-purple-800">Monthly CO₂ Reduction</h3>
<p className="text-2xl font-bold">{results.monthlyEmissionsReduction.toFixed(1)}
kg</p>
</div>
<div className="bg-purple-50 p-4 rounded-lg">
<h3 className="font-medium text-purple-800">Yearly CO₂ Reduction</h3>
<p className="text-2xl font-bold">{results.yearlyEmissionsReduction.toFixed(1)}
kg</p>
</div>
<div className="bg-purple-50 p-4 rounded-lg">
<h3 className="font-medium text-purple-800 flex items-center gap-2">
<TreePalm className="w-5 h-5" />
Trees Equivalent
</h3>
<p className="text-2xl font-bold">{results.treesEquivalentYearly.toFixed(1)}
trees/year</p>
<p className="text-sm text-muted-foreground mt-1">
({results.treesEquivalentMonthly.toFixed(1)} trees/month)
</p>
</div>
</div>
<div className="mt-4 text-sm text-muted-foreground">
<p>* Based on a mature tree absorbing ~21.77 kg of CO₂ per year</p>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Cost Comparison</CardTitle>
</CardHeader>
<CardContent>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={costComparisonData}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="running" fill="#8884d8" name="Running Cost" />
<Bar dataKey="maintenance" fill="#82ca9d" name="Maintenance" />
</BarChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Savings Breakdown</CardTitle>
</CardHeader>
<CardContent>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={savingsBreakdownData}
cx="50%"
cy="50%"
labelLine={false}
outerRadius={80}
fill="#8884d8"
dataKey="value"
nameKey="name"
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
>
{savingsBreakdownData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
</>
)}
</div>
</div>
</div>
</div>
