/**
 * Links Report
 *
 * Comprehensive report showing all posts with their internal/external link metrics
 */

import { Fragment, useState, useEffect, useMemo, useCallback, useRef } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { Card, Button, Input, Select, Checkbox, Alert, ProgressBar, StatCard } from '../../components/ui';
import LoadingState from '../../components/LoadingState';
import { buildWorkflowModel } from './workflowState';
import { buildPostTypeOptions } from '../../utils/internalLinkingPostTypes';

const LinksReport = () => {
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState([]);
  const [filteredPosts, setFilteredPosts] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [postType, setPostType] = useState('all');
  const [category, setCategory] = useState('all');
  const [categories, setCategories] = useState([]);
  const [sortField, setSortField] = useState('title');
  const [sortDirection, setSortDirection] = useState('asc');
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(20);
  const [selectedPosts, setSelectedPosts] = useState([]);
  const [showBrokenOnly, setShowBrokenOnly] = useState(false);
  const [showOrphansOnly, setShowOrphansOnly] = useState(false);
  const [lastScan, setLastScan] = useState(null);
  const [scanning, setScanning] = useState(false);
  const [scanStatus, setScanStatus] = useState('idle');
  const [scanProgress, setScanProgress] = useState(0);
  const [scanRuntimeMessage, setScanRuntimeMessage] = useState('');
  const [orphanSuggestions, setOrphanSuggestions] = useState({});
  const [orphanActionNotice, setOrphanActionNotice] = useState(null);
  const [suggestingPostId, setSuggestingPostId] = useState(null);
  const [fixingPostId, setFixingPostId] = useState(null);
  const reportFocusRef = useRef(null);
  const [linkingSettings, setLinkingSettings] = useState({
    auto_linking: false,
  });
  const [stats, setStats] = useState({
    total_posts: 0,
    total_internal: 0,
    total_external: 0,
    orphan_count: 0,
    broken_count: 0,
  });

  const updateHashParam = useCallback((updates = {}) => {
    const hash = window.location.hash || '';
    const [baseHashRaw, query = ''] = hash.split('?');
    const baseHash = baseHashRaw || '#';
    const params = new URLSearchParams(query);

    Object.entries(updates).forEach(([key, value]) => {
      if (value === null || value === undefined || value === '') {
        params.delete(key);
      } else {
        params.set(key, String(value));
      }
    });

    const serialized = params.toString();
    window.location.hash = serialized ? `${baseHash}?${serialized}` : baseHash;
  }, []);

  const applyHashFilters = useCallback(() => {
    const hash = window.location.hash || '';
    const [, query = ''] = hash.split('?');
    const params = new URLSearchParams(query);
    const filter = params.get('filter');

    setShowOrphansOnly(filter === 'orphans');
    setShowBrokenOnly(filter === 'broken');
  }, []);

  const loadReportData = useCallback(async (showLoading = true) => {
    if (showLoading) {
      setLoading(true);
    }

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/full-report',
      });

      if (response?.posts) {
        setPosts(response.posts);
        setStats(response.stats || {});
        setLastScan(response.last_scan || null);
      }
    } catch (error) {
      // Non-blocking: surface remains usable with previous in-memory state.
    } finally {
      if (showLoading) {
        setLoading(false);
      }
    }
  }, []);

  const loadCategories = useCallback(async () => {
    try {
      const response = await apiFetch({
        path: '/wp/v2/categories?per_page=100',
      });
      setCategories(response || []);
    } catch (error) {
      // Optional enhancement only.
    }
  }, []);

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

      const payload = response?.data || response || {};
      if (payload && typeof payload === 'object') {
        setLinkingSettings((prev) => ({
          ...prev,
          ...payload,
        }));
      }
    } catch (error) {
      // Non-blocking: report filters fall back to post/page.
    }
  }, []);

  const loadScanProgress = useCallback(async () => {
    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/scan-progress',
      });

      const nextStatus = response?.status || 'idle';
      const nextProgress = Math.max(0, Math.min(100, Number(response?.progress || 0)));
      const running = nextStatus === 'running' && nextProgress < 100;

      setScanStatus(nextStatus);
      setScanProgress(nextProgress);
      setScanRuntimeMessage(response?.message || '');
      setScanning(running);

      return {
        status: nextStatus,
        progress: nextProgress,
        lastScan: response?.last_scan || null,
        message: response?.message || '',
      };
    } catch (error) {
      return null;
    }
  }, []);

  useEffect(() => {
    const bootstrap = async () => {
      await Promise.all([
        loadReportData(true),
        loadCategories(),
        loadLinkingSettings(),
        loadScanProgress(),
      ]);
      applyHashFilters();
    };

    bootstrap();
  }, [loadReportData, loadCategories, loadLinkingSettings, loadScanProgress, applyHashFilters]);

  useEffect(() => {
    const handleHashChange = () => applyHashFilters();
    window.addEventListener('hashchange', handleHashChange);

    return () => window.removeEventListener('hashchange', handleHashChange);
  }, [applyHashFilters]);

  useEffect(() => {
    if (!scanning && scanStatus !== 'running') {
      return undefined;
    }

    const interval = window.setInterval(async () => {
      const progressState = await loadScanProgress();
      if (progressState && (progressState.status === 'complete' || progressState.progress >= 100)) {
        setScanning(false);
        await loadReportData(false);
      }
    }, 1800);

    return () => window.clearInterval(interval);
  }, [scanning, scanStatus, loadScanProgress, loadReportData]);

  useEffect(() => {
    const interval = window.setInterval(async () => {
      if (document.visibilityState === 'hidden') {
        return;
      }

      const progressState = await loadScanProgress();
      if (!progressState) {
        return;
      }

      const backendRunning = progressState.status === 'running' && progressState.progress < 100;
      const backendComplete = progressState.status === 'complete' || progressState.progress >= 100;
      const backendLastScan = progressState.lastScan || null;

      if (backendRunning && !scanning) {
        setScanning(true);
      }

      if (
        backendLastScan
        && backendLastScan !== lastScan
        && backendComplete
      ) {
        await loadReportData(false);
      }
    }, 5000);

    return () => window.clearInterval(interval);
  }, [lastScan, scanning, loadReportData, loadScanProgress]);

  useEffect(() => {
    let filtered = [...posts];

    if (searchTerm) {
      const normalizedSearch = searchTerm.toLowerCase();
      filtered = filtered.filter((post) =>
        post.title.toLowerCase().includes(normalizedSearch)
        || post.url.toLowerCase().includes(normalizedSearch)
      );
    }

    if (postType !== 'all') {
      filtered = filtered.filter((post) => post.post_type === postType);
    }

    if (category !== 'all') {
      filtered = filtered.filter((post) =>
        post.categories && post.categories.includes(parseInt(category, 10))
      );
    }

    if (showBrokenOnly) {
      filtered = filtered.filter((post) => post.broken_links > 0);
    }

    if (showOrphansOnly) {
      filtered = filtered.filter((post) => Boolean(post.is_orphan ?? post.inbound_internal === 0));
    }

    filtered.sort((a, b) => {
      let aVal = a[sortField];
      let bVal = b[sortField];

      if (typeof aVal === 'string') {
        aVal = aVal.toLowerCase();
        bVal = bVal.toLowerCase();
      }

      if (sortDirection === 'asc') {
        return aVal > bVal ? 1 : -1;
      }
      return aVal < bVal ? 1 : -1;
    });

    setFilteredPosts(filtered);
    setCurrentPage(1);
  }, [posts, searchTerm, postType, category, sortField, sortDirection, showBrokenOnly, showOrphansOnly]);

  const handleSort = (field) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  const runLinkScan = async () => {
    setScanning(true);
    setScanStatus('running');
    setScanProgress(0);
    setScanRuntimeMessage(__('Starting link scan...', 'prorank-seo'));

    try {
      await apiFetch({
        path: '/prorank-seo/v1/linking/start-scan',
        method: 'POST',
      });

      const progressState = await loadScanProgress();
      await loadReportData(false);

      if (progressState && (progressState.status === 'complete' || progressState.progress >= 100)) {
        setScanning(false);
        setScanRuntimeMessage(__('Scan complete. Report refreshed.', 'prorank-seo'));
      }
    } catch (error) {
      setScanning(false);
      setScanStatus('idle');
      setScanRuntimeMessage(__('Scan failed. Please try again.', 'prorank-seo'));
    }
  };

  const isPostOrphan = useCallback((post) => Boolean(post.is_orphan ?? post.inbound_internal === 0), []);

  const normalizeSuggestionList = useCallback((response) => {
    const raw = response?.data?.suggestions || response?.suggestions || [];
    return Array.isArray(raw) ? raw : [];
  }, []);

  const getSuggestionTitle = useCallback((suggestion) => (
    suggestion.source_title
    || suggestion.title
    || suggestion.post_title
    || suggestion.target_title
    || `${__('Post', 'prorank-seo')} #${suggestion.post_id || suggestion.id || ''}`.trim()
  ), []);

  const getSuggestionMeta = useCallback((suggestion) => {
    const score = suggestion.relevance_score ?? suggestion.score ?? suggestion.final_score;
    const anchor = suggestion.anchor_text
      || suggestion.suggested_anchor
      || (Array.isArray(suggestion.anchor_suggestions) ? suggestion.anchor_suggestions[0] : '');

    return [
      score !== undefined && score !== null
        ? `${__('Score', 'prorank-seo')} ${Math.round(Number(score) * (Number(score) <= 1 ? 100 : 1))}`
        : '',
      anchor ? `${__('Anchor', 'prorank-seo')}: ${anchor}` : '',
    ].filter(Boolean).join(' · ');
  }, []);

  const fetchOrphanSuggestions = async (post) => {
    setSuggestingPostId(post.id);
    setOrphanActionNotice(null);

    try {
      const response = await apiFetch({
        path: `/prorank-seo/v1/linking/suggestions-for-orphan/${post.id}`,
      });
      const suggestions = normalizeSuggestionList(response);

      setOrphanSuggestions((prev) => ({
        ...prev,
        [post.id]: suggestions,
      }));

      if (!suggestions.length) {
        setOrphanActionNotice({
          variant: 'warning',
          message: __('No source pages were found for this orphan yet. Run a fresh scan or add an internal link manually.', 'prorank-seo'),
        });
      }
    } catch (error) {
      setOrphanActionNotice({
        variant: 'error',
        message: error?.message || __('Could not load orphan link suggestions.', 'prorank-seo'),
      });
    } finally {
      setSuggestingPostId(null);
    }
  };

  const fixOrphanPost = async (post) => {
    if (!window.confirm(__('ProRank will add an internal link from the best matching source page to this orphaned item. Continue?', 'prorank-seo'))) {
      return;
    }

    setFixingPostId(post.id);
    setOrphanActionNotice(null);

    try {
      const response = await apiFetch({
        path: '/prorank-seo/v1/linking/create-links-batch',
        method: 'POST',
        data: {
          post_ids: [post.id],
          allow_append_fallback: true,
        },
      });

      const payload = response?.data || response || {};
      const fixedPosts = Number(payload.fixed_posts || 0);
      const linksCreated = Number(payload.links_created || 0);

      if (response?.success !== false && fixedPosts > 0) {
        setOrphanActionNotice({
          variant: 'success',
          message: `${__('Orphan fixed.', 'prorank-seo')} ${linksCreated} ${__('internal link(s) created.', 'prorank-seo')}`,
        });
        setOrphanSuggestions((prev) => {
          const next = { ...prev };
          delete next[post.id];
          return next;
        });
        await loadReportData(false);
        return;
      }

      setOrphanActionNotice({
        variant: 'warning',
        message: response?.message || __('No internal link was created. Review the suggestions or edit the content manually.', 'prorank-seo'),
      });
    } catch (error) {
      setOrphanActionNotice({
        variant: 'error',
        message: error?.message || __('Could not fix this orphaned item.', 'prorank-seo'),
      });
    } finally {
      setFixingPostId(null);
    }
  };

  const escapeCSV = useCallback((value) => {
    const str = String(value ?? '');
    if (
      str.includes(',')
      || str.includes('"')
      || str.includes('\n')
      || str.includes('\r')
      || str !== str.trim()
    ) {
      return `"${str.replace(/"/g, '""')}"`;
    }
    return str;
  }, []);

  const downloadCSV = useCallback((rows, filename) => {
    const csvRows = [
      ['Title', 'URL', 'Post Type', 'Inbound Internal', 'Outbound Internal', 'Outbound External', 'Broken Link Instances'],
      ...rows.map((post) => [
        post.title,
        post.url,
        post.post_type,
        post.inbound_internal,
        post.outbound_internal,
        post.outbound_external,
        post.broken_links,
      ]),
    ];

    const csvContent = csvRows.map((row) => row.map(escapeCSV).join(',')).join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.download = filename;
    anchor.click();
    window.URL.revokeObjectURL(url);
  }, [escapeCSV]);

  const exportToCSV = () => {
    downloadCSV(filteredPosts, 'links-report.csv');
  };

  const selectedRows = useMemo(
    () => filteredPosts.filter((post) => selectedPosts.includes(post.id)),
    [filteredPosts, selectedPosts]
  );
  const postTypeOptions = useMemo(
    () => buildPostTypeOptions(linkingSettings),
    [linkingSettings]
  );

  const exportSelectedToCSV = () => {
    if (!selectedRows.length) {
      return;
    }
    downloadCSV(selectedRows, 'links-report-selected.csv');
  };

  const formatNumber = (value) => Number(value || 0).toLocaleString();
  const reportSummary = useMemo(() => {
    const totalPosts = Number(stats.total_posts || posts.length || 0);
    const totalInternal = Number(stats.total_internal || 0);
    const totalExternal = Number(stats.total_external || 0);
    const orphanCount = Number(stats.orphan_count || 0);
    const brokenCount = Number(stats.broken_count || 0);
    const brokenPageCount = posts.filter((post) => Number(post.broken_links || 0) > 0).length;
    const orphanRate = totalPosts > 0 ? (orphanCount / totalPosts) * 100 : 0;
    const brokenPageRate = totalPosts > 0 ? (brokenPageCount / totalPosts) * 100 : 0;
    const avgInternal = totalPosts > 0 ? totalInternal / totalPosts : 0;
    const avgExternal = totalPosts > 0 ? totalExternal / totalPosts : 0;

    return {
      totalPosts,
      totalInternal,
      totalExternal,
      orphanCount,
      brokenCount,
      brokenPageCount,
      orphanRate,
      brokenPageRate,
      avgInternal,
      avgExternal,
    };
  }, [posts, stats]);

  const togglePostSelection = (postId) => {
    setSelectedPosts((prev) => (
      prev.includes(postId)
        ? prev.filter((id) => id !== postId)
        : [...prev, postId]
    ));
  };

  const focusFilter = (filter) => {
    setSearchTerm('');
    setPostType('all');
    setCategory('all');
    setShowOrphansOnly(filter === 'orphans');
    setShowBrokenOnly(filter === 'broken');
    setCurrentPage(1);
    updateHashParam({
      tab: 'links-report',
      filter: filter || null,
    });

    window.requestAnimationFrame(() => {
      reportFocusRef.current?.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    });
  };

  const clearAllFilters = () => {
    setSearchTerm('');
    setPostType('all');
    setCategory('all');
    focusFilter(null);
  };

  const goToAutoLinking = () => {
    updateHashParam({
      tab: 'auto-linking',
      filter: null,
    });
  };

  // Pagination
  const totalPages = Math.ceil(filteredPosts.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedPosts = filteredPosts.slice(startIndex, startIndex + itemsPerPage);

  const selectAllPosts = () => {
    const visibleIds = paginatedPosts.map((post) => post.id);
    const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((id) => selectedPosts.includes(id));

    if (allVisibleSelected) {
      setSelectedPosts((prev) => prev.filter((id) => !visibleIds.includes(id)));
      return;
    }

    setSelectedPosts((prev) => Array.from(new Set([...prev, ...visibleIds])));
  };

  const getSortIcon = (field) => {
    if (sortField !== field) {
      return <span className="pr:opacity-30 pr:transition-all pr:duration-300">↕</span>;
    }
    return sortDirection === 'asc' ? '↑' : '↓';
  };

  const workflow = useMemo(() => {
    const hasScan = Boolean(lastScan);

    const baseSteps = [
      {
        id: 'scan',
        title: __('Run full scan', 'prorank-seo'),
        description: __('Refresh latest crawl and linking metrics.', 'prorank-seo'),
        complete: hasScan,
        actionLabel: scanning ? __('Scanning...', 'prorank-seo') : __('Run Scan', 'prorank-seo'),
        action: runLinkScan,
        disabled: scanning,
      },
      {
        id: 'orphans',
        title: __('Review orphan pages', 'prorank-seo'),
        description: __('Prioritize posts with no inbound internal links.', 'prorank-seo'),
        complete: stats.total_posts > 0 && stats.orphan_count === 0,
        prerequisites: ['scan'],
        actionLabel: __('Review Orphans', 'prorank-seo'),
        action: () => focusFilter('orphans'),
      },
      {
        id: 'broken',
        title: __('Review broken links', 'prorank-seo'),
        description: __('Fix broken internal destinations quickly.', 'prorank-seo'),
        complete: stats.total_posts > 0 && stats.broken_count === 0,
        prerequisites: ['scan'],
        actionLabel: __('Review Broken', 'prorank-seo'),
        action: () => focusFilter('broken'),
      },
      {
        id: 'apply',
        title: __('Apply auto-linking', 'prorank-seo'),
        description: __('Execute rule-based linking improvements.', 'prorank-seo'),
        complete: false,
        prerequisites: ['scan'],
        actionLabel: __('Open Auto Linking', 'prorank-seo'),
        action: goToAutoLinking,
      },
    ];

    const model = buildWorkflowModel(baseSteps);
    const stepTitleById = baseSteps.reduce((acc, step) => {
      acc[step.id] = step.title;
      return acc;
    }, {});

    return {
      ...model,
      steps: model.steps.map((step) => ({
        ...step,
        blockedReason: step.blockedBy
          ? `${__('Complete', 'prorank-seo')} "${stepTitleById[step.blockedBy] || __('previous step', 'prorank-seo')}" ${__('first.', 'prorank-seo')}`
          : '',
      })),
    };
  }, [lastScan, scanning, stats.total_posts, stats.orphan_count, stats.broken_count, stats.total_internal, runLinkScan, goToAutoLinking]);

  if (loading) {
    return (
      <Card className="pr:p-8">
        <LoadingState message={__('Loading links report...', 'prorank-seo')} />
      </Card>
    );
  }

  return (
    <div className="prorank-links-report">
      <div className="prorank-il-hero">
        <div>
          <span className="prorank-il-hero__eyebrow">
            {__('Internal Linking', 'prorank-seo')}
          </span>
          <h2 className="prorank-il-hero__title">
            {__('Links Report', 'prorank-seo')}
          </h2>
          <p className="prorank-il-hero__meta">
            {__('Review crawl freshness, orphan risks, outbound balance, and page-level internal link coverage from one place.', 'prorank-seo')}
            {' '}
            {__('Last scan:', 'prorank-seo')}
            {' '}
            {lastScan ? new Date(lastScan).toLocaleString() : __('Never', 'prorank-seo')}
          </p>
        </div>

        <div className="prorank-il-hero__actions">
          <Button
            variant="secondary"
            onClick={exportToCSV}
            className="prorank-il-hero-button"
          >
            <svg className="pr:w-4 pr:h-4 pr:mr-1 pr:inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
            {__('Export to CSV', 'prorank-seo')}
          </Button>
          <Button
            variant="primary"
            onClick={runLinkScan}
            loading={scanning}
            className="prorank-il-hero-button is-primary"
          >
            <svg className="pr:w-4 pr:h-4 pr:mr-1 pr:inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            {__('Run Link Scan', 'prorank-seo')}
          </Button>
        </div>
      </div>

      {scanRuntimeMessage && (
        <Alert
          variant={scanning || scanStatus === 'running' ? 'info' : (scanStatus === 'complete' ? 'success' : 'warning')}
          title={__('Scan Status', 'prorank-seo')}
          className="pr:mb-5"
        >
          <div className="pr:space-y-2">
            <div>{scanRuntimeMessage}</div>
            {(scanning || scanStatus === 'running') && (
              <div className="pr:flex pr:items-center pr:gap-3">
                <ProgressBar value={scanProgress} className="pr:flex-1" />
                <span className="pr:text-xs pr:font-semibold">{scanProgress}%</span>
              </div>
            )}
          </div>
        </Alert>
      )}

      {orphanActionNotice && (
        <Alert
          variant={orphanActionNotice.variant || 'info'}
          title={__('Orphan Link Action', 'prorank-seo')}
          className="pr:mb-5"
        >
          {orphanActionNotice.message}
        </Alert>
      )}

      {/* Guided workflow */}
      <Card className="prorank-il-panel prorank-il-workflow-card">
        <div className="prorank-il-workflow-head">
          <div>
            <h3 className="prorank-il-workflow-title">
              {__('Guided Workflow', 'prorank-seo')}
            </h3>
            <p className="prorank-il-workflow-meta">
              {workflow.completeCount}/{workflow.steps.length} {__('steps complete', 'prorank-seo')}
            </p>
          </div>
          <div className="pr:flex pr:flex-wrap pr:gap-2">
            <Button size="sm" variant="secondary" onClick={clearAllFilters}>
              {__('Reset Report Filters', 'prorank-seo')}
            </Button>
            <Button size="sm" variant="secondary" onClick={exportSelectedToCSV} disabled={!selectedRows.length}>
              {__('Export Selected', 'prorank-seo')}
            </Button>
          </div>
        </div>

        <div className="prorank-il-workflow-progress">
          <ProgressBar value={workflow.progress} />
        </div>

        <div className="prorank-il-workflow-grid">
          {workflow.steps.map((step) => (
            <div key={step.id} className="prorank-il-workflow-step" data-state={step.status}>
              <div className="prorank-il-workflow-step__head">
                <div>
                  <div className="prorank-il-workflow-step__title">{step.title}</div>
                  <div className="prorank-il-workflow-step__description">{step.description}</div>
                  {step.blockedReason && (
                    <div className="prorank-il-workflow-step__reason">{step.blockedReason}</div>
                  )}
                </div>
                <span
                  className="prorank-il-workflow-step__status"
                  data-state={step.status}
                >
                  {step.status === 'complete'
                    ? __('Done', 'prorank-seo')
                    : step.status === 'ready'
                      ? __('Ready', 'prorank-seo')
                      : __('Blocked', 'prorank-seo')}
                </span>
              </div>
              <div className="prorank-il-step-actions">
                <Button
                  size="sm"
                  variant={step.status === 'blocked' ? 'ghost' : 'primary'}
                  onClick={step.action}
                  disabled={!step.canAct}
                >
                  {step.status === 'blocked'
                    ? __('Complete Previous Step', 'prorank-seo')
                    : step.actionLabel}
                </Button>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Stats Bar */}
      <div className="pr:grid pr:grid-cols-1 pr:sm:grid-cols-2 pr:xl:grid-cols-5 pr:gap-3 pr:mb-5">
        <StatCard
          value={formatNumber(reportSummary.totalPosts)}
          label={__('Content Items', 'prorank-seo')}
          footer={
            <span className="pr:text-[11px] pr:text-slate-500">
              {lastScan ? __('Latest completed scan', 'prorank-seo') : __('Run a scan to populate', 'prorank-seo')}
            </span>
          }
        />
        <StatCard
          tone="brand"
          value={formatNumber(reportSummary.totalInternal)}
          label={__('Internal Links', 'prorank-seo')}
          footer={
            <span className="pr:text-[11px] pr:text-slate-500">
              {sprintf(__('Avg %s internal / item', 'prorank-seo'), reportSummary.avgInternal.toFixed(1))}
            </span>
          }
        />
        <StatCard
          value={formatNumber(reportSummary.totalExternal)}
          label={__('External Links', 'prorank-seo')}
          footer={
            <span className="pr:text-[11px] pr:text-slate-500">
              {sprintf(__('Avg %s external / item', 'prorank-seo'), reportSummary.avgExternal.toFixed(1))}
            </span>
          }
        />
        <StatCard
          tone="danger"
          badge={sprintf(__('%s%% of content', 'prorank-seo'), reportSummary.orphanRate.toFixed(1))}
          value={formatNumber(reportSummary.orphanCount)}
          label={__('Orphaned Items', 'prorank-seo')}
        />
        <StatCard
          tone="warning"
          value={formatNumber(reportSummary.brokenCount)}
          label={__('Broken Link Instances', 'prorank-seo')}
          footer={
            <span className="pr:text-[11px] pr:text-slate-500">
              {sprintf(__('%1$s affected pages · %2$s%% of content', 'prorank-seo'), formatNumber(reportSummary.brokenPageCount), reportSummary.brokenPageRate.toFixed(1))}
            </span>
          }
        />
      </div>

      {/* Filters */}
      <div ref={reportFocusRef}>
      <Card className="prorank-il-panel prorank-il-filters-card">
        <div className="pr:grid pr:grid-cols-1 pr:lg:grid-cols-5 pr:gap-4 pr:items-end">
          <Input
            className="pr:lg:col-span-2"
            label={__('Search', 'prorank-seo')}
            value={searchTerm}
            onChange={(value) => setSearchTerm(value)}
            placeholder={__('Keyword or URL', 'prorank-seo')}
          />
          <Select
            label={__('Post Type', 'prorank-seo')}
            value={postType}
            onChange={(value) => setPostType(value)}
            options={postTypeOptions}
          />
          <Select
            label={__('Category', 'prorank-seo')}
            value={category}
            onChange={(value) => setCategory(value)}
            options={[
              { label: __('All categories', 'prorank-seo'), value: 'all' },
              ...categories.map((cat) => ({ label: cat.name, value: cat.id.toString() })),
            ]}
          />
          <div className="pr:flex pr:flex-col pr:gap-2">
            <Checkbox
              label={__('Orphans only', 'prorank-seo')}
              checked={showOrphansOnly}
              onChange={(value) => setShowOrphansOnly(!!value)}
            />
            <Checkbox
              label={__('Broken only', 'prorank-seo')}
              checked={showBrokenOnly}
              onChange={(value) => setShowBrokenOnly(!!value)}
            />
          </div>
        </div>

        <div className="pr:flex pr:flex-wrap pr:items-center pr:gap-2 pr:mt-4">
          {showOrphansOnly && (
            <span className="pr:text-xs pr:px-2 pr:py-1 pr:rounded-full pr:bg-red-100 pr:text-red-700">
              {__('Orphans Focus Enabled', 'prorank-seo')}
            </span>
          )}
          {showBrokenOnly && (
            <span className="pr:text-xs pr:px-2 pr:py-1 pr:rounded-full pr:bg-amber-100 pr:text-amber-700">
              {__('Broken Links Focus Enabled', 'prorank-seo')}
            </span>
          )}
          <Button size="sm" variant="ghost" onClick={() => focusFilter('orphans')}>
            {__('Focus Orphans', 'prorank-seo')}
          </Button>
          <Button size="sm" variant="ghost" onClick={() => focusFilter('broken')}>
            {__('Focus Broken', 'prorank-seo')}
          </Button>
          <Button size="sm" variant="ghost" onClick={() => focusFilter(null)}>
            {__('Clear Focus', 'prorank-seo')}
          </Button>
        </div>

        {(showOrphansOnly || showBrokenOnly) && (
          <Alert variant="info" className="pr:mt-4">
            {showOrphansOnly && !showBrokenOnly
              ? __('Showing orphan-page results below. Other filters were cleared automatically.', 'prorank-seo')
              : showBrokenOnly && !showOrphansOnly
                ? __('Showing broken-link results below. Other filters were cleared automatically.', 'prorank-seo')
                : __('Showing focused report results below. Other filters were cleared automatically.', 'prorank-seo')}
          </Alert>
        )}
      </Card>
      </div>

      {/* Results Table */}
      <Card className="prorank-il-panel prorank-il-table-card">
        <div className="prorank-il-table-toolbar">
          <span className="prorank-il-table-toolbar__label">
            {selectedRows.length > 0
              ? `${selectedRows.length} ${__('items selected', 'prorank-seo')}`
              : __('Select rows for bulk export.', 'prorank-seo')}
          </span>
          <div className="pr:flex pr:flex-wrap pr:gap-2">
            <Button size="sm" variant="secondary" onClick={exportSelectedToCSV} disabled={!selectedRows.length}>
              {__('Export Selected', 'prorank-seo')}
            </Button>
            <Button size="sm" variant="secondary" onClick={() => setSelectedPosts([])} disabled={!selectedRows.length}>
              {__('Clear Selection', 'prorank-seo')}
            </Button>
          </div>
        </div>

        <div className="pr:p-0">
          <div className="pr:overflow-x-auto">
            <table className="pr:w-full pr:border-collapse">
              <thead>
                <tr className="pr:bg-slate-50 pr:border-b-2 pr:border-slate-200">
                  <th className="pr:p-3 pr:text-left">
                    <Checkbox
                      checked={paginatedPosts.length > 0 && paginatedPosts.every((post) => selectedPosts.includes(post.id))}
                      onChange={() => selectAllPosts()}
                    />
                  </th>
                  <th
                    className="pr:p-3 pr:text-left pr:cursor-pointer pr:select-none pr:transition-all pr:duration-300"
                    onClick={() => handleSort('title')}
                  >
                    <span className="pr:flex pr:items-center pr:gap-1">
                      {__('Title', 'prorank-seo')}
                      {getSortIcon('title')}
                    </span>
                  </th>
                  <th
                    className="pr:p-3 pr:text-center pr:cursor-pointer pr:select-none pr:transition-all pr:duration-300"
                    onClick={() => handleSort('inbound_internal')}
                  >
                    <span className="pr:flex pr:items-center pr:justify-center pr:gap-1">
                      {__('Inbound Internal', 'prorank-seo')}
                      {getSortIcon('inbound_internal')}
                    </span>
                  </th>
                  <th
                    className="pr:p-3 pr:text-center pr:cursor-pointer pr:select-none pr:transition-all pr:duration-300"
                    onClick={() => handleSort('outbound_internal')}
                  >
                    <span className="pr:flex pr:items-center pr:justify-center pr:gap-1">
                      {__('Outbound Internal', 'prorank-seo')}
                      {getSortIcon('outbound_internal')}
                    </span>
                  </th>
                  <th
                    className="pr:p-3 pr:text-center pr:cursor-pointer pr:select-none pr:transition-all pr:duration-300"
                    onClick={() => handleSort('outbound_external')}
                  >
                    <span className="pr:flex pr:items-center pr:justify-center pr:gap-1">
                      {__('Outbound External', 'prorank-seo')}
                      {getSortIcon('outbound_external')}
                    </span>
                  </th>
                  <th
                    className="pr:p-3 pr:text-center pr:cursor-pointer pr:select-none pr:transition-all pr:duration-300"
                    onClick={() => handleSort('broken_links')}
                  >
                    <span className="pr:flex pr:items-center pr:justify-center pr:gap-1">
                      {__('Broken Links', 'prorank-seo')}
                      {getSortIcon('broken_links')}
                    </span>
                  </th>
                  <th className="pr:p-3 pr:text-center">
                    {__('Actions', 'prorank-seo')}
                  </th>
                </tr>
              </thead>
              <tbody>
                {paginatedPosts.length === 0 ? (
                  <tr>
                    <td colSpan="7" className="pr:p-10 pr:text-center pr:text-slate-500">
                      {__('No posts found matching your criteria', 'prorank-seo')}
                    </td>
                  </tr>
                ) : (
                  paginatedPosts.map((post, index) => {
                    const isOrphan = isPostOrphan(post);
                    const suggestions = orphanSuggestions[post.id];

                    return (
                      <Fragment key={post.id}>
                    <tr
                      className="pr:border-b pr:border-slate-200 pr:transition-all pr:duration-300"
                      style={{ background: index % 2 === 0 ? '#fff' : '#f8fafc' }}
                    >
                      <td className="pr:p-3">
                        <Checkbox
                          checked={selectedPosts.includes(post.id)}
                          onChange={() => togglePostSelection(post.id)}
                        />
                      </td>
                      <td className="pr:p-3">
                        <div className="prorank-il-row-title">
                          <a
                            href={post.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="pr:text-orange-600 pr:no-underline pr:font-medium pr:transition-all pr:duration-300 pr:hover:text-orange-700"
                          >
                            {post.title}
                          </a>
                          {(isOrphan || post.broken_links > 0) && (
                            <span className="prorank-il-row-flags">
                              {isOrphan && (
                                <span className="prorank-il-row-flag is-orphan">
                                  {__('ORPHAN', 'prorank-seo')}
                                </span>
                              )}
                              {post.broken_links > 0 && (
                                <span className="prorank-il-row-flag is-broken">
                                  {__('BROKEN', 'prorank-seo')}
                                </span>
                              )}
                            </span>
                          )}
                        </div>
                        <div className="pr:text-xs pr:text-slate-500 pr:mt-0.5">
                          {post.post_type} • {post.date}
                        </div>
                      </td>
                      <td className="pr:p-3 pr:text-center">
                        <span
                          className="pr:text-base pr:font-semibold pr:transition-all pr:duration-300"
                          style={{ color: isOrphan ? '#ef4444' : (post.inbound_internal > 0 ? '#10b981' : '#64748b') }}
                        >
                          {post.inbound_internal}
                        </span>
                      </td>
                      <td className="pr:p-3 pr:text-center">
                        <span className="pr:text-base pr:font-semibold pr:text-blue-500 pr:transition-all pr:duration-300">
                          {post.outbound_internal}
                        </span>
                      </td>
                      <td className="pr:p-3 pr:text-center">
                        <span className="pr:text-base pr:font-semibold pr:text-slate-500 pr:transition-all pr:duration-300">
                          {post.outbound_external}
                        </span>
                      </td>
                      <td className="pr:p-3 pr:text-center">
                        <span className={`pr:text-base pr:font-semibold pr:transition-all pr:duration-300 ${post.broken_links > 0 ? 'pr:text-amber-600' : 'pr:text-emerald-600'}`}>
                          {post.broken_links}
                        </span>
                      </td>
                      <td className="pr:p-3 pr:text-center">
                        <div className="pr:flex pr:flex-wrap pr:items-center pr:justify-center pr:gap-2">
                          <a
                            href={`/wp-admin/post.php?post=${post.id}&action=edit`}
                            className="pr:text-[13px] pr:text-orange-600 pr:font-medium pr:no-underline pr:hover:text-orange-700"
                          >
                            {__('Edit', 'prorank-seo')}
                          </a>
                          {isOrphan && (
                            <>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => fetchOrphanSuggestions(post)}
                                loading={suggestingPostId === post.id}
                              >
                                {__('Suggest Links', 'prorank-seo')}
                              </Button>
                              <Button
                                size="sm"
                                variant="secondary"
                                onClick={() => fixOrphanPost(post)}
                                loading={fixingPostId === post.id}
                              >
                                {__('Fix', 'prorank-seo')}
                              </Button>
                            </>
                          )}
                        </div>
                      </td>
                    </tr>
                    {suggestions && (
                      <tr className="pr:border-b pr:border-slate-200" style={{ background: index % 2 === 0 ? '#fff' : '#f8fafc' }}>
                        <td colSpan="7" className="pr:p-4">
                          <div className="pr:rounded-xl pr:border pr:border-orange-100 pr:bg-orange-50 pr:p-4">
                            <div className="pr:text-sm pr:font-semibold pr:text-slate-900 pr:mb-2">
                              {suggestions.length
                                ? __('Suggested source pages', 'prorank-seo')
                                : __('No suggestions found', 'prorank-seo')}
                            </div>
                            {suggestions.length > 0 && (
                              <div className="pr:space-y-2">
                                {suggestions.slice(0, 5).map((suggestion, suggestionIndex) => (
                                  <div key={`${post.id}-${suggestion.post_id || suggestion.id || suggestionIndex}`} className="pr:flex pr:flex-wrap pr:items-center pr:justify-between pr:gap-3 pr:rounded-md pr:bg-white pr:px-3 pr:py-2">
                                    <div>
                                      <div className="pr:text-sm pr:font-medium pr:text-slate-900">{getSuggestionTitle(suggestion)}</div>
                                      {getSuggestionMeta(suggestion) && (
                                        <div className="pr:text-xs pr:text-slate-500">{getSuggestionMeta(suggestion)}</div>
                                      )}
                                    </div>
                                    {suggestion.source_url && (
                                      <a
                                        href={suggestion.source_url}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="pr:text-xs pr:font-medium pr:text-orange-700 pr:no-underline pr:hover:text-orange-800"
                                      >
                                        {__('View source', 'prorank-seo')}
                                      </a>
                                    )}
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </td>
                      </tr>
                    )}
                      </Fragment>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="pr:p-4 pr:border-t pr:border-slate-200 pr:flex pr:flex-wrap pr:items-center pr:justify-between pr:gap-3 pr:transition-all pr:duration-300">
              <span className="pr:text-sm pr:text-slate-500">
                {__('Showing', 'prorank-seo')} {startIndex + 1}-{Math.min(startIndex + itemsPerPage, filteredPosts.length)} {__('of', 'prorank-seo')} {filteredPosts.length} {__('items', 'prorank-seo')}
              </span>
              <div className="pr:flex pr:gap-2">
                <Button
                  variant="secondary"
                  onClick={() => setCurrentPage(1)}
                  disabled={currentPage === 1}
                  className="pr:min-w-8 pr:p-1 pr:transition-all pr:duration-300"
                >
                  «
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => setCurrentPage(currentPage - 1)}
                  disabled={currentPage === 1}
                  className="pr:min-w-8 pr:p-1 pr:transition-all pr:duration-300"
                >
                  ‹
                </Button>
                <span className="pr:px-3 pr:py-1 pr:bg-slate-100 pr:rounded-xs">
                  {__('Page', 'prorank-seo')} {currentPage} {__('of', 'prorank-seo')} {totalPages}
                </span>
                <Button
                  variant="secondary"
                  onClick={() => setCurrentPage(currentPage + 1)}
                  disabled={currentPage === totalPages}
                  className="pr:min-w-8 pr:p-1 pr:transition-all pr:duration-300"
                >
                  ›
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => setCurrentPage(totalPages)}
                  disabled={currentPage === totalPages}
                  className="pr:min-w-8 pr:p-1 pr:transition-all pr:duration-300"
                >
                  »
                </Button>
              </div>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
};

export default LinksReport;