import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, type UIMessage } from "ai";
import { useEffect, useRef, useState } from "react";
import { Sparkles, Send, X, Loader2, Bot } from "lucide-react";
import ReactMarkdown from "react-markdown";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

const SEED_MESSAGE: UIMessage = {
  id: "welcome",
  role: "assistant",
  parts: [
    {
      type: "text",
      text: "Hi 👋 I'm **Gatavase AI**. Ask me anything about the platform, or say _\"draft a Ramadan promo SMS for my bakery\"_ and I'll write it for you.",
    },
  ],
};

function partsToText(m: UIMessage): string {
  return m.parts.map((p) => (p.type === "text" ? p.text : "")).join("");
}

export function GatavaseAiWidget({ initialPrompt, buttonLabel = "Gatavase AI", floating = true }: {
  initialPrompt?: string;
  buttonLabel?: string;
  floating?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState("");
  const transport = useRef(new DefaultChatTransport({ api: "/api/chat" }));
  const { messages, sendMessage, status } = useChat({
    transport: transport.current,
    messages: [SEED_MESSAGE],
  });

  const scrollRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
  }, [messages, status]);

  useEffect(() => {
    if (open && initialPrompt && messages.length === 1) {
      void sendMessage({ text: initialPrompt });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  const busy = status === "submitted" || status === "streaming";

  const send = () => {
    const v = input.trim();
    if (!v || busy) return;
    setInput("");
    void sendMessage({ text: v });
  };

  return (
    <>
      {floating && (
        <button
          onClick={() => setOpen(true)}
          aria-label="Open Gatavase AI assistant"
          className={cn(
            "fixed bottom-5 right-5 z-40 flex items-center gap-2 rounded-full bg-gradient-brand px-4 py-3 text-sm font-semibold text-primary-foreground shadow-glow transition hover:scale-105",
            open && "hidden",
          )}
        >
          <Sparkles className="h-4 w-4" /> {buttonLabel}
        </button>
      )}
      {!floating && (
        <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="gap-2">
          <Sparkles className="h-4 w-4" /> {buttonLabel}
        </Button>
      )}

      {open && (
        <div className="fixed inset-0 z-50 flex items-end justify-end bg-foreground/20 p-0 sm:p-5" onClick={() => setOpen(false)}>
          <div
            onClick={(e) => e.stopPropagation()}
            className="flex h-[90vh] w-full flex-col overflow-hidden rounded-t-2xl border border-border bg-background shadow-xl sm:h-[600px] sm:max-w-md sm:rounded-2xl"
          >
            <header className="flex items-center justify-between border-b border-border bg-gradient-brand p-4 text-primary-foreground">
              <div className="flex items-center gap-2">
                <div className="grid h-9 w-9 place-items-center rounded-full bg-white/15 backdrop-blur">
                  <Bot className="h-5 w-5" />
                </div>
                <div>
                  <div className="font-display text-sm font-bold">Gatavase AI</div>
                  <div className="text-[11px] opacity-80">Your SMS copywriter & guide</div>
                </div>
              </div>
              <button onClick={() => setOpen(false)} aria-label="Close assistant" className="rounded-full p-1 hover:bg-white/10">
                <X className="h-4 w-4" />
              </button>
            </header>

            <div ref={scrollRef} className="flex-1 space-y-3 overflow-y-auto bg-muted/30 p-4">
              {messages.map((m) => (
                <div key={m.id} className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")}>
                  <div
                    className={cn(
                      "prose prose-sm max-w-[85%] rounded-2xl px-4 py-2.5 shadow-sm dark:prose-invert",
                      m.role === "user"
                        ? "prose-invert bg-primary text-primary-foreground [&_*]:text-primary-foreground"
                        : "bg-background text-foreground",
                    )}
                  >
                    <ReactMarkdown>{partsToText(m)}</ReactMarkdown>
                  </div>
                </div>
              ))}
              {busy && (
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <Loader2 className="h-3 w-3 animate-spin" /> Thinking…
                </div>
              )}
            </div>

            <form
              onSubmit={(e) => { e.preventDefault(); send(); }}
              className="flex items-center gap-2 border-t border-border bg-background p-3"
            >
              <Input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Ask a question or request a draft…"
                disabled={busy}
                className="flex-1"
              />
              <Button type="submit" size="icon" disabled={busy || !input.trim()} className="bg-gradient-brand text-primary-foreground">
                <Send className="h-4 w-4" />
              </Button>
            </form>
          </div>
        </div>
      )}
    </>
  );
}