AI Assistant

import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
import { Input } from "./components/ui/input"
import { Button } from "./components/ui/button"
import { Send, Bot, User } from "lucide-react"

export default function AIAssistant() {
  const messages = [
    { role: "assistant", content: "Hello! I'm your energy assistant. How can I help you today?" },
    { role: "user", content: "What's my current energy production?" },
    { role: "assistant", content: "Your current total energy production is 8.4 kW from solar panels. Battery storage is at 92% capacity." },
    { role: "user", content: "How can I optimize my energy usage?" },
    { role: "assistant", content: "Based on your consumption patterns, I recommend shifting heavy loads to peak solar production hours (11 AM - 3 PM). You could save up to 15% on your energy costs." },
  ]

  return (
    <div className="flex flex-col h-screen max-w-4xl mx-auto p-4">
      <Card className="mb-4">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bot className="h-5 w-5 text-primary" />
            AI Energy Assistant
          </CardTitle>
        </CardHeader>
      </Card>

      <Card className="flex-1 flex flex-col">
        <CardContent className="flex-1 overflow-y-auto p-4 space-y-4">
          {messages.map((message, i) => (
            <div
              key={i}
              className={`flex gap-3 ${message.role === "user" ? "flex-row-reverse" : ""}`}
            >
              <div className={`h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0 ${
                message.role === "user" ? "bg-primary/20" : "bg-secondary"
              }`}>
                {message.role === "user" ? (
                  <User className="h-4 w-4" />
                ) : (
                  <Bot className="h-4 w-4" />
                )}
              </div>
              <div className={`rounded-lg p-3 max-w-[80%] ${
                message.role === "user"
                  ? "bg-primary text-primary-foreground ml-auto"
                  : "bg-muted"
              }`}>
                <p className="text-sm">{message.content}</p>
              </div>
            </div>
          ))}
        </CardContent>

        <CardContent className="p-4 border-t">
          <div className="flex gap-2">
            <Input placeholder="Ask me anything about your energy system..." />
            <Button>
              <Send className="h-4 w-4" />
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}