import { useCallback, useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'auto';
const STORAGE_KEY = 'persona_theme_preference';

function getSystemTheme(): 'light' | 'dark' {
  if (typeof window === 'undefined' || !window.matchMedia) return 'light';
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

export function useColorScheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEY);
      return (stored as Theme) || 'auto';
    } catch {
      return 'auto';
    }
  });

  const apply = useCallback((t: Theme) => {
    const root = document.documentElement;
    const effective = t === 'auto' ? getSystemTheme() : t;
    if (effective === 'dark') root.classList.add('dark');
    else root.classList.remove('dark');
  }, []);

  useEffect(() => {
    // Apply on mount and whenever theme changes
    apply(theme);

    // Listen to system changes when in 'auto' mode
    let mql: MediaQueryList | null = null;
    const onChange = () => {
      if (theme === 'auto') apply('auto');
    };

    if (typeof window !== 'undefined' && window.matchMedia) {
      mql = window.matchMedia('(prefers-color-scheme: dark)');
      if (mql.addEventListener) mql.addEventListener('change', onChange);
      else mql.addListener(onChange as any);
    }

    return () => {
      if (!mql) return;
      if (mql.removeEventListener) mql.removeEventListener('change', onChange);
      else mql.removeListener(onChange as any);
    };
  }, [theme, apply]);

  const setThemeAndPersist = useCallback((t: Theme) => {
    try {
      localStorage.setItem(STORAGE_KEY, t);
    } catch {}
    setTheme(t);
  }, []);

  const toggle = useCallback(() => {
    setTheme((prev) => {
      const next = prev === 'dark' ? 'light' : prev === 'light' ? 'auto' : 'dark';
      try {
        localStorage.setItem(STORAGE_KEY, next);
      } catch {}
      return next;
    });
  }, []);

  return { theme, setTheme: setThemeAndPersist, toggle } as const;
}