import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Info } from "lucide-react";

import { PopoverSurface } from "./ui/AnchoredPopover";
import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
import { Button } from "./ui/Button";
import { SURFACE } from "./ui/surfaces";

// The playlists module shows fewer lists than youtube.com does, and without a word about it that
// reads as Siftlode being broken (the owner's ask, 2026-09-03: say it is YouTube's API, up front).
// Three facts, behind one quiet line at the foot of the rail — the owner's pick from the S7 mockups
// (2026-09-19): always there to find again, never in the way.
export default function PlaylistLimitsHint() {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const pop = useAnchoredPopover({
    open,
    onOpenChange: setOpen,
    mode: "dialog",
    role: "dialog",
    placement: "right-end",
    offset: 8,
  });
  const { setPositionReference, setReference } = pop.refs;
  return (
    // The panel is placed off the whole row, not the "Why?" button: off the button it opened
    // over the right third of the rail and covered the lists (measured on localdev).
    <div
      ref={setPositionReference}
      className="mt-2 flex items-center gap-1.5 border-t border-border/60 px-1 pt-2 text-2xs text-muted"
    >
      <Info className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
      <span>{t("playlists.limits.hint")}</span>
      <Button variant="link" ref={setReference} {...pop.getReferenceProps()}>
        {t("playlists.limits.why")}
      </Button>
      <PopoverSurface
        popover={pop}
        ariaLabel={t("playlists.limits.title")}
        className={`${SURFACE.popover} w-80 max-w-[calc(100vw-2rem)] p-3.5 text-xs leading-relaxed text-fg animate-[popIn_0.16s_ease]`}
      >
        <p className="mb-2 font-semibold">{t("playlists.limits.title")}</p>
        <ul className="list-disc space-y-1.5 pl-4 text-muted">
          <li>{t("playlists.limits.closed")}</li>
          <li>{t("playlists.limits.ownOnly")}</li>
          <li>{t("playlists.limits.noChannel")}</li>
        </ul>
      </PopoverSurface>
    </div>
  );
}