import { useState, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { useNotification } from '../../../contexts/NotificationContext';
import { Toggle, Textarea, Input, Button, Alert, Spinner, Card, Tabs } from '../../../components/ui';
import { Heading, Text } from '../../../components/common/Typography';

const RobotsIndexingSettings = () => {
  const [settings, setSettings] = useState({
    enable_robots_editor: false,
    robots_txt_rules: '',
    block_ai_bots: false,
    ai_bot_categories: [],
    enable_indexnow: false,
    indexnow_api_key: '',
    // Content Safeguard settings
    enable_noai_meta: false,
    enable_noimageai_meta: false,
    enable_rule_noindex: false,
    rule_min_words: 300,
    rule_max_age_days: 0,
    // Global Noindex settings
    noindex_posts: false,
    noindex_pages: false,
    noindex_attachments: true,
    noindex_author: false,
    noindex_date: true,
    noindex_category: false,
    noindex_tag: false,
    noindex_search: true,
    noindex_404: true,
    noindex_paginated: false,
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [validating, setValidating] = useState(false);
  const [validatingKeyFile, setValidatingKeyFile] = useState(false);
  const [generatingKey, setGeneratingKey] = useState(false);
  const [indexNowValidation, setIndexNowValidation] = useState(null);
  const [indexNowKeyFileValidation, setIndexNowKeyFileValidation] = useState(null);
  const [hasChanges, setHasChanges] = useState(false);
  const [physicalRobotsExists, setPhysicalRobotsExists] = useState(false);

  const { showNotification } = useNotification();
  const isCore = true;

  const loadSettings = async () => {
    setLoading(true);
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/settings/robots_indexing',
      });

      const loadedSettings = response.settings || {
        enable_robots_editor: false,
        robots_txt_rules: '',
        block_ai_bots: false,
        enable_indexnow: false,
        indexnow_api_key: '',
        enable_noai_meta: false,
        enable_noimageai_meta: false,
        enable_rule_noindex: false,
        rule_min_words: 300,
        rule_max_age_days: 0,
        noindex_posts: false,
        noindex_pages: false,
        noindex_attachments: true,
        noindex_author: false,
        noindex_date: true,
        noindex_category: false,
        noindex_tag: false,
        noindex_search: true,
        noindex_404: true,
        noindex_paginated: false,
      };

      setSettings(loadedSettings);
      setPhysicalRobotsExists((response.meta && response.meta.physical_robots_exists) || false);

      const savedIndexNowKey = (loadedSettings.indexnow_api_key || '').trim();
      if (savedIndexNowKey) {
        setIndexNowValidation({
          status: savedIndexNowKey.length >= 16 && savedIndexNowKey.length <= 128 ? 'valid' : 'invalid',
          message:
            savedIndexNowKey.length >= 16 && savedIndexNowKey.length <= 128
              ? __('IndexNow key format is valid.', 'prorank-seo')
              : __('IndexNow key must be between 16 and 128 characters.', 'prorank-seo'),
        });
        await validateIndexNowKeyFile(true, savedIndexNowKey);
      } else {
        setIndexNowValidation(null);
        setIndexNowKeyFileValidation(null);
      }
    } catch (error) {
      showNotification(__('Failed to load settings', 'prorank-seo'), 'error');
    } finally {
      setLoading(false);
    }
  };

  // Load settings on mount
  useEffect(() => {
    loadSettings();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSettingChange = (key, value) => {
    setSettings((prev) => ({
      ...prev,
      [key]: value,
    }));

    if (key === 'indexnow_api_key') {
      setIndexNowValidation(null);
      setIndexNowKeyFileValidation(null);
    }

    setHasChanges(true);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await apiFetch({
        path: '/prorank-seo/v1/settings/robots_indexing',
        method: 'POST',
        data: settings,
      });

      showNotification(__('Settings saved successfully', 'prorank-seo'), 'success');
      setHasChanges(false);
    } catch (error) {
      showNotification(error.message || __('Failed to save settings', 'prorank-seo'), 'error');
    } finally {
      setSaving(false);
    }
  };

  const validateApiKey = async (type) => {
    setValidating(true);

    const key = settings.indexnow_api_key;

    if (!key) {
      showNotification(__('Please enter a key to validate', 'prorank-seo'), 'warning');
      if (type === 'indexnow') {
        setIndexNowValidation({
          status: 'invalid',
          message: __('IndexNow key is empty. Please enter a key first.', 'prorank-seo'),
        });
      }
      setValidating(false);
      return;
    }

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/settings/robots_indexing/validate-key',
        method: 'POST',
        data: { type, key },
      });

      showNotification(response.message, 'success');

      if (type === 'indexnow') {
        setIndexNowValidation({
          status: 'valid',
          message: response.message || __('IndexNow key format is valid.', 'prorank-seo'),
        });

        // Format validation succeeded; validate public key file as well.
        await validateIndexNowKeyFile(true);
      }

      if (type === 'google' && response.client_email) {
        showNotification(
          sprintf(
            /* translators: %s: service account email */
            __('Service account: %s', 'prorank-seo'),
            response.client_email
          ),
          'info'
        );
      }
    } catch (error) {
      if (type === 'indexnow') {
        setIndexNowValidation({
          status: 'invalid',
          message: error.message || __('IndexNow key validation failed.', 'prorank-seo'),
        });
      }
      showNotification(error.message || __('Validation failed', 'prorank-seo'), 'error');
    } finally {
      setValidating(false);
    }
  };

  const validateIndexNowKeyFile = async (silent = false, explicitKey = '') => {
    const key = (explicitKey || settings.indexnow_api_key || '').trim();
    if (!key) {
      setIndexNowKeyFileValidation({
        status: 'invalid',
        message: __('IndexNow key file cannot be verified without a key.', 'prorank-seo'),
      });
      if (!silent) {
        showNotification(__('Please enter an IndexNow key first.', 'prorank-seo'), 'warning');
      }
      return;
    }

    setValidatingKeyFile(true);
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/settings/robots_indexing/validate-key-file',
        method: 'POST',
        data: { key },
      });

      setIndexNowKeyFileValidation({
        status: 'valid',
        message: response.message || __('IndexNow key file is valid.', 'prorank-seo'),
      });

      if (!silent) {
        showNotification(response.message || __('IndexNow key file is valid.', 'prorank-seo'), 'success');
      }
    } catch (error) {
      const keyFileUrl = error?.data?.key_file_url;
      const baseMessage = error.message || __('IndexNow key file validation failed.', 'prorank-seo');
      const fullMessage = keyFileUrl
        ? sprintf(
          /* translators: %1$s: error message, %2$s: key file URL */
          __('%1$s Check: %2$s', 'prorank-seo'),
          baseMessage,
          keyFileUrl
        )
        : baseMessage;

      setIndexNowKeyFileValidation({
        status: 'invalid',
        message: fullMessage,
      });

      if (!silent) {
        showNotification(baseMessage, 'error');
      }
    } finally {
      setValidatingKeyFile(false);
    }
  };

  const generateIndexNowKey = async () => {
    setGeneratingKey(true);
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/settings/robots_indexing/generate-indexnow-key',
        method: 'POST',
      });

      setSettings((prev) => ({
        ...prev,
        ...(response.settings || {}),
        indexnow_api_key: response.key || prev.indexnow_api_key,
        enable_indexnow: true,
      }));
      setIndexNowValidation(null);
      setIndexNowKeyFileValidation(null);
      setHasChanges(false);

      showNotification(
        response.message || __('IndexNow key generated successfully', 'prorank-seo'),
        'success'
      );

      if (response.key_file_url) {
        showNotification(
          sprintf(
            /* translators: %s: key verification file URL */
            __('Verification file: %s', 'prorank-seo'),
            response.key_file_url
          ),
          'info'
        );
      }
    } catch (error) {
      showNotification(error.message || __('Failed to generate IndexNow key', 'prorank-seo'), 'error');
    } finally {
      setGeneratingKey(false);
    }
  };

  const tabs = [
    {
      name: 'robots',
      title: __('Robots.txt', 'prorank-seo'),
      content: (
        <div className="prorank-settings-content pr:transition-all pr:duration-300">
          {physicalRobotsExists && (
            <Alert variant="warning" className="pr:mb-4">
              <strong>{__('Physical robots.txt detected', 'prorank-seo')}</strong>
              <p>
                {__(
                  'A physical robots.txt file exists in your site root. The virtual editor will be disabled to prevent conflicts.',
                  'prorank-seo'
                )}
              </p>
            </Alert>
          )}

          <Card>
            
              <div>
                <Toggle
                  label={__('Enable Virtual Robots.txt Editor', 'prorank-seo')}
                  helpText={__(
                    'Create and manage robots.txt rules without a physical file',
                    'prorank-seo'
                  )}
                  checked={settings.enable_robots_editor && !physicalRobotsExists}
                  onChange={(checked) => handleSettingChange('enable_robots_editor', checked)}
                  disabled={physicalRobotsExists}
                />
              </div>

              {settings.enable_robots_editor && !physicalRobotsExists && (
                <div className="pr:mt-4">
                  <Textarea
                    label={__('Robots.txt Rules', 'prorank-seo')}
                    helpText={__(
                      'Enter your custom robots.txt rules. Sitemap URL will be added automatically.',
                      'prorank-seo'
                    )}
                    value={settings.robots_txt_rules}
                    onChange={(value) => handleSettingChange('robots_txt_rules', value)}
                    rows={10}
                    placeholder={`User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php`}
                  />
                </div>
              )}

              <div className="pr:mt-5">
                <Toggle
                  label={__('Block AI/ML Training Bots via Robots.txt', 'prorank-seo')}
                  helpText={__(
                    physicalRobotsExists
                      ? 'A physical robots.txt file is active. Edit that file directly if you want to block AI crawlers.'
                      : 'Adds robots.txt Disallow rules for known AI crawlers. Compliant bots may honor these directives, but robots.txt is advisory and not an enforceable access control.',
                    'prorank-seo'
                  )}
                  checked={settings.block_ai_bots}
                  onChange={(checked) => handleSettingChange('block_ai_bots', checked)}
                  disabled={physicalRobotsExists}
                />
                {physicalRobotsExists && (
                  <Alert variant="warning" className="pr:mt-2.5">
                    {__(
                      'Because a physical robots.txt file exists in your site root, ProRank cannot inject the AI bot blocking rules here. Update the physical file directly if you want those bots blocked.',
                      'prorank-seo'
                    )}
                  </Alert>
                )}
                {settings.block_ai_bots && !physicalRobotsExists && (
                  <Alert variant="info" className="pr:mt-2.5">
                    <strong>{__('How this works:', 'prorank-seo')}</strong>
                    <br />
                    {__(
                      'This adds Disallow rules for 44 known AI crawlers to your virtual robots.txt. Many compliant bots respect these directives, but non-compliant crawlers can ignore them.',
                      'prorank-seo'
                    )}
                    <br /><br />
                    {__(
                      'Use server-level or firewall blocking if you need enforceable protection instead of crawler guidance.',
                      'prorank-seo'
                    )}
                    <br /><br />
                    <strong>{__('Blocked bots include:', 'prorank-seo')}</strong> GPTBot, Claude-Web, Gemini-Bot, Bard-Bot, PerplexityBot, MidJourney-Bot, DALL-E-Bot, and many others.
                  </Alert>
                )}

                {!settings.block_ai_bots && !physicalRobotsExists && (
                  <div className="pr:mt-4 pr:space-y-2 pr:rounded-lg pr:border pr:border-gray-200 pr:bg-gray-50 pr:p-4">
                    <p className="pr:text-sm pr:font-medium pr:text-gray-700">
                      {__('Or block only specific AI crawler groups:', 'prorank-seo')}
                    </p>
                    <p className="pr:text-xs pr:text-gray-500">
                      {__('Pick the vendors you want to keep out — for example block OpenAI training but still allow AI search engines that can send you traffic.', 'prorank-seo')}
                    </p>
                    {[
                      { key: 'openai', label: __('OpenAI (GPTBot, ChatGPT-User, OAI-SearchBot)', 'prorank-seo') },
                      { key: 'google', label: __('Google AI training (Google-Extended, Gemini-Bot, GoogleOther)', 'prorank-seo') },
                      { key: 'anthropic', label: __('Anthropic (ClaudeBot, Claude-Web)', 'prorank-seo') },
                      { key: 'microsoft_apple', label: __('Microsoft & Apple AI (Bingbot-Extended, Applebot-Extended)', 'prorank-seo') },
                      { key: 'meta_amazon', label: __('Meta & Amazon (FacebookBot, Meta-AI, Amazonbot)', 'prorank-seo') },
                      { key: 'ai_search', label: __('AI search engines (PerplexityBot, YouBot, cohere-ai)', 'prorank-seo') },
                      { key: 'image_media', label: __('Image/media scrapers (Bytespider, img2dataset, MidJourney-Bot)', 'prorank-seo') },
                      { key: 'research_training', label: __('Research & dataset crawlers (CCBot/Common Crawl, AI2Bot, omgili)', 'prorank-seo') },
                    ].map(({ key, label }) => {
                      const selected = Array.isArray(settings.ai_bot_categories) && settings.ai_bot_categories.includes(key);
                      return (
                        <label key={key} className="pr:flex pr:items-center pr:gap-2 pr:text-sm pr:text-gray-700">
                          <input
                            type="checkbox"
                            checked={selected}
                            onChange={() => {
                              const current = Array.isArray(settings.ai_bot_categories) ? settings.ai_bot_categories : [];
                              handleSettingChange(
                                'ai_bot_categories',
                                selected ? current.filter((c) => c !== key) : [...current, key]
                              );
                            }}
                          />
                          {label}
                        </label>
                      );
                    })}
                  </div>
                )}
              </div>
            
          </Card>
        </div>
      ),
    },
    {
      name: 'indexing',
      title: __('Indexing', 'prorank-seo'),
      content: (
        <div className="prorank-settings-content pr:transition-all pr:duration-300">
          <Card>
            
              <h3>{__('IndexNow', 'prorank-seo')}</h3>
              <Text>
                {__('Submit URLs instantly to participating search engines.', 'prorank-seo')}
              </Text>

              <div className="pr:mt-4">
                <Toggle
                  label={__('Enable IndexNow', 'prorank-seo')}
                  helpText={__(
                    'Automatically submit new and updated content to IndexNow',
                    'prorank-seo'
                  )}
                  checked={settings.enable_indexnow || false}
                  onChange={(checked) => handleSettingChange('enable_indexnow', checked)}
                />

                {settings.enable_indexnow && (
                  <>
                    <div className="pr:mt-4">
                      <Input
                        label={__('IndexNow API Key', 'prorank-seo')}
                        helpText={
                          <>
                            {__('Get your key from ', 'prorank-seo')}
                            <a href="https://www.bing.com/indexnow" target="_blank" rel="noopener noreferrer" className="pr:text-primary-600 pr:hover:text-primary-700 pr:transition-all pr:duration-300">
                              {__('IndexNow', 'prorank-seo')}
                            </a>
                          </>
                        }
                        value={settings.indexnow_api_key}
                        onChange={(value) => handleSettingChange('indexnow_api_key', value)}
                        disabled={!isCore}
                      />
                    </div>

                    <div className="pr:mt-2 pr:flex pr:gap-2 pr:flex-wrap">
                      <Button
                        variant="secondary"
                        onClick={generateIndexNowKey}
                        disabled={!isCore || generatingKey}
                        loading={generatingKey}
                      >
                        {__('Generate Key', 'prorank-seo')}
                      </Button>

                      <Button
                        variant="secondary"
                        onClick={() => validateApiKey('indexnow')}
                        disabled={!isCore || validating}
                        loading={validating}
                      >
                        {__('Validate Key', 'prorank-seo')}
                      </Button>

                      <Button
                        variant="secondary"
                        onClick={() => validateIndexNowKeyFile(false)}
                        disabled={!isCore || validatingKeyFile}
                        loading={validatingKeyFile}
                      >
                        {__('Validate Key File', 'prorank-seo')}
                      </Button>
                    </div>

                    {settings.indexnow_api_key?.trim() && (
                      <Alert
                        variant={
                          indexNowValidation?.status === 'valid'
                            ? 'success'
                            : indexNowValidation?.status === 'invalid'
                              ? 'error'
                              : 'info'
                        }
                        className="pr:mt-3"
                      >
                        {indexNowValidation?.message || __('Key status: Not validated yet.', 'prorank-seo')}
                      </Alert>
                    )}

                    {settings.indexnow_api_key?.trim() && (
                      <Alert
                        variant={
                          indexNowKeyFileValidation?.status === 'valid'
                            ? 'success'
                            : indexNowKeyFileValidation?.status === 'invalid'
                              ? 'error'
                              : 'info'
                        }
                        className="pr:mt-2"
                      >
                        {indexNowKeyFileValidation?.message || __('Key file status: Not validated yet.', 'prorank-seo')}
                      </Alert>
                    )}
                  </>
                )}
              </div>
            
          </Card>
        </div>
      ),
    },
    {
      name: 'noindex',
      title: __('Global Noindex', 'prorank-seo'),
      content: (
        <div className="prorank-settings-content pr:transition-all pr:duration-300">
          <Card>
            
              <h3>{__('Post Types', 'prorank-seo')}</h3>
              <Text>
                {__(
                  'Set noindex for entire post types to prevent them from appearing in search results.',
                  'prorank-seo'
                )}
              </Text>

              <div className="pr:mt-5 pr:space-y-4">
                <Toggle
                  label={__('Noindex Posts', 'prorank-seo')}
                  helpText={__('Prevent all blog posts from being indexed', 'prorank-seo')}
                  checked={settings.noindex_posts || false}
                  onChange={(checked) => handleSettingChange('noindex_posts', checked)}
                />

                <Toggle
                  label={__('Noindex Pages', 'prorank-seo')}
                  helpText={__('Prevent all pages from being indexed', 'prorank-seo')}
                  checked={settings.noindex_pages || false}
                  onChange={(checked) => handleSettingChange('noindex_pages', checked)}
                />

                <Toggle
                  label={__('Noindex Media Attachments', 'prorank-seo')}
                  helpText={__(
                    'Prevent attachment pages from being indexed (recommended)',
                    'prorank-seo'
                  )}
                  checked={settings.noindex_attachments || false}
                  onChange={(checked) => handleSettingChange('noindex_attachments', checked)}
                />
              </div>
            
          </Card>

          <Card className="pr:mt-5">
            
              <h3>{__('Archives', 'prorank-seo')}</h3>
              <Text>
                {__(
                  'Control indexing of archive pages to prevent duplicate content issues.',
                  'prorank-seo'
                )}
              </Text>

              <div className="pr:mt-5 pr:space-y-4">
                <Toggle
                  label={__('Noindex Author Archives', 'prorank-seo')}
                  helpText={__('Prevent author archive pages from being indexed', 'prorank-seo')}
                  checked={settings.noindex_author || false}
                  onChange={(checked) => handleSettingChange('noindex_author', checked)}
                />

                <Toggle
                  label={__('Noindex Date Archives', 'prorank-seo')}
                  helpText={__('Prevent date-based archive pages from being indexed', 'prorank-seo')}
                  checked={settings.noindex_date || false}
                  onChange={(checked) => handleSettingChange('noindex_date', checked)}
                />

                <Toggle
                  label={__('Noindex Category Archives', 'prorank-seo')}
                  helpText={__('Prevent category archive pages from being indexed', 'prorank-seo')}
                  checked={settings.noindex_category || false}
                  onChange={(checked) => handleSettingChange('noindex_category', checked)}
                />

                <Toggle
                  label={__('Noindex Tag Archives', 'prorank-seo')}
                  helpText={__('Prevent tag archive pages from being indexed', 'prorank-seo')}
                  checked={settings.noindex_tag || false}
                  onChange={(checked) => handleSettingChange('noindex_tag', checked)}
                />
              </div>
            
          </Card>

          <Card className="pr:mt-5">
            
              <h3>{__('Special Pages', 'prorank-seo')}</h3>
              <p>{__('Control indexing of special WordPress pages.', 'prorank-seo')}</p>

              <div className="pr:mt-5 pr:space-y-4">
                <Toggle
                  label={__('Noindex Search Results', 'prorank-seo')}
                  helpText={__(
                    'Keep internal search results out of search indexes. WordPress commonly noindexes these already, and this setting reinforces that behavior.',
                    'prorank-seo'
                  )}
                  checked={settings.noindex_search || false}
                  onChange={(checked) => handleSettingChange('noindex_search', checked)}
                />

                <Toggle
                  label={__('Noindex 404 Pages', 'prorank-seo')}
                  helpText={__('Keep 404 error pages out of search indexes. WordPress commonly noindexes these already, and this setting reinforces that behavior.', 'prorank-seo')}
                  checked={settings.noindex_404 || false}
                  onChange={(checked) => handleSettingChange('noindex_404', checked)}
                />

                <Toggle
                  label={__('Noindex Paginated Pages', 'prorank-seo')}
                  helpText={__(
                    'Prevent paginated pages (page 2, 3, etc.) from being indexed',
                    'prorank-seo'
                  )}
                  checked={settings.noindex_paginated || false}
                  onChange={(checked) => handleSettingChange('noindex_paginated', checked)}
                />
              </div>
            
          </Card>

          <Alert variant="warning" className="pr:mt-5">
            <strong>{__('Important:', 'prorank-seo')}</strong>{' '}
            {__(
              "These settings will prevent entire sections of your site from appearing in search results. Use with caution and only noindex content that you don't want search engines to find.",
              'prorank-seo'
            )}
          </Alert>
        </div>
      ),
    },
    {
      name: 'safeguard',
      title: __('Content Safeguard', 'prorank-seo'),
      content: (
        <div className="prorank-settings-content pr:transition-all pr:duration-300">
          <Card>
            
              <h3>{__('AI Content Protection Meta Tags', 'prorank-seo')}</h3>
              <Text>
                {__(
                  'Add robots meta directives that politely request AI systems not to use your content for training. These signals are voluntary and may be ignored.',
                  'prorank-seo'
                )}
              </Text>

              <div className="pr:mt-5 pr:space-y-4">
                <Toggle
                  label={__('Add "noai" meta tag to all pages', 'prorank-seo')}
                  helpText={__(
                    'Requests AI systems not to use your text content for training purposes',
                    'prorank-seo'
                  )}
                  checked={settings.enable_noai_meta || false}
                  onChange={(checked) => handleSettingChange('enable_noai_meta', checked)}
                />

                <Toggle
                  label={__('Add "noimageai" meta tag to all pages', 'prorank-seo')}
                  helpText={__(
                    'Requests AI systems not to use your images for training purposes',
                    'prorank-seo'
                  )}
                  checked={settings.enable_noimageai_meta || false}
                  onChange={(checked) => handleSettingChange('enable_noimageai_meta', checked)}
                />
              </div>

              <Alert variant="warning" className="pr:mt-5">
                <strong>{__('Important Distinction:', 'prorank-seo')}</strong>
                <br /><br />
                <strong>{__('Meta Tags (this section):', 'prorank-seo')}</strong> {__('Polite requests that some AI systems may honor. Content can still be crawled and viewed.', 'prorank-seo')}
                <br /><br />
                <strong>{__('Robots.txt Blocking (Robots.txt tab):', 'prorank-seo')}</strong> {__('Adds crawler directives in robots.txt that many compliant AI bots may honor, but non-compliant crawlers can ignore.', 'prorank-seo')}
                <br /><br />
                {__('For broader coverage, combine meta directives with server-level or firewall controls.', 'prorank-seo')}
              </Alert>
            
          </Card>

          <Card className="pr:mt-5">
            
              <div>
                <Heading level={3}>
                  {__('Rule-based Noindex for Thin Content', 'prorank-seo')}
                </Heading>
                <Text>
                  {__(
                    'Automatically noindex thin or stale singular content based on word-count and age rules. The homepage, posts page, and WooCommerce products are excluded.',
                    'prorank-seo'
                  )}
                </Text>

                <div className="pr:mt-5">
                  <Toggle
                    label={__('Enable Rule-based Noindex', 'prorank-seo')}
                    helpText={__(
                      'Automatically add noindex to pages that meet your criteria',
                      'prorank-seo'
                    )}
                    checked={settings.enable_rule_noindex || false}
                    onChange={(checked) => handleSettingChange('enable_rule_noindex', checked)}
                    disabled={!isCore}
                  />
                </div>

                {settings.enable_rule_noindex && isCore && (
                  <>
                    <div className="pr:mt-5">
                      <Input
                        label={__('Minimum word count for indexing', 'prorank-seo')}
                        helpText={__(
                          'Singular content with fewer words than this will be noindexed',
                          'prorank-seo'
                        )}
                        type="number"
                        value={settings.rule_min_words || 300}
                        onChange={(value) =>
                          handleSettingChange('rule_min_words', parseInt(value) || 300)
                        }
                        min="0"
                      />
                    </div>

                    <div className="pr:mt-5">
                      <Input
                        label={__('Maximum content age for indexing (days)', 'prorank-seo')}
                        helpText={__(
                          'Singular content older than this will be noindexed (0 for no limit)',
                          'prorank-seo'
                        )}
                        type="number"
                        value={settings.rule_max_age_days || 0}
                        onChange={(value) =>
                          handleSettingChange('rule_max_age_days', parseInt(value) || 0)
                        }
                        min="0"
                      />
                    </div>
                  </>
                )}

              </div>
            
          </Card>
        </div>
      ),
    },
    {
      name: 'help',
      title: __('Help', 'prorank-seo'),
      content: (
        <div className="prorank-settings-help pr:transition-all pr:duration-300">
          <Card>
            
              <h3>{__('About Robots & Indexing', 'prorank-seo')}</h3>
              <Text>
                {__(
                  'Control how search engines crawl and index your site with these powerful tools:',
                  'prorank-seo'
                )}
              </Text>

              <ul className="pr:ml-5 pr:list-disc pr:mt-2 pr:space-y-1">
                <li>{__('Virtual robots.txt editor for easy management', 'prorank-seo')}</li>
                <li>
                  {__('IndexNow for instant URL submission to participating search engines', 'prorank-seo')}
                </li>
                <li>{__('Content safeguard for AI-training opt-out signals and thin-content noindex rules', 'prorank-seo')}</li>
              </ul>

              <h3 className="pr:mt-4">{__('Setup Guides', 'prorank-seo')}</h3>

              <Text className="pr:mt-2">
                <strong>{__('IndexNow:', 'prorank-seo')}</strong>
                <br />
                {__('1. Use "Generate Key" in ProRank (or provide your existing key)', 'prorank-seo')}
                <br />
                {__('2. Enter the key in the settings above', 'prorank-seo')}
                <br />
                {__('3. ProRank will create the verification file automatically', 'prorank-seo')}
              </Text>

              <Alert variant="info" className="pr:mt-3">
                <strong>{__('Tip', 'prorank-seo')}</strong>
                <p>
                  {__(
                    'IndexNow lets you notify one supported endpoint and participating search engines share those URL submissions across the protocol. No OAuth is required.',
                    'prorank-seo'
                  )}
                </p>
              </Alert>

              <div className="prorank-help-links pr:mt-4">
                <Button
                  variant="link"
                  href="https://prorank.io/docs/robots-indexing"
                >
                  {__('View Full Documentation →', 'prorank-seo')}
                </Button>
              </div>
            
          </Card>
        </div>
      ),
    },
  ];

  if (loading) {
    return (
      <div className="prorank-settings-loading pr:text-center pr:p-5 pr:transition-all pr:duration-300">
        <Spinner />
        <p className="pr:mt-2">{__('Loading settings…', 'prorank-seo')}</p>
      </div>
    );
  }

  return (
    <div className="prorank-robots-indexing-settings">
      <Tabs className="prorank-settings-tabs" activeClass="is-active" tabs={tabs}>
        {(tab) => <div className="pr:transition-all pr:duration-300">{tab.content}</div>}
      </Tabs>

      <div className="prorank-settings-footer pr:transition-all pr:duration-300">
        <Button
          variant="primary"
          onClick={handleSave}
          loading={saving}
          disabled={saving || !isCore}
        >
          {saving ? __('Saving…', 'prorank-seo') : __('Save Settings', 'prorank-seo')}
        </Button>

        {hasChanges && (
          <Text className="prorank-unsaved-notice pr:ml-3">
            {__('You have unsaved changes', 'prorank-seo')}
          </Text>
        )}
      </div>
    </div>
  );
};

export default RobotsIndexingSettings;