Glow Assistant Chat

"use client";

import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue, useSpring } from "motion/react";
import { ArrowUp, CloseCircle as Close, Gallery, Reply as ReplyIcon, Structure as Branch } from "@solar-icons/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  GlowAssistantChat                                                             */
/* ------------------------------------------------------------------ */

interface ChatMessage {
  id: string;
  text: string;
  role: "user" | "assistant";
  replyTo?: { id: string; text: string };
}

/** Deadpan assistant lines, dealt in order (no Math.random at render). */
const ASSISTANT_LINES = [
  "you've hit your yearly limit of usage",
  "processing... still not a good idea",
  "this seemed smart in your head, huh",
  "we both know this won't end well",
  "you're asking, but you already know the answer",
  "nice try. absolutely not",
  "this could've stayed a thought",
];

/** One cool-blue family for the send aurora — never a rainbow. */
const AURORA_COLORS = ["#3b82f6", "#60a5fa", "#93c5fd"];

function PlusIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      className="shrink-0"
    >
      <line x1="2" y1="8" x2="14" y2="8" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
      <line x1="8" y1="2" x2="8" y2="14" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
    </svg>
  );
}

function ReplyButton({ onClick }: { onClick: () => void }) {
  return (
    <motion.button
      key="reply-btn"
      type="button"
      aria-label="Reply to message"
      initial={{ opacity: 0, scale: 0.7 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.7 }}
      transition={{ type: "spring", stiffness: 400, damping: 28 }}
      onClick={onClick}
      className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
    >
      <ReplyIcon size={13} weight="Bold" />
    </motion.button>
  );
}

function MessageBubble({
  message,
  onReply,
}: {
  message: ChatMessage;
  onReply?: (m: ChatMessage) => void;
}) {
  const isUser = message.role === "user";
  const [hovered, setHovered] = useState(false);
  const [isMultiline, setIsMultiline] = useState(false);
  const textRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const el = textRef.current;
    if (!el) return;
    const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
    setIsMultiline(el.scrollHeight > 1.5 * lineHeight);
  }, [message.text]);

  const rounded = !!message.replyTo || message.text.includes("\n") || isMultiline;

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 16, scale: 0.95 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, y: -8, scale: 0.95 }}
      transition={{ type: "spring", stiffness: 380, damping: 30 }}
      className={cn("flex", isUser ? "justify-end" : "justify-start")}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className={cn("flex max-w-[80%] flex-col", isUser ? "items-end" : "items-start")}>
        {message.replyTo && (
          <p
            className={cn(
              "mb-1 max-w-[200px] truncate px-1 text-xs text-zinc-400",
              isUser ? "text-right" : "text-left",
            )}
          >
            {message.replyTo.text}
          </p>
        )}
        <div className="relative">
          <div
            ref={textRef}
            className={cn(
              "px-3.5 py-2 text-sm leading-relaxed text-zinc-900 dark:text-zinc-100",
              rounded ? "rounded-2xl" : "rounded-full",
              isUser
                ? "border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900"
                : "bg-zinc-100 dark:bg-zinc-800",
            )}
          >
            {message.text}
          </div>
          <AnimatePresence>
            {hovered && (
              <div
                className={cn(
                  "absolute top-1/2 -translate-y-1/2",
                  isUser ? "-left-7" : "-right-7",
                )}
              >
                <ReplyButton onClick={() => onReply?.(message)} />
              </div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </motion.div>
  );
}

function TypingDots() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -4 }}
      transition={{ type: "spring", stiffness: 380, damping: 30 }}
      className="flex justify-start"
    >
      <div className="flex items-center gap-1 rounded-full bg-zinc-100 px-3.5 py-2.5 dark:bg-zinc-800">
        {[0, 1, 2].map((i) => (
          <motion.span
            key={i}
            className="block size-1.5 rounded-full bg-zinc-400 dark:bg-zinc-500"
            animate={{ y: [0, -4, 0] }}
            transition={{ duration: 0.6, repeat: Infinity, delay: 0.15 * i, ease: "easeInOut" }}
          />
        ))}
      </div>
    </motion.div>
  );
}

