"use client"

import { useState, useEffect, useCallback } from "react"
import type { BankingData } from "./types"
import { loadData } from "./store-db"

export function useBankingData() {
  const [data, setData] = useState<BankingData | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  const fetchData = useCallback(async () => {
    try {
      setIsLoading(true)
      setError(null)
      const fetchedData = await loadData()
      setData(fetchedData)
    } catch (err) {
      setError(err instanceof Error ? err : new Error("Failed to load data"))
      console.error("Error loading banking data:", err)
    } finally {
      setIsLoading(false)
    }
  }, [])

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

  const refresh = useCallback(() => {
    fetchData()
  }, [fetchData])

  const update = useCallback((newData: BankingData) => {
    // Optimistic update - the actual save happens in individual operations
    setData(newData)
  }, [])

  return { data, isLoading, error, refresh, update }
}

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(initialValue)

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key)
      if (item) {
        setStoredValue(JSON.parse(item))
      }
    } catch (error) {
      console.error(error)
    }
  }, [key])

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      window.localStorage.setItem(key, JSON.stringify(valueToStore))
    } catch (error) {
      console.error(error)
    }
  }

  return [storedValue, setValue] as const
}