import { __, sprintf } from '@wordpress/i18n';
import { useState, useEffect, useCallback } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import { useNotification } from '../../../contexts/NotificationContext';
import {
  Button,
  Toggle,
  Select,
  Input,
  Card,
  Alert,
  Checkbox,
  Textarea,
} from '../../../components/ui';
import {
  Cog6ToothIcon,
  ArrowPathRoundedSquareIcon,
  LinkIcon,
  Squares2X2Icon,
  TagIcon,
  XMarkIcon,
  ChartBarIcon,
  ExclamationTriangleIcon,
} from '@heroicons/react/24/outline';

const DEFAULT_IGNORED_WORDS = [
  'a', 'about', 'above', 'after', 'again', 'all', 'am', 'an', 'and', 'any',
  'are', 'as', 'at', 'be', 'been', 'before', 'being', 'below', 'between',
  'both', 'but', 'by', 'can', 'could', 'did', 'do', 'does', 'doing', 'down',
  'during', 'each', 'few', 'for', 'from', 'further', 'had', 'has', 'have',
  'having', 'he', 'her', 'here', 'hers', 'herself', 'him', 'himself', 'his',
  'how', 'if', 'in', 'into', 'is', 'it', 'its', 'itself', 'just', 'me',
  'more', 'most', 'my', 'myself', 'no', 'nor', 'not', 'of', 'off', 'on',
  'once', 'only', 'or', 'other', 'our', 'ours', 'ourselves', 'out', 'over',
  'own', 'same', 'she', 'should', 'so', 'some', 'such', 'than', 'that',
  'the', 'their', 'them', 'themselves', 'then', 'there', 'these', 'they',
  'this', 'those', 'through', 'to', 'too', 'under', 'until', 'up', 'very',
  'was', 'we', 'were', 'what', 'when', 'where', 'which', 'while', 'who',
  'whom', 'why', 'will', 'with', 'would', 'you', 'your', 'yours', 'yourself',
  'yourselves',
].join('\n');

const countWords = (value) => String(value || '')
  .split(/\r?\n/)
  .map((word) => word.trim())
  .filter(Boolean)
  .length;

