// Simple state
const [count, setCount] = useState(0)

// State with initializer function (for expensive computations)
const [data, setData] = useState(() => {
  return computeExpensiveValue()
})

// Updating based on previous state
setCount(prev => prev + 1)

// Object state (always spread to avoid losing properties)
const [form, setForm] = useState({ name: '', email: '' })
setForm(prev => ({ ...prev, name: 'Ahmed' }))

// ✅ Data fetching with cleanup
useEffect(() => {
  const controller = new AbortController()

  async function fetchData() {
    try {
      const res = await fetch('/api/data', { signal: controller.signal })
      const json = await res.json()
      setData(json)
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err)
      }
    }
  }

  fetchData()
  return () => controller.abort()
}, [])

// ✅ Event listener with cleanup
useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth)
  }

  window.addEventListener('resize', handleResize)
  return () => window.removeEventListener('resize', handleResize)
}, [])

// useLocalStorage
function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key)
    return stored ? JSON.parse(stored) : initialValue
  })

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])

  return [value, setValue] as const
}

// useDebounce
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(timer)
  }, [value, delay])

  return debouncedValue
}

type Action =
  | { type: 'ADD_ITEM'; payload: Item }
  | { type: 'REMOVE_ITEM'; payload: string }
  | { type: 'TOGGLE_ITEM'; payload: string }

function cartReducer(state: CartState, action: Action): CartState {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] }
    case 'REMOVE_ITEM':
      return { ...state, items: state.items.filter(i => i.id !== action.payload) }
    case 'TOGGLE_ITEM':
      return {
        ...state,
        items: state.items.map(i =>
          i.id === action.payload ? { ...i, selected: !i.selected } : i
        ),
      }
  }
}

const [state, dispatch] = useReducer(cartReducer, { items: [] })