import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { deleteMessage, forwardMessageBulk, listMessageReactions, pinMessage, toggleMessageReaction } from "../api/chats";
import type { Message, MessageReaction } from "../chat/types";
import { useAuthStore } from "../store/authStore";
import { useChatStore } from "../store/chatStore";
import { formatTime } from "../utils/format";
import { formatMessageHtml } from "../utils/formatMessage";

type ContextMenuState = {
  x: number;
  y: number;
  messageId: number;
} | null;

type PendingDeleteState = {
  chatId: number;
  messages: Message[];
  expiresAt: number;
  timerId: number;
} | null;

export function MessageList() {
  const me = useAuthStore((s) => s.me);
  const activeChatId = useChatStore((s) => s.activeChatId);
  const messagesByChat = useChatStore((s) => s.messagesByChat);
  const typingByChat = useChatStore((s) => s.typingByChat);
  const hasMoreByChat = useChatStore((s) => s.hasMoreByChat);
  const loadingMoreByChat = useChatStore((s) => s.loadingMoreByChat);
  const loadMoreMessages = useChatStore((s) => s.loadMoreMessages);
  const unreadBoundaryByChat = useChatStore((s) => s.unreadBoundaryByChat);
  const focusedMessageIdByChat = useChatStore((s) => s.focusedMessageIdByChat);
  const setFocusedMessage = useChatStore((s) => s.setFocusedMessage);
  const chats = useChatStore((s) => s.chats);
  const setReplyToMessage = useChatStore((s) => s.setReplyToMessage);
  const updateChatPinnedMessage = useChatStore((s) => s.updateChatPinnedMessage);
  const removeMessage = useChatStore((s) => s.removeMessage);
  const restoreMessages = useChatStore((s) => s.restoreMessages);
  const [ctx, setCtx] = useState<ContextMenuState>(null);
  const [forwardMessageId, setForwardMessageId] = useState<number | null>(null);
  const [forwardQuery, setForwardQuery] = useState("");
  const [forwardError, setForwardError] = useState<string | null>(null);
  const [isForwarding, setIsForwarding] = useState(false);
  const [forwardSelectedChatIds, setForwardSelectedChatIds] = useState<Set<number>>(new Set());
  const [deleteMessageId, setDeleteMessageId] = useState<number | null>(null);
  const [deleteError, setDeleteError] = useState<string | null>(null);
  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
  const [pendingDelete, setPendingDelete] = useState<PendingDeleteState>(null);
  const [undoTick, setUndoTick] = useState(0);
  const [reactionsByMessage, setReactionsByMessage] = useState<Record<number, MessageReaction[]>>({});

  const messages = useMemo(() => {
    if (!activeChatId) {
      return [];
    }
    return messagesByChat[activeChatId] ?? [];
  }, [activeChatId, messagesByChat]);

  const messagesMap = useMemo(() => new Map(messages.map((m) => [m.id, m])), [messages]);
  const activeChat = chats.find((chat) => chat.id === activeChatId);
  const forwardTargets = useMemo(() => {
    const q = forwardQuery.trim().toLowerCase();
    if (!q) return chats;
    return chats.filter((chat) => {
      const label = chatLabel(chat).toLowerCase();
      const handle = (chat.handle || "").toLowerCase();
      return label.includes(q) || handle.includes(q);
    });
  }, [chats, forwardQuery]);
  const unreadBoundaryCount = activeChatId ? (unreadBoundaryByChat[activeChatId] ?? 0) : 0;
  const unreadBoundaryIndex = unreadBoundaryCount > 0 ? Math.max(0, messages.length - unreadBoundaryCount) : -1;
  const focusedMessageId = activeChatId ? (focusedMessageIdByChat[activeChatId] ?? null) : null;
  const hasMore = Boolean(activeChatId && hasMoreByChat[activeChatId]);
  const isLoadingMore = Boolean(activeChatId && loadingMoreByChat[activeChatId]);
  const selectedMessages = useMemo(
    () => messages.filter((m) => selectedIds.has(m.id)),
    [messages, selectedIds]
  );
  const canDeleteAllForSelection = useMemo(
    () => selectedMessages.length > 0 && selectedMessages.every((m) => canDeleteForEveryone(m, activeChat, me?.id)),
    [selectedMessages, activeChat, me?.id]
  );

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key !== "Escape") {
        return;
      }
      setCtx(null);
      setForwardMessageId(null);
      setForwardSelectedChatIds(new Set());
      setDeleteMessageId(null);
      setSelectedIds(new Set());
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  useEffect(() => {
    setSelectedIds(new Set());
    setCtx(null);
    setDeleteMessageId(null);
    setForwardMessageId(null);
    setForwardSelectedChatIds(new Set());
    setReactionsByMessage({});
  }, [activeChatId]);

  useEffect(() => {
    if (!pendingDelete) {
      return;
    }
    const interval = window.setInterval(() => setUndoTick((v) => v + 1), 250);
    return () => window.clearInterval(interval);
  }, [pendingDelete]);

  useEffect(() => {
    if (!activeChatId || !focusedMessageId) {
      return;
    }
    const element = document.getElementById(`message-${focusedMessageId}`);
    if (!element) {
      return;
    }
    element.scrollIntoView({ behavior: "smooth", block: "center" });
    const timer = window.setTimeout(() => setFocusedMessage(activeChatId, null), 2500);
    return () => window.clearTimeout(timer);
  }, [activeChatId, focusedMessageId, messages.length, setFocusedMessage]);

  if (!activeChatId) {
    return <div className="flex h-full items-center justify-center text-slate-300/80">Select a chat</div>;
  }
  const chatId = activeChatId;

  async function handleForwardSubmit() {
    if (!forwardMessageId) return;
    const targetChatIds = [...forwardSelectedChatIds];
    if (!targetChatIds.length) {
      setForwardError("Select at least one chat");
      return;
    }
    setIsForwarding(true);
    setForwardError(null);
    try {
      await forwardMessageBulk(forwardMessageId, targetChatIds);
      setForwardMessageId(null);
      setForwardSelectedChatIds(new Set());
      setForwardQuery("");
    } catch {
      setForwardError("Failed to forward message");
    } finally {
      setIsForwarding(false);
    }
    setCtx(null);
  }

  async function handlePin(messageId: number) {
    const nextPinned = activeChat?.pinned_message_id === messageId ? null : messageId;
    const chat = await pinMessage(chatId, nextPinned);
    updateChatPinnedMessage(chatId, chat.pinned_message_id ?? null);
    setCtx(null);
  }

  async function handleDelete(forAll: boolean) {
    if (!deleteMessageId) {
      return;
    }
    try {
      await deleteMessage(deleteMessageId, forAll);
      removeMessage(chatId, deleteMessageId);
      setDeleteMessageId(null);
      setDeleteError(null);
    } catch {
      setDeleteError("Failed to delete message");
    }
  }

  async function ensureReactionsLoaded(messageId: number) {
    if (reactionsByMessage[messageId]) {
      return;
    }
    try {
      const rows = await listMessageReactions(messageId);
      setReactionsByMessage((state) => ({ ...state, [messageId]: rows }));
    } catch {
      return;
    }
  }

  async function handleToggleReaction(messageId: number, emoji: string) {
    try {
      const rows = await toggleMessageReaction(messageId, emoji);
      setReactionsByMessage((state) => ({ ...state, [messageId]: rows }));
    } catch {
      return;
    }
  }

  function toggleSelected(messageId: number) {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(messageId)) {
        next.delete(messageId);
      } else {
        next.add(messageId);
      }
      return next;
    });
  }

  async function commitPendingDelete(state: PendingDeleteState) {
    if (!state) {
      return;
    }
    await Promise.allSettled(state.messages.map((message) => deleteMessage(message.id, false)));
    setPendingDelete((current) => {
      if (!current || current.timerId !== state.timerId) {
        return current;
      }
      return null;
    });
  }

  async function deleteSelectedForMe() {
    if (!selectedMessages.length) {
      return;
    }
    if (pendingDelete) {
      window.clearTimeout(pendingDelete.timerId);
      await commitPendingDelete(pendingDelete);
    }
    for (const message of selectedMessages) {
      removeMessage(chatId, message.id);
    }
    const timeoutMs = 6000;
    const timerId = window.setTimeout(() => {
      void commitPendingDelete({
        chatId,
        messages: selectedMessages,
        expiresAt: Date.now() + timeoutMs,
        timerId
      });
    }, timeoutMs);
    setPendingDelete({
      chatId,
      messages: selectedMessages,
      expiresAt: Date.now() + timeoutMs,
      timerId
    });
    setSelectedIds(new Set());
  }

  async function deleteSelectedForEveryone() {
    if (!selectedMessages.length) {
      return;
    }
    const results = await Promise.allSettled(
      selectedMessages.map(async (message) => {
        await deleteMessage(message.id, true);
        return message.id;
      })
    );
    for (const result of results) {
      if (result.status === "fulfilled") {
        removeMessage(chatId, result.value);
      }
    }
    if (results.some((r) => r.status === "rejected")) {
      setDeleteError("Some messages could not be deleted for everyone");
    } else {
      setDeleteError(null);
    }
    setSelectedIds(new Set());
  }

  function undoDeleteForMe() {
    if (!pendingDelete || pendingDelete.chatId !== chatId) {
      setPendingDelete(null);
      return;
    }
    window.clearTimeout(pendingDelete.timerId);
    restoreMessages(chatId, pendingDelete.messages);
    setPendingDelete(null);
  }

  return (
    <div className="flex h-full flex-col" onClick={() => setCtx(null)}>
      {activeChat?.pinned_message_id ? (
        <div className="border-b border-slate-700/50 bg-slate-900/60 px-4 py-2 text-xs text-sky-300">
          📌 {messagesMap.get(activeChat.pinned_message_id)?.text || "Pinned message"}
        </div>
      ) : null}
      {selectedIds.size > 0 ? (
        <div className="flex items-center justify-between border-b border-slate-700/50 bg-slate-900/80 px-3 py-2 text-xs">
          <span className="font-semibold text-slate-200">{selectedIds.size} selected</span>
          <div className="flex items-center gap-2">
            <button className="rounded bg-red-500 px-2 py-1 font-semibold text-white" onClick={() => void deleteSelectedForMe()}>
              Delete for me
            </button>
            {canDeleteAllForSelection ? (
              <button className="rounded bg-red-600 px-2 py-1 font-semibold text-white" onClick={() => void deleteSelectedForEveryone()}>
                Delete for everyone
              </button>
            ) : null}
            <button className="rounded bg-slate-700 px-2 py-1 text-slate-200" onClick={() => setSelectedIds(new Set())}>
              Cancel
            </button>
          </div>
        </div>
      ) : null}
      <div className="tg-scrollbar flex-1 overflow-auto px-3 py-4 md:px-6">
        {hasMore ? (
          <div className="mb-3 flex justify-center">
            <button
              className="rounded-full border border-slate-700/80 bg-slate-900/70 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 disabled:opacity-60"
              disabled={isLoadingMore}
              onClick={() => void loadMoreMessages(chatId)}
            >
              {isLoadingMore ? "Loading..." : "Load older messages"}
            </button>
          </div>
        ) : null}
        {messages.map((message, messageIndex) => {
          const own = message.sender_id === me?.id;
          const replySource = message.reply_to_message_id ? messagesMap.get(message.reply_to_message_id) : null;
          const isSelected = selectedIds.has(message.id);
          return (
            <div key={`${message.id}-${message.client_message_id ?? ""}`}>
              {unreadBoundaryIndex === messageIndex ? (
                <div className="mb-2 mt-1 flex items-center gap-2 px-1">
                  <span className="h-px flex-1 bg-slate-700/60" />
                  <span className="rounded-full border border-slate-700/70 bg-slate-900/80 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-300">
                    New messages
                  </span>
                  <span className="h-px flex-1 bg-slate-700/60" />
                </div>
              ) : null}
              <div className={`mb-2 flex ${own ? "justify-end" : "justify-start"}`}>
              <div
                id={`message-${message.id}`}
                className={`max-w-[86%] rounded-2xl px-3 py-2 shadow-sm md:max-w-[72%] ${
                  own ? "rounded-br-md bg-sky-500/90 text-slate-950" : "rounded-bl-md border border-slate-700/60 bg-slate-900/80 text-slate-100"
                } ${isSelected ? "ring-2 ring-sky-400/80" : ""} ${focusedMessageId === message.id ? "ring-2 ring-amber-300" : ""}`}
                onClick={() => {
                  if (selectedIds.size > 0) {
                    toggleSelected(message.id);
                  }
                }}
                onContextMenu={(e) => {
                  e.preventDefault();
                  void ensureReactionsLoaded(message.id);
                  const pos = getSafeContextPosition(e.clientX, e.clientY, 160, 108);
                  setCtx({ x: pos.x, y: pos.y, messageId: message.id });
                }}
              >
                {selectedIds.size > 0 ? (
                  <div className={`mb-1 inline-flex h-4 w-4 items-center justify-center rounded-full border text-[10px] ${isSelected ? "border-sky-300 bg-sky-300 text-slate-900" : "border-slate-400 text-slate-300"}`}>
                    {isSelected ? "✓" : ""}
                  </div>
                ) : null}
                {message.forwarded_from_message_id ? (
                  <div className={`mb-1 rounded-md border-l-2 px-2 py-1 text-[11px] ${own ? "border-slate-900/60 bg-slate-900/10 text-slate-900/75" : "border-sky-400 bg-slate-800/60 text-sky-300"}`}>
                    ↪ Forwarded message
                  </div>
                ) : null}
                {replySource ? (
                  <div className={`mb-1 rounded-md border-l-2 px-2 py-1 text-[11px] ${own ? "border-slate-900/60 bg-slate-900/10 text-slate-900/75" : "border-sky-400 bg-slate-800/60 text-slate-300"}`}>
                    <p className="truncate font-semibold">{replySource.sender_id === me?.id ? "You" : "Reply"}</p>
                    <p className="truncate">{replySource.text || "[media]"}</p>
                  </div>
                ) : null}
                {renderContent(message.type, message.text)}
                <div className="mt-1 flex flex-wrap gap-1">
                  {["👍", "❤️", "🔥"].map((emoji) => {
                    const items = reactionsByMessage[message.id] ?? [];
                    const item = items.find((reaction) => reaction.emoji === emoji);
                    return (
                      <button
                        className={`rounded-full border px-2 py-0.5 text-[11px] ${
                          item?.reacted ? "border-sky-300 bg-sky-500/30" : "border-slate-500/60 bg-slate-700/40"
                        }`}
                        key={`${message.id}-${emoji}`}
                        onClick={() => void handleToggleReaction(message.id, emoji)}
                        type="button"
                      >
                        {emoji}{item ? ` ${item.count}` : ""}
                      </button>
                    );
                  })}
                </div>
                <p className={`mt-1 flex items-center justify-end gap-1 text-[11px] ${own ? "text-slate-900/85" : "text-slate-400"}`}>
                  <span>{formatTime(message.created_at)}</span>
                  {own ? <span className={message.delivery_status === "read" ? "text-cyan-900" : ""}>{renderStatus(message.delivery_status)}</span> : null}
                </p>
              </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className="px-5 pb-2 text-xs text-slate-300/80">{(typingByChat[activeChatId] ?? []).length > 0 ? "typing..." : ""}</div>

      {ctx
        ? createPortal(
          <div
            className="fixed z-[100] w-40 rounded-lg border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl"
            style={{ left: ctx.x, top: ctx.y }}
            onClick={(e) => e.stopPropagation()}
          >
            <button
              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
              onClick={() => {
                const msg = messagesMap.get(ctx.messageId);
                if (msg) {
                  setReplyToMessage(chatId, msg);
                }
                setCtx(null);
              }}
            >
              Reply
            </button>
            <button
              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
              onClick={() => {
                setForwardMessageId(ctx.messageId);
                setForwardQuery("");
                setForwardError(null);
                setForwardSelectedChatIds(new Set());
                setCtx(null);
              }}
            >
              Forward
            </button>
            <button
              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
              onClick={() => {
                setSelectedIds(new Set([ctx.messageId]));
                setCtx(null);
              }}
            >
              Select
            </button>
            <button
              className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800"
              onClick={() => {
                setDeleteMessageId(ctx.messageId);
                setDeleteError(null);
                setCtx(null);
              }}
            >
              Delete
            </button>
            <button className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800" onClick={() => void handlePin(ctx.messageId)}>
              Pin / Unpin
            </button>
          </div>,
          document.body
        )
        : null}

      {forwardMessageId ? (
        <div className="absolute inset-0 z-50 flex items-end justify-center bg-slate-950/55 p-3" onClick={() => setForwardMessageId(null)}>
          <div className="w-full rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(e) => e.stopPropagation()}>
            <p className="mb-2 text-sm font-semibold">Forward message</p>
            <input
              className="mb-2 w-full rounded-lg border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
              placeholder="Search chats"
              value={forwardQuery}
              onChange={(e) => setForwardQuery(e.target.value)}
            />
            <div className="tg-scrollbar max-h-56 space-y-1 overflow-auto">
              {forwardTargets.map((chat) => (
                <button
                  className={`block w-full rounded-lg px-3 py-2 text-left text-sm disabled:opacity-60 ${forwardSelectedChatIds.has(chat.id) ? "bg-sky-500/30" : "bg-slate-800 hover:bg-slate-700"}`}
                  disabled={isForwarding}
                  key={chat.id}
                  onClick={() => {
                    setForwardSelectedChatIds((prev) => {
                      const next = new Set(prev);
                      if (next.has(chat.id)) {
                        next.delete(chat.id);
                      } else {
                        next.add(chat.id);
                      }
                      return next;
                    });
                  }}
                >
                  <p className="truncate font-semibold">{chatLabel(chat)}</p>
                  <p className="truncate text-xs text-slate-400">{chat.handle ? `@${chat.handle}` : chat.type}</p>
                </button>
              ))}
              {forwardTargets.length === 0 ? <p className="px-1 py-2 text-xs text-slate-400">No chats found</p> : null}
            </div>
            {forwardError ? <p className="mt-2 text-xs text-red-400">{forwardError}</p> : null}
            <div className="mt-3 flex gap-2">
              <button className="w-full rounded bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950" onClick={() => void handleForwardSubmit()}>
                Forward ({forwardSelectedChatIds.size})
              </button>
              <button className="w-full rounded bg-slate-700 px-3 py-2 text-sm" onClick={() => setForwardMessageId(null)}>
                Cancel
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {deleteMessageId ? (
        <div className="absolute inset-0 z-50 flex items-end justify-center bg-slate-950/55 p-3" onClick={() => setDeleteMessageId(null)}>
          <div className="w-full rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(e) => e.stopPropagation()}>
            <p className="mb-2 text-sm font-semibold">Delete message</p>
            <p className="mb-3 text-xs text-slate-400">Choose how to delete this message.</p>
            <div className="space-y-2">
              <button className="w-full rounded bg-red-500 px-3 py-2 text-sm font-semibold text-white" onClick={() => void handleDelete(false)}>
                Delete for me
              </button>
              {canDeleteForEveryone(messagesMap.get(deleteMessageId), activeChat, me?.id) ? (
                <button className="w-full rounded bg-red-600 px-3 py-2 text-sm font-semibold text-white" onClick={() => void handleDelete(true)}>
                  Delete for everyone
                </button>
              ) : null}
              <button className="w-full rounded bg-slate-700 px-3 py-2 text-sm" onClick={() => setDeleteMessageId(null)}>
                Cancel
              </button>
            </div>
            {deleteError ? <p className="mt-2 text-xs text-red-400">{deleteError}</p> : null}
          </div>
        </div>
      ) : null}

      {pendingDelete && pendingDelete.chatId === chatId ? (
        <div className="pointer-events-none absolute bottom-3 left-0 right-0 z-50 flex justify-center px-3" data-tick={undoTick}>
          <div className="pointer-events-auto flex w-full max-w-sm items-center justify-between rounded-lg border border-slate-700/80 bg-slate-900/95 px-3 py-2 text-xs shadow-xl">
            <span className="text-slate-200">
              Messages deleted
              {` (${Math.max(0, Math.ceil((pendingDelete.expiresAt - Date.now()) / 1000))}s)`}
            </span>
            <button className="rounded bg-sky-500 px-2 py-1 font-semibold text-slate-950" onClick={undoDeleteForMe} type="button">
              Undo
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function renderContent(messageType: string, text: string | null) {
  if (!text) return <p className="opacity-80">[empty]</p>;
  if (messageType === "image") return <img alt="attachment" className="max-h-72 rounded-lg object-cover" src={text} />;
  if (messageType === "video" || messageType === "circle_video") return <video className="max-h-72 rounded-lg" controls src={text} />;
  if (messageType === "audio" || messageType === "voice") return <audio controls src={text} />;
  if (messageType === "file") {
    return (
      <a className="underline" href={text} rel="noreferrer" target="_blank">
        Open file
      </a>
    );
  }
  return <p className="whitespace-pre-wrap break-words" dangerouslySetInnerHTML={{ __html: formatMessageHtml(text) }} />;
}

function renderStatus(status: string | undefined): string {
  if (status === "sending") return "⌛";
  if (status === "delivered") return "✓✓";
  if (status === "read") return "✓✓";
  return "✓";
}

function getSafeContextPosition(x: number, y: number, menuWidth: number, menuHeight: number): { x: number; y: number } {
  const pad = 8;
  const cursorOffset = 4;
  const wantedX = x + cursorOffset;
  const wantedY = y + cursorOffset;
  const safeX = Math.min(Math.max(pad, wantedX), window.innerWidth - menuWidth - pad);
  const safeY = Math.min(Math.max(pad, wantedY), window.innerHeight - menuHeight - pad);
  return { x: safeX, y: safeY };
}

function chatLabel(chat: { display_title?: string | null; title: string | null; type: "private" | "group" | "channel"; is_saved?: boolean }): string {
  if (chat.display_title?.trim()) return chat.display_title;
  if (chat.title?.trim()) return chat.title;
  if (chat.is_saved) return "Saved Messages";
  if (chat.type === "private") return "Direct chat";
  if (chat.type === "group") return "Group";
  return "Channel";
}

function canDeleteForEveryone(
  message: { sender_id: number } | undefined,
  chat: { type: "private" | "group" | "channel"; is_saved?: boolean } | undefined,
  meId: number | undefined
): boolean {
  if (!message || !chat || !meId) return false;
  if (chat.is_saved) return false;
  if (chat.type === "private") return true;
  return message.sender_id === meId;
}