Dashboard/features/dashboard/context/WidgetContext.tsx

"use client";

import React from "react";
import { erstellePersistentenStore } from "./persistenterStore";

/**
 * Sichtbarkeit einzelner Widgets.
 *
 * Jede Karte hat eine stabile ID; über das ⋯-Menü lässt sie sich ausblenden.
 * Ausgeblendete Karten sammelt die Filterleiste und macht sie einzeln oder
 * gesammelt wieder sichtbar. Der Zustand überlebt einen Reload.
 */

interface WidgetState {
  versteckt: string[];
  /** Titel für die "wieder einblenden"-Liste. */
  titel: Record<string, string>;
}

const STANDARD: WidgetState = { versteckt: [], titel: {} };

const store = erstellePersistentenStore<WidgetState>("hivegrid.analytics.widgets.v1", STANDARD);

interface WidgetContextValue extends WidgetState {
  istSichtbar: (id: string) => boolean;
  verstecke: (id: string, titel: string) => void;
  zeige: (id: string) => void;
  zeigeAlle: () => void;
}

const WidgetContext = React.createContext<WidgetContextValue | null>(null);

export function WidgetProvider({ children }: { children: React.ReactNode }) {
  const zustand = React.useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
    store.getServerSnapshot
  );

  const wert = React.useMemo<WidgetContextValue>(
    () => ({
      versteckt: zustand.versteckt,
      titel: zustand.titel,
      istSichtbar: (id) => !zustand.versteckt.includes(id),
      verstecke: (id, kartenTitel) =>
        store.setzen((aktuell) => ({
          versteckt: aktuell.versteckt.includes(id)
            ? aktuell.versteckt
            : [...aktuell.versteckt, id],
          titel: { ...aktuell.titel, [id]: kartenTitel },
        })),
      zeige: (id) =>
        store.setzen((aktuell) => ({
          ...aktuell,
          versteckt: aktuell.versteckt.filter((eintrag) => eintrag !== id),
        })),
      zeigeAlle: () => store.setzen((aktuell) => ({ ...aktuell, versteckt: [] })),
    }),
    [zustand]
  );

  return <WidgetContext.Provider value={wert}>{children}</WidgetContext.Provider>;
}

export function useWidgets(): WidgetContextValue {
  const ctx = React.useContext(WidgetContext);
  if (!ctx) throw new Error("useWidgets muss innerhalb von <WidgetProvider> verwendet werden");
  return ctx;
}