import { useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Settings2 } from "lucide-react";
import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
import { closeThenAct, useAnchoredPopover } from "./ui/anchoredPopoverHooks";
import { useSavedViews } from "./savedViewsContext";
import { IconButton } from "./ui/IconButton";
import { MenuCheck } from "./ui/MenuCheck";
import { SURFACE } from "./ui/surfaces";
import { SelectTrigger } from "./ui/SelectTrigger";

// The saved-views quick-picker. The filter-panel header's icon (and the toolbar's view chip) use it as
// their trigger: click → a popover list of the user's saved views (apply on click, the active one
// checked) + a "Manage views…" entry that opens the Personal Views modal, where the editing lives.
export default function SavedViewsPopover({
  trigger,
  toolbar = false,
  icon,
  trailing,
  ariaLabel,
  placement = "bottom-start",
}: {
  trigger: ReactNode;
  /** The toolbar's view chip: the A5 dropdown trigger around `trigger`, instead of a glyph. */
  toolbar?: boolean;
  /** Toolbar only: the trigger's leading glyph and its after-the-value mark, in their own slots. */
  icon?: ReactNode;
  trailing?: ReactNode;
  ariaLabel?: string;
  placement?: "bottom-start" | "bottom-end";
}) {
  const { t } = useTranslation();
  const { views, activeViewId, apply, openModal } = useSavedViews();
  const [open, setOpen] = useState(false);
  const pop = useAnchoredPopover({ open, onOpenChange: setOpen, placement });
  const { setReference } = pop.refs;
  const label = ariaLabel ?? t("views.saved");
  return (
    <>
      {toolbar ? (
        <SelectTrigger
          context="toolbar"
          open={open}
          icon={icon}
          trailing={trailing}
          ref={setReference}
          {...pop.getReferenceProps()}
          aria-label={label}
        >
          {trigger}
        </SelectTrigger>
      ) : (
        <IconButton
          variant="ghost-accent"
          ref={setReference}
          {...pop.getReferenceProps()}
          label={label}
        >
          {trigger}
        </IconButton>
      )}
      <PopoverSurface
        popover={pop}
        ariaLabel={label}
        className={`${SURFACE.menu} min-w-56 animate-[popIn_0.16s_ease]`}
      >
        {views.length === 0 ? (
          <p className="px-2 py-1.5 text-2xs leading-snug text-muted">{t("views.empty")}</p>
        ) : (
          <div role="group" aria-label={label}>
            {views.map((v) => (
              <PopoverItem
                key={v.id}
                role="menuitemradio"
                checked={v.id === activeViewId}
                onSelect={() => {
                  apply(v);
                  setOpen(false);
                }}
                label={v.name}
                className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ${
                  v.id === activeViewId ? "text-fg" : "text-muted"
                }`}
              >
                <MenuCheck kind="one" on={v.id === activeViewId} />
                <span className="flex-1 truncate">{v.name}</span>
              </PopoverItem>
            ))}
          </div>
        )}
        <div className="mt-1 border-t border-border pt-1">
          <PopoverItem
            role="menuitem"
            // Opens a dialog: close first, or the menu's focus return steals its focus (closeThenAct).
            onSelect={() => closeThenAct(() => setOpen(false), openModal)}
            label={t("views.manage")}
            className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted transition hover:text-fg"
          >
            <Settings2 className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
            <span className="flex-1">{t("views.manage")}</span>
          </PopoverItem>
        </div>
      </PopoverSurface>
    </>
  );
}