/**
 * Site Settings (Advanced)
 * Phase 7: Advanced Site Management
 * Features: SEO (meta tags, Open Graph, schema.org), Industry & Sectors Configuration
 */
import React, { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import Label from '../../components/form/Label';
import SelectDropdown from '../../components/form/SelectDropdown';
import Checkbox from '../../components/form/input/Checkbox';
import TextArea from '../../components/form/input/TextArea';
import { useToast } from '../../components/ui/toast/ToastContainer';
import {
  fetchAPI,
  fetchSites,
  fetchIndustries,
  Site,
  Industry,
} from '../../services/api';
import WordPressIntegrationForm from '../../components/sites/WordPressIntegrationForm';
import { integrationApi, SiteIntegration } from '../../services/integration.api';
import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon, FileIcon, ChevronDownIcon } from '../../icons';
import Badge from '../../components/ui/badge/Badge';
import { Dropdown } from '../../components/ui/dropdown/Dropdown';
import { DropdownItem } from '../../components/ui/dropdown/DropdownItem';

export default function SiteSettings() {
  const { id: siteId } = useParams<{ id: 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);

  // Site selector state
  const [sites, setSites] = useState<Site[]>([]);
  const [sitesLoading, setSitesLoading] = useState(true);
  const [isSiteSelectorOpen, setIsSiteSelectorOpen] = useState(false);
  const siteSelectorRef = useRef<HTMLButtonElement>(null);

  // Check for tab parameter in URL
  const initialTab = (searchParams.get('tab') as 'general' | 'integrations' | 'content-types') || 'general';
  const [activeTab, setActiveTab] = useState<'general' | 'integrations' | 'content-types'>(initialTab);
  const [contentTypes, setContentTypes] = useState<any>(null);
  const [contentTypesLoading, setContentTypesLoading] = useState(false);
  
  // Sectors selection state
  const [industries, setIndustries] = useState<Industry[]>([]);
  const [selectedIndustry, setSelectedIndustry] = useState<string>('');
  const [selectedSectors, setSelectedSectors] = useState<string[]>([]);
  const [isSelectingSectors, setIsSelectingSectors] = useState(false);
  const [userPreferences, setUserPreferences] = useState<{
    selectedIndustry?: string;
    selectedSectors?: string[];
  } | null>(null);
  
  const [formData, setFormData] = useState({
    name: '',
    slug: '',
    site_url: '',
    site_type: 'marketing',
    hosting_type: 'igny8_sites',
    is_active: true,
    // SEO fields
    meta_title: '',
    meta_description: '',
    meta_keywords: '',
    og_title: '',
    og_description: '',
    og_image: '',
    og_type: 'website',
    og_site_name: '',
    schema_type: 'Organization',
    schema_name: '',
    schema_description: '',
    schema_url: '',
    schema_logo: '',
    schema_same_as: '',
  });

  useEffect(() => {
    if (siteId) {
      // Clear state when site changes
      setWordPressIntegration(null);
      setContentTypes(null);
      setSite(null);
      
      // Load new site data
      loadSite();
      loadIntegrations();
      loadIndustries();
    }
  }, [siteId]);

  useEffect(() => {
    // Update tab if URL parameter changes
    const tab = searchParams.get('tab');
    if (tab && ['general', 'integrations', 'content-types'].includes(tab)) {
      setActiveTab(tab as typeof activeTab);
    }
  }, [searchParams]);

  useEffect(() => {
    if (activeTab === 'content-types' && wordPressIntegration) {
      loadContentTypes();
    }
  }, [activeTab, wordPressIntegration]);

  // Load sites for selector
  useEffect(() => {
    loadSites();
    loadUserPreferences();
  }, []);

  // Load site sectors when site and industries are loaded
  useEffect(() => {
    if (site && industries.length > 0) {
      loadSiteSectors();
    }
  }, [site, industries]);

  const loadSites = async () => {
    try {
      setSitesLoading(true);
      const response = await fetchSites();
      const activeSites = (response.results || []).filter(site => site.is_active);
      setSites(activeSites);
    } catch (error: any) {
      console.error('Failed to load sites:', error);
    } finally {
      setSitesLoading(false);
    }
  };

  const handleSiteSelect = (siteId: number) => {
    navigate(`/sites/${siteId}/settings${searchParams.get('tab') ? `?tab=${searchParams.get('tab')}` : ''}`);
    setIsSiteSelectorOpen(false);
  };

  const loadSite = async () => {
    try {
      setLoading(true);
      const data = await fetchAPI(`/v1/auth/sites/${siteId}/`);
      if (data) {
        setSite(data);
        const seoData = data.seo_metadata || data.metadata || {};
        setFormData({
          name: data.name || '',
          slug: data.slug || '',
          site_url: data.domain || data.url || '',
          site_type: data.site_type || 'marketing',
          hosting_type: data.hosting_type || 'igny8_sites',
          is_active: data.is_active !== false,
          // SEO fields
          meta_title: seoData.meta_title || data.name || '',
          meta_description: seoData.meta_description || data.description || '',
          meta_keywords: seoData.meta_keywords || '',
          og_title: seoData.og_title || seoData.meta_title || data.name || '',
          og_description: seoData.og_description || seoData.meta_description || data.description || '',
          og_image: seoData.og_image || '',
          og_type: seoData.og_type || 'website',
          og_site_name: seoData.og_site_name || data.name || '',
          schema_type: seoData.schema_type || 'Organization',
          schema_name: seoData.schema_name || data.name || '',
          schema_description: seoData.schema_description || data.description || '',
          schema_url: seoData.schema_url || data.domain || '',
          schema_logo: seoData.schema_logo || '',
          schema_same_as: Array.isArray(seoData.schema_same_as) ? seoData.schema_same_as.join(', ') : seoData.schema_same_as || '',
        });
        // Don't automatically mark as connected - wait for actual connection test
      }
    } catch (error: any) {
      toast.error(`Failed to load site: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  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 loadIndustries = async () => {
    try {
      const response = await fetchIndustries();
      let allIndustries = response.industries || [];
      
      // Note: For existing sites with industries already configured,
      // we show ALL industries so users can change their selection.
      // The filtering by user preferences only applies during initial site creation.
      
      setIndustries(allIndustries);
    } catch (error: any) {
      console.error('Failed to load industries:', error);
    }
  };

  const loadUserPreferences = async () => {
    try {
      const { fetchAccountSetting } = await import('../../services/api');
      const setting = await fetchAccountSetting('user_preferences');
      const preferences = setting.config as { selectedIndustry?: string; selectedSectors?: string[] } | undefined;
      if (preferences) {
        setUserPreferences(preferences);
      }
    } catch (error: any) {
      // Silently handle errors
    }
  };

  const loadSiteSectors = async () => {
    if (!siteId) return;
    try {
      const { fetchSiteSectors } = await import('../../services/api');
      const sectors = await fetchSiteSectors(Number(siteId));
      const sectorSlugs = sectors.map((s: any) => s.slug);
      setSelectedSectors(sectorSlugs);
      
      if (site?.industry_slug) {
        setSelectedIndustry(site.industry_slug);
      } else {
        for (const industry of industries) {
          const matchingSectors = industry.sectors.filter(s => sectorSlugs.includes(s.slug));
          if (matchingSectors.length > 0) {
            setSelectedIndustry(industry.slug);
            break;
          }
        }
      }
    } catch (error: any) {
      console.error('Failed to load site sectors:', error);
    }
  };

  const getIndustrySectors = () => {
    if (!selectedIndustry) return [];
    const industry = industries.find(i => i.slug === selectedIndustry);
    
    // Note: For existing sites in Settings page, show ALL sectors from the selected industry
    // so users can change their sector selection. The filtering by user preferences
    // only applies during initial site creation (in the Sites wizard).
    return industry?.sectors || [];
  };

  const handleSelectSectors = async () => {
    if (!siteId || !selectedIndustry || selectedSectors.length === 0) {
      toast.error('Please select an industry and at least one sector');
      return;
    }

    if (selectedSectors.length > 5) {
      toast.error('Maximum 5 sectors allowed per site');
      return;
    }

    try {
      setIsSelectingSectors(true);
      const { selectSectorsForSite } = await import('../../services/api');
      await selectSectorsForSite(
        Number(siteId),
        selectedIndustry,
        selectedSectors
      );
      toast.success('Sectors configured successfully');
      await loadSite();
      await loadSiteSectors();
    } catch (error: any) {
      toast.error(`Failed to configure sectors: ${error.message}`);
    } finally {
      setIsSelectingSectors(false);
    }
  };

  const handleIntegrationUpdate = async (integration: SiteIntegration) => {
    setWordPressIntegration(integration);
    await loadIntegrations();
  };

  const loadContentTypes = async () => {
    if (!wordPressIntegration?.id) return;
    try {
      setContentTypesLoading(true);
      const data = await fetchAPI(`/v1/integration/integrations/${wordPressIntegration.id}/content-types/`);
      setContentTypes(data);
    } catch (error: any) {
      toast.error(`Failed to load content types: ${error.message}`);
    } finally {
      setContentTypesLoading(false);
    }
  };

  const formatRelativeTime = (iso: string | null) => {
    if (!iso) return '-';
    const then = new Date(iso).getTime();
    const now = Date.now();
    const diff = Math.max(0, now - then);
    const mins = Math.floor(diff / 60000);
    if (mins < 1) return 'just now';
    if (mins < 60) return `${mins}m ago`;
    const hours = Math.floor(mins / 60);
    if (hours < 24) return `${hours}h ago`;
    const days = Math.floor(hours / 24);
    if (days < 30) return `${days}d ago`;
    const months = Math.floor(days / 30);
    return `${months}mo ago`;
  };

  // Integration status with authentication check
  const [integrationStatus, setIntegrationStatus] = useState<'connected' | 'configured' | 'not_configured'>('not_configured');
  const [testingAuth, setTestingAuth] = useState(false);

  // Check basic configuration - integration must exist in DB and have sync_enabled
  useEffect(() => {
    const checkStatus = async () => {
      // Integration must exist in database and have sync_enabled = true
      if (wordPressIntegration && wordPressIntegration.id && wordPressIntegration.sync_enabled) {
        setIntegrationStatus('configured');
        // Test authentication
        testAuthentication();
      } else {
        setIntegrationStatus('not_configured');
      }
    };
    checkStatus();
  }, [wordPressIntegration, site]);
  
  // Auto-refresh integration list periodically to detect plugin-created integrations
  useEffect(() => {
    const interval = setInterval(() => {
      if (!wordPressIntegration) {
        loadIntegrations();
      }
    }, 5000); // Check every 5 seconds if integration doesn't exist
    
    return () => clearInterval(interval);
  }, [wordPressIntegration]);

  // Test authentication with WordPress API
  const testAuthentication = async () => {
    if (testingAuth || !wordPressIntegration?.id) return;
    
    try {
      setTestingAuth(true);
      const resp = await fetchAPI(`/v1/integration/integrations/${wordPressIntegration.id}/test_connection/`, { 
        method: 'POST', 
        body: {} 
      });
      
      if (resp && resp.success) {
        setIntegrationStatus('connected');
      } else {
        // Keep as 'configured' if auth fails
        setIntegrationStatus('configured');
      }
    } catch (err) {
      // Keep as 'configured' if auth test fails
      setIntegrationStatus('configured');
    } finally {
      setTestingAuth(false);
    }
  };

  // Sync Now handler extracted
  const [syncLoading, setSyncLoading] = useState(false);
  const [lastSyncTime, setLastSyncTime] = useState<string | null>(null);
  const handleManualSync = async () => {
    setSyncLoading(true);
    try {
      if (wordPressIntegration && wordPressIntegration.id) {
        const res = await integrationApi.syncIntegration(wordPressIntegration.id, 'metadata');
        if (res && res.success) {
          toast.success('WordPress structure synced successfully');
          if (res.last_sync_at) {
            setLastSyncTime(res.last_sync_at);
          }
          setTimeout(() => loadContentTypes(), 1500);
        } else {
          toast.error(res?.message || 'Sync failed to start');
        }
      } else {
        toast.error('No integration configured. Please configure WordPress integration first.');
      }
    } catch (err: any) {
      toast.error(`Sync failed: ${err?.message || String(err)}`);
    } finally {
      setSyncLoading(false);
    }
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      const { meta_title, meta_description, meta_keywords, og_title, og_description, og_image, og_type, og_site_name, schema_type, schema_name, schema_description, schema_url, schema_logo, schema_same_as, ...basicData } = formData;
      
      const payload = {
        ...basicData,
        seo_metadata: {
          meta_title,
          meta_description,
          meta_keywords,
          og_title,
          og_description,
          og_image,
          og_type,
          og_site_name,
          schema_type,
          schema_name,
          schema_description,
          schema_url,
          schema_logo,
          schema_same_as: schema_same_as ? schema_same_as.split(',').map((s) => s.trim()).filter(Boolean) : [],
        },
      };
      
      await fetchAPI(`/v1/auth/sites/${siteId}/`, {
        method: 'PUT',
        body: JSON.stringify(payload),
      });
      toast.success('Site settings saved successfully');
      loadSite();
    } catch (error: any) {
      toast.error(`Failed to save settings: ${error.message}`);
    } finally {
      setSaving(false);
    }
  };

  const SITE_TYPES = [
    { value: 'marketing', label: 'Marketing Site' },
    { value: 'ecommerce', label: 'Ecommerce Site' },
    { value: 'blog', label: 'Blog' },
    { value: 'portfolio', label: 'Portfolio' },
    { value: 'corporate', label: 'Corporate' },
  ];

  const HOSTING_TYPES = [
    { value: 'igny8_sites', label: 'IGNY8 Sites' },
    { value: 'wordpress', label: 'WordPress' },
    { value: 'shopify', label: 'Shopify' },
    { value: 'multi', label: 'Multi-Destination' },
  ];

  if (loading) {
    return (
      <div className="p-6">
        <PageMeta title="Site Settings" />
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">Loading site settings...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <PageMeta title="Site Settings - IGNY8" />
      
      <div className="flex items-center justify-between gap-4 mb-6">
        <div className="flex items-center gap-4">
          <PageHeader 
            title={site?.name ? `${site.name} — Site Settings` : 'Site Settings'}
            badge={{ icon: <GridIcon />, color: 'blue' }}
            hideSiteSector
          />
          {/* Integration status indicator */}
          <div className="flex items-center gap-3 ml-2">
            <span
              className={`inline-block w-6 h-6 rounded-full ${
                integrationStatus === 'connected' ? 'bg-green-500' :
                integrationStatus === 'configured' ? 'bg-brand-500' : 'bg-gray-300'
              }`}
              title={`Integration status: ${
                integrationStatus === 'connected' ? 'Connected & Authenticated' :
                integrationStatus === 'configured' ? 'Configured (testing...)' : 'Not configured'
              }`}
            />
            <span className="text-sm text-gray-600 dark:text-gray-300">
              {integrationStatus === 'connected' && 'Connected'}
              {integrationStatus === 'configured' && (testingAuth ? 'Testing...' : 'Configured')}
              {integrationStatus === 'not_configured' && 'Not configured'}
            </span>
          </div>
        </div>

        {/* Site Selector - Only show if more than 1 site */}
        {!sitesLoading && sites.length > 1 && (
          <div className="relative inline-block">
            <button
              ref={siteSelectorRef}
              onClick={() => setIsSiteSelectorOpen(!isSiteSelectorOpen)}
              className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors"
              aria-label="Switch site"
            >
              <span className="flex items-center gap-2">
                <GridIcon className="w-4 h-4 text-brand-500 dark:text-brand-400" />
                <span className="max-w-[150px] truncate">{site?.name || 'Select Site'}</span>
              </span>
              <ChevronDownIcon className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${isSiteSelectorOpen ? 'rotate-180' : ''}`} />
            </button>
            <Dropdown
              isOpen={isSiteSelectorOpen}
              onClose={() => setIsSiteSelectorOpen(false)}
              anchorRef={siteSelectorRef}
            >
              {sites.map((s) => (
                <DropdownItem
                  key={s.id}
                  onItemClick={() => handleSiteSelect(s.id)}
                  className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
                    site?.id === s.id
                      ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
                      : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
                  }`}
                >
                  <span className="flex-1">{s.name}</span>
                  {site?.id === s.id && (
                    <svg
                      className="w-4 h-4 text-brand-600 dark:text-brand-400"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                  )}
                </DropdownItem>
              ))}
            </Dropdown>
          </div>
        )}
      </div>

      {/* Tabs */}
      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
        <div className="flex gap-4">
          <button
            type="button"
            onClick={() => {
              setActiveTab('general');
              navigate(`/sites/${siteId}/settings`, { replace: true });
            }}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'general'
                ? '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'
            }`}
          >
            <GridIcon className="w-4 h-4 inline mr-2" />
            General
          </button>
          <button
            type="button"
            onClick={() => {
              setActiveTab('integrations');
              navigate(`/sites/${siteId}/settings?tab=integrations`, { replace: true });
            }}
            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'
            }`}
          >
            <PlugInIcon className="w-4 h-4 inline mr-2" />
            Integrations
          </button>
          {(wordPressIntegration || site?.wp_url || site?.wp_api_key || site?.hosting_type === 'wordpress') && (
            <button
              type="button"
              onClick={() => {
                setActiveTab('content-types');
                navigate(`/sites/${siteId}/settings?tab=content-types`, { replace: true });
              }}
              className={`px-4 py-2 font-medium border-b-2 transition-colors ${
                activeTab === 'content-types'
                  ? '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'
              }`}
            >
              <FileIcon className="w-4 h-4 inline mr-2" />
              Content Types
            </button>
          )}
        </div>
      </div>

      {/* Content Types Tab */}
      {activeTab === 'content-types' && (
        <Card>
          <div className="p-6">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className="text-lg font-semibold">WordPress Content Types</h2>
                <p className="text-sm text-gray-500 mt-1">View WordPress site structure and content counts</p>
              </div>
              {wordPressIntegration && (
                <div className="flex items-center gap-3">
                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800">
                    <div className={`w-2 h-2 rounded-full ${
                      wordPressIntegration.sync_status === 'success' ? 'bg-green-500' :
                      wordPressIntegration.sync_status === 'failed' ? 'bg-red-500' :
                      'bg-yellow-500'
                    }`}></div>
                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
                      {wordPressIntegration.sync_status === 'success' ? 'Synced' :
                       wordPressIntegration.sync_status === 'failed' ? 'Failed' : 'Pending'}
                    </span>
                  </div>
                  {(lastSyncTime || wordPressIntegration.last_sync_at) && (
                    <div className="text-xs text-gray-500">
                      {formatRelativeTime(lastSyncTime || wordPressIntegration.last_sync_at)}
                    </div>
                  )}
                </div>
              )}
            </div>
            {contentTypesLoading ? (
              <div className="text-center py-8 text-gray-500">
                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600 mb-3"></div>
                <p>Loading content types...</p>
              </div>
            ) : (
              <>
                <div className="flex items-center justify-end gap-3 mb-6">
                  <Button
                    variant="outline"
                    disabled={syncLoading || !(wordPressIntegration || site?.wp_url || site?.wp_api_key || site?.hosting_type === 'wordpress')}
                    onClick={handleManualSync}
                    className="flex items-center gap-2"
                  >
                    {syncLoading ? (
                      <>
                        <div className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
                        <span>Syncing...</span>
                      </>
                    ) : (
                      <>
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        <span>Sync Structure</span>
                      </>
                    )}
                  </Button>
                </div>

                {!contentTypes ? (
                  <div className="text-center py-12 text-gray-500">
                    <svg className="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                    </svg>
                    <p className="font-medium mb-1">No content types data available</p>
                    <p className="text-sm">Click "Sync Structure" to fetch WordPress content types</p>
                  </div>
                ) : (
                  <>
                    {/* Post Types Section */}
                    <div>
                      <h3 className="text-md font-medium mb-3">Post Types</h3>
                      <div className="space-y-3">
                        {Object.entries(contentTypes.post_types || {}).map(([key, data]: [string, any]) => (
                          <div key={key} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                            <div className="flex-1">
                              <div className="flex items-center gap-3">
                                <h4 className="font-medium">{data.label}</h4>
                                <span className="text-sm text-gray-500">
                                  {data.count} total · {data.synced_count} synced
                                </span>
                              </div>
                              {data.last_synced && (
                                <p className="text-xs text-gray-500 mt-1">
                                  Last synced: {new Date(data.last_synced).toLocaleString()}
                                </p>
                              )}
                            </div>
                            <div className="flex items-center gap-3">
                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
                                {data.enabled ? 'Enabled' : 'Disabled'}
                              </span>
                              <span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Taxonomies Section */}
                    <div>
                      <h3 className="text-md font-medium mb-3">Taxonomies</h3>
                      <div className="space-y-3">
                        {Object.entries(contentTypes.taxonomies || {}).map(([key, data]: [string, any]) => (
                          <div key={key} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                            <div className="flex-1">
                              <div className="flex items-center gap-3">
                                <h4 className="font-medium">{data.label}</h4>
                                <span className="text-sm text-gray-500">
                                  {data.count} total · {data.synced_count} synced
                                </span>
                              </div>
                              {data.last_synced && (
                                <p className="text-xs text-gray-500 mt-1">
                                  Last synced: {new Date(data.last_synced).toLocaleString()}
                                </p>
                              )}
                            </div>
                            <div className="flex items-center gap-3">
                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
                                {data.enabled ? 'Enabled' : 'Disabled'}
                              </span>
                              <span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Summary */}
                    {contentTypes.last_structure_fetch && (
                      <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                          Structure last fetched: {new Date(contentTypes.last_structure_fetch).toLocaleString()}
                        </p>
                      </div>
                    )}
                  </>
                )}
              </>
            )}
          </div>
        </Card>
      )}

      {/* Original tab content below */}
      {activeTab !== 'content-types' && (
        <div className="space-y-6">
        {/* General Tab */}
        {activeTab === 'general' && (
          <>
            {/* 4-Card Layout for Basic Settings, SEO, Open Graph, and Schema */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              {/* Card 1: Basic Site Settings */}
              <Card className="p-6">
                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <GridIcon className="w-5 h-5 text-brand-500" />
                  Basic Settings
                </h3>
                <div className="space-y-4">
                  <div>
                    <Label>Site Name</Label>
                    <input
                      type="text"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>Slug</Label>
                    <input
                      type="text"
                      value={formData.slug}
                      onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>Site URL</Label>
                    <input
                      type="text"
                      value={formData.site_url}
                      onChange={(e) => setFormData({ ...formData, site_url: e.target.value })}
                      placeholder="https://example.com"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>Site Type</Label>
                    <SelectDropdown
                      options={SITE_TYPES}
                      value={formData.site_type}
                      onChange={(value) => setFormData({ ...formData, site_type: value })}
                    />
                  </div>

                  <div>
                    <Label>Hosting Type</Label>
                    <SelectDropdown
                      options={HOSTING_TYPES}
                      value={formData.hosting_type}
                      onChange={(value) => setFormData({ ...formData, hosting_type: value })}
                    />
                  </div>

                  <div>
                    <Checkbox
                      checked={formData.is_active}
                      onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                      label="Active"
                    />
                  </div>
                </div>
              </Card>

              {/* Card 2: SEO Meta Tags */}
              <Card className="p-6">
                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <DocsIcon className="w-5 h-5 text-brand-500" />
                  SEO Meta Tags
                </h3>
                <div className="space-y-4">
                  <div>
                    <Label>Meta Title</Label>
                    <input
                      type="text"
                      value={formData.meta_title}
                      onChange={(e) => setFormData({ ...formData, meta_title: e.target.value })}
                      placeholder="SEO title (recommended: 50-60 characters)"
                      maxLength={60}
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                      {formData.meta_title.length}/60 characters
                    </p>
                  </div>

                  <div>
                    <Label>Meta Description</Label>
                    <TextArea
                      value={formData.meta_description}
                      onChange={(value) => setFormData({ ...formData, meta_description: value })}
                      rows={4}
                      placeholder="SEO description (recommended: 150-160 characters)"
                      maxLength={160}
                      className="mt-1"
                    />
                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                      {formData.meta_description.length}/160 characters
                    </p>
                  </div>

                  <div>
                    <Label>Meta Keywords (comma-separated)</Label>
                    <input
                      type="text"
                      value={formData.meta_keywords}
                      onChange={(e) => setFormData({ ...formData, meta_keywords: e.target.value })}
                      placeholder="keyword1, keyword2, keyword3"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                      Separate keywords with commas
                    </p>
                  </div>
                </div>
              </Card>

              {/* Card 3: Open Graph */}
              <Card className="p-6">
                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <PaperPlaneIcon className="w-5 h-5 text-brand-500" />
                  Open Graph
                </h3>
                <div className="space-y-4">
                  <div>
                    <Label>OG Title</Label>
                    <input
                      type="text"
                      value={formData.og_title}
                      onChange={(e) => setFormData({ ...formData, og_title: e.target.value })}
                      placeholder="Open Graph title"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>OG Description</Label>
                    <TextArea
                      value={formData.og_description}
                      onChange={(value) => setFormData({ ...formData, og_description: value })}
                      rows={3}
                      placeholder="Open Graph description"
                      className="mt-1"
                    />
                  </div>

                  <div>
                    <Label>OG Image URL</Label>
                    <input
                      type="url"
                      value={formData.og_image}
                      onChange={(e) => setFormData({ ...formData, og_image: e.target.value })}
                      placeholder="https://example.com/image.jpg"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                      Recommended: 1200x630px image
                    </p>
                  </div>

                  <div>
                    <Label>OG Type</Label>
                    <SelectDropdown
                      options={[
                        { value: 'website', label: 'Website' },
                        { value: 'article', label: 'Article' },
                        { value: 'business.business', label: 'Business' },
                        { value: 'product', label: 'Product' },
                      ]}
                      value={formData.og_type}
                      onChange={(value) => setFormData({ ...formData, og_type: value })}
                    />
                  </div>

                  <div>
                    <Label>OG Site Name</Label>
                    <input
                      type="text"
                      value={formData.og_site_name}
                      onChange={(e) => setFormData({ ...formData, og_site_name: e.target.value })}
                      placeholder="Site name for social sharing"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>
                </div>
              </Card>

              {/* Card 4: Schema.org */}
              <Card className="p-6">
                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <BoltIcon className="w-5 h-5 text-brand-500" />
                  Schema.org
                </h3>
                <div className="space-y-4">
                  <div>
                    <Label>Schema Type</Label>
                    <SelectDropdown
                      options={[
                        { value: 'Organization', label: 'Organization' },
                        { value: 'LocalBusiness', label: 'Local Business' },
                        { value: 'WebSite', label: 'Website' },
                        { value: 'Corporation', label: 'Corporation' },
                        { value: 'NGO', label: 'NGO' },
                      ]}
                      value={formData.schema_type}
                      onChange={(value) => setFormData({ ...formData, schema_type: value })}
                    />
                  </div>

                  <div>
                    <Label>Schema Name</Label>
                    <input
                      type="text"
                      value={formData.schema_name}
                      onChange={(e) => setFormData({ ...formData, schema_name: e.target.value })}
                      placeholder="Organization name"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>Schema Description</Label>
                    <TextArea
                      value={formData.schema_description}
                      onChange={(value) => setFormData({ ...formData, schema_description: value })}
                      rows={3}
                      placeholder="Organization description"
                      className="mt-1"
                    />
                  </div>

                  <div>
                    <Label>Schema URL</Label>
                    <input
                      type="url"
                      value={formData.schema_url}
                      onChange={(e) => setFormData({ ...formData, schema_url: e.target.value })}
                      placeholder="https://example.com"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>Schema Logo URL</Label>
                    <input
                      type="url"
                      value={formData.schema_logo}
                      onChange={(e) => setFormData({ ...formData, schema_logo: e.target.value })}
                      placeholder="https://example.com/logo.png"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                  </div>

                  <div>
                    <Label>Same As URLs (comma-separated)</Label>
                    <input
                      type="text"
                      value={formData.schema_same_as}
                      onChange={(e) => setFormData({ ...formData, schema_same_as: e.target.value })}
                      placeholder="https://facebook.com/page, https://twitter.com/page"
                      className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                    />
                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                      Social media profiles and other related URLs
                    </p>
                  </div>
                </div>
              </Card>
            </div>

            {/* Sectors Configuration Section */}
            <Card className="p-6">
              <h3 className="text-lg font-semibold mb-4">Industry & Sectors Configuration</h3>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
                Configure up to 5 sectors from your selected industry. Keywords and clusters are automatically associated with sectors.
              </p>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Select Industry
                  </label>
                  <select
                    value={selectedIndustry}
                    onChange={(e) => {
                      setSelectedIndustry(e.target.value);
                      setSelectedSectors([]);
                    }}
                    className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
                  >
                    <option value="">Select an industry...</option>
                    {industries.map((industry) => (
                      <option key={industry.slug} value={industry.slug}>
                        {industry.name}
                      </option>
                    ))}
                  </select>
                  {selectedIndustry && (
                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                      {industries.find(i => i.slug === selectedIndustry)?.description}
                    </p>
                  )}
                </div>

                {selectedIndustry && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Select Sectors (max 5)
                    </label>
                    <div className="space-y-2 max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-4 dark:border-gray-700">
                      {getIndustrySectors().map((sector) => (
                        <label
                          key={sector.slug}
                          className="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
                        >
                          <input
                            type="checkbox"
                            checked={selectedSectors.includes(sector.slug)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                if (selectedSectors.length >= 5) {
                                  toast.error('Maximum 5 sectors allowed per site');
                                  return;
                                }
                                setSelectedSectors([...selectedSectors, sector.slug]);
                              } else {
                                setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
                              }
                            }}
                            className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                          />
                          <div className="flex-1">
                            <div className="font-medium text-sm text-gray-900 dark:text-white">
                              {sector.name}
                            </div>
                            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                              {sector.description}
                            </div>
                          </div>
                        </label>
                      ))}
                    </div>
                    <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                      Selected: {selectedSectors.length} / 5 sectors
                    </p>
                  </div>
                )}

                {selectedIndustry && selectedSectors.length > 0 && (
                  <div className="flex justify-end">
                    <Button 
                      onClick={handleSelectSectors} 
                      variant="primary" 
                      disabled={isSelectingSectors}
                    >
                      {isSelectingSectors ? 'Saving Sectors...' : 'Save Sectors'}
                    </Button>
                  </div>
                )}
              </div>
            </Card>
          </>
        )}

        {/* SEO Meta Tags Tab */}
        {activeTab === 'seo' && (
          <Card className="p-6">
            <div className="space-y-4">
              <div>
                <Label>Meta Title</Label>
                <input
                  type="text"
                  value={formData.meta_title}
                  onChange={(e) => setFormData({ ...formData, meta_title: e.target.value })}
                  placeholder="SEO title (recommended: 50-60 characters)"
                  maxLength={60}
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  {formData.meta_title.length}/60 characters
                </p>
              </div>

              <div>
                <Label>Meta Description</Label>
                <TextArea
                  value={formData.meta_description}
                  onChange={(value) => setFormData({ ...formData, meta_description: value })}
                  rows={4}
                  placeholder="SEO description (recommended: 150-160 characters)"
                  maxLength={160}
                  className="mt-1"
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  {formData.meta_description.length}/160 characters
                </p>
              </div>

              <div>
                <Label>Meta Keywords (comma-separated)</Label>
                <input
                  type="text"
                  value={formData.meta_keywords}
                  onChange={(e) => setFormData({ ...formData, meta_keywords: e.target.value })}
                  placeholder="keyword1, keyword2, keyword3"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  Separate keywords with commas
                </p>
              </div>
            </div>
          </Card>
        )}

        {/* Open Graph Tab */}
        {activeTab === 'og' && (
          <Card className="p-6">
            <div className="space-y-4">
              <div>
                <Label>OG Title</Label>
                <input
                  type="text"
                  value={formData.og_title}
                  onChange={(e) => setFormData({ ...formData, og_title: e.target.value })}
                  placeholder="Open Graph title"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>

              <div>
                <Label>OG Description</Label>
                <TextArea
                  value={formData.og_description}
                  onChange={(value) => setFormData({ ...formData, og_description: value })}
                  rows={4}
                  placeholder="Open Graph description"
                  className="mt-1"
                />
              </div>

              <div>
                <Label>OG Image URL</Label>
                <input
                  type="url"
                  value={formData.og_image}
                  onChange={(e) => setFormData({ ...formData, og_image: e.target.value })}
                  placeholder="https://example.com/image.jpg"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  Recommended: 1200x630px image
                </p>
              </div>

              <div>
                <Label>OG Type</Label>
                <SelectDropdown
                  options={[
                    { value: 'website', label: 'Website' },
                    { value: 'article', label: 'Article' },
                    { value: 'business.business', label: 'Business' },
                    { value: 'product', label: 'Product' },
                  ]}
                  value={formData.og_type}
                  onChange={(e) => setFormData({ ...formData, og_type: e.target.value })}
                />
              </div>

              <div>
                <Label>OG Site Name</Label>
                <input
                  type="text"
                  value={formData.og_site_name}
                  onChange={(e) => setFormData({ ...formData, og_site_name: e.target.value })}
                  placeholder="Site name for social sharing"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>
            </div>
          </Card>
        )}

        {/* Schema.org Tab */}
        {activeTab === 'schema' && (
          <Card className="p-6">
            <div className="space-y-4">
              <div>
                <Label>Schema Type</Label>
                <SelectDropdown
                  options={[
                    { value: 'Organization', label: 'Organization' },
                    { value: 'LocalBusiness', label: 'Local Business' },
                    { value: 'WebSite', label: 'Website' },
                    { value: 'Corporation', label: 'Corporation' },
                    { value: 'NGO', label: 'NGO' },
                  ]}
                  value={formData.schema_type}
                  onChange={(e) => setFormData({ ...formData, schema_type: e.target.value })}
                />
              </div>

              <div>
                <Label>Schema Name</Label>
                <input
                  type="text"
                  value={formData.schema_name}
                  onChange={(e) => setFormData({ ...formData, schema_name: e.target.value })}
                  placeholder="Organization name"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>

              <div>
                <Label>Schema Description</Label>
                <TextArea
                  value={formData.schema_description}
                  onChange={(value) => setFormData({ ...formData, schema_description: value })}
                  rows={3}
                  placeholder="Organization description"
                  className="mt-1"
                />
              </div>

              <div>
                <Label>Schema URL</Label>
                <input
                  type="url"
                  value={formData.schema_url}
                  onChange={(e) => setFormData({ ...formData, schema_url: e.target.value })}
                  placeholder="https://example.com"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>

              <div>
                <Label>Schema Logo URL</Label>
                <input
                  type="url"
                  value={formData.schema_logo}
                  onChange={(e) => setFormData({ ...formData, schema_logo: e.target.value })}
                  placeholder="https://example.com/logo.png"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>

              <div>
                <Label>Same As URLs (comma-separated)</Label>
                <input
                  type="text"
                  value={formData.schema_same_as}
                  onChange={(e) => setFormData({ ...formData, schema_same_as: e.target.value })}
                  placeholder="https://facebook.com/page, https://twitter.com/page"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  Social media profiles and other related URLs
                </p>
              </div>
            </div>
          </Card>
        )}

        {/* Integrations Tab */}
        {activeTab === 'integrations' && siteId && (
          <WordPressIntegrationForm
            siteId={Number(siteId)}
            integration={wordPressIntegration}
            siteName={site?.name}
            siteUrl={site?.domain || site?.wp_url}
            onIntegrationUpdate={handleIntegrationUpdate}
          />
        )}

        {/* Save Button */}
        {activeTab === 'general' && (
          <div className="flex justify-end">
            <Button onClick={handleSave} variant="primary" disabled={saving}>
              {saving ? 'Saving...' : 'Save Settings'}
            </Button>
          </div>
        )}
        </div>
      )}

    </div>
  );
}