WordPressSite.jsx

Go to the documentation of this file.

// =============================================
// WordPressSite.jsx — WordPress Site Detail Page
// =============================================
import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { apiFetch } from "../lib/api";
import MainLayout from "../components/Layout/MainLayout";
import Toast from "../components/Toast";
import "./wordpress-site.css";
 
export default function WordPressSite() {
  const { domain } = useParams();
  const navigate = useNavigate();
  const [site, setSite] = useState(null);
  const [siteDetails, setSiteDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [detailsLoading, setDetailsLoading] = useState(true);
  const [updating, setUpdating] = useState({});
  const [toasts, setToasts] = useState([]);
  const [loginCredentials, setLoginCredentials] = useState(null);
  const [users, setUsers] = useState([]);
  const [usersLoading, setUsersLoading] = useState(true);
  const [bulkUpdateProgress, setBulkUpdateProgress] = useState({ current: 0, total: 0, type: '' });
 
  useEffect(() => {
    if (!domain) return;
    fetchSiteDetails();
    fetchDetailedInfo();
    fetchUsers();
    // Refresh data every 30 seconds
    const interval = setInterval(() => {
      fetchSiteDetails();
      fetchDetailedInfo();
      fetchUsers();
    }, 30000);
    return () => clearInterval(interval);
  }, [domain]);
 
  const fetchSiteDetails = async () => {
    try {
      // First get the site from monitoring data
      const monitoringRes = await apiFetch('/wordpress/monitoring/latest');
      if (monitoringRes.ok) {
        const data = await monitoringRes.json();
        if (data.reports && data.reports.length > 0) {
          const latestReport = data.reports[0];
          const siteData = latestReport.sites.find(s => s.domain === domain);
          
          if (siteData) {
            setSite({
              ...siteData,
              server_ip: latestReport.server_ip,
              server_hostname: latestReport.server_hostname,
              last_checked: latestReport.timestamp,
              last_scan: latestReport.last_scan
            });
          }
        }
      }
    } catch (err) {
      console.error('Error fetching site details:', err);
      showToast('Failed to load site details', 'error');
    } finally {
      setLoading(false);
    }
  };
 
  const fetchDetailedInfo = async () => {
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/details`);
      if (res.ok) {
        const data = await res.json();
        setSiteDetails(data);
      }
    } catch (err) {
      console.error('Error fetching detailed site info:', err);
    } finally {
      setDetailsLoading(false);
    }
  };
 
  const fetchUsers = async () => {
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/users`);
      if (res.ok) {
        const data = await res.json();
        setUsers(data.users || []);
      }
    } catch (err) {
      console.error('Error fetching users:', err);
    } finally {
      setUsersLoading(false);
    }
  };
 
  const showToast = (message, type = 'info', duration = 3000) => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => hideToast(id), duration);
  };
 
  const hideToast = (id) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  };
 
  const copyToClipboard = (text, label) => {
    navigator.clipboard.writeText(text).then(() => {
      showToast(`${label} copied to clipboard`, 'success', 2000);
    }).catch(() => {
      showToast('Failed to copy', 'error');
    });
  };
 
  const handlePluginUpdate = async (plugin) => {
    setUpdating(prev => ({ ...prev, [`plugin-${plugin}`]: true }));
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/plugin/${plugin}/update`, {
        method: 'POST'
      });
      if (res.ok) {
        showToast(`Plugin ${plugin} updated successfully`, 'success');
        fetchSiteDetails();
        fetchDetailedInfo();
      } else {
        const err = await res.json();
        showToast(err.error || 'Update failed', 'error');
      }
    } catch (err) {
      showToast('Update failed', 'error');
    } finally {
      setUpdating(prev => ({ ...prev, [`plugin-${plugin}`]: false }));
    }
  };
 
  const handleThemeUpdate = async (theme) => {
    setUpdating(prev => ({ ...prev, [`theme-${theme}`]: true }));
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/theme/${theme}/update`, {
        method: 'POST'
      });
      if (res.ok) {
        showToast(`Theme ${theme} updated successfully`, 'success');
        fetchSiteDetails();
        fetchDetailedInfo();
      } else {
        const err = await res.json();
        showToast(err.error || 'Update failed', 'error');
      }
    } catch (err) {
      showToast('Update failed', 'error');
    } finally {
      setUpdating(prev => ({ ...prev, [`theme-${theme}`]: false }));
    }
  };
 
  const handleCoreUpdate = async () => {
    setUpdating(prev => ({ ...prev, 'core': true }));
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/core/update`, {
        method: 'POST'
      });
      if (res.ok) {
        showToast('WordPress core updated successfully', 'success');
        fetchSiteDetails();
        fetchDetailedInfo();
      } else {
        const err = await res.json();
        showToast(err.error || 'Update failed', 'error');
      }
    } catch (err) {
      showToast('Update failed', 'error');
    } finally {
      setUpdating(prev => ({ ...prev, 'core': false }));
    }
  };
 
  const handleCleanMalware = async () => {
    if (!confirm('This will remove detected malicious files. Continue?')) return;
    
    setUpdating(prev => ({ ...prev, 'clean': true }));
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/clean`, {
        method: 'POST'
      });
      if (res.ok) {
        const result = await res.json();
        showToast(`Cleanup complete: ${result.files_removed || 0} files removed`, 'success');
        fetchSiteDetails();
        fetchDetailedInfo();
      } else {
        const err = await res.json();
        showToast(err.error || 'Cleanup failed', 'error');
      }
    } catch (err) {
      showToast('Cleanup failed', 'error');
    } finally {
      setUpdating(prev => ({ ...prev, 'clean': false }));
    }
  };
 
  const handleUpdateAllPlugins = async () => {
    const pluginsToUpdate = siteDetails?.plugins?.filter(p => p.update_available === 'available') || [];
    
    if (pluginsToUpdate.length === 0) {
      showToast('No plugin updates available', 'info');
      return;
    }
 
    if (!confirm(`Update ${pluginsToUpdate.length} plugin(s)? This may take several minutes.`)) return;
 
    setBulkUpdateProgress({ current: 0, total: pluginsToUpdate.length, type: 'plugins' });
    setUpdating(prev => ({ ...prev, 'bulk-plugins': true }));
 
    let successCount = 0;
    let failCount = 0;
 
    for (let i = 0; i < pluginsToUpdate.length; i++) {
      const plugin = pluginsToUpdate[i];
      setBulkUpdateProgress({ current: i + 1, total: pluginsToUpdate.length, type: 'plugins' });
      
      try {
        const res = await apiFetch(`/wordpress/sites/${domain}/plugin/${plugin.name}/update`, {
          method: 'POST'
        });
        if (res.ok) {
          successCount++;
          showToast(`✓ Updated ${plugin.title || plugin.name}`, 'success', 2000);
        } else {
          failCount++;
          showToast(`✗ Failed to update ${plugin.title || plugin.name}`, 'error', 2000);
        }
      } catch (err) {
        failCount++;
        showToast(`✗ Failed to update ${plugin.title || plugin.name}`, 'error', 2000);
      }
      
      // Small delay to avoid overwhelming the server
      if (i < pluginsToUpdate.length - 1) {
        await new Promise(resolve => setTimeout(resolve, 500));
      }
    }
 
    setBulkUpdateProgress({ current: 0, total: 0, type: '' });
    setUpdating(prev => ({ ...prev, 'bulk-plugins': false }));
    
    showToast(`Bulk update complete: ${successCount} succeeded, ${failCount} failed`, 
              failCount === 0 ? 'success' : 'warning', 5000);
    
    fetchSiteDetails();
    fetchDetailedInfo();
  };
 
  const handleUpdateAllThemes = async () => {
    const themesToUpdate = siteDetails?.themes?.filter(t => t.update_available === 'available') || [];
    
    if (themesToUpdate.length === 0) {
      showToast('No theme updates available', 'info');
      return;
    }
 
    if (!confirm(`Update ${themesToUpdate.length} theme(s)? This may take several minutes.`)) return;
 
    setBulkUpdateProgress({ current: 0, total: themesToUpdate.length, type: 'themes' });
    setUpdating(prev => ({ ...prev, 'bulk-themes': true }));
 
    let successCount = 0;
    let failCount = 0;
 
    for (let i = 0; i < themesToUpdate.length; i++) {
      const theme = themesToUpdate[i];
      setBulkUpdateProgress({ current: i + 1, total: themesToUpdate.length, type: 'themes' });
      
      try {
        const res = await apiFetch(`/wordpress/sites/${domain}/theme/${theme.name}/update`, {
          method: 'POST'
        });
        if (res.ok) {
          successCount++;
          showToast(`✓ Updated ${theme.name}`, 'success', 2000);
        } else {
          failCount++;
          showToast(`✗ Failed to update ${theme.name}`, 'error', 2000);
        }
      } catch (err) {
        failCount++;
        showToast(`✗ Failed to update ${theme.name}`, 'error', 2000);
      }
      
      // Small delay to avoid overwhelming the server
      if (i < themesToUpdate.length - 1) {
        await new Promise(resolve => setTimeout(resolve, 500));
      }
    }
 
    setBulkUpdateProgress({ current: 0, total: 0, type: '' });
    setUpdating(prev => ({ ...prev, 'bulk-themes': false }));
    
    showToast(`Bulk update complete: ${successCount} succeeded, ${failCount} failed`, 
              failCount === 0 ? 'success' : 'warning', 5000);
    
    fetchSiteDetails();
    fetchDetailedInfo();
  };
 
  const handleAutoLogin = async () => {
    setUpdating(prev => ({ ...prev, 'autologin': true }));
    setLoginCredentials(null); // Clear previous credentials
    try {
      const res = await apiFetch(`/wordpress/sites/${domain}/autologin`, {
        method: 'POST',
        body: JSON.stringify({})
      });
      if (res.ok) {
        const result = await res.json();
        if (result.method === 'magic_link' && result.login_url) {
          // Magic link - just open it
          window.open(result.login_url, '_blank');
          showToast('Opening WordPress admin...', 'success');
        } else if (result.method === 'password_reset' && result.password) {
          // Password reset - store credentials and open login page
          setLoginCredentials({
            username: result.username,
            password: result.password,
            loginUrl: result.login_url,
            method: 'password_reset'
          });
          window.open(result.login_url, '_blank');
          showToast('Password reset successful - credentials displayed below', 'success');
        } else if (result.method === 'manual') {
          // Manual login required - store username
          setLoginCredentials({
            username: result.username,
            loginUrl: result.login_url,
            method: 'manual',
            note: result.note
          });
          window.open(result.login_url, '_blank');
          showToast('Opening login page...', 'info');
        } else if (result.login_url) {
          // Generic case - just open the URL
          window.open(result.login_url, '_blank');
          showToast('Opening WordPress admin...', 'success');
        } else {
          showToast('Auto-login not available for this site', 'warning');
        }
      } else {
        const err = await res.json();
        showToast(err.error || 'Auto-login failed', 'error');
      }
    } catch (err) {
      showToast('Auto-login failed', 'error');
    } finally {
      setUpdating(prev => ({ ...prev, 'autologin': false }));
    }
  };
 
  const getStatusColor = (status) => {
    const statusMap = {
      'online': 'success',
      'error': 'danger',
      'timeout': 'warning',
      'offline': 'danger',
      'unknown': 'secondary'
    };
    return statusMap[status?.toLowerCase()] || 'secondary';
  };
 
  if (loading) {
    return (
      <MainLayout>
        <div style={{ padding: '40px', textAlign: 'center' }}>
          <div className="spinner"></div>
          <p style={{ marginTop: '16px', color: 'var(--text-secondary)' }}>
            Loading WordPress site details...
          </p>
        </div>
      </MainLayout>
    );
  }
 
  if (!site) {
    return (
      <MainLayout>
        <div style={{ padding: '40px', textAlign: 'center' }}>
          <span className="material-symbols-outlined" style={{ fontSize: '64px', color: 'var(--text-secondary)', opacity: 0.5 }}>
            web_asset_off
          </span>
          <h2 style={{ marginTop: '16px' }}>Site Not Found</h2>
          <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
            The WordPress site "{domain}" could not be found.
          </p>
          <button 
            className="btn btn-primary" 
            onClick={() => navigate('/services')}
            style={{ marginTop: '20px' }}
          >
            Back to Services
          </button>
        </div>
      </MainLayout>
    );
  }
 
  return (
    <MainLayout>
      <Toast toasts={toasts} hideToast={hideToast} />
      
      <div className="wordpress-site-detail">
        {/* Header */}
        <div className="site-header">
          <button 
            className="btn btn-secondary" 
            onClick={() => navigate('/services')}
            style={{ marginBottom: '16px' }}
          >
            <span className="material-symbols-outlined">arrow_back</span>
            Back to Services
          </button>
 
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
                <span className="material-symbols-outlined" style={{ fontSize: '32px', color: 'var(--primary)' }}>
                  web
                </span>
                <h1 style={{ margin: 0 }}>{site.domain}</h1>
                <span className={`badge badge-${getStatusColor(site.status)}`}>
                  {site.status || 'unknown'}
                </span>
              </div>
              <a
                href={`https://${site.domain}`}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  fontSize: '14px',
                  color: 'var(--primary)',
                  textDecoration: 'none',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '4px',
                  marginLeft: '44px'
                }}
              >
                <span>https://{site.domain}</span>
                <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>
                  open_in_new
                </span>
              </a>
            </div>
 
            <div style={{ display: 'flex', gap: '8px' }}>
              <button className="btn btn-primary" onClick={fetchSiteDetails}>
                <span className="material-symbols-outlined">refresh</span>
                Refresh
              </button>
            </div>
          </div>
        </div>
 
        {/* Overview Cards */}
        <div className="overview-grid">
          <div className="card">
            <div className="card-header">
              <span className="material-symbols-outlined">info</span>
              Site Information
            </div>
            <div className="card-body">
              <div className="info-row">
                <span>WordPress Version:</span>
                <span className="mono">{site.wp_version?.trim().replace(/.*\$wp_version\s+/, '') || 'Unknown'}</span>
              </div>
              <div className="info-row">
                <span>Database:</span>
                <span className="mono small">{site.database || 'N/A'}</span>
              </div>
              <div className="info-row">
                <span>Disk Usage:</span>
                <span>{site.disk_usage || 'N/A'}</span>
              </div>
              <div className="info-row">
                <span>Path:</span>
                <span className="mono small">{site.path || 'N/A'}</span>
              </div>
            </div>
          </div>
 
          <div className="card">
            <div className="card-header">
              <span className="material-symbols-outlined">dns</span>
              Server Information
            </div>
            <div className="card-body">
              <div className="info-row">
                <span>Server IP:</span>
                <span className="mono">{site.server_ip || 'N/A'}</span>
              </div>
              <div className="info-row">
                <span>Hostname:</span>
                <span>{site.server_hostname || 'N/A'}</span>
              </div>
              <div className="info-row">
                <span>Last Checked:</span>
                <span>{site.last_checked ? new Date(site.last_checked).toLocaleString() : 'N/A'}</span>
              </div>
            </div>
          </div>
 
          {site.malware_issues > 0 && (
            <div className="card card-danger">
              <div className="card-header">
                <span className="material-symbols-outlined">warning</span>
                Security Alert
              </div>
              <div className="card-body">
                <p style={{ margin: '0 0 12px 0' }}>
                  <strong>{site.malware_issues}</strong> malware issue{site.malware_issues !== 1 ? 's' : ''} detected
                </p>
                {site.malware_details && (
                  <div style={{ 
                    backgroundColor: 'var(--background-light)', 
                    padding: '12px', 
                    borderRadius: '6px', 
                    marginBottom: '12px',
                    fontSize: '14px',
                    fontFamily: 'monospace',
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-word'
                  }}>
                    {site.malware_details}
                  </div>
                )}
                <button 
                  className="btn btn-danger btn-sm"
                  onClick={handleCleanMalware}
                  disabled={updating.clean}
                >
                  {updating.clean ? (
                    <>
                      <span className="spinner small"></span>
                      Cleaning...
                    </>
                  ) : (
                    <>
                      <span className="material-symbols-outlined">cleaning_services</span>
                      Clean Malware
                    </>
                  )}
                </button>
              </div>
            </div>
          )}
        </div>
 
        {/* Quick Actions */}
        <div className="card" style={{ marginTop: '24px' }}>
          <div className="card-header">
            <span className="material-symbols-outlined">bolt</span>
            Quick Actions
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
              <a
                href={`https://${site.domain}/wp-admin`}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-secondary"
              >
                <span className="material-symbols-outlined">login</span>
                WP Admin
              </a>
              
              <button 
                className="btn btn-primary"
                onClick={handleAutoLogin}
                disabled={updating.autologin}
              >
                {updating.autologin ? (
                  <>
                    <span className="spinner small"></span>
                    Generating Link...
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined">key</span>
                    Auto Login
                  </>
                )}
              </button>
            </div>
 
            {/* Login Credentials Display */}
            {loginCredentials && (
              <div style={{ 
                marginTop: '16px', 
                padding: '16px', 
                backgroundColor: 'var(--surface-secondary)',
                border: '1px solid var(--border)',
                borderRadius: '6px'
              }}>
                <div style={{ 
                  display: 'flex', 
                  alignItems: 'center', 
                  gap: '8px',
                  marginBottom: '12px',
                  color: 'var(--primary)'
                }}>
                  <span className="material-symbols-outlined">lock_open</span>
                  <strong>Login Credentials</strong>
                </div>
 
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  {/* Username */}
                  <div>
                    <label style={{ 
                      fontSize: '12px', 
                      color: 'var(--text-secondary)',
                      display: 'block',
                      marginBottom: '4px'
                    }}>
                      Username
                    </label>
                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                      <input
                        type="text"
                        value={loginCredentials.username}
                        readOnly
                        style={{
                          flex: 1,
                          padding: '8px 12px',
                          border: '1px solid var(--border)',
                          borderRadius: '4px',
                          fontFamily: 'monospace',
                          fontSize: '14px',
                          backgroundColor: 'var(--surface)',
                          color: 'var(--text-primary)'
                        }}
                      />
                      <button
                        className="btn btn-secondary btn-sm"
                        onClick={() => copyToClipboard(loginCredentials.username, 'Username')}
                        style={{ padding: '8px 12px' }}
                      >
                        <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
                          content_copy
                        </span>
                      </button>
                    </div>
                  </div>
 
                  {/* Password (if available) */}
                  {loginCredentials.password && (
                    <div>
                      <label style={{ 
                        fontSize: '12px', 
                        color: 'var(--text-secondary)',
                        display: 'block',
                        marginBottom: '4px'
                      }}>
                        Temporary Password
                      </label>
                      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                        <input
                          type="text"
                          value={loginCredentials.password}
                          readOnly
                          style={{
                            flex: 1,
                            padding: '8px 12px',
                            border: '1px solid var(--border)',
                            borderRadius: '4px',
                            fontFamily: 'monospace',
                            fontSize: '14px',
                            backgroundColor: 'var(--surface)',
                            color: 'var(--text-primary)'
                          }}
                        />
                        <button
                          className="btn btn-secondary btn-sm"
                          onClick={() => copyToClipboard(loginCredentials.password, 'Password')}
                          style={{ padding: '8px 12px' }}
                        >
                          <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
                            content_copy
                          </span>
                        </button>
                      </div>
                      <p style={{ 
                        fontSize: '12px', 
                        color: 'var(--warning)', 
                        marginTop: '6px',
                        marginBottom: 0 
                      }}>
                        ⚠️ Change this password after logging in
                      </p>
                    </div>
                  )}
 
                  {/* Login URL */}
                  <div>
                    <label style={{ 
                      fontSize: '12px', 
                      color: 'var(--text-secondary)',
                      display: 'block',
                      marginBottom: '4px'
                    }}>
                      Login URL
                    </label>
                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                      <input
                        type="text"
                        value={loginCredentials.loginUrl}
                        readOnly
                        style={{
                          flex: 1,
                          padding: '8px 12px',
                          border: '1px solid var(--border)',
                          borderRadius: '4px',
                          fontFamily: 'monospace',
                          fontSize: '13px',
                          backgroundColor: 'var(--surface)',
                          color: 'var(--text-primary)'
                        }}
                      />
                      <button
                        className="btn btn-secondary btn-sm"
                        onClick={() => window.open(loginCredentials.loginUrl, '_blank')}
                        style={{ padding: '8px 12px' }}
                      >
                        <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
                          open_in_new
                        </span>
                      </button>
                    </div>
                  </div>
 
                  {loginCredentials.note && (
                    <p style={{ 
                      fontSize: '13px', 
                      color: 'var(--text-secondary)', 
                      margin: 0,
                      fontStyle: 'italic'
                    }}>
                      {loginCredentials.note}
                    </p>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
 
        {/* Users & Permissions Section */}
        <div className="card" style={{ marginTop: '16px' }}>
          <div className="card-header">
            <span className="material-symbols-outlined">people</span>
            Users & Permissions ({users.length})
          </div>
          <div className="card-body">
            {usersLoading ? (
              <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                Loading users...
              </p>
            ) : users.length === 0 ? (
              <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                No users found on this site.
              </p>
            ) : (
              <div style={{ overflowX: 'auto' }}>
                <table style={{ 
                  width: '100%', 
                  borderCollapse: 'collapse',
                  fontSize: '14px'
                }}>
                  <thead>
                    <tr style={{ 
                      borderBottom: '2px solid var(--border)',
                      textAlign: 'left'
                    }}>
                      <th style={{ padding: '12px 8px', fontWeight: '600' }}>Username</th>
                      <th style={{ padding: '12px 8px', fontWeight: '600' }}>Display Name</th>
                      <th style={{ padding: '12px 8px', fontWeight: '600' }}>Email</th>
                      <th style={{ padding: '12px 8px', fontWeight: '600' }}>Role</th>
                    </tr>
                  </thead>
                  <tbody>
                    {users.map((user) => {
                      const isAdmin = user.roles && user.roles.toLowerCase().includes('administrator');
                      return (
                        <tr 
                          key={user.id}
                          style={{ 
                            borderBottom: '1px solid var(--border)',
                            backgroundColor: isAdmin ? 'var(--warning-bg, rgba(255, 193, 7, 0.1))' : 'transparent'
                          }}
                        >
                          <td style={{ padding: '12px 8px' }}>
                            <div style={{ 
                              fontWeight: isAdmin ? '600' : '400',
                              display: 'flex',
                              alignItems: 'center',
                              gap: '6px'
                            }}>
                              {isAdmin && (
                                <span className="material-symbols-outlined" style={{ 
                                  fontSize: '16px',
                                  color: 'var(--warning)'
                                }}>
                                  shield_person
                                </span>
                              )}
                              {user.username}
                            </div>
                          </td>
                          <td style={{ padding: '12px 8px', color: 'var(--text-secondary)' }}>
                            {user.display_name || '-'}
                          </td>
                          <td style={{ padding: '12px 8px', color: 'var(--text-secondary)' }}>
                            {user.email}
                          </td>
                          <td style={{ padding: '12px 8px' }}>
                            <span className={`badge badge-${isAdmin ? 'warning' : 'secondary'}`}>
                              {user.roles || 'none'}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
 
        {/* Plugins Section */}
        <div className="card" style={{ marginTop: '24px' }}>
          <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span className="material-symbols-outlined">extension</span>
              Plugins ({siteDetails?.plugins?.length || site.plugin_count || 0})
            </div>
            {siteDetails?.plugins?.some(p => p.update_available === 'available') && (
              <button
                className="btn btn-primary btn-sm"
                onClick={handleUpdateAllPlugins}
                disabled={updating['bulk-plugins']}
              >
                {updating['bulk-plugins'] ? (
                  <>
                    <span className="spinner small"></span>
                    Updating {bulkUpdateProgress.current}/{bulkUpdateProgress.total}...
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined">update</span>
                    Update All ({siteDetails.plugins.filter(p => p.update_available === 'available').length})
                  </>
                )}
              </button>
            )}
          </div>
          <div className="card-body">
            {bulkUpdateProgress.type === 'plugins' && bulkUpdateProgress.total > 0 && (
              <div style={{ 
                marginBottom: '16px', 
                padding: '12px', 
                backgroundColor: 'var(--surface-secondary)',
                borderRadius: '6px'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                  <span style={{ fontSize: '14px', fontWeight: '500' }}>
                    Updating plugins... ({bulkUpdateProgress.current}/{bulkUpdateProgress.total})
                  </span>
                  <span style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>
                    {Math.round((bulkUpdateProgress.current / bulkUpdateProgress.total) * 100)}%
                  </span>
                </div>
                <div style={{ 
                  width: '100%', 
                  height: '6px', 
                  backgroundColor: 'var(--border)',
                  borderRadius: '3px',
                  overflow: 'hidden'
                }}>
                  <div style={{
                    width: `${(bulkUpdateProgress.current / bulkUpdateProgress.total) * 100}%`,
                    height: '100%',
                    backgroundColor: 'var(--primary)',
                    transition: 'width 0.3s ease'
                  }} />
                </div>
              </div>
            )}
            {detailsLoading ? (
              <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                Loading plugin information...
              </p>
            ) : !siteDetails || !siteDetails.plugins || siteDetails.plugins.length === 0 ? (
              <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                No plugins found on this site.
              </p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {siteDetails.plugins.map((plugin) => (
                  <div key={plugin.name} style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center',
                    padding: '12px',
                    border: '1px solid var(--border)',
                    borderRadius: '4px'
                  }}>
                    <div>
                      <div style={{ fontWeight: '500' }}>{plugin.title || plugin.name}</div>
                      <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginTop: '4px' }}>
                        Version: {plugin.version}
                        {plugin.update_available === 'available' && plugin.new_version && (
                          <span style={{ color: 'var(--warning)', marginLeft: '8px' }}>
                            → Update to {plugin.new_version}
                          </span>
                        )}
                        <span 
                          className={`badge badge-${plugin.status === 'active' ? 'success' : 'secondary'}`}
                          style={{ marginLeft: '8px' }}
                        >
                          {plugin.status}
                        </span>
                      </div>
                    </div>
                    {plugin.update_available === 'available' && (
                      <button
                        className="btn btn-primary btn-sm"
                        onClick={() => handlePluginUpdate(plugin.name)}
                        disabled={updating[`plugin-${plugin.name}`]}
                      >
                        {updating[`plugin-${plugin.name}`] ? (
                          <>
                            <span className="spinner small"></span>
                            Updating...
                          </>
                        ) : (
                          <>
                            <span className="material-symbols-outlined">update</span>
                            Update
                          </>
                        )}
                      </button>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
 
        {/* Themes Section */}
        <div className="card" style={{ marginTop: '16px' }}>
          <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span className="material-symbols-outlined">palette</span>
              Themes ({siteDetails?.themes?.length || 0})
            </div>
            {siteDetails?.themes?.some(t => t.update_available === 'available') && (
              <button
                className="btn btn-primary btn-sm"
                onClick={handleUpdateAllThemes}
                disabled={updating['bulk-themes']}
              >
                {updating['bulk-themes'] ? (
                  <>
                    <span className="spinner small"></span>
                    Updating {bulkUpdateProgress.current}/{bulkUpdateProgress.total}...
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined">update</span>
                    Update All ({siteDetails.themes.filter(t => t.update_available === 'available').length})
                  </>
                )}
              </button>
            )}
          </div>
          <div className="card-body">
            {bulkUpdateProgress.type === 'themes' && bulkUpdateProgress.total > 0 && (
              <div style={{ 
                marginBottom: '16px', 
                padding: '12px', 
                backgroundColor: 'var(--surface-secondary)',
                borderRadius: '6px'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                  <span style={{ fontSize: '14px', fontWeight: '500' }}>
                    Updating themes... ({bulkUpdateProgress.current}/{bulkUpdateProgress.total})
                  </span>
                  <span style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>
                    {Math.round((bulkUpdateProgress.current / bulkUpdateProgress.total) * 100)}%
                  </span>
                </div>
                <div style={{ 
                  width: '100%', 
                  height: '6px', 
                  backgroundColor: 'var(--border)',
                  borderRadius: '3px',
                  overflow: 'hidden'
                }}>
                  <div style={{
                    width: `${(bulkUpdateProgress.current / bulkUpdateProgress.total) * 100}%`,
                    height: '100%',
                    backgroundColor: 'var(--primary)',
                    transition: 'width 0.3s ease'
                  }} />
                </div>
              </div>
            )}
            {detailsLoading ? (
              <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                Loading theme information...
              </p>
            ) : !siteDetails || !siteDetails.themes || siteDetails.themes.length === 0 ? (
              <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                No themes found on this site.
              </p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {siteDetails.themes.map((theme) => (
                  <div key={theme.name} style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center',
                    padding: '12px',
                    border: '1px solid var(--border)',
                    borderRadius: '4px'
                  }}>
                    <div>
                      <div style={{ fontWeight: '500' }}>{theme.name}</div>
                      <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginTop: '4px' }}>
                        Version: {theme.version}
                        {theme.update_available === 'available' && theme.new_version && (
                          <span style={{ color: 'var(--warning)', marginLeft: '8px' }}>
                            → Update to {theme.new_version}
                          </span>
                        )}
                        <span 
                          className={`badge badge-${theme.status === 'active' ? 'success' : 'secondary'}`}
                          style={{ marginLeft: '8px' }}
                        >
                          {theme.status}
                        </span>
                      </div>
                    </div>
                    {theme.update_available === 'available' && (
                      <button
                        className="btn btn-primary btn-sm"
                        onClick={() => handleThemeUpdate(theme.name)}
                        disabled={updating[`theme-${theme.name}`]}
                      >
                        {updating[`theme-${theme.name}`] ? (
                          <>
                            <span className="spinner small"></span>
                            Updating...
                          </>
                        ) : (
                          <>
                            <span className="material-symbols-outlined">update</span>
                            Update
                          </>
                        )}
                      </button>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
 
        {/* WordPress Core Section */}
        {siteDetails && siteDetails.core && (
          <div className="card" style={{ marginTop: '16px' }}>
            <div className="card-header">
              <span className="material-symbols-outlined">system_update</span>
              WordPress Core
            </div>
            <div className="card-body">
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center'
              }}>
                <div>
                  <div style={{ fontWeight: '500' }}>WordPress {siteDetails.core.version}</div>
                  {siteDetails.core.update_available && siteDetails.core.updates && siteDetails.core.updates.length > 0 && (
                    <div style={{ fontSize: '13px', color: 'var(--warning)', marginTop: '4px' }}>
                      Update available: {siteDetails.core.updates[0].version}
                    </div>
                  )}
                  {!siteDetails.core.update_available && (
                    <div style={{ fontSize: '13px', color: 'var(--success)', marginTop: '4px' }}>
                      ✓ Up to date
                    </div>
                  )}
                </div>
                {siteDetails.core.update_available && siteDetails.core.updates && siteDetails.core.updates.length > 0 && (
                  <button
                    className="btn btn-primary btn-sm"
                    onClick={handleCoreUpdate}
                    disabled={updating.core}
                  >
                    {updating.core ? (
                      <>
                        <span className="spinner small"></span>
                        Updating...
                      </>
                    ) : (
                      <>
                        <span className="material-symbols-outlined">update</span>
                        Update to {siteDetails.core.updates[0].version}
                      </>
                    )}
                  </button>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}