"use client";

import { useCallback, useSyncExternalStore } from "react";

// ──────────────────────────────────────────────────────────────────────────
// Umschaltung zwischen Kachel- und Listenansicht.
// Die Wahl wird je Modul UND je Person im Browser gemerkt.
//
// Gelesen wird über `useSyncExternalStore`: Der Server liefert immer die
// Standardansicht, der Browser reicht den gespeicherten Wert direkt nach dem
// Einhängen nach. Ohne das entsteht ein Hydrations-Konflikt, weil der Server
// den gespeicherten Wert nicht kennen kann.
// ──────────────────────────────────────────────────────────────────────────

export type ViewMode = "grid" | "list";

const DEFAULT: ViewMode = "grid";

const listeners = new Set<() => void>();
function emit() {
  for (const l of listeners) l();
}
function subscribe(cb: () => void): () => void {
  listeners.add(cb);
  return () => {
    listeners.delete(cb);
  };
}

const storageKey = (userId: string, module: string) => `avaria:view:${userId}:${module}`;

function read(key: string): ViewMode {
  try {
    return localStorage.getItem(key) === "list" ? "list" : DEFAULT;
  } catch {
    return DEFAULT;
  }
}

/**
 * @param userId  damit mehrere Personen am selben Rechner eigene Vorlieben haben
 * @param module  z. B. "vault" oder "cloud"
 */
export function useViewMode(userId: string, module: string): [ViewMode, (v: ViewMode) => void] {
  const key = storageKey(userId, module);

  const mode = useSyncExternalStore(
    subscribe,
    () => read(key),
    () => DEFAULT,
  );

  const change = useCallback(
    (v: ViewMode) => {
      try {
        localStorage.setItem(key, v);
      } catch {
        /* ignorieren */
      }
      emit();
    },
    [key],
  );

  return [mode, change];
}

/** Farbpalette für automatisch eingefärbte Kategorien. */
const CATEGORY_COLORS = [
  "#9ed7ff",
  "#ff9fd7",
  "#7ee787",
  "#c8bcff",
  "#ffc36b",
  "#38bdf8",
  "#a0f0e0",
  "#ff7a9c",
  "#bec6ff",
  "#f7c948",
];

/**
 * Feste Farbe je Kategoriename — gleicher Name ergibt immer dieselbe Farbe,
 * ohne dass jemand sie pflegen muss.
 */
export function categoryColor(name: string | null): string {
  if (!name) return "#8aa0c8";
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
  }
  return CATEGORY_COLORS[hash % CATEGORY_COLORS.length];
}