import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, type UIMessage } from "ai";
import { useEffect, useRef, useState } from "react";
import { MessageCircle, X, Send, ThumbsUp, ThumbsDown, Loader2, PhoneCall } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { supabase } from "@/integrations/supabase/client";
import { cn } from "@/lib/utils";

const STORAGE_KEY = "flexflares.ai.conversationId";

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

export function ChatWidget() {
  const [open, setOpen] = useState(false);
  const [enabled, setEnabled] = useState(true);
  const [userId, setUserId] = useState<string | null>(null);
  const [conversationId, setConversationId] = useState<string | null>(null);
  const [initialMessages, setInitialMessages] = useState<UIMessage[]>([]);
  const [loadedHistory, setLoadedHistory] = useState(false);
  const [ratings, setRatings] = useState<Record<string, 1 | -1>>({});
  const [input, setInput] = useState("");
  const scrollRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // Feature toggle + auth
  useEffect(() => {
    supabase
      .from("business_settings")
      .select("ai_enabled")
      .eq("id", 1)
      .maybeSingle()
      .then(({ data }) => {
        const v = (data as { ai_enabled: boolean | null } | null)?.ai_enabled;
        if (v === false) setEnabled(false);
      });
    supabase.auth.getUser().then(({ data }) => setUserId(data.user?.id ?? null));
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) =>
      setUserId(s?.user?.id ?? null),
    );
    return () => sub.subscription.unsubscribe();
  }, []);

  // Load conversation history for logged-in users
  useEffect(() => {
    if (loadedHistory) return;
    (async () => {
      if (!userId) {
        setLoadedHistory(true);
        return;
      }
      const stored = typeof window !== "undefined" ? localStorage.getItem(STORAGE_KEY) : null;
      if (stored) {
        const { data: conv } = await supabase
          .from("ai_conversations")
          .select("id, user_id")
          .eq("id", stored)
          .maybeSingle();
        if (conv && (conv as { user_id: string }).user_id === userId) {
          setConversationId(stored);
          const { data: msgs } = await supabase
            .from("ai_messages")
            .select("id, role, content, rating")
            .eq("conversation_id", stored)
            .order("created_at");
          const list = ((msgs ?? []) as { id: string; role: string; content: string; rating: number | null }[])
            .filter((m) => m.role === "user" || m.role === "assistant")
            .map<UIMessage>((m) => ({
              id: m.id,
              role: m.role as "user" | "assistant",
              parts: [{ type: "text", text: m.content }],
            }));
          setInitialMessages(list);
          const r: Record<string, 1 | -1> = {};
          for (const m of (msgs ?? []) as { id: string; rating: number | null }[]) {
            if (m.rating === 1 || m.rating === -1) r[m.id] = m.rating;
          }
          setRatings(r);
        }
      }
      setLoadedHistory(true);
    })();
  }, [userId, loadedHistory]);

  const { messages, sendMessage, status, setMessages } = useChat({
    id: conversationId ?? "guest",
    messages: initialMessages,
    transport: new DefaultChatTransport({ api: "/api/chat" }),
    onError: (e) => console.error("chat error", e),
    onFinish: async ({ message }) => {
      if (!userId) return;
      let convId = conversationId;
      if (!convId) {
        const { data: created } = await supabase
          .from("ai_conversations")
          .insert({ user_id: userId, title: null })
          .select("id")
          .single();
        convId = (created as { id: string } | null)?.id ?? null;
        if (convId) {
          setConversationId(convId);
          if (typeof window !== "undefined") localStorage.setItem(STORAGE_KEY, convId);
        }
      }
      if (!convId) return;
      // Persist the last user message + this assistant message
      const userMsg = [...messages].reverse().find((m) => m.role === "user");
      const rows: { conversation_id: string; role: string; content: string }[] = [];
      if (userMsg) rows.push({ conversation_id: convId, role: "user", content: extractText(userMsg) });
      rows.push({ conversation_id: convId, role: "assistant", content: extractText(message) });
      await supabase.from("ai_messages").insert(rows);
    },
  });

  // Auto-scroll
  useEffect(() => {
    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
  }, [messages, status]);

  // Focus input when opened
  useEffect(() => {
    if (open) setTimeout(() => inputRef.current?.focus(), 50);
  }, [open, status]);

  const rateMessage = async (id: string, value: 1 | -1) => {
    setRatings((prev) => ({ ...prev, [id]: value }));
    if (userId) {
      await supabase.from("ai_messages").update({ rating: value }).eq("id", id);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const text = input.trim();
    if (!text || status === "streaming" || status === "submitted") return;
    setInput("");
    await sendMessage({ text });
  };

  const startNew = () => {
    setMessages([]);
    setConversationId(null);
    setRatings({});
    if (typeof window !== "undefined") localStorage.removeItem(STORAGE_KEY);
  };

  const escalate = () => {
    window.open(
      "https://wa.me/254717576870?text=" + encodeURIComponent("Hi, I need help from Flexflares support."),
      "_blank",
      "noopener,noreferrer",
    );
  };

  if (!enabled) return null;

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

  return (
    <>
      {!open && (
        <button
          onClick={() => setOpen(true)}
          aria-label="Open chat support"
          className="fixed bottom-5 right-5 z-50 grid h-14 w-14 place-items-center rounded-full bg-primary text-primary-foreground shadow-glow transition-transform hover:scale-105"
        >
          <MessageCircle className="h-6 w-6" />
          <span className="absolute -top-1 -right-1 flex h-3 w-3">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
            <span className="relative inline-flex h-3 w-3 rounded-full bg-emerald-500" />
          </span>
        </button>
      )}

      {open && (
        <div className="fixed inset-x-3 bottom-3 z-50 flex max-h-[85vh] flex-col overflow-hidden rounded-2xl border bg-background shadow-2xl sm:inset-auto sm:bottom-5 sm:right-5 sm:h-[600px] sm:w-[380px]">
          <header className="flex items-center justify-between gap-2 border-b bg-primary px-4 py-3 text-primary-foreground">
            <div className="flex items-center gap-2">
              <div className="grid h-8 w-8 place-items-center rounded-full bg-white/20">
                <MessageCircle className="h-4 w-4" />
              </div>
              <div>
                <div className="text-sm font-semibold leading-tight">Flexi Assistant</div>
                <div className="text-[10px] opacity-80">Online · replies instantly</div>
              </div>
            </div>
            <div className="flex items-center gap-1">
              <button
                onClick={startNew}
                className="rounded-md px-2 py-1 text-[11px] hover:bg-white/10"
                title="Start new chat"
              >
                New
              </button>
              <button
                onClick={() => setOpen(false)}
                aria-label="Close chat"
                className="grid h-8 w-8 place-items-center rounded-md hover:bg-white/10"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
          </header>

          <div ref={scrollRef} className="flex-1 space-y-3 overflow-y-auto bg-muted/30 px-3 py-4">
            {messages.length === 0 && (
              <div className="space-y-3">
                <div className="rounded-2xl rounded-tl-sm bg-background p-3 text-sm shadow-sm">
                  👋 Hi! I'm <b>Flexi</b>, your Flexflares assistant. Ask me anything about our services, prices, or how to request one. I can chat in English or Kiswahili.
                </div>
                <div className="flex flex-wrap gap-2">
                  {[
                    "How do I get a KRA PIN?",
                    "Passport requirements",
                    "Ninaweza lipaje huduma?",
                    "Business registration price",
                  ].map((s) => (
                    <button
                      key={s}
                      onClick={() => sendMessage({ text: s })}
                      className="rounded-full border bg-background px-3 py-1 text-xs hover:bg-accent"
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {messages.map((m) => {
              const text = extractText(m);
              const isUser = m.role === "user";
              return (
                <div key={m.id} className={cn("flex flex-col", isUser ? "items-end" : "items-start")}>
                  <div
                    className={cn(
                      "max-w-[85%] whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm shadow-sm",
                      isUser
                        ? "rounded-tr-sm bg-primary text-primary-foreground"
                        : "rounded-tl-sm bg-background",
                    )}
                  >
                    {text || (busy && !isUser ? "…" : "")}
                  </div>
                  {!isUser && text && (
                    <div className="mt-1 flex items-center gap-1 pl-1">
                      <button
                        onClick={() => rateMessage(m.id, 1)}
                        className={cn(
                          "grid h-6 w-6 place-items-center rounded-md text-muted-foreground hover:bg-accent",
                          ratings[m.id] === 1 && "text-emerald-600",
                        )}
                        aria-label="Good response"
                      >
                        <ThumbsUp className="h-3 w-3" />
                      </button>
                      <button
                        onClick={() => rateMessage(m.id, -1)}
                        className={cn(
                          "grid h-6 w-6 place-items-center rounded-md text-muted-foreground hover:bg-accent",
                          ratings[m.id] === -1 && "text-destructive",
                        )}
                        aria-label="Bad response"
                      >
                        <ThumbsDown className="h-3 w-3" />
                      </button>
                    </div>
                  )}
                </div>
              );
            })}

            {status === "submitted" && (
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <Loader2 className="h-3 w-3 animate-spin" /> Flexi is typing…
              </div>
            )}
          </div>

          <div className="border-t bg-background p-2">
            <button
              onClick={escalate}
              className="mb-2 flex w-full items-center justify-center gap-1 rounded-md border border-emerald-600/40 bg-emerald-50 px-2 py-1 text-[11px] font-medium text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300"
            >
              <PhoneCall className="h-3 w-3" /> Talk to a human on WhatsApp
            </button>
            <form onSubmit={handleSubmit} className="flex items-center gap-2">
              <Input
                ref={inputRef}
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Ask about a service…"
                disabled={busy}
                className="h-10"
              />
              <Button type="submit" size="icon" disabled={busy || !input.trim()} className="h-10 w-10 shrink-0">
                {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
              </Button>
            </form>
            {!userId && (
              <p className="mt-1 px-1 text-[10px] text-muted-foreground">
                Sign in to save your chat history.
              </p>
            )}
          </div>
        </div>
      )}
    </>
  );
}