/**
 * useGlobalStyles — React hook for loading / saving Global Styles via REST API.
 *
 * Endpoint lives in swift-commerce-pro  →  /swift-commerce/v1/globals/settings
 * Free users never call this (the page shows FeatureUpgradeTab instead).
 */

import { useState, useEffect, useCallback } from 'react'
import { GlobalStyles, defaultGlobalStyles } from '../config'

declare const wp: {
  apiFetch: (options: { path: string; method?: string; data?: unknown }) => Promise<unknown>
}

interface GlobalStylesApiResponse {
  success: boolean
  settings?: GlobalStyles
  message?: string
}

export function useGlobalStyles(active = true) {
  const [settings, setSettings] = useState<GlobalStyles>(defaultGlobalStyles)
  const [originalSettings, setOriginalSettings] = useState<GlobalStyles>(defaultGlobalStyles)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const hasChanges = JSON.stringify(settings) !== JSON.stringify(originalSettings)

  /* ── Fetch ──────────────────────────────────────────────── */

  const fetchSettings = useCallback(async () => {
    try {
      setLoading(true)
      setError(null)

      const response = (await wp.apiFetch({
        path: '/swift-commerce/v1/globals/settings',
      })) as GlobalStylesApiResponse

      if (response.success && response.settings) {
        const merged: GlobalStyles = {
          colors: response.settings.colors?.length
            ? response.settings.colors
            : defaultGlobalStyles.colors,
          typography: response.settings.typography?.length
            ? response.settings.typography
            : defaultGlobalStyles.typography,
        }
        setSettings(merged)
        setOriginalSettings(merged)
      }
    } catch (err) {
      // Endpoint may not exist yet (Pro not active) — gracefully fallback
      setSettings(defaultGlobalStyles)
      setOriginalSettings(defaultGlobalStyles)
      setError(err instanceof Error ? err.message : 'Failed to load global styles')
    } finally {
      setLoading(false)
    }
  }, [])

  /* ── Save ───────────────────────────────────────────────── */

  const saveSettings = useCallback(async (newSettings?: Partial<GlobalStyles>) => {
    try {
      setSaving(true)
      setError(null)

      const payload: GlobalStyles = {
        ...settings,
        ...newSettings,
      }

      const response = (await wp.apiFetch({
        path: '/swift-commerce/v1/globals/settings',
        method: 'POST',
        data: payload,
      })) as GlobalStylesApiResponse

      if (response.success && response.settings) {
        setSettings(response.settings)
        setOriginalSettings(response.settings)

        // Sync to window data so GlobalColorPicker picks up changes immediately
        const windowData = (window as any).swiftCommerceData
        if (windowData) {
          windowData.globalStyles = response.settings
        }

        return true
      }
      return false
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to save global styles')
      return false
    } finally {
      setSaving(false)
    }
  }, [settings])

  /* ── Reset ──────────────────────────────────────────────── */

  const resetToDefaults = useCallback(() => {
    setSettings(defaultGlobalStyles)
  }, [])

  /* ── Auto-fetch when active ─────────────────────────── */

  useEffect(() => {
    if (active) fetchSettings()
  }, [active, fetchSettings])

  return {
    settings,
    loading,
    saving,
    error,
    hasChanges,
    setSettings,
    saveSettings,
    resetToDefaults,
    fetchSettings,
  }
}