import React, { useState } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import { motion } from "framer-motion";
import { PhoneCall, Battery, Zap, MapPin, DollarSign, Shield } from "lucide-react";


// Mock vehicle and grid data
const vehicles = [
{ id: 1, name: "EV-101", lat: 1.3521, lng: 103.8198, soc: 80, status: "Idle", battery: 60, fleet: false },
{ id: 2, name: "EV-202", lat: 1.3621, lng: 103.8298, soc: 45, status: "Discharging", battery: 120, fleet: true },
{ id: 3, name: "EV-303", lat: 1.3721, lng: 103.8098, soc: 90, status: "Charging", battery: 75, fleet: false },
];


const demandCurve = [
{ time: "10:00", demand: 120 },
{ time: "12:00", demand: 180 },
{ time: "14:00", demand: 150 },
{ time: "16:00", demand: 200 },
{ time: "18:00", demand: 250 },
];


export default function V2GPlatformUI() {
const [selectedEV, setSelectedEV] = useState(null);


return (
<div className="grid grid-cols-12 gap-4 p-4">
{/* Left Panel: Map */}
<Card className="col-span-8 h-[80vh]">
<CardContent className="h-full w-full">
<MapContainer center={[1.3521, 103.8198]} zoom={12} className="h-full w-full rounded-2xl">
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{vehicles.map((v) => (
<Marker key={v.id} position={[v.lat, v.lng]} eventHandlers={{ click: () => setSelectedEV(v) }}>
<Popup>
<div className="text-sm">
<p><b>{v.name}</b></p>
<p>Status: {v.status}</p>
<p>SoC: {v.soc}%</p>
<p>Battery: {v.battery} kWh</p>
<p>{v.fleet ? "Fleet Vehicle" : "Private EV"}</p>
</div>
</Popup>
</Marker>
))}
</MapContainer>
</CardContent>
</Card>


{/* Right Panel: Multi-layer controls */}
<Card className="col-span-4 h-[80vh] flex flex-col">
<CardContent className="flex-1 flex flex-col">
<Tabs defaultValue="overview" className="flex-1 flex flex-col">
<TabsList className="grid grid-cols-3">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="criteria">Criteria</TabsTrigger>
<TabsTrigger value="benefits">Benefits</TabsTrigger>
</TabsList>


{/* Overview Layer */}
<TabsContent value="overview" className="flex-1">
{selectedEV ? (
<motion.div className="p-4 space-y-2" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<h2 className="text-lg font-bold flex items-center gap-2"><Battery size={18}/> {selectedEV.name}</h2>
<p>Status: {selectedEV.status}</p>
<p>State of Charge: {selectedEV.soc}%</p>
<p>Battery Capacity: {selectedEV.battery} kWh</p>
<Button size="sm">Send Dispatch Signal</Button>
</motion.div>
) : (
<p className="p-4 text-sm text-gray-500">Select a vehicle on the map.</p>
)}
</TabsContent>


{/* Criteria Layer */}
<TabsContent value="criteria" className="flex-1 overflow-y-auto p-4 space-y-2 text-sm">
<h3 className="font-bold">Criteria for Selecting EVs</h3>
<ul className="list-disc ml-4 space-y-1">
<li>Availability: plugged in, idle duration</li>
<li>SoC beyond user’s next trip</li>
<li>User preferences & consent</li>
<li>Battery health & rotation to reduce wear</li>
<li>Incentives: tariffs, agreements</li>
<li>Technical readiness: bidirectional chargers, protocol support</li>
<li>Location/grid constraints: congestion hotspots</li>
<li>Fleet vs private profile</li>
</ul>
<h3 className="font-bold mt-4">Location & Distance Impacts</h3>
<p>EVs closer to demand centers reduce losses, relieve congestion, support renewables, and optimize voltage/frequency regulation.</p>
<h3 className="font-bold mt-4">Battery Capacity & Health</h3>
<p>Larger batteries provide longer dispatch windows and flexibility. Smart scheduling & BMS mitigate ~9–14% extra degradation over 10 years.</p>
</TabsContent>


{/* Benefits Layer */}
<TabsContent value="benefits" className="flex-1 p-4 space-y-3">
<h3 className="font-bold flex items-center gap-2"><DollarSign size={18}/> Economic Benefits for EV Owners</h3>
<ul className="list-disc ml-4 space-y-1 text-sm">
<li>Direct revenue: $700–$1,250/year (private EVs); $1,000–$16,000/vehicle (fleets)</li>
<li>Electricity bill savings: off-peak charging, on-peak discharging</li>
<li>Incentives & rebates: e.g., $3,000 charger rebates</li>
<li>Offsets ownership costs, lowers TCO</li>
</ul>
<motion.div className="flex items-center gap-2 p-2 rounded-xl shadow bg-green-100">
<Shield size={18}/> <span>Smart V2G reduces costs and supports the grid</span>
</motion.div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
</div>
);
}