interface GlowAssistantChatProps {
  /** Auto-type a showcase message on mount, cancelled by any real input [Optional, default: false] */
  autoDemo?: boolean;
}

/**
 * A compact AI chat: bubbles spring in with hover-to-reply, the composer
 * expands as you type (attach/image/branch actions blur in), sending kicks
 * the input with a spring and washes a blue aurora up from below, then a
 * typing indicator hands off to a deadpan reply. All local state; no network.
 * @param {boolean} autoDemo - Self-typing showcase mode [Optional, default: false]
 */
export function GlowAssistantChat({ autoDemo = false }: GlowAssistantChatProps) {
  const [messages, setMessages] = useState<ChatMessage[]>([
    { id: "0", text: "Hey! How can I help you today?", role: "assistant" },
  ]);
  const [draft, setDraft] = useState("");
  const [replyTo, setReplyTo] = useState<{ id: string; text: string } | null>(null);
  const [isSending, setIsSending] = useState(false);
  const [isTyping, setIsTyping] = useState(false);
  const [showAurora, setShowAurora] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const [sendFlash, setSendFlash] = useState(false);
  const [pinnedOpen, setPinnedOpen] = useState(false);
  const lineIndex = useRef(0);

  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const bottomRef = useRef<HTMLDivElement>(null);

  const kickY = useMotionValue(0);
  const kickRotate = useMotionValue(0);
  const springY = useSpring(kickY, { stiffness: 500, damping: 18, mass: 0.6 });
  const springRotate = useSpring(kickRotate, { stiffness: 500, damping: 18, mass: 0.6 });

  const kick = useCallback(() => {
    kickY.set(-14);
    kickRotate.set(-1.5);
    setTimeout(() => {
      kickY.set(0);
      kickRotate.set(0);
    }, 60);
  }, [kickY, kickRotate]);

  const expanded = pinnedOpen || draft.includes("\n") || draft.length > 10;

  useEffect(() => {
    const el = textareaRef.current;
    if (el) {
      el.style.height = "auto";
      el.style.height = `${el.scrollHeight}px`;
    }
  }, [draft]);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, isTyping]);

  /* Showcase mode: type a line character-by-character, then submit via the
     same ref the send button uses. Any real pointer/key input cancels it. */
  const sendRef = useRef<() => void>(() => {});
  const autoCancelled = useRef(false);
  useEffect(() => {
    if (!autoDemo) return;
    // Reset on every (re)run — StrictMode's setup/cleanup/setup cycle would
    // otherwise leave the flag stuck true and the showcase never plays.
    autoCancelled.current = false;
    const timers: ReturnType<typeof setTimeout>[] = [];
    const cancel = () => {
      autoCancelled.current = true;
      timers.forEach(clearTimeout);
    };
    const script = "can I ship this on a friday?";
    script.split("").forEach((_, i) => {
      timers.push(
        setTimeout(() => {
          if (!autoCancelled.current) setDraft(script.slice(0, i + 1));
        }, 900 + i * 55),
      );
    });
    timers.push(
      setTimeout(() => {
        if (!autoCancelled.current) sendRef.current();
      }, 900 + script.length * 55 + 500),
    );
    window.addEventListener("pointerdown", cancel);
    window.addEventListener("keydown", cancel);
    return () => {
      cancel();
      window.removeEventListener("pointerdown", cancel);
      window.removeEventListener("keydown", cancel);
    };
  }, [autoDemo]);

  const sendTimersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
  useEffect(() => {
    const timers = sendTimersRef.current;
    return () => timers.forEach(clearTimeout);
  }, []);

  const send = useCallback(() => {
    const text = draft.trim();
    if (!text || isSending) return;
    const userMessage: ChatMessage = {
      id: `u-${Date.now()}`,
      text,
      role: "user",
      replyTo: replyTo ?? undefined,
    };
    setMessages((prev) => [...prev, userMessage]);
    setDraft("");
    setReplyTo(null);
    setIsSending(true);
    setShowAurora(true);
    const timers = sendTimersRef.current;
    timers.push(setTimeout(() => setShowAurora(false), 400));
    kick();
    setSendFlash(true);
    timers.push(setTimeout(() => setSendFlash(false), 400));
    timers.push(
      setTimeout(() => {
        setIsSending(false);
        setIsTyping(true);
      }, 600),
    );
    timers.push(
      setTimeout(() => {
        const line =
          ASSISTANT_LINES[lineIndex.current % ASSISTANT_LINES.length];
        lineIndex.current += 1;
        setIsTyping(false);
        setMessages((prev) => [
          ...prev,
          { id: `a-${Date.now()}`, text: line, role: "assistant" },
        ]);
      }, 1800),
    );
  }, [draft, isSending, replyTo, kick]);

  useEffect(() => {
    sendRef.current = send;
  }, [send]);

  return (
    <div className="relative w-full max-w-xl">
      {/* Blue aurora wash that rises on send */}
      <AnimatePresence>
        {showAurora && (
          <motion.div
            key="aurora"
            aria-hidden="true"
            style={{
              position: "absolute",
              left: "50%",
              bottom: 0,
              translateX: "-50%",
              width: "120%",
              height: "30%",
              zIndex: 0,
              pointerEvents: "none",
              maskImage:
                "radial-gradient(ellipse 90% 80% at 50% 100%, transparent 50%, black 100%)",
            }}
            initial={{ y: "150%", opacity: 0, filter: "blur(24px)" }}
            animate={{ y: "-150%", opacity: 0.3, filter: "blur(24px)" }}
            exit={{ opacity: 0, filter: "blur(24px)" }}
            transition={{
              y: { duration: 1.2, ease: [0.16, 1, 0.3, 1] },
              opacity: { duration: 0.3, ease: "easeOut" },
            }}
          >
            <div className="flex h-full w-full flex-col items-stretch -space-y-3">
              {AURORA_COLORS.map((color) => (
                <div key={color} className="w-full flex-1 blur-xl" style={{ backgroundColor: color }} />
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <div className="relative z-10 flex w-full flex-col gap-3">
        {/* Messages */}
        <div
          className="flex max-h-[500px] min-h-[200px] w-full flex-col gap-2 overflow-y-auto px-1 pt-1 pb-4 [scrollbar-width:none]"
        >
          <AnimatePresence initial={false}>
            {messages.map((m) => (
              <MessageBubble
                key={m.id}
                message={m}
                onReply={(msg) => setReplyTo({ id: msg.id, text: msg.text })}
              />
            ))}
            {isTyping && <TypingDots key="typing" />}
          </AnimatePresence>
          <div ref={bottomRef} />
        </div>

        {/* Composer */}
        <motion.div
          layout
          style={{ y: springY, rotate: springRotate }}
          animate={{
            boxShadow: isFocused
              ? "0 4px 24px 0 rgba(0,0,0,0.10)"
              : "0 0px 0px 0 rgba(0,0,0,0)",
          }}
          transition={{ duration: 0.2 }}
          className="relative z-10 overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900"
        >
          <AnimatePresence>
            {replyTo && (
              <motion.div
                key="reply-preview"
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ type: "spring", stiffness: 400, damping: 35 }}
                className="overflow-hidden"
              >
                <div className="flex items-center gap-2 px-3.5 pt-2.5 pb-0">
                  <div className="flex min-w-0 flex-1 items-center gap-2">
                    <ReplyIcon size={16} weight="Bold" className="shrink-0 text-zinc-400" />
                    <p className="truncate text-xs text-zinc-400">{replyTo.text}</p>
                  </div>
                  <button
                    type="button"
                    aria-label="Cancel reply"
                    onClick={() => setReplyTo(null)}
                    className="flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                  >
                    <Close size={12} weight="Bold" />
                  </button>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          <motion.div
            animate={{
              paddingLeft: expanded ? 12 : 56,
              paddingRight: expanded ? 12 : 48,
              paddingTop: 12,
              paddingBottom: expanded ? 52 : 10,
            }}
            transition={{ type: "spring", stiffness: 400, damping: 35 }}
            className="flex flex-col justify-center"
          >
            <textarea
              ref={textareaRef}
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  send();
                }
              }}
              placeholder="Ask anything..."
              rows={1}
              onFocus={() => setIsFocused(true)}
              onBlur={() => setIsFocused(false)}
              className="max-h-40 w-full resize-none overflow-y-auto bg-transparent text-base leading-relaxed text-zinc-800 outline-none [scrollbar-width:none] placeholder:text-zinc-400 dark:text-zinc-200"
            />
          </motion.div>

          {/* Toolbar */}
          <div className="absolute bottom-2 left-2 flex items-center gap-1.5">
            <motion.button
              type="button"
              aria-label="Attach files"
              onClick={() => setPinnedOpen((v) => !v)}
              animate={{ width: expanded ? "auto" : 32 }}
              transition={{ type: "spring", stiffness: 400, damping: 30 }}
              className="flex h-8 shrink-0 cursor-pointer items-center overflow-hidden rounded-[10px] bg-zinc-100 text-zinc-500 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700"
              whileTap={{ scale: 0.88 }}
            >
              <span className="flex w-8 shrink-0 items-center justify-center">
                <PlusIcon />
              </span>
              <AnimatePresence>
                {expanded && (
                  <motion.span
                    key="attach-label"
                    variants={{
                      hidden: { opacity: 0 },
                      visible: { opacity: 1, transition: { duration: 0.15 } },
                      exit: { opacity: 0, transition: { duration: 0.15, delay: 0.2 } },
                    }}
                    initial="hidden"
                    animate="visible"
                    exit="exit"
                    className="whitespace-nowrap pr-2 text-sm"
                  >
                    Attach files
                  </motion.span>
                )}
              </AnimatePresence>
            </motion.button>

            <AnimatePresence>
              {expanded && (
                <>
                  {[
                    { Icon: Gallery, label: "Image", enterDelay: 0.1, exitDelay: 0.08 },
                    { Icon: Branch, label: "Branch", enterDelay: 0.15, exitDelay: 0 },
                  ].map(({ Icon, label, enterDelay, exitDelay }) => (
                    <motion.button
                      key={label}
                      type="button"
                      aria-label={label}
                      custom={{ enterDelay, exitDelay }}
                      variants={{
                        hidden: { opacity: 0, x: -28, filter: "blur(12px)" },
                        visible: (c: { enterDelay: number }) => ({
                          opacity: 1,
                          x: 0,
                          filter: "blur(0px)",
                          transition: { type: "spring", stiffness: 420, damping: 42, delay: c.enterDelay },
                        }),
                        exit: (c: { exitDelay: number }) => ({
                          opacity: 0,
                          x: -28,
                          filter: "blur(12px)",
                          transition: { delay: c.exitDelay },
                        }),
                      }}
                      initial="hidden"
                      animate="visible"
                      exit="exit"
                      className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-[10px] bg-zinc-100 text-zinc-500 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700"
                      whileTap={{ scale: 0.88 }}
                    >
                      <Icon size={15} weight="Bold" />
                    </motion.button>
                  ))}
                </>
              )}
            </AnimatePresence>
          </div>

          <motion.button
            type="button"
            aria-label="Send message"
            onClick={send}
            disabled={!draft.trim() || isSending}
            className="absolute right-2 bottom-2 flex size-8 cursor-pointer items-center justify-center overflow-hidden rounded-[10px] bg-zinc-900 text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-white dark:text-zinc-900"
            whileTap={{ scale: 0.88 }}
          >
            <motion.div
              animate={sendFlash ? { y: "-150%", opacity: 0 } : { y: "0%", opacity: 1 }}
              transition={
                sendFlash
                  ? { duration: 0.2, ease: "easeIn" }
                  : { duration: 0.25, ease: [0.16, 1, 0.3, 1] }
              }
            >
              <motion.div
                animate={{ rotate: draft.trim() ? -90 : 0 }}
                transition={{ type: "spring", stiffness: 400, damping: 28, delay: 0.2 }}
              >
                <ArrowUp size={20} weight="Bold" />
              </motion.div>
            </motion.div>
          </motion.button>
        </motion.div>
      </div>
    </div>
  );
}