import { searchUsers } from "@features/users/api/users.api.js";
import { queryKeys } from "@lib/queryKeys.js";
import { useQuery } from "@tanstack/react-query";
import { Search, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";

const SEARCH_DEBOUNCE = 500;

function NewConversationModal({ open, onClose, onOpen, pending = false }) {
  const [query, setQuery] = useState("");
  const [debounced, setDebounced] = useState("");
  const inputRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    setQuery("");
    setDebounced("");
    const id = requestAnimationFrame(() => inputRef.current?.focus());
    return () => cancelAnimationFrame(id);
  }, [open]);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(query.trim()), SEARCH_DEBOUNCE);
    return () => clearTimeout(id);
  }, [query]);

  const usersQuery = useQuery({
    queryKey: queryKeys.userSearch(debounced),
    queryFn: () => searchUsers(debounced),
    enabled: open && debounced.length > 0,
    staleTime: 30_000,
  });

  if (!open) return null;

  const users = debounced ? (usersQuery.data?.users ?? []) : [];
  const loading = debounced.length > 0 && usersQuery.isFetching;
  const showEmpty = !loading && debounced.length > 0 && users.length === 0;
  const showIdle = debounced.length === 0;

  const selectUser = (userId) => {
    if (!pending && userId) onOpen(userId);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center">
      <button
        type="button"
        aria-label="Dismiss"
        onClick={onClose}
        className="absolute inset-0 bg-black/60 backdrop-blur-sm border-0 cursor-default animate-fade-in"
      />
      <div
        role="dialog"
        aria-modal="true"
        aria-label="Start a direct conversation"
        className="relative w-full bg-surface border-t border-line rounded-t-xl overflow-hidden animate-sheet-in will-change-transform"
        style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
      >
        <div className="flex items-center justify-between px-5 py-4 border-b border-line-subtle">
          <div className="text-fg text-[15px] font-semibold tracking-[-0.01em]">
            New conversation
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close"
            className="w-9 h-9 inline-flex items-center justify-center rounded-md bg-transparent border-0 text-fg-secondary cursor-pointer hover:bg-hover hover:text-fg transition-colors duration-fast"
          >
            <X size={16} strokeWidth={1.75} />
          </button>
        </div>

        <div className="px-5 pt-4">
          <div className="flex items-center gap-2.5 px-3 h-10 bg-base border border-line rounded-md focus-within:border-accent">
            <Search size={16} strokeWidth={1.75} className="text-fg-tertiary flex-shrink-0" />
            <input
              ref={inputRef}
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Name or email"
              className="flex-1 min-w-0 bg-transparent border-none outline-none text-fg font-sans text-sm"
            />
            {loading && (
              <span
                className="inline-flex gap-1 flex-shrink-0"
                role="status"
                aria-label="Searching"
              >
                {[0, 1, 2].map((i) => (
                  <span
                    key={i}
                    className="w-1 h-1 rounded-full bg-accent"
                    style={{ animation: `flux-typing 1.2s ${i * 0.15}s infinite` }}
                  />
                ))}
              </span>
            )}
          </div>
        </div>

        <div className="px-3 py-3 min-h-[200px] max-h-[60vh] overflow-y-auto scroll-thin">
          {users.map((user) => (
            <button
              key={user.id}
              type="button"
              onClick={() => selectUser(user.id)}
              disabled={pending}
              className="w-full px-2.5 py-2.5 rounded-md bg-transparent border-0 text-left cursor-pointer flex items-center gap-3 active:bg-hover disabled:cursor-not-allowed"
            >
              <Avatar name={user.name} size={40} />
              <span className="min-w-0 flex-1">
                <span className="block text-sm font-medium text-fg truncate">{user.name}</span>
                <span className="block text-[11px] text-fg-tertiary font-mono truncate">
                  @{user.name.toLowerCase().replace(/\s+/g, "")}
                </span>
              </span>
            </button>
          ))}

          {showEmpty && (
            <div className="h-[180px] flex flex-col items-center justify-center gap-1.5 text-center">
              <span className="text-[13px] text-fg-secondary">No user found</span>
              <span className="text-[11px] text-fg-tertiary font-mono">
                Try a different name or email.
              </span>
            </div>
          )}
          {showIdle && (
            <div className="h-[180px] flex flex-col items-center justify-center gap-2 text-center text-fg-tertiary">
              <Search size={22} strokeWidth={1.5} />
              <span className="text-[12px] font-mono">Search a user to start a DM</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.NewConversationModal = NewConversationModal;