import { createContext, useContext, useEffect, useState, useCallback } from 'react'
import type { List } from '../types'
import { fetchLists } from '../api'

interface ListsCtx {
  lists: List[]
  loading: boolean
  reload: () => Promise<void>
}

const Ctx = createContext<ListsCtx | null>(null)

export function useLists() {
  const ctx = useContext(Ctx)
  if (!ctx) throw new Error('useLists must be used inside ListsProvider')
  return ctx
}

export function ListsProvider({ children }: { children: React.ReactNode }) {
  const [lists, setLists] = useState<List[]>([])
  const [loading, setLoading] = useState(true)

  const reload = useCallback(async () => {
    const data = await fetchLists().catch(() => [])
    setLists(data)
    setLoading(false)
  }, [])

  useEffect(() => { reload() }, [reload])

  return <Ctx.Provider value={{ lists, loading, reload }}>{children}</Ctx.Provider>
}