import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { qk } from "../lib/queryKeys";
import { api } from "../lib/api";
import ChannelAboutContent from "./ChannelAbout";
import { PopoverSurface } from "./ui/AnchoredPopover";
import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
import { SURFACE } from "./ui/surfaces";

/**
 * A channel-description cell: one truncated line in the table, revealing the FULL channel "About"
 * (the same content as the detail page's About tab — description, links, country, language, topics,
 * keywords) in a glass hover card. The detail is fetched ON DEMAND on hover/focus, sharing the
 * ["channel", id] react-query cache with the channel page, so the list stays light. The card is
 * interactive (scrollable, links clickable) — the platform's safePolygon lets the cursor travel the
 * gap, replacing the hand-rolled 160 ms hide-timer bridge. Shared by the subscribed + discovery
 * tables.
 *
 * The card keeps the platform's default hover role (`tooltip`); making this rich, interactive panel
 * properly keyboard-reachable belongs to R9 (focus/a11y), not to the mechanical migration.
 */
export default function AboutCell({ text, channelId }: { text: string | null; channelId: string }) {
  const preview = (text ?? "").trim();
  const [open, setOpen] = useState(false);

  const pop = useAnchoredPopover({
    open: open && !!preview,
    onOpenChange: setOpen,
    mode: "hover",
    offset: 6,
    // Pop instantly like the old cell did; the close grace lets the cursor reach the card.
    hoverDelay: { open: 0, close: 160 },
    // Cap the panel to the space between the trigger and the viewport edge (publishes --fit-max-h) so a
    // long About never runs its top off-screen — at high browser zoom the short viewport made a fixed
    // max-height overflow above the top edge, where the scroll container can't reach.
    fitHeight: true,
  });

  const { data: ch } = useQuery({
    queryKey: qk.channel(channelId),
    queryFn: () => api.channelDetail(channelId),
    enabled: open && !!channelId,
    staleTime: 5 * 60_000,
  });

  if (!preview) return <span className="text-muted">—</span>;

  return (
    <>
      <span
        ref={pop.refs.setReference}
        {...pop.getReferenceProps()}
        tabIndex={0}
        className="block max-w-88 truncate text-muted cursor-help rounded-sm outline-hidden focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
      >
        {preview}
      </span>
      <PopoverSurface
        popover={pop}
        className={`${SURFACE.popover} w-120 overflow-y-auto px-3.5 py-3 animate-[fadeIn_0.12s_ease]`}
        // min(design cap, available space): keeps the 28rem cap on a tall viewport, shrinks to fit on a
        // short one (high zoom). --fit-max-h is set by the fitHeight `size` middleware once positioned.
        style={{ maxHeight: "min(28rem, var(--fit-max-h, 28rem))" }}
      >
        {/* Full About once the detail loads; until then the list's truncated description. */}
        {ch ? (
          <ChannelAboutContent ch={ch} />
        ) : (
          <p className="text-sm whitespace-pre-wrap wrap-break-word leading-relaxed">{preview}</p>
        )}
      </PopoverSurface>
    </>
  );
}