"use client";

/**
 * FollowListDrawer — the followers / following list for a profile.
 *
 * Opens as a right-side drawer on desktop and a bottom sheet on mobile. The
 * list is virtualized (fixed-height rows) and paginated: it fetches a page at
 * a time from the BFF and loads the next page as you scroll near the bottom.
 * The search field queries the backend across the profile's followers /
 * following (debounced), so it works against the full set, not just the
 * loaded page.
 *
 * State-update notes (React 19 / set-state-in-effect rule): the (re)load runs
 * inside a debounce timer callback and pagination runs from the scroll
 * handler — never synchronously inside an effect body.
 */

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { Loader2, Search } from "lucide-react";
import { useVirtualizer } from "@tanstack/react-virtual";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import { relationships, type UserSummary } from "@/lib/social";
import { cn } from "@/lib/utils";

export type FollowMode = "followers" | "following";

const PAGE = 30;
const ROW = 64; // px — fixed row height for the virtualizer

export function FollowListDrawer({
  open,
  mode,
  handle,
  onClose,
}: {
  open: boolean;
  mode: FollowMode;
  handle: string;
  onClose: () => void;
}) {
  const isMobile = useMediaQuery("(max-width: 767px)");
  const direction = isMobile ? "bottom" : "right";

  const [q, setQ] = useState("");
  const [items, setItems] = useState<UserSummary[]>([]);
  const [total, setTotal] = useState(0);
  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");

  // reqRef tags the current query "session"; a newer reload bumps it so any
  // in-flight reload/append for an older query is ignored on arrival.
  const reqRef = useRef(0);
  const busyRef = useRef(false);
  const scrollRef = useRef<HTMLDivElement>(null);

  const fetchPage = mode === "followers" ? relationships.followers : relationships.following;

  // (Re)load page 0 whenever the drawer opens or the mode/handle/query
  // changes. Debounced so typing in search doesn't spam the BFF.
  useEffect(() => {
    if (!open) return;
    const t = window.setTimeout(() => {
      const token = ++reqRef.current;
      busyRef.current = true;
      setItems([]);
      setStatus("loading");
      fetchPage(handle, { q, limit: PAGE, offset: 0 })
        .then((res) => {
          if (reqRef.current !== token) return;
          setItems(res.users);
          setTotal(res.total);
          setStatus("idle");
        })
        .catch(() => {
          if (reqRef.current === token) setStatus("error");
        })
        .finally(() => {
          if (reqRef.current === token) busyRef.current = false;
        });
    }, 250);
    return () => window.clearTimeout(t);
  }, [open, mode, handle, q, fetchPage]);

  function loadMore() {
    if (busyRef.current || items.length >= total) return;
    const token = reqRef.current; // same session — don't bump
    const offset = items.length;
    busyRef.current = true;
    setStatus("loading");
    fetchPage(handle, { q, limit: PAGE, offset })
      .then((res) => {
        if (reqRef.current !== token) return;
        setItems((prev) => [...prev, ...res.users]);
        setTotal(res.total);
        setStatus("idle");
      })
      .catch(() => {
        if (reqRef.current === token) setStatus("error");
      })
      .finally(() => {
        if (reqRef.current === token) busyRef.current = false;
      });
  }

  // TanStack Virtual returns non-memoizable functions; the React Compiler
  // simply skips memoizing this component, which is fine here.
  // eslint-disable-next-line react-hooks/incompatible-library
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => ROW,
    overscan: 8,
  });

  const empty = status !== "loading" && items.length === 0;

  return (
    <Drawer
      open={open}
      direction={direction}
      onOpenChange={(o) => {
        if (!o) onClose();
      }}
    >
      <DrawerContent
        direction={direction}
        className={cn(
          "bg-card flex flex-col",
          isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
        )}
      >
        <DrawerHeader className="border-b border-border text-left">
          <DrawerTitle className="text-base capitalize">{mode}</DrawerTitle>
          <div className="relative mt-2">
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
            <input
              type="search"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder={`Search ${mode}`}
              autoComplete="off"
              className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
            />
          </div>
        </DrawerHeader>

        <div
          ref={scrollRef}
          onScroll={(e) => {
            const el = e.currentTarget;
            if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
              loadMore();
            }
          }}
          className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
        >
          {status === "error" ? (
            <Message>Couldn&apos;t load. Pull down to retry.</Message>
          ) : empty ? (
            <Message>
              {q.trim()
                ? "No matches."
                : mode === "followers"
                  ? "No followers yet."
                  : "Not following anyone yet."}
            </Message>
          ) : (
            <div
              style={{
                height: virtualizer.getTotalSize(),
                position: "relative",
                width: "100%",
              }}
            >
              {virtualizer.getVirtualItems().map((vi) => {
                const u = items[vi.index];
                if (!u) return null;
                return (
                  <div
                    key={vi.key}
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: "100%",
                      height: vi.size,
                      transform: `translateY(${vi.start}px)`,
                    }}
                  >
                    <Row user={u} onNavigate={onClose} />
                  </div>
                );
              })}
            </div>
          )}

          {status === "loading" ? (
            <div className="flex justify-center py-4">
              <Loader2 className="size-5 animate-spin text-muted-foreground" />
            </div>
          ) : null}
        </div>
      </DrawerContent>
    </Drawer>
  );
}

function Row({
  user,
  onNavigate,
}: {
  user: UserSummary;
  onNavigate: () => void;
}) {
  return (
    <Link
      href={`/u/${user.handle}`}
      onClick={onNavigate}
      className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
    >
      <RowAvatar src={user.avatar_url} name={user.name} />
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-semibold text-foreground">
          {user.name}
        </p>
        <p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
      </div>
    </Link>
  );
}

function RowAvatar({ src, name }: { src: string | null; name: string }) {
  if (src) {
    return (
      <Image
        src={src}
        alt={name}
        width={40}
        height={40}
        className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
        unoptimized
      />
    );
  }
  const initials =
    name
      .split(/\s+/)
      .map((p) => p[0])
      .slice(0, 2)
      .join("")
      .toUpperCase() || "?";
  return (
    <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
      {initials}
    </div>
  );
}

function Message({ children }: { children: React.ReactNode }) {
  return (
    <p className="px-4 py-10 text-center text-sm text-muted-foreground">
      {children}
    </p>
  );
}