import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import {
  Alert,
  Button,
  Card,
  CardBody,
  CardHeader,
  Input,
  RangeInput,
  Spinner,
  Toggle,
} from '../../components/ui';

const TEXT_DOMAIN = 'prorank-seo';

const DEFAULT_SETTINGS = {
  enabled: true,
  auto_linking: false,
  max_links_per_post: 5,
  min_word_count: 80,
  post_types: ['post', 'page'],
  open_internal_new_tab: false,
  add_nofollow: false,
};

const DEFAULT_RULE = {
  keyword: '',
  target_url: '',
  case_sensitive: false,
  whole_word: true,
  max_links_per_post: 1,
  max_total_links: 10,
  exclude_posts: '',
  priority: 5,
  enabled: true,
};

const KNOWN_POST_TYPE_LABELS = {
  post: __('Posts', TEXT_DOMAIN),
  page: __('Pages', TEXT_DOMAIN),
  product: __('Products', TEXT_DOMAIN),
  prorank_podcast: __('Podcast Episodes', TEXT_DOMAIN),
};

const formatNumber = (value) => Number(value || 0).toLocaleString();

const getStatusLabel = (value) => {
  const status = String(value || '');
  return status ? status.charAt(0).toUpperCase() + status.slice(1) : __('Idle', TEXT_DOMAIN);
};

const StatCard = ({ value, label, meta, tone = 'total', compact = false }) => (
  <Card className="prorank-il-kpi-card" padding="none" data-tone={tone}>
    <div>
      <div className={`prorank-il-kpi-value${compact ? ' prorank-il-kpi-value--compact' : ''}`}>
        {value}
      </div>
      <div className="prorank-il-kpi-label">{label}</div>
      {meta && <div className="prorank-il-kpi-meta">{meta}</div>}
    </div>
  </Card>
);

const PanelHeading = ({ title, description, action }) => (
  <div className="prorank-auto-linking__panel-head">
    <div>
      <h3 className="prorank-auto-linking__panel-title">{title}</h3>
      {description && <p className="prorank-auto-linking__panel-copy">{description}</p>}
    </div>
    {action && <div className="prorank-auto-linking__panel-action">{action}</div>}
  </div>
);

const SettingRow = ({ label, value, tone = 'default' }) => (
  <div className="prorank-auto-linking__setting-row">
    <span>{label}</span>
    <strong data-tone={tone}>{value}</strong>
  </div>
);

