"use client";

import { useState, useEffect, useCallback, useSyncExternalStore } from "react";

// Tipos para las configuraciones
export type ThemeMode = "light" | "dark" | "system";
export type DefaultView = "grid" | "list";

export interface AppSettings {
  // Apariencia
  theme: ThemeMode;
  compactMode: boolean;
  showAnimations: boolean;
  
  // Proyectos
  defaultView: DefaultView;
  showCompletedProjects: boolean;
}

// Valores por defecto
export const DEFAULT_SETTINGS: AppSettings = {
  theme: "system",
  compactMode: false,
  showAnimations: true,
  defaultView: "grid",
  showCompletedProjects: true,
};

// Clave para localStorage
const SETTINGS_KEY = "app-settings";

// Store global para sincronizar entre componentes
let globalSettings: AppSettings = DEFAULT_SETTINGS;
const listeners = new Set<() => void>();

// Notificar a todos los listeners cuando cambian las settings
function emitChange() {
  listeners.forEach((listener) => listener());
}

// Helper para obtener settings de localStorage
function getStoredSettings(): AppSettings {
  if (typeof window === "undefined") return DEFAULT_SETTINGS;
  try {
    const stored = localStorage.getItem(SETTINGS_KEY);
    if (stored) {
      return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
    }
  } catch (error) {
    console.error("Error loading settings:", error);
  }
  return DEFAULT_SETTINGS;
}

// Inicializar settings globales
if (typeof window !== "undefined") {
  globalSettings = getStoredSettings();
}

// Subscribe function para useSyncExternalStore
function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => listeners.delete(listener);
}

// Snapshot function para useSyncExternalStore
function getSnapshot() {
  return globalSettings;
}

// Server snapshot
function getServerSnapshot() {
  return DEFAULT_SETTINGS;
}

/**
 * Hook para gestionar configuraciones de la aplicación
 * Usa useSyncExternalStore para sincronizar entre componentes
 */
export function useAppSettings() {
  const settings = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

  // Actualizar configuraciones
  const updateSettings = useCallback((updates: Partial<AppSettings>) => {
    globalSettings = { ...globalSettings, ...updates };
    try {
      localStorage.setItem(SETTINGS_KEY, JSON.stringify(globalSettings));
    } catch (error) {
      console.error("Error saving settings:", error);
    }
    emitChange();
  }, []);

  // Resetear a valores por defecto
  const resetSettings = useCallback(() => {
    globalSettings = DEFAULT_SETTINGS;
    try {
      localStorage.removeItem(SETTINGS_KEY);
    } catch (error) {
      console.error("Error resetting settings:", error);
    }
    emitChange();
  }, []);

  return { settings, updateSettings, resetSettings, isLoaded: true };
}