freezmo/components/chat/ContextPicker.tsx

"use client";

import { useEffect, useRef } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";

import { CheckCircleIcon, FolderIcon, LayersIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";
import { springSheet } from "@/lib/motion";
import { useIsPhone } from "@/lib/use-phone";
import { deckHasNotes } from "@/lib/chat-context";
import type { ChatScope } from "@/lib/chat";
import type { Deck, Folder } from "@/lib/schemas";
import { cn } from "@/lib/utils";

/**
 * Scope picker for the context chip: All notes · selected folders/decks ·
 * None (general chat). Only what is selected here can ever travel as context.
 */
export function ContextPicker({
  open,
  onClose,
  scope,
  onChange,
  decks,
  folders,
}: {
  open: boolean;
  onClose: () => void;
  scope: ChatScope;
  onChange: (scope: ChatScope) => void;
  decks: Deck[];
  folders: Folder[];
}) {
  const { t, plural } = useI18n();
  const isPhone = useIsPhone();
  const reduceMotion = useReducedMotion();
  const panel = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  /* Desktop dropdown: a press anywhere outside closes it, except on the
     trigger chips, which toggle their own popover (see Composer). */
  useEffect(() => {
    if (!open || isPhone) return;
    const onDown = (event: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      if (panel.current?.contains(target)) return;
      if (target.closest("[data-picker-trigger]")) return;
      onClose();
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open, isPhone, onClose]);

  const selected = scope.kind === "decks" ? new Set(scope.deckIds) : new Set<string>();

  const choose = (next: ChatScope) => {
    onChange(next);
    if (next.kind !== "decks") onClose();
  };

  const toggleDeck = (deckId: string) => {
    const next = new Set(selected);
    if (next.has(deckId)) next.delete(deckId);
    else next.add(deckId);
    onChange({ kind: "decks", deckIds: [...next] });
  };

  const toggleFolder = (folderId: string) => {
    const inFolder = decks.filter((deck) => deck.folderId === folderId).map((deck) => deck.id);
    const allSelected = inFolder.length > 0 && inFolder.every((id) => selected.has(id));
    const next = new Set(selected);
    for (const id of inFolder) {
      if (allSelected) next.delete(id);
      else next.add(id);
    }
    onChange({ kind: "decks", deckIds: [...next] });
  };

  const modeRow = (
    value: ChatScope["kind"],
    title: string,
    note: string,
    icon: React.ReactNode,
  ) => (
    <button
      type="button"
      aria-pressed={scope.kind === value}
      onClick={() =>
        choose(
          value === "all"
            ? { kind: "all" }
            : value === "none"
              ? { kind: "none" }
              : { kind: "decks", deckIds: selected.size > 0 ? [...selected] : decks.map((deck) => deck.id) },
        )
      }
      className={cn(
        "flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition",
        scope.kind === value
          ? "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)]"
          : "border-[var(--hairline-soft)] bg-[var(--surface-strong)] hover:bg-[var(--hover)]",
      )}
    >
      <span className="shrink-0 text-[var(--text-muted)]">{icon}</span>
      <span className="min-w-0 flex-1">
        <span className="block text-[13.5px] font-semibold text-[var(--text)]">{title}</span>
        <span className="mt-0.5 block text-[11.5px] leading-snug text-[var(--text-subtle)]">{note}</span>
      </span>
      {scope.kind === value ? <CheckCircleIcon className="size-5 shrink-0 text-accent-500" /> : null}
    </button>
  );

  const body = (
    <div className="space-y-2">
      {modeRow("all", t("chat.scope.all"), t("chat.scope.allNote"), <LayersIcon className="size-5" />)}
      {modeRow("decks", t("chat.scope.pick"), t("chat.scope.pickNote"), <FolderIcon className="size-5" />)}
      {scope.kind === "decks" ? (
        <div className="max-h-[38dvh] space-y-1 overflow-y-auto overscroll-contain rounded-2xl border border-[var(--hairline-soft)] bg-[var(--surface-sunken)] p-2">
          {folders.map((folder) => {
            const inFolder = decks.filter((deck) => deck.folderId === folder.id);
            if (inFolder.length === 0) return null;
            const allSelected = inFolder.every((deck) => selected.has(deck.id));
            return (
              <button
                key={folder.id}
                type="button"
                onClick={() => toggleFolder(folder.id)}
                className="flex w-full items-center gap-2 rounded-xl px-2 py-2 text-left text-[12.5px] font-semibold text-[var(--text-muted)] transition hover:bg-[var(--hover)]"
              >
                <span
                  className={cn(
                    "grid size-4 place-items-center rounded-[0.35rem] border",
                    allSelected ? "border-accent-500 bg-accent-500 text-white" : "border-[var(--hairline)]",
                  )}
                  aria-hidden
                >
                  {allSelected ? <CheckCircleIcon className="size-3" /> : null}
                </span>
                <FolderIcon className="size-3.5" />
                <span className="truncate">{folder.name}</span>
                <span className="ml-auto text-[11px] font-normal text-[var(--text-subtle)]">
                  {plural(inFolder.length, "chat.scope.deckCount")}
                </span>
              </button>
            );
          })}
          {decks.map((deck) => {
            const active = selected.has(deck.id);
            return (
              <button
                key={deck.id}
                type="button"
                onClick={() => toggleDeck(deck.id)}
                className="flex w-full items-center gap-2 rounded-xl px-2 py-2 text-left transition hover:bg-[var(--hover)]"
              >
                <span
                  className={cn(
                    "grid size-4 shrink-0 place-items-center rounded-[0.35rem] border",
                    active ? "border-accent-500 bg-accent-500 text-white" : "border-[var(--hairline)]",
                  )}
                  aria-hidden
                >
                  {active ? <CheckCircleIcon className="size-3" /> : null}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13px] text-[var(--text)]">{deck.title}</span>
                  <span className="block text-[11px] text-[var(--text-subtle)]">
                    {deckHasNotes(deck) ? t("chat.scope.hasNotes") : t("chat.scope.generatedOnly")}
                  </span>
                </span>
              </button>
            );
          })}
        </div>
      ) : null}
      {modeRow("none", t("chat.scope.none"), t("chat.scope.noneNote"), <span className="text-[18px]">💬</span>)}
    </div>
  );

  if (isPhone) {
    return (
      <AnimatePresence>
        {open ? (
          <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label={t("chat.scope.title")}>
            <motion.button
              type="button"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={reduceMotion ? { duration: 0 } : undefined}
              className="absolute inset-0 bg-black/45"
              aria-label={t("common.close")}
              onClick={onClose}
            />
            <motion.div
              initial={reduceMotion ? { opacity: 0 } : { y: "100%" }}
              animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
              exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
              transition={reduceMotion ? { duration: 0 } : springSheet}
              className="glass-panel glass-sheet absolute inset-x-0 bottom-0 max-h-[85dvh] overflow-y-auto rounded-b-none px-4 pb-safe pt-2"
            >
              <div className="sheet-grabber mx-auto" aria-hidden />
              <h2 className="px-1 pb-3 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.scope.title")}</h2>
              {body}
              <p className="px-1 py-3 text-[11.5px] text-[var(--text-subtle)]">{t("chat.scope.note")}</p>
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    );
  }

  return (
    <AnimatePresence>
      {open ? (
        <motion.div
          ref={panel}
          initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.98 }}
          transition={reduceMotion ? { duration: 0 } : { duration: 0.16, ease: "easeOut" }}
          className="glass-panel absolute bottom-full left-0 z-40 mb-2 w-96 p-3"
          role="dialog"
          aria-label={t("chat.scope.title")}
        >
          <h2 className="px-1 pb-2 text-[13px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
            {t("chat.scope.title")}
          </h2>
          {body}
          <p className="px-1 pt-2 text-[11.5px] text-[var(--text-subtle)]">{t("chat.scope.note")}</p>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}