"use client";

import dynamic from "next/dynamic";
import { useState, useEffect, useRef, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/context/AuthContext";

const API_BASE = "";
const POLL_INTERVAL = 2500;

function ChatPage() {
  const { user, token, loading: authLoading } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();
  const conversationIdParam = searchParams.get("id");

  const [conversation, setConversation] = useState(null);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [sending, setSending] = useState(false);
  const [loadingConv, setLoadingConv] = useState(true);
  const [error, setError] = useState(null);

  const messagesEndRef = useRef(null);
  const inputRef = useRef(null);
  const pollRef = useRef(null);
  const lastMessageIdRef = useRef(null);

  useEffect(() => {
    if (!authLoading && !user) {
      router.push("/login?next=" + encodeURIComponent("/chat" + (conversationIdParam ? `?id=${conversationIdParam}` : "")));
    }
  }, [authLoading, user, router, conversationIdParam]);

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

  const fetchMessages = useCallback(async (convId) => {
    if (!token || !convId) return;
    try {
      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
        headers: { Authorization: `Bearer ${token}` },
      });

      if (!res.ok) return;

      const data = await res.json();

      if (Array.isArray(data)) {
        setMessages(data);

        if (data.length > 0) {
          lastMessageIdRef.current = data[data.length - 1].id;
        }
      }
    } 
    
    catch {
      //Silent fail
    }
  }, [token]);

  const fetchConversation = useCallback(async (convId) => {
    if (!token || !convId) return null;
    try {
      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}`, {
        headers: { Authorization: `Bearer ${token}` },
      });

      if (!res.ok) return null;
      const data = await res.json();
      setConversation(data);

      return data;
    } 
    

    catch {

      return null;
    }
  }, [token]);

  const startPolling = useCallback((convId) => {
    if (pollRef.current) clearInterval(pollRef.current);
    pollRef.current = setInterval(async () => {
      if (!token || !convId) return;
      try {
        const [msgsRes, convRes] = await Promise.all([
          fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
            headers: { Authorization: `Bearer ${token}` },
          }),
          fetch(`${API_BASE}/api/v1/chat/conversations/${convId}`, {
            headers: { Authorization: `Bearer ${token}` },
          }),
        ]);
        if (msgsRes.ok) {
          const data = await msgsRes.json();
          if (Array.isArray(data)) {
            const lastId = data.length > 0 ? data[data.length - 1].id : null;
            if (lastId !== lastMessageIdRef.current) {
              lastMessageIdRef.current = lastId;
              setMessages(data);
            }
          }
        }
        if (convRes.ok) {
          const convData = await convRes.json();
          setConversation(convData);
        }
      } 
      
      catch {
        //Silent
      }
    }, POLL_INTERVAL);
  }, [token]);

  useEffect(() => {
    if (!token || authLoading) return;

    async function init() {
      setLoadingConv(true);
      setError(null);

      let convId = conversationIdParam ? Number(conversationIdParam) : null;

      if (!convId) {
        try {
          const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
            headers: { Authorization: `Bearer ${token}` },
          });
          if (res.ok) {
            const list = await res.json();
            const open = Array.isArray(list)
              ? list.find((c) => c.status === "OPEN")
              : null;
            if (open) convId = open.id;
          }
        } catch {
          //
        }
      }

      if (!convId) {
        setLoadingConv(false);
        setConversation(null);
        return;
      }

      await fetchConversation(convId);
      await fetchMessages(convId);
      setLoadingConv(false);
      startPolling(convId);
    }

    init();

    return () => {
      if (pollRef.current) clearInterval(pollRef.current);
    };
  }, [token, authLoading, conversationIdParam, fetchConversation, fetchMessages, startPolling]);

  async function handleSend(e) {
    e?.preventDefault();
    const text = input.trim();
    if (!text || sending || !conversation) return;

    setInput("");
    setSending(true);
    setError(null);

    try {
      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${conversation.id}/messages`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ content: text }),
      });

      if (res.status === 401) {
        router.push("/login?next=" + encodeURIComponent("/chat"));
        return;
      }

      if (!res.ok) {
        const data = await res.json().catch(() => null);
        setError(data?.message || "Failed to send message.");
        setInput(text);
        return;
      }

      const msg = await res.json();
      setMessages((prev) => {
        if (prev.some((m) => m.id === msg.id)) return prev;
        return [...prev, msg];
      });
      lastMessageIdRef.current = msg.id;
    } catch {
      setError("Network error. Please try again.");
      setInput(text);
    } finally {
      setSending(false);
      inputRef.current?.focus();
    }
  }

  function handleKeyDown(e) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  }

  async function handleNewConversation() {
    setError(null);
    setLoadingConv(true);
    try {
      const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ message: "Hi, I'd like to speak with a support agent." }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => null);
        setError(data?.message || "Failed to start a conversation.");
        setLoadingConv(false);
        return;
      }
      const conv = await res.json();

      // Mark as human-requested
      await fetch(`${API_BASE}/api/v1/chat/conversations/${conv.id}/request-human`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
      });

      setConversation(conv);
      await fetchMessages(conv.id);
      setLoadingConv(false);
      startPolling(conv.id);
      router.replace(`/chat?id=${conv.id}`, { scroll: false });
    } catch {
      setError("Network error. Please try again.");
      setLoadingConv(false);
    }
  }

  if (authLoading || loadingConv) {
    return (
      <main style={s.page}>
        <p style={s.loading}>Loading...</p>
      </main>
    );
  }

  if (!user) return null;

  const isHuman = conversation?.mode === "HUMAN";
  const hasStaff = !!conversation?.staffId;
  const isClosed = conversation?.status === "CLOSED";

  const staffStatusLabel = isClosed
    ? "Conversation closed"
    : hasStaff
    ? "Support agent connected"
    : isHuman
    ? "Waiting for a support agent..."
    : "Support";

  const staffStatusColor = isClosed ? "#999" : hasStaff ? "#4CAF50" : "#ff8c00";

  return (
    <main style={s.page}>
      <section style={s.hero}>
        <h1 style={s.heroTitle}>Live Support Chat</h1>
        <p style={s.heroSubtitle}>Chat with our support team in real time</p>
        <div style={s.titleDecoration} />
      </section>

      <section style={s.chatSection}>
        {!conversation ? (
          <div style={s.noConvCard}>
            <div style={s.noConvIcon}>💬</div>
            <h2 style={s.noConvTitle}>No active conversation</h2>
            <p style={s.noConvText}>Start a new conversation to chat with our support team.</p>
            {error && <div style={s.errorInline}>{error}</div>}
            <button style={s.startBtn} onClick={handleNewConversation}>
              Start a Conversation
            </button>
            <button style={s.backBtn} onClick={() => router.push("/ai-chat")}>
              Back to AI Assistant
            </button>
          </div>
        ) : (
          <div style={s.chatCard}>
            <div style={s.chatHeader}>
              <div style={s.chatHeaderLeft}>
                <div style={s.agentAvatar}>👤</div>
                <div>
                  <div style={s.chatHeaderTitle}>
                    {hasStaff ? "Support Agent" : "Leon's Pet Store Support"}
                  </div>
                  <div style={{ ...s.chatHeaderStatus, color: staffStatusColor }}>
                    <span style={{ ...s.statusDot, background: staffStatusColor }} />
                    {staffStatusLabel}
                  </div>
                </div>
              </div>
              <button
                style={s.aiBtn}
                onClick={() => router.push("/ai-chat")}
                title="Back to AI Assistant"
              >
                AI Assistant
              </button>
            </div>

            {!hasStaff && !isClosed && (
              <div style={s.waitingBanner}>
                <span style={s.waitingSpinner} />
                A support agent will be with you shortly. You can send messages while you wait.
              </div>
            )}

            <div style={s.messagesArea}>
              {messages.length === 0 && (
                <div style={s.emptyState}>
                  <p style={s.emptyText}>
                    Your conversation has started. A support agent will join soon.
                  </p>
                </div>
              )}

              {messages.map((msg) => {
                const isOwn = msg.senderId === user.id;
                return (
                  <div
                    key={msg.id}
                    style={{
                      ...s.messageRow,
                      ...(isOwn ? s.messageRowUser : s.messageRowAgent),
                    }}
                  >
                    {!isOwn && (
                      <div style={s.agentAvatarSmall}>👤</div>
                    )}
                    <div
                      style={{
                        ...s.messageBubble,
                        ...(isOwn ? s.bubbleUser : s.bubbleAgent),
                      }}
                    >
                      {msg.content && msg.content.split("\n").map((line, i, arr) => (
                        <span key={i}>
                          {line}
                          {i < arr.length - 1 && <br />}
                        </span>
                      ))}
                      {msg.attachmentUrl && (
                        <div style={s.attachment}>
                          <a
                            href={msg.attachmentUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            style={s.attachmentLink}
                          >
                            📎 {msg.attachmentName || "Attachment"}
                          </a>
                        </div>
                      )}
                      <div style={{ ...s.timestamp, ...(isOwn ? s.timestampUser : {}) }}>
                        {msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}
                      </div>
                    </div>
                    {isOwn && (
                      <div style={s.userAvatarSmall}>
                        {user.fullName ? user.fullName.charAt(0).toUpperCase() : "U"}
                      </div>
                    )}
                  </div>
                );
              })}
              <div ref={messagesEndRef} />
            </div>

            {error && (
              <div style={s.errorBar}>
                {error}
                <button style={s.errorClose} onClick={() => setError(null)}>✕</button>
              </div>
            )}

            {isClosed ? (
              <div style={s.closedBanner}>
                This conversation has been closed.
                <button style={s.newConvBtn} onClick={handleNewConversation}>
                  Start New Conversation
                </button>
              </div>
            ) : (
              <form style={s.inputArea} onSubmit={handleSend}>
                <textarea
                  ref={inputRef}
                  style={s.textarea}
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  onKeyDown={handleKeyDown}
                  placeholder="Type a message..."
                  rows={1}
                  disabled={sending}
                  maxLength={2000}
                />
                <button
                  type="submit"
                  style={{
                    ...s.sendBtn,
                    ...((!input.trim() || sending) ? s.sendBtnDisabled : {}),
                  }}
                  disabled={!input.trim() || sending}
                >
                  {sending ? "..." : "Send"}
                </button>
              </form>
            )}
          </div>
        )}
      </section>
    </main>
  );
}

