Energy Dashboard

import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
import { Badge } from "./components/ui/badge"
import { Zap, TrendingUp, ArrowDown, ArrowUp } from "lucide-react"

const energyData = [
  { time: "00:00", value: 20, height: 20 },
  { time: "03:00", value: 15, height: 15 },
  { time: "06:00", value: 45, height: 45 },
  { time: "09:00", value: 65, height: 65 },
  { time: "12:00", value: 80, height: 80 },
  { time: "15:00", value: 70, height: 70 },
  { time: "18:00", value: 35, height: 35 },
  { time: "21:00", value: 25, height: 25 },
  { time: "24:00", value: 15, height: 15 },
]

export default function EnergyDashboard() {
  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-lg bg-primary/20 flex items-center justify-center">
            <Zap className="h-5 w-5 text-primary" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">Energy Dashboard</h1>
            <p className="text-sm text-muted-foreground">Real-time monitoring</p>
          </div>
        </div>
        <Badge variant="success">Live</Badge>
      </div>

      {/* Stats Grid */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Production</CardTitle>
            <Zap className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">4.2 kW</div>
            <p className="text-xs text-muted-foreground">+12% from yesterday</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Storage</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">85%</div>
            <p className="text-xs text-muted-foreground">13.6 kWh available</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Grid</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">0.8 kW</div>
            <p className="text-xs text-muted-foreground">Importing</p>
          </CardContent>
        </Card>
      </div>

      {/* Energy Flow Chart */}
      <Card>
        <CardHeader>
          <CardTitle>Energy Flow (24h)</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="h-[250px] flex items-end justify-between gap-2 px-2">
            {energyData.map((item, i) => (
              <div key={i} className="flex-1 flex flex-col items-center gap-2">
                <div
                  className="w-full bg-primary/20 rounded-t-sm relative group cursor-pointer hover:bg-primary/30 transition-colors"
                  style={{ height: `${item.height}%` }}
                >
                  <div className="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div className="bg-popover border rounded px-2 py-1 text-xs whitespace-nowrap">
                      {item.value} kW
                    </div>
                  </div>
                </div>
                <span className="text-xs text-muted-foreground">{item.time}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Metrics */}
      <Card>
        <CardHeader>
          <CardTitle>Performance Metrics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Total Energy Today</span>
            <span className="font-medium">32.4 kWh</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Peak Power</span>
            <span className="font-medium">8.2 kW</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Efficiency</span>
            <span className="font-medium">94.2%</span>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}