"use client";

import { useEffect, useRef, useState } from "react";
import { MessageCircle, X, Send, Loader2, Bot } from "lucide-react";

interface Message {
  role: "user" | "assistant";
  content: string;
}

interface Lead {
  name: string;
  email: string;
  saved: boolean;
}

const SESSION_KEY = "kc_chat_session";
const MESSAGES_KEY = "kc_chat_messages";
const LEAD_KEY = "kc_chat_lead";

function getSessionId(): string {
  if (typeof window === "undefined") return "";
  let id = sessionStorage.getItem(SESSION_KEY);
  if (!id) {
    id = crypto.randomUUID();
    sessionStorage.setItem(SESSION_KEY, id);
  }
  return id;
}

export default function ChatWidget() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [lead, setLead] = useState<Lead>({ name: "", email: "", saved: false });
  const [showLeadForm, setShowLeadForm] = useState(false);
  const [leadName, setLeadName] = useState("");
  const [leadEmail, setLeadEmail] = useState("");
  const [leadError, setLeadError] = useState("");
  const [greeted, setGreeted] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // Restore state from sessionStorage
  useEffect(() => {
    const storedMessages = sessionStorage.getItem(MESSAGES_KEY);
    const storedLead = sessionStorage.getItem(LEAD_KEY);
    if (storedMessages) {
      try {
        setMessages(JSON.parse(storedMessages));
        setGreeted(true);
      } catch { /* ignore */ }
    }
    if (storedLead) {
      try {
        setLead(JSON.parse(storedLead));
      } catch { /* ignore */ }
    }
  }, []);

  // Persist messages
  useEffect(() => {
    if (messages.length > 0) {
      sessionStorage.setItem(MESSAGES_KEY, JSON.stringify(messages));
    }
  }, [messages]);

  // Persist lead
  useEffect(() => {
    sessionStorage.setItem(LEAD_KEY, JSON.stringify(lead));
  }, [lead]);

  // Scroll to bottom on new message
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, loading]);

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

  // Send initial greeting when chat opens for the first time
  async function sendGreeting() {
    if (greeted) return;
    setGreeted(true);
    setLoading(true);
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          messages: [
            { role: "user", content: "Hello" },
          ],
        }),
      });
      await streamResponse(res, true);
    } catch {
      addAssistantMessage("Hi there! How can I help you today? 😊");
    } finally {
      setLoading(false);
    }
  }

  async function streamResponse(res: Response, isGreeting = false) {
    if (!res.ok || !res.body) {
      const err = await res.json().catch(() => ({}));
      addAssistantMessage((err as { error?: string }).error ?? "Something went wrong. Please try again.");
      return;
    }
    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let fullText = "";

    setMessages((prev) => [...prev, { role: "assistant", content: "" }]);

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      fullText += decoder.decode(value, { stream: true });
      setMessages((prev) => {
        const updated = [...prev];
        updated[updated.length - 1] = { role: "assistant", content: fullText };
        return updated;
      });
    }

    // After 2nd user message, show lead form if not yet saved
    if (!isGreeting && !lead.saved) {
      const userMsgCount = messages.filter((m) => m.role === "user").length + 1;
      if (userMsgCount >= 2) {
        setShowLeadForm(true);
      }
    }
  }

  function addAssistantMessage(content: string) {
    setMessages((prev) => [...prev, { role: "assistant", content }]);
  }

  async function handleSend() {
    const text = input.trim();
    if (!text || loading) return;

    const newMessages: Message[] = [...messages, { role: "user", content: text }];
    setMessages(newMessages);
    setInput("");
    setLoading(true);

    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ messages: newMessages }),
      });
      await streamResponse(res);
    } catch {
      addAssistantMessage("Sorry, I couldn't connect right now. Please try again or reach us on WhatsApp.");
    } finally {
      setLoading(false);
    }
  }

  async function handleLeadSubmit() {
    setLeadError("");
    const name = leadName.trim();
    const email = leadEmail.trim().toLowerCase();
    if (!email || !email.includes("@")) {
      setLeadError("Please enter a valid email address.");
      return;
    }
    try {
      await fetch("/api/chat/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, sessionId: getSessionId() }),
      });
    } catch { /* silently fail — don't block chat */ }
    const savedLead = { name, email, saved: true };
    setLead(savedLead);
    setShowLeadForm(false);
  }

  function handleOpen() {
    setOpen(true);
    if (!greeted) sendGreeting();
  }

  return (
    <>
      {/* Floating chat button */}
      <button
        onClick={handleOpen}
        aria-label="Open chat"
        className="fixed bottom-24 right-6 z-50 flex items-center justify-center w-14 h-14 rounded-full shadow-lg bg-navy-700 hover:bg-navy-600 text-white transition-all hover:scale-110 active:scale-95"
      >
        {open ? <X size={22} /> : <MessageCircle size={22} />}
        {/* Unread dot — shown before first open */}
        {!greeted && (
          <span className="absolute top-1 right-1 w-3 h-3 bg-gold-400 rounded-full border-2 border-white" />
        )}
      </button>

      {/* Chat panel */}
      {open && (
        <div className="fixed bottom-[6.5rem] right-6 z-50 w-80 sm:w-96 h-[520px] flex flex-col rounded-2xl shadow-2xl overflow-hidden border border-neutral-200 bg-white">
          {/* Header */}
          <div className="flex items-center gap-3 px-4 py-3 bg-navy-800 text-white shrink-0">
            <div className="w-8 h-8 rounded-full bg-gold-400 flex items-center justify-center shrink-0">
              <Bot size={16} className="text-navy-900" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-semibold leading-none">KC Assistant</p>
              <p className="text-xs text-navy-300 mt-0.5">Typically replies instantly</p>
            </div>
            <button
              onClick={() => setOpen(false)}
              aria-label="Close chat"
              className="p-1.5 rounded-lg hover:bg-navy-700 transition-colors"
            >
              <X size={16} />
            </button>
          </div>

          {/* Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-neutral-50">
            {messages.length === 0 && (
              <div className="flex flex-col items-center justify-center h-full text-center text-neutral-400 gap-2">
                <Bot size={36} className="text-navy-300" />
                <p className="text-sm">Starting conversation…</p>
              </div>
            )}
            {messages.map((msg, i) => (
              <div
                key={i}
                className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
              >
                <div
                  className={`max-w-[80%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
                    msg.role === "user"
                      ? "bg-navy-700 text-white rounded-br-sm"
                      : "bg-white text-neutral-800 border border-neutral-200 rounded-bl-sm shadow-sm"
                  }`}
                >
                  {msg.content}
                </div>
              </div>
            ))}
            {loading && (
              <div className="flex justify-start">
                <div className="bg-white border border-neutral-200 rounded-2xl rounded-bl-sm px-3.5 py-2.5 shadow-sm">
                  <Loader2 size={15} className="animate-spin text-navy-400" />
                </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

          {/* Lead capture form — slides in after 2 messages */}
          {showLeadForm && (
            <div className="shrink-0 px-4 py-3 border-t border-neutral-200 bg-gold-50">
              <p className="text-xs font-medium text-neutral-700 mb-2">
                Share your details so we can follow up if needed:
              </p>
              <input
                type="text"
                placeholder="Your name"
                value={leadName}
                onChange={(e) => setLeadName(e.target.value)}
                className="w-full text-sm border border-neutral-300 rounded-lg px-3 py-1.5 mb-1.5 outline-none focus:border-navy-400"
              />
              <input
                type="email"
                placeholder="Email address *"
                value={leadEmail}
                onChange={(e) => setLeadEmail(e.target.value)}
                className="w-full text-sm border border-neutral-300 rounded-lg px-3 py-1.5 outline-none focus:border-navy-400"
              />
              {leadError && <p className="text-xs text-red-500 mt-1">{leadError}</p>}
              <div className="flex gap-2 mt-2">
                <button
                  onClick={handleLeadSubmit}
                  className="flex-1 text-xs font-medium bg-navy-700 text-white rounded-lg py-1.5 hover:bg-navy-600 transition-colors"
                >
                  Submit
                </button>
                <button
                  onClick={() => setShowLeadForm(false)}
                  className="text-xs text-neutral-400 hover:text-neutral-600 px-2"
                >
                  Skip
                </button>
              </div>
            </div>
          )}

          {/* Lead saved confirmation */}
          {lead.saved && !showLeadForm && messages.length > 0 && (
            <div className="shrink-0 px-4 py-1.5 bg-green-50 border-t border-green-100">
              <p className="text-xs text-green-700">
                ✓ Thanks {lead.name ? lead.name.split(" ")[0] : ""}! We have your details.
              </p>
            </div>
          )}

          {/* Input */}
          <div className="shrink-0 flex items-center gap-2 px-3 py-3 border-t border-neutral-200 bg-white">
            <input
              ref={inputRef}
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
              placeholder="Type a message…"
              disabled={loading}
              className="flex-1 text-sm border border-neutral-300 rounded-xl px-3 py-2 outline-none focus:border-navy-400 disabled:opacity-50"
            />
            <button
              onClick={handleSend}
              disabled={!input.trim() || loading}
              aria-label="Send message"
              className="w-9 h-9 flex items-center justify-center rounded-xl bg-navy-700 text-white hover:bg-navy-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shrink-0"
            >
              <Send size={15} />
            </button>
          </div>
        </div>
      )}
    </>
  );
}