import { useState, useCallback, useEffect } from 'react'
import { 
  RecaptchaState, 
  defaultRecaptchaState,
  CaptchaProvider,
  RecaptchaVersion,
  RecaptchaV2Mode,
  RecaptchaV3Display,
  RecaptchaLocation,
} from '../config'

export function useRecaptchaSettings() {
  const [settings, setSettings] = useState<RecaptchaState>(defaultRecaptchaState)
  const [originalSettings, setOriginalSettings] = useState<RecaptchaState>(defaultRecaptchaState)
  const [isSaving, setIsSaving] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [hasChanges, setHasChanges] = useState(false)

  // Load settings from API
  useEffect(() => {
    const loadSettings = async () => {
      try {
        const apiUrl = window.swiftCommerceData?.apiUrl || '/wp-json/swift-commerce/v1'
        const response = await fetch(`${apiUrl}/recaptcha/settings`, {
          headers: {
            'X-WP-Nonce': window.swiftCommerceData?.restNonce || '',
          },
        })
        
        if (response.ok) {
          const result = await response.json()
          if (result.success && result.data) {
            const apiData = result.data
            const mappedSettings: RecaptchaState = {
              enabled: apiData.enabled || false,
              provider: apiData.provider || (apiData.enabled || apiData.v2SiteKey || apiData.v3SiteKey || apiData.siteKey ? 'google-recaptcha' : ''),
              version: apiData.version || 'v2',
              // V2 specific - try new keys first, fall back to legacy
              v2SiteKey: apiData.v2SiteKey || (apiData.version === 'v2' ? apiData.siteKey : '') || '',
              v2SecretKey: apiData.v2SecretKey || (apiData.version === 'v2' ? apiData.secretKey : '') || '',
              v2Mode: apiData.v2Mode || 'checkbox',
              // V3 specific - try new keys first, fall back to legacy
              v3SiteKey: apiData.v3SiteKey || (apiData.version === 'v3' ? apiData.siteKey : '') || '',
              v3SecretKey: apiData.v3SecretKey || (apiData.version === 'v3' ? apiData.secretKey : '') || '',
              v3Threshold: apiData.v3Threshold || 0.5,
              v3Display: apiData.v3Display || 'badge',
              // Legacy keys (synced based on version)
              siteKey: apiData.siteKey || '',
              secretKey: apiData.secretKey || '',
              // Locations
              locations: apiData.locations || defaultRecaptchaState.locations,
              // Pro settings
              theme: apiData.theme || 'light',
              size: apiData.size || 'normal',
              ipWhitelist: apiData.ipWhitelist || '',
              bypassRoles: apiData.bypassRoles || [],
              // Pro provider keys
              turnstileSiteKey: apiData.turnstileSiteKey || '',
              turnstileSecretKey: apiData.turnstileSecretKey || '',
              turnstileAppearance: apiData.turnstileAppearance || 'always',
              hcaptchaSiteKey: apiData.hcaptchaSiteKey || '',
              hcaptchaSecretKey: apiData.hcaptchaSecretKey || '',
              hcaptchaMode: apiData.hcaptchaMode || 'visible',
            }
            setSettings(mappedSettings)
            setOriginalSettings(mappedSettings)
          }
        }
      } catch (error) {
        console.error('Failed to load reCAPTCHA settings:', error)
      } finally {
        setIsLoading(false)
      }
    }

    loadSettings()
  }, [])

  // Check for changes
  useEffect(() => {
    setHasChanges(JSON.stringify(settings) !== JSON.stringify(originalSettings))
  }, [settings, originalSettings])

  const updateSettings = useCallback(<K extends keyof RecaptchaState>(
    key: K,
    value: RecaptchaState[K]
  ) => {
    setSettings(prev => ({ ...prev, [key]: value }))
  }, [])

  const toggleLocation = useCallback((locationId: RecaptchaLocation) => {
    setSettings(prev => ({
      ...prev,
      locations: {
        ...prev.locations,
        [locationId]: !prev.locations[locationId],
      },
    }))
  }, [])

  const toggleBypassRole = useCallback((role: string) => {
    setSettings(prev => ({
      ...prev,
      bypassRoles: prev.bypassRoles.includes(role)
        ? prev.bypassRoles.filter(r => r !== role)
        : [...prev.bypassRoles, role],
    }))
  }, [])

  const setProvider = useCallback((provider: CaptchaProvider) => {
    updateSettings('provider', provider)
  }, [updateSettings])

  const setVersion = useCallback((version: RecaptchaVersion) => {
    updateSettings('version', version)
  }, [updateSettings])

  const setV2Mode = useCallback((mode: RecaptchaV2Mode) => {
    updateSettings('v2Mode', mode)
  }, [updateSettings])

  const setV3Display = useCallback((display: RecaptchaV3Display) => {
    updateSettings('v3Display', display)
  }, [updateSettings])

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

  const saveSettings = useCallback(async () => {
    setIsSaving(true)
    try {
      const apiUrl = window.swiftCommerceData?.apiUrl || '/wp-json/swift-commerce/v1'
      
      // Sync legacy keys based on selected version for backend compatibility
      const settingsToSave = {
        ...settings,
        // Set legacy keys based on selected version
        siteKey: settings.version === 'v2' ? settings.v2SiteKey : settings.v3SiteKey,
        secretKey: settings.version === 'v2' ? settings.v2SecretKey : settings.v3SecretKey,
      }
      
      const response = await fetch(`${apiUrl}/recaptcha/settings`, {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'X-WP-Nonce': window.swiftCommerceData?.restNonce || '',
        },
        body: JSON.stringify(settingsToSave),
      })
      
      if (response.ok) {
        const result = await response.json()
        if (result.success) {
          setOriginalSettings(settingsToSave)
          setSettings(settingsToSave)
          setHasChanges(false)
          return { success: true, message: result.message }
        }
      }
      
      return { success: false, error: 'Failed to save settings' }
    } catch (error) {
      console.error('Failed to save settings:', error)
      return { success: false, error }
    } finally {
      setIsSaving(false)
    }
  }, [settings])

  return {
    settings,
    isSaving,
    isLoading,
    hasChanges,
    updateSettings,
    toggleLocation,
    toggleBypassRole,
    setProvider,
    setVersion,
    setV2Mode,
    setV3Display,
    saveSettings,
    resetToDefaults,
  }
}