// Theme + Router for Option A

const THEME_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#0A3A5C",
  "accent": "#E85D4A",
  "radius": 10,
  "heroStyle": "split",
  "density": "comfy"
}/*EDITMODE-END*/;

const AT = {
  bg: '#ffffff',
  surface: '#F7FAFC',
  surfaceAlt: '#EFF4F9',
  border: '#E2EAF1',
  borderStrong: '#CBD6E0',
  text: '#0A1E2C',
  textMuted: '#526574',
  textSubtle: '#7C8A97',
  navyDark: '#062940',
  blue: '#1E73BE',
  blueLight: '#E8F1FB',
  coralLight: '#FDE9E5',
  mint: '#E6F4EC',
  mintText: '#0E6B3F',
  yellow: '#FFF4D6',
  shadow: '0 1px 2px rgba(10,30,60,.04), 0 4px 12px rgba(10,30,60,.04)',
  shadowHover: '0 2px 6px rgba(10,30,60,.06), 0 12px 32px rgba(10,30,60,.08)',
  font: "'Be Vietnam Pro', 'Inter', system-ui, sans-serif",
  numFont: "'Inter', system-ui, sans-serif",
};

// Theme context so Tweaks can override
const ThemeContext = React.createContext(null);

function ThemeProvider({ children }) {
  const [theme, setTheme] = React.useState(() => {
    try { return { ...THEME_DEFAULTS, ...(JSON.parse(localStorage.getItem('knk_theme') || '{}')) }; }
    catch { return THEME_DEFAULTS; }
  });
  const updateTheme = (patch) => {
    setTheme(t => {
      const next = { ...t, ...patch };
      try { localStorage.setItem('knk_theme', JSON.stringify(next)); } catch {}
      return next;
    });
  };
  const full = { ...AT, primary: theme.primary, primaryDark: shade(theme.primary, -20), coral: theme.accent, coralDark: shade(theme.accent, -15), radius: theme.radius, heroStyle: theme.heroStyle, density: theme.density };
  return <ThemeContext.Provider value={{ t: full, theme, updateTheme }}>{children}</ThemeContext.Provider>;
}

function useTheme() { return React.useContext(ThemeContext); }

function shade(hex, amt) {
  const c = hex.replace('#', '');
  const num = parseInt(c, 16);
  let r = (num >> 16) + amt, g = ((num >> 8) & 0xff) + amt, b = (num & 0xff) + amt;
  r = Math.min(255, Math.max(0, r)); g = Math.min(255, Math.max(0, g)); b = Math.min(255, Math.max(0, b));
  return '#' + (r << 16 | g << 8 | b).toString(16).padStart(6, '0');
}

// Simple hash router
const RouterContext = React.createContext(null);
function RouterProvider({ children }) {
  const [route, setRoute] = React.useState(() => parseHash());
  React.useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const navigate = (path) => {
    window.location.hash = path;
    window.scrollTo(0, 0);
  };
  return <RouterContext.Provider value={{ route, navigate }}>{children}</RouterContext.Provider>;
}
function parseHash() {
  const h = window.location.hash.slice(1) || '/';
  const [path, query = ''] = h.split('?');
  const params = {};
  query.split('&').filter(Boolean).forEach(p => {
    const [k, v] = p.split('=');
    params[k] = decodeURIComponent(v || '');
  });
  return { path, params };
}
function useRouter() { return React.useContext(RouterContext); }

// Styled button helpers that read theme
function useStyles() {
  const { t } = useTheme();
  return {
    frame: { background: t.surface, minHeight: '100vh' },
    btnPrimary: { background: t.primary, color: '#fff', border: 'none', padding: '10px 18px', borderRadius: t.radius, fontSize: 14, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 },
    btnCoral: { background: t.coral, color: '#fff', border: 'none', padding: '10px 18px', borderRadius: t.radius, fontSize: 14, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 },
    btnGhost: { background: 'transparent', color: t.primary, border: `1px solid ${t.border}`, padding: '10px 18px', borderRadius: t.radius, fontSize: 14, fontWeight: 500, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 },
    chip: { display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 9px', borderRadius: 12, fontSize: 11, fontWeight: 500, background: t.blueLight, color: t.blue },
    card: { background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 2 },
  };
}

Object.assign(window, { AT, ThemeProvider, useTheme, RouterProvider, useRouter, useStyles, THEME_DEFAULTS });