// store/AppStore.tsx
import React, { createContext, useContext, useState, ReactNode } from "react";

type Theme = "light" | "dark";

type AppState = {
  theme: Theme;
  user: { id: string; name: string } | null;
  isSidebarOpen: boolean;
};

type AppStore = AppState & {
  setTheme: (theme: Theme) => void;
  setUser: (user: AppState["user"]) => void;
  toggleSidebar: () => void;
};

const AppStoreContext = createContext<AppStore | null>(null);

export function AppStoreProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
  const [user, setUser] = useState<AppState["user"]>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);

  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);

  const value: AppStore = {
    theme,
    user,
    isSidebarOpen,
    setTheme,
    setUser,
    toggleSidebar,
  };

  return (
    <AppStoreContext.Provider value={value}>
      {children}
    </AppStoreContext.Provider>
  );
}

export function useAppStore() {
  const ctx = useContext(AppStoreContext);
  if (!ctx) {
    throw new Error("useAppStore must be used within AppStoreProvider");
  }
  return ctx;
}

// App.tsx – wrap your app once
/*
import { AppStoreProvider } from "./store/AppStore";

export default function AppRoot() {
  return (
    <AppStoreProvider>
      <App />
    </AppStoreProvider>
  );
}
*/

// Any component can now read/update global state

// components/Header.tsx
import { useAppStore } from "../store/AppStore";

export function Header() {
  const { user, theme, setTheme, toggleSidebar } = useAppStore();

  return (
    <header className="header">
      <button onClick={toggleSidebar}>☰</button>
      <h1>Dashboard</h1>
      <div className="spacer" />
      <button
        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      >
        Theme: {theme}
      </button>
      {user ? (
        <span className="user">Hi, {user.name}</span>
      ) : (
        <button>Sign in</button>
      )}
    </header>
  );
}