/* eslint-disable */
// ============================================================
// VIEWS MENU — save / recall named MergedParams subsets
//
// A saved view captures Columns / Sort / Filter / GroupBy of a Grid action
// and lets the user recall it later. Stored per action via mockApi.
// ============================================================

const { useState: useVM_S, useEffect: useVM_E, useRef: useVM_R } = React;

const ViewsMenu = ({ actionId, currentMergedParams, onApply, onToast }) => {
  const [open, setOpen] = useVM_S(false);
  const [views, setViews] = useVM_S([]);
  const [name, setName] = useVM_S("");
  const [saving, setSaving] = useVM_S(false);
  const [activeViewId, setActiveViewId] = useVM_S(null);
  const ref = useVM_R(null);

  useVM_E(() => {
    if (!actionId) return;
    let cancelled = false;
    mockApi.listSavedViews(actionId).then((vs) => { if (!cancelled) setViews(vs); });
    return () => { cancelled = true; };
  }, [actionId]);

  useVM_E(() => {
    if (!open) return;
    const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [open]);

  const save = async () => {
    if (!name.trim()) return;
    setSaving(true);
    try {
      // Only persist the user-shaped fields (not the whole MergedParams)
      const subset = {
        Sort:    currentMergedParams.Sort || [],
        Filter:  currentMergedParams.Filter || [],
        Columns: currentMergedParams.Columns?.map((c) => ({
          PropertyName: c.PropertyName, ColOrder: c.ColOrder, Visible: c.Visible, Selected: c.Selected,
        })),
      };
      const v = await mockApi.createSavedView(actionId, { name: name.trim(), MergedParams: subset });
      setViews([...views, v]);
      setName("");
      setActiveViewId(v.id);
      onToast?.({ kind: "ok", text: `Saved view "${v.name}"` });
    } catch (e) {
      onToast?.({ kind: "err", text: e.message });
    } finally {
      setSaving(false);
    }
  };

  const apply = (v) => {
    onApply({ ...currentMergedParams, ...v.MergedParams });
    setActiveViewId(v.id);
    setOpen(false);
    onToast?.({ kind: "ok", text: `Loaded view "${v.name}"` });
  };

  const remove = async (v) => {
    try {
      await mockApi.deleteSavedView(actionId, v.id);
      setViews(views.filter((x) => x.id !== v.id));
      if (activeViewId === v.id) setActiveViewId(null);
      onToast?.({ kind: "ok", text: `Deleted "${v.name}"` });
    } catch (e) {
      onToast?.({ kind: "err", text: e.message });
    }
  };

  const activeView = views.find((v) => v.id === activeViewId);

  return (
    <div ref={ref} className="relative">
      <Btn variant={activeView ? "soft" : "ghost"} onClick={() => setOpen((v) => !v)}>
        <Icon name="bookmark" size={13} />
        <span className="hidden sm:inline">{activeView ? activeView.name : "Views"}</span>
        <Icon name="chevronDown" size={11} style={{ color: "var(--subtle)" }} />
      </Btn>
      {open && (
        <div className="absolute z-30 top-[calc(100%+4px)] right-0 w-[300px] card backdrop-fade" style={{ boxShadow: "var(--shadow-md)" }}>
          <div className="px-3 pt-3 pb-2 text-[10.5px] uppercase tracking-wider font-semibold" style={{ color: "var(--muted)" }}>Saved views</div>
          <div className="px-1.5 max-h-64 overflow-y-auto scrollbar-thin">
            {views.length === 0 && (
              <div className="px-2 py-4 text-center text-[12px]" style={{ color: "var(--subtle)" }}>
                No saved views yet
              </div>
            )}
            {views.map((v) => {
              const isActive = v.id === activeViewId;
              return (
                <div key={v.id} className="flex items-center group">
                  <button
                    onClick={() => apply(v)}
                    className="flex-1 text-left px-2 py-1.5 rounded text-[13px] hover:bg-[var(--surface-2)]"
                    style={{ color: isActive ? "var(--primary)" : "var(--ink)", fontWeight: isActive ? 600 : 500 }}
                  >
                    <Icon name={isActive ? "starFill" : "star"} size={12} className="inline mr-1.5" style={{ color: isActive ? "var(--primary)" : "var(--subtle)" }} />
                    {v.name}
                  </button>
                  <button onClick={() => remove(v)} className="opacity-0 group-hover:opacity-100 h-7 w-7 mr-1 inline-flex items-center justify-center rounded hover:bg-[var(--danger-bg)]" style={{ color: "var(--danger)" }} title="Delete view">
                    <Icon name="trash" size={12} />
                  </button>
                </div>
              );
            })}
          </div>
          <div className="border-t mt-1 p-2.5" style={{ borderColor: "var(--border)" }}>
            <div className="text-[10.5px] uppercase tracking-wider font-semibold mb-1.5" style={{ color: "var(--muted)" }}>Save current as</div>
            <div className="flex items-center gap-1.5">
              <TextInput value={name} onChange={setName} placeholder="View name" onKeyDown={(e) => e.key === "Enter" && save()} />
              <Btn variant="primary" size="sm" onClick={save} disabled={!name.trim() || saving}>
                <Icon name="save" size={12} />
              </Btn>
            </div>
            <div className="text-[11px] mt-1.5" style={{ color: "var(--subtle)" }}>
              Captures columns, sort & filter for this grid.
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ViewsMenu });