'use client'
import { useState, useEffect } from 'react'

export interface CmsItem {
  id: string
  collection: string
  title: string | null
  data: Record<string, unknown>
  status: string
  sortOrder: number
  scheduledAt: string | null
  expiresAt: string | null
  publishedAt: string | null
}

export function useVulaContent(collection: string) {
  const [items, setItems] = useState<CmsItem[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let controller = new AbortController()

    const fetchContent = () => {
      controller = new AbortController()
      fetch(`/api/content/${collection}`, { signal: controller.signal })
        .then(r => r.json())
        .then((data: { items?: CmsItem[] }) => {
          setItems(data.items ?? [])
          setLoading(false)
        })
        .catch(err => { if (err?.name !== 'AbortError') setLoading(false) })
    }

    fetchContent()
    const interval = setInterval(fetchContent, 30000)
    const onVisible = () => { if (document.visibilityState === 'visible') fetchContent() }
    document.addEventListener('visibilitychange', onVisible)

    return () => {
      clearInterval(interval)
      controller.abort()
      document.removeEventListener('visibilitychange', onVisible)
    }
  }, [collection])

  return { items, loading }
}