siftlode/frontend/src/lib/plexDetailUi.tsx

import { useLayoutEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query";
import { SlidersHorizontal } from "lucide-react";
import { useDismiss } from "./useDismiss";
import { api } from "./api";

// Shared "detail page" UI reused by the movie info page (PlexInfo) and the series show/season pages,
// so they look consistent (the standing glassy/HTPC brief): the faint fixed art backdrop, the two
// per-user display prefs (art background / cast row — same keys as the movie info page), and the
// customize menu that toggles them.

export function useDetailPrefs() {
  const qc = useQueryClient();
  const prefs = (qc.getQueryData<{ preferences?: Record<string, unknown> }>(["me"])?.preferences ?? {}) as {
    plexInfoArtBg?: boolean;
    plexInfoCast?: boolean;
  };
  const [artBg, setArtBg] = useState(prefs.plexInfoArtBg !== false);
  const [showCast, setShowCast] = useState(prefs.plexInfoCast !== false);
  const save = (patch: Record<string, unknown>) => {
    api.savePrefs(patch).catch(() => {});
    qc.setQueryData<{ preferences?: Record<string, unknown> } | undefined>(["me"], (m) =>
      m ? { ...m, preferences: { ...(m.preferences || {}), ...patch } } : m,
    );
  };
  return {
    artBg,
    showCast,
    toggleArtBg: () => {
      const next = !artBg;
      setArtBg(next);
      save({ plexInfoArtBg: next });
    },
    toggleCast: () => {
      const next = !showCast;
      setShowCast(next);
      save({ plexInfoCast: next });
    },
  };
}

// Paint the item's art as a faint FIXED backdrop on the page's <main> scroll container (HTPC-style),
// so the glass panels float over it. Cleared on unmount / when disabled / when there's no art.
export function useArtBackdrop(art: string | null | undefined, enabled: boolean) {
  useLayoutEffect(() => {
    const main = document.querySelector("main");
    if (!main) return;
    const s = main.style;
    const clear = () => {
      s.backgroundImage = "";
      s.backgroundSize = "";
      s.backgroundPosition = "";
      s.backgroundRepeat = "";
      s.backgroundAttachment = "";
    };
    if (enabled && art) {
      s.backgroundImage =
        `linear-gradient(color-mix(in srgb, var(--bg) 60%, transparent), ` +
        `color-mix(in srgb, var(--bg) 64%, transparent)), url("${art}")`;
      s.backgroundSize = "cover";
      s.backgroundPosition = "center 20%";
      s.backgroundRepeat = "no-repeat";
      s.backgroundAttachment = "fixed";
    } else {
      clear();
    }
    return clear;
  }, [art, enabled]);
}

export function DetailCustomizeMenu({
  artBg,
  onToggleArtBg,
  showCast,
  onToggleCast,
  hasCast,
}: {
  artBg: boolean;
  onToggleArtBg: () => void;
  showCast: boolean;
  onToggleCast: () => void;
  hasCast: boolean;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const btnRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  useDismiss(open, () => setOpen(false), [menuRef, btnRef]);
  return (
    <div className="relative shrink-0">
      <button
        ref={btnRef}
        onClick={() => setOpen((v) => !v)}
        title={t("plex.info.customize")}
        className="p-1.5 rounded-lg text-muted hover:bg-surface hover:text-fg"
      >
        <SlidersHorizontal className="w-4 h-4" />
      </button>
      {open && (
        <div
          ref={menuRef}
          className="glass-menu absolute right-0 top-full z-20 mt-1 w-52 rounded-xl p-1.5 text-sm"
          style={{ background: "color-mix(in srgb, var(--surface) 58%, transparent)" }}
        >
          <PrefToggle label={t("plex.info.prefArtBg")} on={artBg} onClick={onToggleArtBg} />
          {hasCast && <PrefToggle label={t("plex.info.prefCast")} on={showCast} onClick={onToggleCast} />}
        </div>
      )}
    </div>
  );
}

function PrefToggle({ label, on, onClick }: { label: string; on: boolean; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left hover:bg-surface"
    >
      <span>{label}</span>
      <span className={`relative h-4 w-7 rounded-full transition ${on ? "bg-accent" : "bg-border"}`}>
        <span className={`absolute top-0.5 h-3 w-3 rounded-full bg-white transition-all ${on ? "left-3.5" : "left-0.5"}`} />
      </span>
    </button>
  );
}