Enhance Site Settings with WordPress Integration

- Updated SiteSettings component to include a new 'Integrations' tab for managing WordPress integration.
- Added functionality to load, save, and sync WordPress integration settings.
- Integrated WordPressIntegrationCard and WordPressIntegrationModal for user interaction.
- Implemented URL parameter handling for tab navigation.

frontend/src/pages/Sites/Settings.tsx

@@ -4,8 +4,8 @@
  * Features: SEO (meta tags, Open Graph, schema.org)
  */
 import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { SettingsIcon, SearchIcon, Share2Icon, CodeIcon } from 'lucide-react';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { SettingsIcon, SearchIcon, Share2Icon, CodeIcon, PlugIcon } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
@@ -15,16 +15,25 @@ import Checkbox from '../../components/form/input/Checkbox';
 import TextArea from '../../components/form/input/TextArea';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchAPI } from '../../services/api';
+import WordPressIntegrationCard from '../../components/sites/WordPressIntegrationCard';
+import WordPressIntegrationModal, { WordPressIntegrationFormData } from '../../components/sites/WordPressIntegrationModal';
+import { integrationApi, SiteIntegration } from '../../services/integration.api';
 
 export default function SiteSettings() {
   const { siteId } = useParams<{ siteId: string }>();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const toast = useToast();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [site, setSite] = useState<any>(null);
+  const [wordPressIntegration, setWordPressIntegration] = useState<SiteIntegration | null>(null);
+  const [integrationLoading, setIntegrationLoading] = useState(false);
+  const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
 
-  const [activeTab, setActiveTab] = useState<'general' | 'seo' | 'og' | 'schema'>('general');
+  // Check for tab parameter in URL
+  const initialTab = (searchParams.get('tab') as 'general' | 'seo' | 'og' | 'schema' | 'integrations') || 'general';
+  const [activeTab, setActiveTab] = useState<'general' | 'seo' | 'og' | 'schema' | 'integrations'>(initialTab);
   const [formData, setFormData] = useState({
     name: '',
     slug: '',
@@ -51,9 +60,18 @@ export default function SiteSettings() {
   useEffect(() => {
     if (siteId) {
       loadSite();
+      loadIntegrations();
     }
   }, [siteId]);
 
+  useEffect(() => {
+    // Update tab if URL parameter changes
+    const tab = searchParams.get('tab');
+    if (tab && ['general', 'seo', 'og', 'schema', 'integrations'].includes(tab)) {
+      setActiveTab(tab as typeof activeTab);
+    }
+  }, [searchParams]);
+
   const loadSite = async () => {
     try {
       setLoading(true);
@@ -91,6 +109,40 @@ export default function SiteSettings() {
     }
   };
 
+  const loadIntegrations = async () => {
+    if (!siteId) return;
+    try {
+      setIntegrationLoading(true);
+      const integration = await integrationApi.getWordPressIntegration(Number(siteId));
+      setWordPressIntegration(integration);
+    } catch (error: any) {
+      // Integration might not exist, that's okay
+      setWordPressIntegration(null);
+    } finally {
+      setIntegrationLoading(false);
+    }
+  };
+
+  const handleSaveIntegration = async (data: WordPressIntegrationFormData) => {
+    if (!siteId) return;
+    await integrationApi.saveWordPressIntegration(Number(siteId), data);
+    await loadIntegrations();
+  };
+
+  const handleSyncIntegration = async () => {
+    if (!wordPressIntegration || !siteId) return;
+    try {
+      setIntegrationLoading(true);
+      await integrationApi.syncIntegration(wordPressIntegration.id);
+      toast.success('Content synced successfully');
+      await loadIntegrations();
+    } catch (error: any) {
+      toast.error(`Failed to sync: ${error.message}`);
+    } finally {
+      setIntegrationLoading(false);
+    }
+  };
+
   const handleSave = async () => {
     try {
       setSaving(true);
@@ -219,6 +271,18 @@ export default function SiteSettings() {
             <CodeIcon className="w-4 h-4 inline mr-2" />
             Schema.org
           </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('integrations')}
+            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
+              activeTab === 'integrations'
+                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            }`}
+          >
+            <PlugIcon className="w-4 h-4 inline mr-2" />
+            Integrations
+          </button>
         </div>
       </div>
 
@@ -475,12 +539,49 @@ export default function SiteSettings() {
           </Card>
         )}
 
-        <div className="flex justify-end">
-          <Button onClick={handleSave} variant="primary" disabled={saving}>
-            {saving ? 'Saving...' : 'Save Settings'}
-          </Button>
-        </div>
+        {/* Integrations Tab */}
+        {activeTab === 'integrations' && (
+          <div className="space-y-6">
+            <WordPressIntegrationCard
+              integration={wordPressIntegration}
+              onConnect={() => setIsIntegrationModalOpen(true)}
+              onManage={() => setIsIntegrationModalOpen(true)}
+              onSync={handleSyncIntegration}
+              loading={integrationLoading}
+            />
+          </div>
+        )}
+
+        {/* Save Button */}
+        {activeTab !== 'integrations' && (
+          <div className="flex justify-end">
+            <Button onClick={handleSave} variant="primary" disabled={saving}>
+              {saving ? 'Saving...' : 'Save Settings'}
+            </Button>
+          </div>
+        )}
       </div>
+
+      {/* WordPress Integration Modal */}
+      {siteId && (
+        <WordPressIntegrationModal
+          isOpen={isIntegrationModalOpen}
+          onClose={() => setIsIntegrationModalOpen(false)}
+          onSubmit={handleSaveIntegration}
+          siteId={Number(siteId)}
+          initialData={
+            wordPressIntegration
+              ? {
+                  url: wordPressIntegration.config_json?.url || '',
+                  username: wordPressIntegration.config_json?.username || '',
+                  app_password: '', // Never show password
+                  is_active: wordPressIntegration.is_active,
+                  sync_enabled: wordPressIntegration.sync_enabled,
+                }
+              : undefined
+          }
+        />
+      )}
     </div>
   );
 }