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, useAnchoredPopover } from "./AnchoredPopover";

/**
 * 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 },
  });

  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-[22rem] truncate text-muted cursor-help outline-none"
      >
        {preview}
      </span>
      <PopoverSurface
        popover={pop}
        className="glass w-[480px] max-h-[28rem] overflow-y-auto px-3.5 py-3 rounded-lg animate-[fadeIn_0.12s_ease]"
      >
        {/* Full About once the detail loads; until then the list's truncated description. */}
        {ch ? (
          <ChannelAboutContent ch={ch} />
        ) : (
          <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">{preview}</p>
        )}
      </PopoverSurface>
    </>
  );
}
