import { useState, useEffect, useCallback } from 'react'
import { getPromptStyles, getActiveStyle, setActiveStyle } from '../lib/api'

export function usePromptStyle() {
  const [styles, setStyles] = useState([])
  const [activeStyle, setActive] = useState('standard')
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    Promise.all([getPromptStyles(), getActiveStyle()])
      .then(([allStyles, active]) => {
        if (cancelled) return
        setStyles(allStyles)
        setActive(active.style || 'standard')
        setIsLoading(false)
      })
      .catch(() => {
        if (!cancelled) setIsLoading(false)
      })
    return () => { cancelled = true }
  }, [])

  const selectStyle = useCallback(async (styleId) => {
    setActive(styleId)
    try {
      await setActiveStyle(styleId)
    } catch (err) {
      console.error('Failed to set prompt style:', err)
    }
  }, [])

  return { styles, activeStyle, selectStyle, isLoading }
}