import { writable } from 'svelte/store';
import type { SidebarState, Theme } from '$lib/types/layout';

const SIDEBAR_STORAGE_KEY = 'headroom_sidebar_state';
const THEME_STORAGE_KEY = 'headroom_theme';

const DEFAULT_SIDEBAR_STATE: SidebarState = 'expanded';
const DEFAULT_THEME: Theme = 'light';

function isSidebarState(value: string | null): value is SidebarState {
  return value === 'expanded' || value === 'collapsed' || value === 'hidden';
}

function isTheme(value: string | null): value is Theme {
  return value === 'light' || value === 'dark';
}

function getDefaultSidebarForViewport(): SidebarState {
  if (typeof window === 'undefined') {
    return DEFAULT_SIDEBAR_STATE;
  }

  if (window.innerWidth < 768) {
    return 'hidden';
  }

  if (window.innerWidth < 1280) {
    return 'collapsed';
  }

  return 'expanded';
}

function getInitialSidebarState(): SidebarState {
  if (typeof localStorage === 'undefined') return getDefaultSidebarForViewport();

  const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY);
  if (isSidebarState(stored) && stored !== 'hidden') {
    return stored;
  }

  return getDefaultSidebarForViewport();
}

function getInitialTheme(): Theme {
	if (typeof localStorage === 'undefined') return DEFAULT_THEME;

	const stored = localStorage.getItem(THEME_STORAGE_KEY);
	if (isTheme(stored)) return stored;

	if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
		return DEFAULT_THEME;
	}

	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

	return prefersDark ? 'dark' : DEFAULT_THEME;
}

function applyTheme(value: Theme): void {
  if (typeof document === 'undefined') return;
  document.documentElement.setAttribute('data-theme', value);
}

const initialSidebarState = getInitialSidebarState();
const sidebarStateWritable = writable<SidebarState>(initialSidebarState);
const themeWritable = writable<Theme>(getInitialTheme());

function syncSidebarAttribute(value: SidebarState): void {
  if (typeof document === 'undefined') return;
  document.documentElement.setAttribute('data-sidebar', value);
}

syncSidebarAttribute(initialSidebarState);

if (typeof localStorage !== 'undefined') {
  sidebarStateWritable.subscribe((value) => {
    localStorage.setItem(SIDEBAR_STORAGE_KEY, value);
    syncSidebarAttribute(value);
  });

  themeWritable.subscribe((value) => {
    localStorage.setItem(THEME_STORAGE_KEY, value);
    applyTheme(value);
  });
}

export const sidebarState = {
  subscribe: sidebarStateWritable.subscribe
};

export const theme = {
  subscribe: themeWritable.subscribe
};

export function toggleSidebar(): void {
  sidebarStateWritable.update((current) => {
    if (current === 'expanded') return 'collapsed';
    if (current === 'collapsed') return 'expanded';
    return 'expanded';
  });
}

export function setSidebarState(state: SidebarState): void {
  sidebarStateWritable.set(state);
}

export function toggleTheme(): void {
  themeWritable.update((current) => (current === 'light' ? 'dark' : 'light'));
}

export function setTheme(newTheme: Theme): void {
  themeWritable.set(newTheme);
}
