import { PanelRightClose } from "lucide-react";

import { AgentContextCard } from "../components/agent/AgentContextCard";
import { AgentInput } from "../components/agent/AgentInput";
import { AgentMessageList } from "../components/agent/AgentMessageList";
import { Button } from "../components/common/Button";
import { useAgentStore } from "../stores/agentStore";
import { useLayoutStore } from "../stores/layoutStore";

export function AgentSidebar() {
  const messages = useAgentStore((state) => state.messages);
  const currentContext = useAgentStore((state) => state.currentContext);
  const sendMessage = useAgentStore((state) => state.sendMessage);
  const toggleAgentSidebar = useLayoutStore((state) => state.toggleAgentSidebar);

  return (
    <aside className="agent-sidebar" aria-label="Agent sidebar">
      <header className="agent-sidebar__header">
        <div>
          <p>Global Agent</p>
          <h2>Context Chat</h2>
        </div>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          aria-label="Close agent sidebar"
          icon={<PanelRightClose size={18} aria-hidden="true" />}
          onClick={toggleAgentSidebar}
        />
      </header>
      <AgentContextCard context={currentContext} />
      <AgentMessageList messages={messages} />
      <AgentInput onSend={(message) => sendMessage(message, currentContext)} />
    </aside>
  );
}