const AutoLinkingTool = () => {
  const [loading, setLoading] = useState(true);
  const [processing, setProcessing] = useState('');
  const [creatingRule, setCreatingRule] = useState(false);
  const [rules, setRules] = useState([]);
  const [preview, setPreview] = useState([]);
  const [notice, setNotice] = useState(null);
  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
  const [ruleForm, setRuleForm] = useState(DEFAULT_RULE);
  const [stats, setStats] = useState({
    total_rules: 0,
    active_rules: 0,
    links_created: 0,
    last_run: null,
    current_job: null,
  });

  const currentJob = stats.current_job || null;
  const isBatchRunning = currentJob?.status === 'processing';
  const activeRuleCount = useMemo(
    () => rules.filter((rule) => !!rule.enabled).length,
    [rules]
  );
  const runDisabled = processing !== '' || isBatchRunning || !settings.auto_linking || activeRuleCount === 0;
  const lastRunLabel = stats.last_run ? new Date(stats.last_run).toLocaleDateString() : __('Never', TEXT_DOMAIN);

  const settingsSummary = useMemo(() => {
    const enabledTypes = (settings.post_types || []).map((type) => KNOWN_POST_TYPE_LABELS[type] || type);

    return [
      {
        label: __('Internal Linking', TEXT_DOMAIN),
        value: settings.enabled ? __('Enabled', TEXT_DOMAIN) : __('Disabled', TEXT_DOMAIN),
        tone: settings.enabled ? 'success' : 'warning',
      },
      {
        label: __('Auto Linking', TEXT_DOMAIN),
        value: settings.auto_linking ? __('Enabled', TEXT_DOMAIN) : __('Disabled', TEXT_DOMAIN),
        tone: settings.auto_linking ? 'success' : 'warning',
      },
      {
        label: __('Max Links Per Post', TEXT_DOMAIN),
        value: String(Number(settings.max_links_per_post || 5)),
      },
      {
        label: __('Minimum Word Count', TEXT_DOMAIN),
        value: String(Number(settings.min_word_count || 80)),
      },
      {
        label: __('Open In New Tab', TEXT_DOMAIN),
        value: settings.open_internal_new_tab ? __('Yes', TEXT_DOMAIN) : __('No', TEXT_DOMAIN),
      },
      {
        label: __('Add Nofollow', TEXT_DOMAIN),
        value: settings.add_nofollow ? __('Yes', TEXT_DOMAIN) : __('No', TEXT_DOMAIN),
      },
      {
        label: __('Post Types', TEXT_DOMAIN),
        value: enabledTypes.length ? enabledTypes.join(', ') : __('None selected', TEXT_DOMAIN),
      },
    ];
  }, [settings]);

  const openSettingsTab = () => {
    const baseHash = window.location.hash.split('?')[0];
    window.location.hash = `${baseHash}?tab=settings`;
  };

  const loadSettings = useCallback(async () => {
    const response = await apiFetch({
      path: '/prorank-seo/v1/settings/internal-linking',
    });

    const payload = response?.data || response || {};
    setSettings((prev) => ({
      ...prev,
      ...payload,
      post_types: Array.isArray(payload.post_types)
        ? payload.post_types
        : (Array.isArray(payload.link_post_types) ? payload.link_post_types : prev.post_types),
      open_internal_new_tab: Boolean(payload.open_internal_new_tab ?? payload.open_in_new_tab ?? prev.open_internal_new_tab),
      add_nofollow: Boolean(payload.add_nofollow ?? prev.add_nofollow),
    }));
  }, []);

  const loadRules = useCallback(async () => {
    const response = await apiFetch({
      path: '/prorank-seo/v1/linking/auto-link-rules',
    });

    setRules(response?.data?.rules || []);
  }, []);

  const loadStats = useCallback(async () => {
    const response = await apiFetch({
      path: '/prorank-seo/v1/linking/auto-link-stats',
    });

    setStats((response?.data || response || {}));
  }, []);

  const bootstrap = useCallback(async () => {
    setLoading(true);
    setNotice(null);

    try {
      await Promise.all([loadSettings(), loadRules(), loadStats()]);
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not load auto-linking data.', TEXT_DOMAIN),
      });
    } finally {
      setLoading(false);
    }
  }, [loadRules, loadSettings, loadStats]);

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

  useEffect(() => {
    if (!isBatchRunning) {
      return undefined;
    }

    const intervalId = window.setInterval(() => {
      loadStats().catch(() => undefined);
    }, 3000);

    return () => window.clearInterval(intervalId);
  }, [isBatchRunning, loadStats]);

  const handleRuleField = (field, value) => {
    setRuleForm((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const createRule = async () => {
    if (!ruleForm.keyword.trim() || !ruleForm.target_url.trim()) {
      setNotice({
        variant: 'warning',
        message: __('Keyword and target URL are required.', TEXT_DOMAIN),
      });
      return;
    }

    setCreatingRule(true);

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/auto-link-rule',
        method: 'POST',
        data: ruleForm,
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Could not create rule.', TEXT_DOMAIN));
      }

      setRuleForm(DEFAULT_RULE);
      await Promise.all([loadRules(), loadStats()]);
      setNotice({
        variant: 'success',
        message: __('Auto-link rule created.', TEXT_DOMAIN),
      });
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not create rule.', TEXT_DOMAIN),
      });
    } finally {
      setCreatingRule(false);
    }
  };

  const toggleRule = async (rule) => {
    try {
      const response = await apiFetch({
        path: `/prorank-seo/v1/linking/auto-link-rule/${rule.id}/toggle`,
        method: 'POST',
        data: { enabled: !rule.enabled },
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Could not update rule.', TEXT_DOMAIN));
      }

      await Promise.all([loadRules(), loadStats()]);
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not update rule.', TEXT_DOMAIN),
      });
    }
  };

  const cancelAutoLinking = async () => {
    setProcessing('cancel');

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/cancel-auto-linking',
        method: 'POST',
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Could not cancel auto-linking.', TEXT_DOMAIN));
      }

      await loadStats();
      setNotice({
        variant: 'info',
        message: response?.message || __('Auto-linking run cancelled.', TEXT_DOMAIN),
      });
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not cancel auto-linking.', TEXT_DOMAIN),
      });
    } finally {
      setProcessing('');
    }
  };

  const resumeAutoLinking = async () => {
    setProcessing('resume');

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/resume-auto-linking',
        method: 'POST',
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Could not resume auto-linking.', TEXT_DOMAIN));
      }

      await loadStats();
      setNotice({
        variant: 'success',
        message: response?.message || __('Auto-linking resumed.', TEXT_DOMAIN),
      });
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not resume auto-linking.', TEXT_DOMAIN),
      });
    } finally {
      setProcessing('');
    }
  };

  const clearAutoLinkingJob = async () => {
    setProcessing('clear');

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/clear-auto-linking-job',
        method: 'POST',
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Could not clear auto-linking job state.', TEXT_DOMAIN));
      }

      await loadStats();
      setNotice({
        variant: 'info',
        message: response?.message || __('Saved auto-linking job state cleared.', TEXT_DOMAIN),
      });
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not clear auto-linking job state.', TEXT_DOMAIN),
      });
    } finally {
      setProcessing('');
    }
  };

  const deleteRule = async (rule) => {
    try {
      const response = await apiFetch({
        path: `/prorank-seo/v1/linking/auto-link-rule/${rule.id}`,
        method: 'DELETE',
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Could not delete rule.', TEXT_DOMAIN));
      }

      await Promise.all([loadRules(), loadStats()]);
      setNotice({
        variant: 'success',
        message: __('Auto-link rule deleted.', TEXT_DOMAIN),
      });
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Could not delete rule.', TEXT_DOMAIN),
      });
    }
  };

  const runAutoLinking = async (dryRun = false) => {
    if (!settings.auto_linking) {
      setNotice({
        variant: 'warning',
        message: __('Enable Auto Linking in settings before running preview or automation.', TEXT_DOMAIN),
      });
      return;
    }

    if (rules.length === 0) {
      setNotice({
        variant: 'warning',
        message: __('Add at least one auto-link rule before running this tool.', TEXT_DOMAIN),
      });
      return;
    }

    if (activeRuleCount === 0) {
      setNotice({
        variant: 'warning',
        message: __('Enable at least one auto-link rule before running this tool.', TEXT_DOMAIN),
      });
      return;
    }

    setProcessing(dryRun ? 'preview' : 'run');

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/run-auto-linking',
        method: 'POST',
        data: {
          dry_run: dryRun,
          max_links: settings.max_links_per_post,
          post_types: settings.post_types,
        },
      });

      if (!response?.success) {
        throw new Error(response?.message || __('Auto-linking failed.', TEXT_DOMAIN));
      }

      const payload = response?.data || {};
      if (dryRun) {
        setPreview(payload.preview || []);
        await loadStats();
        await loadRules();
        setNotice({
          variant: 'info',
          message: payload.preview?.length
            ? sprintf(__('Preview ready: %1$d posts would be updated.', TEXT_DOMAIN), payload.preview.length)
            : __('Preview complete. No eligible matches were found.', TEXT_DOMAIN),
        });
      } else {
        setPreview([]);
        await loadStats();
        await loadRules();
        setNotice({
          variant: payload.already_running ? 'info' : 'success',
          message: response?.message || __('Auto-linking started in the background.', TEXT_DOMAIN),
        });
      }
    } catch (error) {
      setNotice({
        variant: 'error',
        message: error?.message || __('Auto-linking failed.', TEXT_DOMAIN),
      });
    } finally {
      setProcessing('');
    }
  };

  if (loading) {
    return (
      <div className="prorank-auto-linking prorank-auto-linking--loading">
        <Spinner size="lg" />
        <span>{__('Loading Auto Linking...', TEXT_DOMAIN)}</span>
      </div>
    );
  }

  return (
    <div className="prorank-auto-linking">
      {notice && (
        <Alert variant={notice.variant} className="pr:mb-4">
          {notice.message}
        </Alert>
      )}

      <div className="prorank-il-hero">
        <div>
          <span className="prorank-il-hero__eyebrow">
            {__('Internal Linking', TEXT_DOMAIN)}
          </span>
          <h2 className="prorank-il-hero__title">
            {__('Auto Linking', TEXT_DOMAIN)}
          </h2>
          <p className="prorank-il-hero__meta">
            {__('Create keyword-to-URL rules, preview changes, and run the rules-based linker.', TEXT_DOMAIN)}
          </p>
        </div>
        <div className="prorank-il-hero__actions">
          <Button
            variant="secondary"
            onClick={() => runAutoLinking(true)}
            disabled={runDisabled}
            className="prorank-il-hero-button"
          >
            {processing === 'preview' ? __('Previewing...', TEXT_DOMAIN) : __('Preview Run', TEXT_DOMAIN)}
          </Button>
          <Button
            variant="primary"
            onClick={() => runAutoLinking(false)}
            loading={processing === 'run'}
            disabled={runDisabled}
            className="prorank-il-hero-button is-primary"
          >
            {processing === 'run'
              ? __('Starting...', TEXT_DOMAIN)
              : (isBatchRunning ? __('Background Run Active', TEXT_DOMAIN) : __('Run Auto Linking', TEXT_DOMAIN))}
          </Button>
          {isBatchRunning && (
            <Button
              variant="secondary"
              onClick={cancelAutoLinking}
              loading={processing === 'cancel'}
              disabled={processing !== ''}
              className="prorank-il-hero-button"
            >
              {processing === 'cancel' ? __('Cancelling...', TEXT_DOMAIN) : __('Cancel Run', TEXT_DOMAIN)}
            </Button>
          )}
        </div>
      </div>

      {!settings.auto_linking && (
        <Alert variant="warning" className="pr:mb-4">
          {__('Auto Linking is disabled in the master Internal Linking settings. Enable it before previewing or running rules.', TEXT_DOMAIN)}
        </Alert>
      )}

      {settings.auto_linking && rules.length === 0 && (
        <Alert variant="info" className="pr:mb-4">
          {__('Create your first keyword-to-URL rule before running a preview or background auto-linking job.', TEXT_DOMAIN)}
        </Alert>
      )}

      {settings.auto_linking && rules.length > 0 && activeRuleCount === 0 && (
        <Alert variant="warning" className="pr:mb-4">
          {__('All auto-link rules are disabled. Enable at least one rule before previewing or running automation.', TEXT_DOMAIN)}
        </Alert>
      )}

      <div className="prorank-il-kpi-grid">
        <StatCard value={formatNumber(stats.total_rules)} label={__('Rules', TEXT_DOMAIN)} tone="posts" />
        <StatCard value={formatNumber(stats.active_rules)} label={__('Active Rules', TEXT_DOMAIN)} tone="active" />
        <StatCard value={formatNumber(stats.links_created)} label={__('Links Created', TEXT_DOMAIN)} tone="internal" />
        <StatCard value={lastRunLabel} label={__('Last Run', TEXT_DOMAIN)} tone="external" compact />
      </div>

      {currentJob && (
        <Card className="prorank-il-panel prorank-auto-linking__job-card" padding="none">
          <CardBody>
            <PanelHeading
              title={__('Background Run Status', TEXT_DOMAIN)}
              description={currentJob.message || __('No background run is active.', TEXT_DOMAIN)}
            />
            <div className="prorank-auto-linking__job-grid">
              <SettingRow label={__('Status', TEXT_DOMAIN)} value={getStatusLabel(currentJob.status)} />
              <SettingRow
                label={__('Progress', TEXT_DOMAIN)}
                value={sprintf(__('%1$d%% (%2$d / %3$d posts)', TEXT_DOMAIN), Number(currentJob.percentage || 0), Number(currentJob.processed_posts || 0), Number(currentJob.total_posts || 0))}
              />
              <SettingRow label={__('Posts Updated', TEXT_DOMAIN)} value={formatNumber(currentJob.posts_updated)} />
              <SettingRow label={__('Links Created In Run', TEXT_DOMAIN)} value={formatNumber(currentJob.links_created)} />
              <SettingRow label={__('Errors', TEXT_DOMAIN)} value={formatNumber(currentJob.error_count)} />
            </div>
            <div className="prorank-auto-linking__progress-track">
              <div
                className="prorank-auto-linking__progress-fill"
                style={{ width: `${Math.max(0, Math.min(100, Number(currentJob.percentage || 0)))}%` }}
              />
            </div>
            {Array.isArray(currentJob.errors) && currentJob.errors.length > 0 && (
              <ul className="prorank-auto-linking__error-list">
                {currentJob.errors.map((error, index) => (
                  <li key={`${currentJob.job_id}-${index}`}>{error}</li>
                ))}
              </ul>
            )}
            <div className="prorank-auto-linking__button-row">
              {isBatchRunning && (
                <Button
                  variant="secondary"
                  onClick={cancelAutoLinking}
                  loading={processing === 'cancel'}
                  disabled={processing !== ''}
                >
                  {processing === 'cancel' ? __('Cancelling...', TEXT_DOMAIN) : __('Cancel Run', TEXT_DOMAIN)}
                </Button>
              )}
              {currentJob.status === 'cancelled' && (
                <Button
                  variant="secondary"
                  onClick={resumeAutoLinking}
                  loading={processing === 'resume'}
                  disabled={processing !== ''}
                >
                  {processing === 'resume' ? __('Resuming...', TEXT_DOMAIN) : __('Resume Run', TEXT_DOMAIN)}
                </Button>
              )}
              {(currentJob.status === 'cancelled' || currentJob.status === 'completed') && (
                <Button
                  variant="ghost"
                  onClick={clearAutoLinkingJob}
                  loading={processing === 'clear'}
                  disabled={processing !== ''}
                >
                  {processing === 'clear' ? __('Clearing...', TEXT_DOMAIN) : __('Clear Job', TEXT_DOMAIN)}
                </Button>
              )}
            </div>
          </CardBody>
        </Card>
      )}

      <div className="prorank-auto-linking__layout">
        <div className="prorank-auto-linking__main">
          <Card className="prorank-il-panel" padding="none">
            <CardHeader>
              <PanelHeading
                title={__('Create Rule', TEXT_DOMAIN)}
                description={__('Define the phrase to find, the target URL to link to, and the safety limits for this rule.', TEXT_DOMAIN)}
              />
            </CardHeader>
            <CardBody>
              <div className="prorank-auto-linking__form-grid">
                <Input
                  label={__('Keyword or Phrase', TEXT_DOMAIN)}
                  value={ruleForm.keyword}
                  onChange={(value) => handleRuleField('keyword', value)}
                  required
                />
                <Input
                  label={__('Target URL', TEXT_DOMAIN)}
                  value={ruleForm.target_url}
                  onChange={(value) => handleRuleField('target_url', value)}
                  required
                />
              </div>
              <div className="prorank-auto-linking__range-grid">
                <RangeInput
                  label={__('Priority', TEXT_DOMAIN)}
                  value={Number(ruleForm.priority || 5)}
                  onChange={(value) => handleRuleField('priority', value || 0)}
                  min={0}
                  max={10}
                />
                <RangeInput
                  label={__('Max Links Per Post For This Rule', TEXT_DOMAIN)}
                  value={Number(ruleForm.max_links_per_post || 1)}
                  onChange={(value) => handleRuleField('max_links_per_post', value || 1)}
                  min={1}
                  max={10}
                />
                <RangeInput
                  label={__('Max Total Links', TEXT_DOMAIN)}
                  value={Number(ruleForm.max_total_links || 10)}
                  onChange={(value) => handleRuleField('max_total_links', value || 0)}
                  min={0}
                  max={100}
                />
              </div>
              <Input
                label={__('Exclude Post IDs', TEXT_DOMAIN)}
                helperText={__('Comma-separated post IDs to exclude from this rule.', TEXT_DOMAIN)}
                value={ruleForm.exclude_posts}
                onChange={(value) => handleRuleField('exclude_posts', value)}
              />
              <div className="prorank-auto-linking__toggle-grid">
                <Toggle
                  label={__('Whole Word Only', TEXT_DOMAIN)}
                  checked={!!ruleForm.whole_word}
                  onChange={(value) => handleRuleField('whole_word', value)}
                />
                <Toggle
                  label={__('Case Sensitive', TEXT_DOMAIN)}
                  checked={!!ruleForm.case_sensitive}
                  onChange={(value) => handleRuleField('case_sensitive', value)}
                />
                <Toggle
                  label={__('Enabled', TEXT_DOMAIN)}
                  checked={!!ruleForm.enabled}
                  onChange={(value) => handleRuleField('enabled', value)}
                />
              </div>
              <div className="prorank-auto-linking__button-row">
                <Button variant="primary" onClick={createRule} loading={creatingRule} disabled={creatingRule}>
                  {creatingRule ? __('Creating...', TEXT_DOMAIN) : __('Add Rule', TEXT_DOMAIN)}
                </Button>
              </div>
            </CardBody>
          </Card>

          <Card className="prorank-il-panel" padding="none">
            <CardHeader>
              <PanelHeading
                title={__('Preview Results', TEXT_DOMAIN)}
                description={__('Preview shows the latest eligible posts that would receive links before anything is written.', TEXT_DOMAIN)}
              />
            </CardHeader>
            <CardBody>
              {preview.length === 0 ? (
                <div className="prorank-auto-linking__empty">
                  {__('Run a preview to inspect which of the latest eligible posts would receive links.', TEXT_DOMAIN)}
                </div>
              ) : (
                <div className="prorank-auto-linking__preview-list">
                  {preview.map((item) => (
                    <div key={`${item.post_id}-${item.post_title}`} className="prorank-auto-linking__preview-card">
                      <div>
                        <h4>{item.post_title}</h4>
                        <p>{sprintf(__('Would add %1$d link(s)', TEXT_DOMAIN), Number(item.total_links || item.links_created || 0))}</p>
                      </div>
                      {Array.isArray(item.changes) && item.changes.length > 0 && (
                        <ul>
                          {item.changes.map((change, index) => (
                            <li key={`${item.post_id}-${index}`}>
                              {sprintf(__('%1$s -> %2$s (%3$d)', TEXT_DOMAIN), change.keyword, change.target_url, Number(change.count || 0))}
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </CardBody>
          </Card>
        </div>

        <aside className="prorank-auto-linking__side">
          <Card className="prorank-il-panel" padding="none">
            <CardHeader>
              <PanelHeading
                title={__('Settings Summary', TEXT_DOMAIN)}
                description={__('Auto Linking uses the global Internal Linking settings.', TEXT_DOMAIN)}
                action={
                  <Button variant="secondary" size="sm" onClick={openSettingsTab}>
                    {__('Open Settings', TEXT_DOMAIN)}
                  </Button>
                }
              />
            </CardHeader>
            <CardBody>
              <p className="prorank-auto-linking__side-copy">
                {__('Preview checks the latest 100 eligible posts. Full runs process all eligible posts in background batches and continue after you leave this page.', TEXT_DOMAIN)}
              </p>
              <div className="prorank-auto-linking__settings-list">
                {settingsSummary.map((item) => (
                  <SettingRow key={item.label} label={item.label} value={item.value} tone={item.tone} />
                ))}
              </div>
            </CardBody>
          </Card>

          <Card className="prorank-il-panel" padding="none">
            <CardHeader>
              <PanelHeading
                title={__('Existing Rules', TEXT_DOMAIN)}
                description={__('Review, enable, disable, or remove configured keyword rules.', TEXT_DOMAIN)}
              />
            </CardHeader>
            <CardBody>
              {rules.length === 0 ? (
                <div className="prorank-auto-linking__empty">
                  {__('No auto-link rules created yet.', TEXT_DOMAIN)}
                </div>
              ) : (
                <div className="prorank-auto-linking__rule-list">
                  {rules.map((rule) => (
                    <div key={rule.id} className="prorank-auto-linking__rule-card">
                      <div className="prorank-auto-linking__rule-head">
                        <div>
                          <h4>{rule.keyword}</h4>
                          <p>{rule.target_url}</p>
                        </div>
                        <span data-state={rule.enabled ? 'enabled' : 'disabled'}>
                          {rule.enabled ? __('Enabled', TEXT_DOMAIN) : __('Disabled', TEXT_DOMAIN)}
                        </span>
                      </div>
                      <div className="prorank-auto-linking__rule-meta">
                        {sprintf(__('Priority %1$d · %2$d link(s) created', TEXT_DOMAIN), Number(rule.priority || 0), Number(rule.links_count || 0))}
                      </div>
                      <div className="prorank-auto-linking__button-row">
                        <Button variant="secondary" size="sm" onClick={() => toggleRule(rule)}>
                          {rule.enabled ? __('Disable', TEXT_DOMAIN) : __('Enable', TEXT_DOMAIN)}
                        </Button>
                        <Button variant="danger" size="sm" onClick={() => deleteRule(rule)}>
                          {__('Delete', TEXT_DOMAIN)}
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardBody>
          </Card>
        </aside>
      </div>
    </div>
  );
};

export default AutoLinkingTool;