const InternalLinkingSettings = () => {
  const [settings, setSettings] = useState({
    enabled: true,
    auto_linking: false,
    max_suggestions: 10,
    max_links_per_post: 5,
    min_word_count: 80,
    link_post_types: ['post', 'page'],
    exclude_categories: [],
    ignore_words: '',
    open_in_new_tab: false,
    open_internal_new_tab: false,
    open_external_new_tab: true,
    add_nofollow: false,
    add_title_attribute: true,
    track_clicks: true,
    suggestion_algorithm: 'balanced', // 'keyword', 'semantic', 'balanced'
    anchor_text_length: 4,
    skip_sentences_with_links: true,
    randomize_suggestions: false,
  });
  
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [categories, setCategories] = useState([]);
  const [showIgnoredWords, setShowIgnoredWords] = useState(false);
  const { showNotification } = useNotification();

  useEffect(() => {
    loadSettings();
    loadCategories();
  }, []);

  const loadSettings = async () => {
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/settings/internal-linking',
      });
      if (response.success && response.data) {
        const normalizedData = { ...response.data };
        const resolvedPostTypes = (
          Array.isArray(normalizedData.post_types) && normalizedData.post_types.length > 0
            ? normalizedData.post_types
            : (Array.isArray(normalizedData.link_post_types) && normalizedData.link_post_types.length > 0
              ? normalizedData.link_post_types
              : ['post', 'page'])
        );
        const resolvedInternalNewTab = Boolean(
          normalizedData.open_internal_new_tab ?? normalizedData.open_in_new_tab ?? false
        );

        setSettings(prevSettings => ({
          ...prevSettings,
          ...normalizedData,
          post_types: resolvedPostTypes,
          open_internal_new_tab: resolvedInternalNewTab,
          ai_suggestions: false,
          ai_anchor_generation: false,
          gsc_integration: false,
          keyword_sources: Array.isArray(normalizedData.keyword_sources)
            ? normalizedData.keyword_sources.filter((source) => !['ai', 'gsc'].includes(source))
            : ['title', 'slug', 'focus', 'categories', 'tags', 'custom'],
        }));
      }
    } catch (error) {
      // Error loading settings
    } finally {
      setLoading(false);
    }
  };

  const loadCategories = async () => {
    try {
      const response = await apiFetch({
        path: '/wp/v2/categories?per_page=100',
      });
      setCategories(response.map(cat => ({
        label: cat.name,
        value: cat.id.toString(),
      })));
    } catch (error) {
      // Error loading categories
    }
  };

  const saveSettings = async () => {
    setSaving(true);
    try {
      const normalizedPostTypes = Array.isArray(settings.post_types) && settings.post_types.length > 0
        ? settings.post_types
        : ['post', 'page'];

      const payload = {
        ...settings,
        post_types: normalizedPostTypes,
        ai_suggestions: false,
        ai_anchor_generation: false,
        gsc_integration: false,
        keyword_sources: (settings.keyword_sources || []).filter((source) => !['ai', 'gsc'].includes(source)),
      };

      const response = await apiFetch({
        path: '/prorank-seo/v1/settings/internal-linking',
        method: 'POST',
        data: payload,
      });
      
      if (response.success) {
        showNotification(__('Settings saved successfully', 'prorank-seo'), 'success');
      } else {
        throw new Error(response.message || 'Failed to save settings');
      }
    } catch (error) {
      showNotification(
        error.message || __('Failed to save settings', 'prorank-seo'),
        'error'
      );
    } finally {
      setSaving(false);
    }
  };

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

  const handleArraySettingChange = (key, value, checked, fallback = []) => {
    const currentValues = Array.isArray(settings[key]) ? settings[key] : fallback;
    const nextValues = checked
      ? Array.from(new Set([...currentValues, value]))
      : currentValues.filter((item) => item !== value);

    handleSettingChange(key, nextValues);
  };

  const ignoredWordsValue = settings.ignored_words || DEFAULT_IGNORED_WORDS;
  const ignoredWordsCount = countWords(ignoredWordsValue);

  if (loading) {
    return (
      <div className="pr:flex pr:flex-col pr:items-center pr:justify-center pr:min-h-[400px] pr:gap-4">
        <div className="pr:animate-spin pr:w-8 pr:h-8 pr:border-4 pr:border-primary-500 pr:border-t-transparent pr:rounded-full" />
        <p className="pr:text-sm pr:text-gray-600">{__('Loading settings...', 'prorank-seo')}</p>
      </div>
    );
  }

  return (
    <div className="pr:space-y-6">
      <Alert variant="info">
        {__('Use this page to configure Internal Linking behavior and optional modules. Run scans, review reports, and execute auto-linking from the Internal Linking page tabs.', 'prorank-seo')}
      </Alert>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <Cog6ToothIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Core Engine', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <Toggle
            label={__('Enable Internal Linking', 'prorank-seo')}
            description={__('Enable or disable internal linking suggestions', 'prorank-seo')}
            checked={settings.enabled}
            onChange={(value) => handleSettingChange('enabled', value)}
          />

          <div>
            <Toggle
              label={__('Auto-Linking', 'prorank-seo')}
              description={__('Apply saved keyword-to-URL rules during preview runs and background batches', 'prorank-seo')}
              checked={settings.auto_linking}
              onChange={(value) => handleSettingChange('auto_linking', value)}
              disabled={!settings.enabled}
            />
          </div>

          <Input
            type="number"
            label={__('Maximum Suggestions Per Post', 'prorank-seo')}
            helperText={__('Maximum number of link suggestions to show', 'prorank-seo')}
            value={settings.max_suggestions}
            onChange={(value) => handleSettingChange('max_suggestions', parseInt(value))}
            min={1}
            max={50}
            disabled={!settings.enabled}
          />

          <Input
            type="number"
            label={__('Maximum Links Per Post', 'prorank-seo')}
            helperText={__('Maximum internal links to add per post', 'prorank-seo')}
            value={settings.max_links_per_post}
            onChange={(value) => handleSettingChange('max_links_per_post', parseInt(value))}
            min={1}
            max={20}
            disabled={!settings.enabled}
          />

          <Input
            type="number"
            label={__('Minimum Word Count', 'prorank-seo')}
            helperText={__('Minimum words required before suggesting links', 'prorank-seo')}
            value={settings.min_word_count}
            onChange={(value) => handleSettingChange('min_word_count', parseInt(value))}
            min={30}
            max={500}
            step={10}
            disabled={!settings.enabled}
          />
        </div>
      </Card>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <ArrowPathRoundedSquareIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Suggestion Logic', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <Select
            label={__('Algorithm Type', 'prorank-seo')}
            helperText={__('Choose how suggestions are generated', 'prorank-seo')}
            value={settings.suggestion_algorithm}
            options={[
              { label: __('Keyword Matching', 'prorank-seo'), value: 'keyword' },
              { label: __('Contextual Analysis', 'prorank-seo'), value: 'semantic' },
              { label: __('Balanced (Recommended)', 'prorank-seo'), value: 'balanced' },
            ]}
            onChange={(value) => handleSettingChange('suggestion_algorithm', value)}
            disabled={!settings.enabled}
          />

          <Input
            type="number"
            label={__('Minimum Anchor Text Words', 'prorank-seo')}
            helperText={__('Minimum words in anchor text', 'prorank-seo')}
            value={settings.anchor_text_length}
            onChange={(value) => handleSettingChange('anchor_text_length', parseInt(value))}
            min={1}
            max={10}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Skip Sentences with Existing Links', 'prorank-seo')}
            description={__('Don\'t suggest links in sentences that already have links', 'prorank-seo')}
            checked={settings.skip_sentences_with_links}
            onChange={(value) => handleSettingChange('skip_sentences_with_links', value)}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Randomize Suggestions', 'prorank-seo')}
            description={__('Show suggestions in random order instead of by relevance', 'prorank-seo')}
            checked={settings.randomize_suggestions}
            onChange={(value) => handleSettingChange('randomize_suggestions', value)}
            disabled={!settings.enabled}
          />
        </div>
      </Card>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <LinkIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Link Output', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <Toggle
            label={__('Open Internal Links in New Tab', 'prorank-seo')}
            description={__('Add target="_blank" to ProRank-created internal links', 'prorank-seo')}
            checked={settings.open_internal_new_tab}
            onChange={(value) => handleSettingChange('open_internal_new_tab', value)}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Open External Links in New Tab', 'prorank-seo')}
            description={__('Add target="_blank" to ProRank-created external links', 'prorank-seo')}
            checked={settings.open_external_new_tab}
            onChange={(value) => handleSettingChange('open_external_new_tab', value)}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Add Nofollow Attribute', 'prorank-seo')}
            description={__('Add rel="nofollow" to ProRank-created external links', 'prorank-seo')}
            checked={settings.add_nofollow}
            onChange={(value) => handleSettingChange('add_nofollow', value)}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Track Link Clicks', 'prorank-seo')}
            description={__('Enable click tracking for internal links. Required for link performance reporting.', 'prorank-seo')}
            checked={settings.track_clicks}
            onChange={(value) => handleSettingChange('track_clicks', value)}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Add Destination Post Title to Links', 'prorank-seo')}
            description={__('Add title attribute with destination post title', 'prorank-seo')}
            checked={settings.add_title_attribute}
            onChange={(value) => handleSettingChange('add_title_attribute', value)}
            disabled={!settings.enabled}
          />
        </div>
      </Card>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <Squares2X2Icon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Content Scope', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <div>
            <label className="pr:block pr:text-sm pr:font-medium pr:text-gray-700 pr:mb-2">
              {__('Post Types to Process', 'prorank-seo')}
            </label>
            <p className="pr:text-xs pr:text-gray-500 pr:mb-3">
              {__('Select which post types to include in internal linking', 'prorank-seo')}
            </p>
            <div className="pr:grid pr:grid-cols-1 pr:md:grid-cols-2 pr:gap-3">
              {[
                { value: 'post', label: __('Posts', 'prorank-seo') },
                { value: 'page', label: __('Pages', 'prorank-seo') },
                { value: 'attachment', label: __('Media', 'prorank-seo') },
                { value: 'product', label: __('Products (WooCommerce)', 'prorank-seo') },
              ].map(type => (
                <Checkbox
                  key={type.value}
                  label={type.label}
                  checked={Boolean(Array.isArray(settings.post_types) && settings.post_types.includes(type.value))}
                  onChange={(checked) => handleArraySettingChange('post_types', type.value, checked, ['post', 'page'])}
                  disabled={!settings.enabled}
                  className="pr:rounded-lg pr:border pr:border-gray-200 pr:bg-white pr:p-3"
                />
              ))}
            </div>
          </div>

          <div className="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-900 pr:mb-2">
              {__('Page Builder Content Support', 'prorank-seo')}
            </p>
            <p className="pr:text-xs pr:text-gray-600 pr:mb-2">
              {__('Internal linking analysis includes standard editor content plus major page-builder fields.', 'prorank-seo')}
            </p>
            <div className="pr:flex pr:flex-wrap pr:gap-2">
              <span className="pr:inline-flex pr:items-center pr:rounded-full pr:bg-emerald-100 pr:px-2.5 pr:py-1 pr:text-xs pr:font-medium pr:text-emerald-800">
                Elementor
              </span>
              <span className="pr:inline-flex pr:items-center pr:rounded-full pr:bg-emerald-100 pr:px-2.5 pr:py-1 pr:text-xs pr:font-medium pr:text-emerald-800">
                Beaver Builder
              </span>
              <span className="pr:inline-flex pr:items-center pr:rounded-full pr:bg-emerald-100 pr:px-2.5 pr:py-1 pr:text-xs pr:font-medium pr:text-emerald-800">
                Divi
              </span>
            </div>
          </div>

          <Select
            label={__('Post Status to Create Links For', 'prorank-seo')}
            helperText={__('Which post statuses should be considered for linking', 'prorank-seo')}
            value={settings.post_statuses || 'publish'}
            options={[
              { label: __('Published Only', 'prorank-seo'), value: 'publish' },
              { label: __('Published & Private', 'prorank-seo'), value: 'publish,private' },
              { label: __('All Including Drafts', 'prorank-seo'), value: 'all' },
            ]}
            onChange={(value) => handleSettingChange('post_statuses', value)}
            disabled={!settings.enabled}
          />

          <Input
            type="number"
            label={__('Number of Sentences to Skip at Beginning', 'prorank-seo')}
            helperText={__('Skip this many opening sentences during auto-linking runs', 'prorank-seo')}
            value={settings.skip_sentences || 3}
            onChange={(value) => handleSettingChange('skip_sentences', parseInt(value))}
            min={0}
            max={10}
            disabled={!settings.enabled}
          />

          <Select
            label={__('Maximum Age of Posts to Link To', 'prorank-seo')}
            helperText={__('Don\'t suggest links to posts older than this', 'prorank-seo')}
            value={settings.max_post_age || 'no_limit'}
            options={[
              { label: __('No Limit', 'prorank-seo'), value: 'no_limit' },
              { label: __('1 Month', 'prorank-seo'), value: '30' },
              { label: __('3 Months', 'prorank-seo'), value: '90' },
              { label: __('6 Months', 'prorank-seo'), value: '180' },
              { label: __('1 Year', 'prorank-seo'), value: '365' },
              { label: __('2 Years', 'prorank-seo'), value: '730' },
            ]}
            onChange={(value) => handleSettingChange('max_post_age', value)}
            disabled={!settings.enabled}
          />

          <div>
            <Input
              type="number"
              label={__('Maximum Outbound Links Per Post', 'prorank-seo')}
              helperText={__('Maximum outbound internal links to add per post (0 = No Limit)', 'prorank-seo')}
              value={settings.max_outbound_links || 0}
              onChange={(value) => handleSettingChange('max_outbound_links', parseInt(value))}
              min={0}
              max={50}
              disabled={!settings.enabled}
            />
          </div>

          <div>
            <Input
              type="number"
              label={__('Maximum Inbound Links Per Post', 'prorank-seo')}
              helperText={__('Maximum inbound internal links auto-linking can create for a post (0 = No Limit)', 'prorank-seo')}
              value={settings.max_inbound_links || 0}
              onChange={(value) => handleSettingChange('max_inbound_links', parseInt(value))}
              min={0}
              max={50}
              disabled={!settings.enabled}
            />
          </div>
        </div>
      </Card>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <TagIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Keyword Sources', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-4">
          <p className="pr:text-sm pr:text-gray-500">
            {__('Select which sources to use for identifying target keywords', 'prorank-seo')}
          </p>
          <div className="pr:grid pr:grid-cols-1 pr:md:grid-cols-2 pr:gap-3">
            {[
              { value: 'focus', label: __('ProRank Focus Keywords', 'prorank-seo') },
              { value: 'title', label: __('Page Title Keywords', 'prorank-seo') },
              { value: 'slug', label: __('URL Slug Keywords', 'prorank-seo') },
              { value: 'categories', label: __('Category Names', 'prorank-seo') },
              { value: 'tags', label: __('Tag Names', 'prorank-seo') },
              { value: 'custom', label: __('Custom Keywords', 'prorank-seo') },
            ].map(source => (
              <Checkbox
                key={source.value}
                label={source.label}
                checked={Boolean(Array.isArray(settings.keyword_sources) && settings.keyword_sources.includes(source.value))}
                onChange={(checked) => handleArraySettingChange('keyword_sources', source.value, checked, ['title', 'slug'])}
                disabled={!settings.enabled}
                className="pr:rounded-lg pr:border pr:border-gray-200 pr:bg-white pr:p-3"
              />
            ))}
          </div>
        </div>
      </Card>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <XMarkIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Exclusions', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <Toggle
            label={__('Ignore Numbers', 'prorank-seo')}
            description={__('Don\'t create links from numeric values', 'prorank-seo')}
            checked={settings.ignore_numbers}
            onChange={(value) => handleSettingChange('ignore_numbers', value)}
            disabled={!settings.enabled}
          />

          <Select
            label={__('Selected Language', 'prorank-seo')}
            helperText={__('Language for stop words and stemming (native support for English, Spanish, French, German, Italian, Portuguese, Dutch, Polish, Swedish, Turkish)', 'prorank-seo')}
            value={settings.language || 'en'}
            options={[
              { label: __('English', 'prorank-seo'), value: 'en' },
              { label: __('Spanish', 'prorank-seo'), value: 'es' },
              { label: __('French', 'prorank-seo'), value: 'fr' },
              { label: __('German', 'prorank-seo'), value: 'de' },
              { label: __('Italian', 'prorank-seo'), value: 'it' },
              { label: __('Portuguese', 'prorank-seo'), value: 'pt' },
              { label: __('Dutch', 'prorank-seo'), value: 'nl' },
              { label: __('Polish', 'prorank-seo'), value: 'pl' },
              { label: __('Swedish', 'prorank-seo'), value: 'sv' },
              { label: __('Turkish', 'prorank-seo'), value: 'tr' },
            ]}
            onChange={(value) => handleSettingChange('language', value)}
            disabled={!settings.enabled}
          />

          <div className="pr:rounded-lg pr:border pr:border-gray-200 pr:bg-gray-50 pr:p-4">
            <div className="pr:flex pr:flex-col pr:gap-3 pr:sm:flex-row pr:sm:items-start pr:sm:justify-between">
              <div>
                <p className="pr:text-sm pr:font-medium pr:text-gray-900">
                  {__('Words to be Ignored', 'prorank-seo')}
                </p>
                <p className="pr:mt-1 pr:text-xs pr:text-gray-600">
                  {sprintf(
                    __('%d stop words are ignored before suggestions are generated.', 'prorank-seo'),
                    ignoredWordsCount
                  )}
                </p>
              </div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowIgnoredWords((visible) => !visible)}
                disabled={!settings.enabled}
              >
                {showIgnoredWords
                  ? __('Hide stop words', 'prorank-seo')
                  : __('Edit stop words', 'prorank-seo')}
              </Button>
            </div>

            {showIgnoredWords && (
              <Textarea
                className="pr:mt-4"
                label={__('Stop Word List', 'prorank-seo')}
                helperText={__('One word per line. These words will not be used for link suggestions.', 'prorank-seo')}
                value={ignoredWordsValue}
                onChange={(value) => handleSettingChange('ignored_words', value)}
                rows={10}
                disabled={!settings.enabled}
              />
            )}
          </div>

          <Input
            label={__('Additional Ignore Words', 'prorank-seo')}
            helperText={__('Comma-separated list of additional words to ignore', 'prorank-seo')}
            value={settings.ignore_words}
            onChange={(value) => handleSettingChange('ignore_words', value)}
            placeholder="example, test, demo"
            disabled={!settings.enabled}
          />

          {categories.length > 0 && (
            <div>
              <label className="pr:block pr:text-sm pr:font-medium pr:text-gray-700 pr:mb-2">
                {__('Exclude Categories', 'prorank-seo')}
              </label>
              <p className="pr:text-xs pr:text-gray-500 pr:mb-3">
                {__('Select categories to exclude from linking', 'prorank-seo')}
              </p>
              <div className="pr:grid pr:max-h-72 pr:grid-cols-1 pr:gap-3 pr:overflow-y-auto pr:rounded-lg pr:border pr:border-gray-200 pr:bg-gray-50 pr:p-3 pr:md:grid-cols-2">
                {categories.map(cat => (
                  <Checkbox
                    key={cat.value}
                    label={cat.label}
                    checked={Boolean(Array.isArray(settings.exclude_categories) && settings.exclude_categories.includes(cat.value))}
                    onChange={(checked) => handleArraySettingChange('exclude_categories', cat.value, checked)}
                    disabled={!settings.enabled}
                    className="pr:rounded-md pr:bg-white pr:p-2"
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      </Card>

      <Alert variant="info">
        {__('Optional modules below control reports and scans. Configure them here, then use the Links Report, Broken Links, and other Internal Linking tabs to run the actual workflows.', 'prorank-seo')}
      </Alert>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <ChartBarIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Report Analytics Module', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <Toggle
            label={__('Enable Links Report Analytics', 'prorank-seo')}
            description={__('Track and analyze internal link performance', 'prorank-seo')}
            checked={settings.enable_link_analysis || false}
            onChange={(value) => handleSettingChange('enable_link_analysis', value)}
            disabled={!settings.enabled}
          />

          <Toggle
            label={__('Track Click-Through Rates', 'prorank-seo')}
            description={__('Monitor how often internal links are clicked', 'prorank-seo')}
            checked={settings.track_ctr || false}
            onChange={(value) => handleSettingChange('track_ctr', value)}
            disabled={!settings.enabled || !settings.enable_link_analysis}
          />

          <Toggle
            label={__('Generate Link Reports', 'prorank-seo')}
            description={__('Store scan snapshots for Links Report history and exports', 'prorank-seo')}
            checked={settings.generate_reports || false}
            onChange={(value) => handleSettingChange('generate_reports', value)}
            disabled={!settings.enabled || !settings.enable_link_analysis}
          />
        </div>
      </Card>

      <Card
        header={
          <div className="pr:flex pr:items-center pr:gap-2">
            <ExclamationTriangleIcon className="pr:w-5 pr:h-5 pr:text-gray-500" />
            <h2 className="pr:text-lg pr:font-semibold pr:text-gray-900">
              {__('Broken Links Module', 'prorank-seo')}
            </h2>
          </div>
        }
      >
        <div className="pr:space-y-6">
          <Toggle
            label={__('Enable Broken Link Detection', 'prorank-seo')}
            description={__('Automatically detect and report broken internal links', 'prorank-seo')}
            checked={settings.detect_broken_links || false}
            onChange={(value) => handleSettingChange('detect_broken_links', value)}
            disabled={!settings.enabled}
          />

          <Select
            label={__('Check Frequency', 'prorank-seo')}
            helperText={__('How often to check for broken links', 'prorank-seo')}
            value={settings.check_frequency || 'weekly'}
            options={[
              { label: __('Daily', 'prorank-seo'), value: 'daily' },
              { label: __('Weekly', 'prorank-seo'), value: 'weekly' },
              { label: __('Monthly', 'prorank-seo'), value: 'monthly' },
            ]}
            onChange={(value) => handleSettingChange('check_frequency', value)}
            disabled={!settings.enabled || !settings.detect_broken_links}
          />

          <Toggle
            label={__('Email Notifications', 'prorank-seo')}
            description={__('Send email when broken links are found', 'prorank-seo')}
            checked={settings.email_broken_links || false}
            onChange={(value) => handleSettingChange('email_broken_links', value)}
            disabled={!settings.enabled || !settings.detect_broken_links}
          />
        </div>
      </Card>

      <div className="pr:flex pr:justify-end pr:pt-6 pr:border-t pr:border-gray-200">
        <Button
          variant="primary"
          onClick={saveSettings}
          loading={saving}
          disabled={saving}
        >
          {saving ? __('Saving...', 'prorank-seo') : __('Save Settings', 'prorank-seo')}
        </Button>
      </div>

      {/* Task 6 — Keyword Map Runs & Rollback */}
      <KeywordMapRunsPanel showNotification={showNotification} textDomain="prorank-seo" />
    </div>
  );
};

const KeywordMapRunsPanel = ({ showNotification, textDomain }) => {
  const [runs, setRuns] = useState([]);
  const [loadingRuns, setLoadingRuns] = useState(false);
  const [busyRunId, setBusyRunId] = useState(null);
  const [lastResult, setLastResult] = useState(null);
  const [dryRunBusy, setDryRunBusy] = useState(false);
  const [dryRunPreview, setDryRunPreview] = useState(null);
  const [applyBusy, setApplyBusy] = useState(false);

  const reloadRuns = useCallback(async () => {
    setLoadingRuns(true);
    try {
      const response = await apiFetch({ path: '/prorank-seo/v1/linking/keyword-map/runs?limit=20' });
      const data = response?.data || response || [];
      setRuns(Array.isArray(data) ? data : []);
    } catch (err) {
      showNotification(err?.message || __('Failed to load runs.', textDomain), 'error');
    } finally {
      setLoadingRuns(false);
    }
  }, [showNotification, textDomain]);

  useEffect(() => {
    reloadRuns();
  }, [reloadRuns]);

  const handleDryRun = async () => {
    setDryRunBusy(true);
    setDryRunPreview(null);
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/keyword-map/dry-run',
        method: 'POST',
        data: { rule_ids: [], post_limit: 100 },
      });
      setDryRunPreview(response?.data || response);
    } catch (err) {
      showNotification(err?.message || __('Dry-run failed.', textDomain), 'error');
    } finally {
      setDryRunBusy(false);
    }
  };

  const handleApply = async () => {
    if (!dryRunPreview?.dry_run_id) {
      showNotification(__('Run a dry-run preview first.', textDomain), 'error');
      return;
    }
    setApplyBusy(true);
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/keyword-map/apply',
        method: 'POST',
        data: {
          rule_ids: [],
          post_limit: 100,
          dry_run_id: dryRunPreview.dry_run_id,
        },
      });
      const result = response?.data || response;
      showNotification(
        sprintf(__('Applied: %d post(s) updated.', textDomain), result?.posts_changed || 0),
        'success'
      );
      setDryRunPreview(null);
      await reloadRuns();
    } catch (err) {
      showNotification(err?.message || __('Apply failed.', textDomain), 'error');
    } finally {
      setApplyBusy(false);
    }
  };

  const handleRollback = async (runId) => {
    if (!runId) return;
    setBusyRunId(runId);
    setLastResult(null);
    try {
      const response = await apiFetch({
        path: `/prorank-seo/v1/linking/keyword-map/rollback/${encodeURIComponent(runId)}`,
        method: 'POST',
      });
      const data = response?.data || response;
      setLastResult({ runId, ...data });
      if ((data?.restored || 0) > 0) {
        showNotification(sprintf(__('Restored %d post(s).', textDomain), data.restored), 'success');
      } else if ((data?.conflicts || 0) > 0) {
        showNotification(
          sprintf(__('Refused: %d post(s) changed since apply (conflict).', textDomain), data.conflicts),
          'error'
        );
      } else if (data?.details?.error) {
        showNotification(String(data.details.error), 'error');
      }
      await reloadRuns();
    } catch (err) {
      showNotification(err?.message || __('Rollback failed.', textDomain), 'error');
    } finally {
      setBusyRunId(null);
    }
  };

  const fmtTime = (epoch) => {
    if (!epoch) return '—';
    try { return new Date(epoch * 1000).toLocaleString(); } catch (e) { return String(epoch); }
  };

  return (
    <Card>
      <div className="pr:p-6 pr:space-y-4">
        <div>
          <h3 className="pr:text-base pr:font-semibold pr:text-gray-900">
            {__('Keyword Map — Dry-Run, Apply & Rollback', textDomain)}
          </h3>
          <p className="pr:text-sm pr:text-gray-600 pr:mt-1">
            {__(
              'Preview where your enabled keyword rules would insert internal links, then apply. Every apply is captured so you can roll back later (hash-verified to refuse overwriting edits made after the apply).',
              textDomain
            )}
          </p>
        </div>

        <div className="pr:flex pr:flex-wrap pr:gap-2">
          <Button variant="secondary" onClick={handleDryRun} disabled={dryRunBusy}>
            {dryRunBusy ? __('Scanning…', textDomain) : __('Run dry-run preview', textDomain)}
          </Button>
          <Button variant="primary" onClick={handleApply} disabled={applyBusy || !dryRunPreview}>
            {applyBusy ? __('Applying…', textDomain) : __('Apply', textDomain)}
          </Button>
        </div>

        {dryRunPreview && (
          <div className="pr:bg-gray-50 pr:border pr:border-gray-200 pr:rounded-xs pr:p-3 pr:text-sm">
            <div className="pr:font-medium pr:mb-1">{__('Dry-run preview', textDomain)}</div>
            <ul className="pr:list-disc pr:ml-5 pr:space-y-1">
              <li>{sprintf(__('Posts scanned: %d', textDomain), dryRunPreview.posts_scanned || 0)}</li>
              <li>{sprintf(__('Posts that would change: %d', textDomain), dryRunPreview.posts_changed || 0)}</li>
              <li>{sprintf(__('Total matches: %d', textDomain), dryRunPreview.total_matches || 0)}</li>
            </ul>
            {Array.isArray(dryRunPreview.items) && dryRunPreview.items.length > 0 && (
              <details className="pr:mt-2">
                <summary className="pr:cursor-pointer pr:text-xs pr:text-gray-700">
                  {sprintf(__('Show first %d affected posts', textDomain), Math.min(dryRunPreview.items.length, 10))}
                </summary>
                <ul className="pr:mt-1 pr:ml-5 pr:list-disc pr:text-xs pr:text-gray-700 pr:space-y-1">
                  {dryRunPreview.items.slice(0, 10).map((item) => (
                    <li key={item.post_id}>
                      <strong>{item.post_title || `#${item.post_id}`}</strong>
                      {' '}— {item.match_count} {__('match(es)', textDomain)}
                    </li>
                  ))}
                </ul>
              </details>
            )}
          </div>
        )}

        <hr className="pr:border-gray-200" />

        <div>
          <div className="pr:flex pr:items-center pr:justify-between pr:mb-2">
            <h4 className="pr:text-sm pr:font-medium pr:text-gray-900">{__('Recent apply runs', textDomain)}</h4>
            <Button size="sm" variant="ghost" onClick={reloadRuns} disabled={loadingRuns}>
              {loadingRuns ? __('Loading…', textDomain) : __('Refresh', textDomain)}
            </Button>
          </div>
          {runs.length === 0 ? (
            <p className="pr:text-sm pr:text-gray-500">{__('No apply runs recorded yet.', textDomain)}</p>
          ) : (
            <div className="pr:overflow-x-auto">
              <table className="pr:w-full pr:text-sm pr:border-collapse">
                <thead className="pr:bg-gray-50">
                  <tr>
                    <th className="pr:px-3 pr:py-2 pr:text-left pr:font-medium pr:text-gray-700">{__('When', textDomain)}</th>
                    <th className="pr:px-3 pr:py-2 pr:text-left pr:font-medium pr:text-gray-700">{__('Posts', textDomain)}</th>
                    <th className="pr:px-3 pr:py-2 pr:text-left pr:font-medium pr:text-gray-700">{__('Matches', textDomain)}</th>
                    <th className="pr:px-3 pr:py-2 pr:text-left pr:font-medium pr:text-gray-700">{__('Status', textDomain)}</th>
                    <th className="pr:px-3 pr:py-2 pr:text-left pr:font-medium pr:text-gray-700">{__('Action', textDomain)}</th>
                  </tr>
                </thead>
                <tbody className="pr:bg-white pr:divide-y pr:divide-gray-200">
                  {runs.map((run) => (
                    <tr key={run.run_id}>
                      <td className="pr:px-3 pr:py-2 pr:text-gray-700">{fmtTime(run.timestamp)}</td>
                      <td className="pr:px-3 pr:py-2">{run.posts_changed || 0}</td>
                      <td className="pr:px-3 pr:py-2">{run.total_matches || 0}</td>
                      <td className="pr:px-3 pr:py-2">
                        <span className={`pr:px-2 pr:py-0.5 pr:text-xs pr:rounded-xs ${
                          run.status === 'rolled_back'
                            ? 'pr:bg-amber-100 pr:text-amber-700'
                            : 'pr:bg-success-100 pr:text-success-700'
                        }`}>
                          {run.status === 'rolled_back'
                            ? __('Rolled back', textDomain)
                            : __('Applied', textDomain)}
                        </span>
                      </td>
                      <td className="pr:px-3 pr:py-2">
                        {run.status !== 'rolled_back' ? (
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => handleRollback(run.run_id)}
                            disabled={busyRunId === run.run_id}
                            className="pr:text-amber-600"
                          >
                            {busyRunId === run.run_id ? __('Rolling back…', textDomain) : __('Rollback', textDomain)}
                          </Button>
                        ) : (
                          <span className="pr:text-xs pr:text-gray-500">
                            {fmtTime(run.rolled_back_at)}
                          </span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {lastResult && (
            <div className="pr:mt-3 pr:text-sm pr:bg-gray-50 pr:border pr:border-gray-200 pr:rounded-xs pr:p-3">
              <div className="pr:font-medium pr:mb-1">{__('Last rollback result', textDomain)}</div>
              <ul className="pr:list-disc pr:ml-5 pr:space-y-1">
                <li>{sprintf(__('Restored: %d', textDomain), lastResult.restored || 0)}</li>
                <li>{sprintf(__('Conflicts (refused): %d', textDomain), lastResult.conflicts || 0)}</li>
                <li>{sprintf(__('Missing: %d', textDomain), lastResult.missing || 0)}</li>
              </ul>
            </div>
          )}
        </div>
      </div>
    </Card>
  );
};

export default InternalLinkingSettings;