AI Chat Button

"use client";

import { AIChatButton } from "@/components/ui/aichat-button";
import { Bot, Sparkles, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";

const SYNTHETIC_REPLY =
  'Based on your current board, 3 cards are overdue in "In Progress". Want me to draft reminders for the assignees?';

export default function AIChatButtonDemo() {
  const [open, setOpen] = useState(false);
  const [streamed, setStreamed] = useState("");
  const [done, setDone] = useState(false);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
    if (!open) return;
    setStreamed("");
    setDone(false);
    let i = 0;
    timerRef.current = setInterval(() => {
      i += 1;
      setStreamed(SYNTHETIC_REPLY.slice(0, i));
      if (i >= SYNTHETIC_REPLY.length) {
        setDone(true);
        if (timerRef.current) clearInterval(timerRef.current);
      }
    }, 18);
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, [open]);

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-6">
      <div className="relative w-full max-w-xl overflow-hidden rounded-xl border border-border bg-card">
        <div className="flex items-center justify-between border-b border-border px-4 py-3">
          <span className="text-sm font-medium text-foreground">
            Project board
          </span>
          <AIChatButton
            onClick={() => setOpen((v) => !v)}
            aria-label="Toggle AI assistant"
          />
        </div>
        <div className="flex h-72 items-center justify-center text-sm text-muted-foreground">
          Your table or kanban content goes here.
        </div>

        {open ? (
          <div className="absolute inset-y-0 right-0 flex w-72 flex-col border-l border-border bg-background shadow-xl">
            <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
                <Bot className="h-4 w-4 text-primary" />
              </div>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-semibold text-foreground">
                  AI assistant
                </p>
                <p className="truncate text-[11px] text-muted-foreground">
                  Simulated local reply
                </p>
              </div>
              <button
                type="button"
                onClick={() => setOpen(false)}
                aria-label="Close"
                className="rounded-md p-1 text-muted-foreground hover:bg-muted"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="flex-1 space-y-2 overflow-y-auto p-3 text-sm">
              <div className="flex justify-end">
                <div className="max-w-[85%] rounded-xl rounded-br-sm bg-primary px-3 py-2 text-primary-foreground">
                  Summarize the board status
                </div>
              </div>
              <div className="flex gap-2">
                <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10">
                  <Sparkles className="h-3 w-3 text-primary" />
                </div>
                <div className="max-w-[85%] rounded-xl rounded-bl-sm border border-border bg-muted/60 px-3 py-2.5 text-foreground">
                  {streamed || " "}
                  {!done ? (
                    <span className="ml-0.5 inline-block h-3 w-1 animate-pulse bg-muted-foreground align-middle" />
                  ) : null}
                </div>
              </div>
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
}