import { useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Bookmark, Check, Settings2 } from "lucide-react";
import { PopoverItem, PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
import { useSavedViews } from "./SavedViewsProvider";

// 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,
  className,
  ariaLabel,
  placement = "bottom-start",
}: {
  trigger: ReactNode;
  className?: string;
  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 label = ariaLabel ?? t("views.saved");
  return (
    <>
      <button
        type="button"
        ref={pop.refs.setReference}
        {...pop.getReferenceProps()}
        aria-label={label}
        className={className ?? "shrink-0 flex text-accent transition hover:text-fg"}
      >
        {trigger}
      </button>
      <PopoverSurface
        popover={pop}
        ariaLabel={label}
        className="glass-menu min-w-56 rounded-xl p-1.5 shadow-lg 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-md px-2 py-1.5 text-left text-sm transition ${
                  v.id === activeViewId ? "text-fg" : "text-muted"
                }`}
              >
                <Bookmark className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden="true" />
                <span className="flex-1 truncate">{v.name}</span>
                {v.id === activeViewId && <Check className="h-3.5 w-3.5 shrink-0 text-accent" />}
              </PopoverItem>
            ))}
          </div>
        )}
        <div className="mt-1 border-t border-border pt-1">
          <PopoverItem
            role="menuitem"
            onSelect={() => {
              openModal();
              setOpen(false);
            }}
            label={t("views.manage")}
            className="flex w-full items-center gap-2 rounded-md 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>
    </>
  );
}