import { useState, useEffect } from 'react'
import yaml from 'js-yaml'
import { Config } from '../types/services'

export function useConfig() {
  const [config, setConfig] = useState<Config>({ services: [], sections: [] })
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const loadConfig = async () => {
      try {
        const response = await fetch('/config.yaml')
        if (!response.ok) {
          throw new Error('Failed to load configuration')
        }
        const text = await response.text()
        console.log('Raw YAML:', text.substring(0, 500) + '...') // Show first 500 chars
        const parsed = yaml.load(text) as Config
        console.log('Parsed config sections:', parsed.sections)
        console.log('First service cardStyle:', parsed.services[0]?.cardStyle)
        setConfig(parsed)
        setError(null)
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load configuration')
        console.error('Error loading configuration:', err)
      }
    }

    // Load config immediately
    loadConfig()

    // Set up polling for config changes in production
    const interval = setInterval(loadConfig, 30000) // Check every 30 seconds

    return () => clearInterval(interval)
  }, [])

  return { config, error }
}