import { useState, useEffect } from '@wordpress/element'; import api from '../utils/api'; const { __ } = wp.i18n; const providerIcons = { openai: ( ), google: ( ), grok: ( ), deepseek: ( ), }; export default function Settings() { const [settings, setSettings] = useState({ openai_api_key: '', google_api_key: '', grok_api_key: '', deepseek_api_key: '', default_post_status: 'publish', default_post_type: 'post', log_retention: 90, }); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [notification, setNotification] = useState(null); const [validating, setValidating] = useState({}); useEffect(() => { loadSettings(); }, []); const loadSettings = async () => { try { const data = await api.getSettings(); setSettings((prev) => ({ ...prev, ...data })); } catch (err) { setNotification({ message: err.message, type: 'error' }); } finally { setLoading(false); } }; const handleSave = async () => { setSaving(true); setNotification(null); try { await api.saveSettings(settings); setNotification({ message: AIBulkPost.i18n.saved, type: 'success', }); } catch (err) { setNotification({ message: err.message, type: 'error' }); } finally { setSaving(false); } }; const handleValidate = async (provider) => { const keyField = `${provider}_api_key`; const apiKey = settings[keyField]; if (!apiKey || apiKey.startsWith('***')) { setNotification({ message: __('Please enter a new API key first.', 'ai-bulk-post'), type: 'error', }); return; } setValidating((prev) => ({ ...prev, [provider]: true })); try { const result = await api.validateKey(provider, apiKey); if (result.valid) { const toSave = { ...settings }; Object.keys(toSave).forEach((key) => { if (typeof toSave[key] === 'string' && toSave[key].startsWith('***')) { delete toSave[key]; } }); await api.saveSettings(toSave); setNotification({ message: __('API key is valid and saved.', 'ai-bulk-post'), type: 'success', }); } else { setNotification({ message: __('API key is invalid.', 'ai-bulk-post'), type: 'error', }); } } catch (err) { setNotification({ message: err.message, type: 'error' }); } finally { setValidating((prev) => ({ ...prev, [provider]: false })); } }; const providers = [ { id: 'openai', name: 'OpenAI', keyField: 'openai_api_key', url: 'https://platform.openai.com/api-keys', }, { id: 'google', name: 'Google Gemini', keyField: 'google_api_key', url: 'https://aistudio.google.com/app/apikey', }, { id: 'grok', name: 'Grok (xAI)', keyField: 'grok_api_key', url: 'https://console.x.ai', }, { id: 'deepseek', name: 'DeepSeek', keyField: 'deepseek_api_key', url: 'https://platform.deepseek.com/api_keys', }, ]; if (loading) { return (
{__('Loading settings...', 'ai-bulk-post')}
); } return (
{notification && (
{notification.message}
)}

{__('Settings', 'ai-bulk-post')}

{providers.map((provider) => (

{providerIcons[provider.id]} {provider.name}

setSettings((prev) => ({ ...prev, [provider.keyField]: e.target.value, })) } className="regular-text" placeholder={__('Enter API key', 'ai-bulk-post')} />

{__('Get your key at', 'ai-bulk-post')}{' '} {provider.url}

))}

{__('General', 'ai-bulk-post')}

setSettings((prev) => ({ ...prev, log_retention: parseInt(e.target.value, 10), })) } className="small-text" />
); }