ACVE/components/AssistantDrawer.tsx

"use client";

import { SubmitEvent, useEffect, useState, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from "@/components/ui/sheet";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";

type AssistantMessage = {
  id: string;
  role: "user" | "assistant";
  content: string;
};

type AssistantDrawerProps = {
  mode?: "global" | "page";
};

export const ASSISTANT_TOGGLE_EVENT = "acve:assistant-toggle";

export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProps) {
  const [isOpen, setIsOpen] = useState(mode === "page");
  const [messages, setMessages] = useState<AssistantMessage[]>([
    {
      id: "seed",
      role: "assistant",
      content: "Ask about courses, case studies, or practice. Demo responses are mocked for now.",
    },
  ]);
  const [input, setInput] = useState("");

  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [messages]);

  useEffect(() => {
    if (mode === "page") {
      return;
    }

    const onToggle = () => setIsOpen((current) => !current);
    window.addEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
    return () => window.removeEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
  }, [mode]);

  const send = (event: SubmitEvent) => {
    event.preventDefault();
    const trimmed = input.trim();
    if (!trimmed) return;

    const now = Date.now().toString();
    setMessages((current) => [
      ...current,
      { id: `u-${now}`, role: "user", content: trimmed },
      { id: `a-${now}`, role: "assistant", content: "(Demo) Assistant not connected yet." },
    ]);
    setInput("");
  };

  const ChatContent = (
    <div className="flex h-full flex-col">
      <ScrollArea className="flex-1 p-4">
        <div className="space-y-4">
          {messages.map((message) => (
            <div
              key={message.id}
              className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${message.role === "user"
                ? "ml-auto bg-primary text-primary-foreground"
                : "mr-auto border border-border bg-muted text-foreground"
                }`}
            >
              {message.content}
            </div>
          ))}
          <div ref={scrollRef} />
        </div>
      </ScrollArea>

      <SheetFooter className="mt-auto border-t bg-background p-4 sm:flex-col">
        <form className="w-full" onSubmit={send}>
          <div className="flex gap-2">
            <Input
              className="flex-1"
              onChange={(event) => setInput(event.target.value)}
              placeholder="Type your message..."
              value={input}
            />
            <Button type="submit">Send</Button>
          </div>
        </form>
      </SheetFooter>
    </div>
  );

  if (mode === "page") {
    return (
      <Card className="mx-auto flex h-[68vh] max-w-4xl flex-col shadow-xl">
        <CardHeader className="border-b px-4 py-3">
          <CardTitle className="text-2xl text-primary font-serif">AI Assistant</CardTitle>
        </CardHeader>
        <CardContent className="flex-1 p-0 overflow-hidden">
          {ChatContent}
        </CardContent>
      </Card>
    );
  }

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetContent className="flex w-full flex-col p-0 sm:max-w-md">
        <SheetHeader className="px-4 py-3 border-b">
          <SheetTitle className="text-primary font-serif">AI Assistant</SheetTitle>
          <SheetDescription className="sr-only">Chat with our AI assistant</SheetDescription>
        </SheetHeader>
        <div className="flex-1 overflow-hidden">
          {ChatContent}
        </div>
      </SheetContent>
    </Sheet>
  );
}