"State Management و Local Storage: متى تستخدم كل واحدة"

// ❌ ده غلط - local storage بدون state
function Modal() {
  const isOpen = localStorage.getItem('isOpen') === 'true'

  const handleToggle = () => {
    localStorage.setItem('isOpen', !isOpen)
  }

  return isOpen ? <div>...</div> : null
}

// ✅ ده صح - state مع local storage
function Modal() {
  const [isOpen, setIsOpen] = useState(() => {
    return localStorage.getItem('isOpen') === 'true'
  })

  const handleToggle = () => {
    const newValue = !isOpen
    setIsOpen(newValue)
    localStorage.setItem('isOpen', newValue)
  }

  return isOpen ? <div>...</div> : null
}

Local State → Lifted State → Context → Global Store → Persistence
     ↓            ↓            ↓           ↓            ↓
  useState    Props pass   Context    Zustand      localStorage

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>
        اضغط هنا
      </button>
      {isOpen && <ul>...</ul>}
    </>
  )
}

function Parent() {
  const [count, setCount] = useState(0)

  return (
    <>
      <Counter count={count} setCount={setCount} />
      <Display count={count} />
    </>
  )
}

const ThemeContext = createContext()

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

function Button() {
  const { theme } = useContext(ThemeContext)
  return <button className={theme}>اضغط</button>
}

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, increment } = useStore()
  return <button onClick={increment}>{count}</button>
}

// ❌ ده غلط
function Component() {
  const data = localStorage.getItem('data')
  return <div>{data}</div>
}

// ✅ ده صح
function Component() {
  const [data, setData] = useState(() => {
    return localStorage.getItem('data') || ''
  })

  const handleChange = (newData) => {
    setData(newData)
    localStorage.setItem('data', newData)
  }

  return <input value={data} onChange={(e) => handleChange(e.target.value)} />
}

// Theme - Context
const ThemeContext = createContext()

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

// Auth & Cart - Zustand
const useStore = create((set) => ({
  user: null,
  cart: [],
  setUser: (user) => set({ user }),
  addToCart: (item) => set((state) => ({
    cart: [...state.cart, item]
  })),
}))

// Persist cart to localStorage
const usePersistedCart = create(
  persist(
    (set) => ({
      cart: [],
      addToCart: (item) => set((state) => ({
        cart: [...state.cart, item]
      })),
    }),
    { name: 'cart-storage' }
  )
)

// Modal - Local state
function ProductModal() {
  const [isOpen, setIsOpen] = useState(false)
  return isOpen ? <Modal onClose={() => setIsOpen(false)} /> : null
}

// Form - Local state
function CheckoutForm() {
  const [email, setEmail] = useState('')
  const [address, setAddress] = useState('')

  return (
    <form>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input value={address} onChange={(e) => setAddress(e.target.value)} />
    </form>
  )
}