const s = {
  page: {
    minHeight: "100vh",
    background: "#fafaf8",
    fontFamily: "inherit",
  },
  loading: {
    textAlign: "center",
    padding: "4rem",
    color: "#888",
    fontSize: "1rem",
  },
  hero: {
    background: "linear-gradient(135deg, #333 0%, #555 100%)",
    padding: "2.5rem 1.5rem 2rem",
    textAlign: "center",
    color: "white",
  },
  heroTitle: {
    fontSize: "clamp(1.6rem, 4vw, 2.4rem)",
    fontWeight: 800,
    margin: 0,
    letterSpacing: "-0.5px",
  },
  heroSubtitle: {
    fontSize: "clamp(0.9rem, 2vw, 1.1rem)",
    marginTop: "0.5rem",
    opacity: 0.85,
  },
  titleDecoration: {
    width: 60,
    height: 4,
    background: "rgba(255,255,255,0.4)",
    borderRadius: 2,
    margin: "1rem auto 0",
  },
  chatSection: {
    maxWidth: 800,
    margin: "0 auto",
    padding: "1.5rem 1rem 2rem",
  },
  noConvCard: {
    background: "white",
    borderRadius: 16,
    boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
    padding: "3rem 2rem",
    textAlign: "center",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "1rem",
  },
  noConvIcon: { fontSize: "3rem" },
  noConvTitle: { fontSize: "1.4rem", fontWeight: 700, color: "#1a1a1a", margin: 0 },
  noConvText: { color: "#666", fontSize: "0.95rem", maxWidth: 360 },
  errorInline: {
    background: "#fff0f0",
    color: "#c0392b",
    border: "1px solid #ffd0d0",
    borderRadius: 8,
    padding: "0.6rem 1rem",
    fontSize: "0.875rem",
    width: "100%",
    maxWidth: 360,
  },
  startBtn: {
    background: "#333",
    color: "white",
    border: "none",
    borderRadius: 10,
    padding: "0.7rem 2rem",
    fontSize: "0.95rem",
    fontWeight: 600,
    cursor: "pointer",
  },
  backBtn: {
    background: "none",
    border: "1.5px solid #ff8c00",
    color: "#ff8c00",
    borderRadius: 10,
    padding: "0.6rem 1.5rem",
    fontSize: "0.9rem",
    fontWeight: 600,
    cursor: "pointer",
  },
  chatCard: {
    background: "white",
    borderRadius: 16,
    boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    height: "calc(100vh - 220px)",
    minHeight: 450,
  },
  chatHeader: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "1rem 1.25rem",
    borderBottom: "1px solid #f0f0f0",
    background: "#fff",
    flexShrink: 0,
  },
  chatHeaderLeft: {
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
  },
  agentAvatar: {
    width: 44,
    height: 44,
    borderRadius: "50%",
    background: "linear-gradient(135deg, #444, #666)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "1.2rem",
    flexShrink: 0,
  },
  chatHeaderTitle: {
    fontWeight: 700,
    fontSize: "1rem",
    color: "#1a1a1a",
  },
  chatHeaderStatus: {
    display: "flex",
    alignItems: "center",
    gap: "0.35rem",
    fontSize: "0.8rem",
    marginTop: 2,
  },
  statusDot: {
    display: "inline-block",
    width: 8,
    height: 8,
    borderRadius: "50%",
  },
  aiBtn: {
    background: "white",
    border: "2px solid #ff8c00",
    color: "#ff8c00",
    borderRadius: 8,
    padding: "0.45rem 0.9rem",
    fontSize: "0.82rem",
    fontWeight: 600,
    cursor: "pointer",
    whiteSpace: "nowrap",
  },
  waitingBanner: {
    background: "#fff8f0",
    borderBottom: "1px solid #ffe0b2",
    color: "#e65100",
    padding: "0.6rem 1.25rem",
    fontSize: "0.83rem",
    display: "flex",
    alignItems: "center",
    gap: "0.6rem",
    flexShrink: 0,
  },
  waitingSpinner: {
    display: "inline-block",
    width: 12,
    height: 12,
    border: "2px solid #ff8c00",
    borderTopColor: "transparent",
    borderRadius: "50%",
    animation: "spin 0.8s linear infinite",
    flexShrink: 0,
  },
  messagesArea: {
    flex: 1,
    overflowY: "auto",
    padding: "1.25rem",
    display: "flex",
    flexDirection: "column",
    gap: "0.75rem",
  },
  emptyState: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    margin: "auto",
  },
  emptyText: {
    color: "#888",
    fontSize: "0.9rem",
    textAlign: "center",
  },
  messageRow: {
    display: "flex",
    alignItems: "flex-end",
    gap: "0.5rem",
  },
  messageRowUser: { flexDirection: "row-reverse" },
  messageRowAgent: { flexDirection: "row" },
  agentAvatarSmall: {
    width: 30,
    height: 30,
    borderRadius: "50%",
    background: "linear-gradient(135deg, #444, #666)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "0.85rem",
    flexShrink: 0,
  },
  userAvatarSmall: {
    width: 30,
    height: 30,
    borderRadius: "50%",
    background: "#ff8c00",
    color: "white",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "0.8rem",
    fontWeight: 700,
    flexShrink: 0,
  },
  messageBubble: {
    maxWidth: "72%",
    padding: "0.65rem 0.9rem",
    borderRadius: 14,
    fontSize: "0.92rem",
    lineHeight: 1.55,
    wordBreak: "break-word",
  },
  bubbleUser: {
    background: "#ff8c00",
    color: "white",
    borderBottomRightRadius: 4,
  },
  bubbleAgent: {
    background: "#f4f4f4",
    color: "#1a1a1a",
    borderBottomLeftRadius: 4,
  },
  timestamp: {
    fontSize: "0.7rem",
    color: "#aaa",
    marginTop: "0.3rem",
    textAlign: "left",
  },
  timestampUser: { textAlign: "right", color: "rgba(255,255,255,0.7)" },
  attachment: { marginTop: "0.4rem" },
  attachmentLink: {
    color: "inherit",
    fontSize: "0.85rem",
    opacity: 0.85,
  },
  errorBar: {
    background: "#fff0f0",
    borderTop: "1px solid #ffd0d0",
    color: "#c0392b",
    padding: "0.65rem 1.25rem",
    fontSize: "0.875rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    flexShrink: 0,
  },
  errorClose: {
    background: "none",
    border: "none",
    color: "#c0392b",
    cursor: "pointer",
    fontSize: "0.9rem",
    padding: "0 0.25rem",
  },
  closedBanner: {
    background: "#f5f5f5",
    borderTop: "1px solid #e0e0e0",
    color: "#666",
    padding: "0.85rem 1.25rem",
    fontSize: "0.875rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    flexShrink: 0,
  },
  newConvBtn: {
    background: "#333",
    color: "white",
    border: "none",
    borderRadius: 8,
    padding: "0.4rem 1rem",
    fontSize: "0.82rem",
    fontWeight: 600,
    cursor: "pointer",
  },
  inputArea: {
    display: "flex",
    gap: "0.6rem",
    padding: "0.85rem 1.25rem",
    borderTop: "1px solid #f0f0f0",
    background: "#fff",
    flexShrink: 0,
    alignItems: "flex-end",
  },
  textarea: {
    flex: 1,
    border: "1.5px solid #e0e0e0",
    borderRadius: 10,
    padding: "0.6rem 0.85rem",
    fontSize: "0.92rem",
    resize: "none",
    outline: "none",
    fontFamily: "inherit",
    lineHeight: 1.5,
    maxHeight: 120,
    overflowY: "auto",
  },
  sendBtn: {
    background: "#333",
    color: "white",
    border: "none",
    borderRadius: 10,
    padding: "0.6rem 1.2rem",
    fontSize: "0.92rem",
    fontWeight: 600,
    cursor: "pointer",
    flexShrink: 0,
  },
  sendBtnDisabled: {
    background: "#aaa",
    cursor: "not-allowed",
  },
};

export default dynamic(() => Promise.resolve(ChatPage), { ssr: false });
