import React, { createContext, useContext, useState, useEffect, useCallback } from "react";

interface AccessibilityState {
  darkMode: boolean;
  dyslexiaFont: boolean;
  highContrast: boolean;
  largeText: boolean;
  toggleDark: () => void;
  toggleDyslexia: () => void;
  toggleHighContrast: () => void;
  toggleLargeText: () => void;
}

const AccessibilityContext = createContext<AccessibilityState | null>(null);

function load(key: string, fallback: boolean): boolean {
  try {
    const v = localStorage.getItem(key);
    return v !== null ? v === "true" : fallback;
  } catch {
    return fallback;
  }
}

function save(key: string, value: boolean) {
  try { localStorage.setItem(key, String(value)); } catch { /* noop */ }
}

export function AccessibilityProvider({ children }: { children: React.ReactNode }) {
  const [darkMode, setDarkMode] = useState(() => load("a11y-dark",
    window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
  ));
  const [dyslexiaFont, setDyslexiaFont] = useState(() => load("a11y-dyslexia", false));
  const [highContrast, setHighContrast] = useState(() => load("a11y-contrast", false));
  const [largeText, setLargeText] = useState(() => load("a11y-large", false));

  useEffect(() => {
    const html = document.documentElement;
    html.classList.toggle("dark", darkMode);
    html.classList.toggle("dyslexia", dyslexiaFont);
    html.classList.toggle("high-contrast", highContrast);
    html.classList.toggle("large-text", largeText);
  }, [darkMode, dyslexiaFont, highContrast, largeText]);

  const toggleDark = useCallback(() => setDarkMode(v => { save("a11y-dark", !v); return !v; }), []);
  const toggleDyslexia = useCallback(() => setDyslexiaFont(v => { save("a11y-dyslexia", !v); return !v; }), []);
  const toggleHighContrast = useCallback(() => setHighContrast(v => { save("a11y-contrast", !v); return !v; }), []);
  const toggleLargeText = useCallback(() => setLargeText(v => { save("a11y-large", !v); return !v; }), []);

  return (
    <AccessibilityContext.Provider value={{
      darkMode, dyslexiaFont, highContrast, largeText,
      toggleDark, toggleDyslexia, toggleHighContrast, toggleLargeText,
    }}>
      {children}
    </AccessibilityContext.Provider>
  );
}

export function useAccessibility() {
  const ctx = useContext(AccessibilityContext);
  if (!ctx) throw new Error("useAccessibility must be used inside AccessibilityProvider");
  return ctx;
}