"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";

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("");

  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 panelClasses = useMemo(() => {
    if (mode === "page") {
      return "mx-auto flex h-[70vh] max-w-3xl flex-col rounded-2xl border border-slate-300 bg-white shadow-xl";
    }

    return `fixed right-0 top-0 z-50 h-screen w-full max-w-md border-l border-slate-300 bg-white shadow-2xl transition-transform ${
      isOpen ? "translate-x-0" : "translate-x-full"
    }`;
  }, [isOpen, mode]);

  const send = (event: FormEvent) => {
    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("");
  };

  if (mode === "global" && !isOpen) {
    return (
      <aside className={panelClasses}>
        <div />
      </aside>
    );
  }

  return (
    <aside className={panelClasses}>
      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
        <h2 className="acve-heading text-2xl">AI Assistant</h2>
        {mode === "global" ? (
          <button
            className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-600 hover:bg-slate-50"
            onClick={() => setIsOpen(false)}
            type="button"
          >
            Close
          </button>
        ) : null}
      </div>

      <div className="flex-1 space-y-3 overflow-y-auto p-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-brand text-white"
                : "mr-auto border border-slate-200 bg-slate-50 text-slate-800"
            }`}
          >
            {message.content}
          </div>
        ))}
      </div>

      <form className="border-t border-slate-200 p-3" onSubmit={send}>
        <div className="flex gap-2">
          <input
            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand"
            onChange={(event) => setInput(event.target.value)}
            placeholder="Type your message..."
            value={input}
          />
          <button className="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
            Send
          </button>
        </div>
      </form>
    </aside>
  );
}