import { useConversations } from "@features/conversations/hooks/useConversations.js";
import { useConversationsRealtime } from "@features/conversations/hooks/useConversationsRealtime.js";
import { useCreateConversation } from "@features/conversations/hooks/useCreateConversation.js";
import { authClient } from "@lib/auth.js";
import { Edit, Search } from "lucide-react";
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";

function ConversationsRoute() {
  const navigate = useNavigate();
  const { data: session } = authClient.useSession();
  const user = session?.user;

  const [query, setQuery] = useState("");
  const [modalOpen, setModalOpen] = useState(false);

  const conversationsQuery = useConversations();
  const typingByConversation = useConversationsRealtime(user?.id);

  const createMutation = useCreateConversation({
    onCreated: ({ id }) => {
      setModalOpen(false);
      navigate(`/chat/${encodeURIComponent(id)}`);
    },
  });

  const conversations = conversationsQuery.data?.conversations ?? [];

  const term = query.trim().toLowerCase();
  const visible = useMemo(() => {
    if (!term) return conversations;
    return conversations.filter((c) => (c.participant?.name ?? "").toLowerCase().includes(term));
  }, [conversations, term]);

  const openConversation = (conversationId) =>
    navigate(`/chat/${encodeURIComponent(conversationId)}`);

  return (
    <div className="relative flex flex-col h-full bg-base text-fg">
      <div
        className="sticky top-0 z-10 backdrop-blur-md"
        style={{ background: "rgba(10,10,11,0.85)" }}
      >
        <div className="px-5 pt-4 pb-2 flex items-center gap-2.5">
          <FluxMark size={22} />
          <span className="text-fg text-[17px] font-semibold tracking-[-0.02em]">FluxChat</span>
        </div>
        <div className="px-5 pb-2.5">
          <div className="flex items-center gap-2.5 px-3 h-10 bg-surface border border-line rounded-md transition-colors duration-normal ease-out-expo focus-within:border-accent">
            <span className="text-fg-tertiary inline-flex flex-shrink-0">
              <Search size={16} strokeWidth={1.75} />
            </span>
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search conversations"
              className="flex-1 min-w-0 bg-transparent border-none outline-none text-fg font-sans text-sm tracking-[-0.005em]"
            />
          </div>
        </div>
        <div className="flex gap-1 px-4 border-b border-line">
          <div className="relative px-3 py-2.5 text-[13px] font-medium tracking-[-0.005em] inline-flex items-center gap-1.5 text-fg">
            Recent
            {conversations.length > 0 && (
              <span className="min-w-[16px] px-1.5 rounded-sm bg-subtle text-fg-secondary text-[10px] font-mono">
                {conversations.length}
              </span>
            )}
            <span className="absolute left-2 right-2 -bottom-px h-0.5 bg-accent rounded-full" />
          </div>
        </div>
      </div>

      <div className="flex-1 min-h-0 overflow-y-auto scroll-thin">
        {visible.length > 0 ? (
          <>
            <div className="px-5 pt-3.5 pb-1.5 font-mono text-[11px] uppercase tracking-[0.08em] text-fg-tertiary">
              Recent
            </div>
            {visible.map((conversation) => (
              <ConversationRow
                key={conversation.id}
                conversationId={conversation.id}
                lastUpdated={conversation.updatedAt}
                conversation={conversation}
                typing={typingByConversation[conversation.id]}
                currentUserId={user?.id}
                onOpen={openConversation}
              />
            ))}
          </>
        ) : (
          <EmptyConversations query={query} />
        )}
      </div>

      <button
        type="button"
        aria-label="New conversation"
        onClick={() => setModalOpen(true)}
        className="absolute right-5 bottom-5 w-[52px] h-[52px] rounded-full bg-accent text-accent-fg border-0 cursor-pointer inline-flex items-center justify-center transition-transform duration-normal ease-out-expo hover:scale-[1.06]"
        style={{ boxShadow: "0 8px 24px rgba(245,158,11,0.30), 0 2px 6px rgba(0,0,0,0.4)" }}
      >
        <Edit size={20} strokeWidth={1.75} />
      </button>

      <NewConversationModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onOpen={(targetUserId) => createMutation.mutate(targetUserId)}
        pending={createMutation.isPending}
      />
    </div>
  );
}

window.ConversationsRoute = ConversationsRoute;