import React, { useEffect, useMemo, useState } from 'react'; import { __, _n, sprintf } from '@wordpress/i18n'; import { api } from '../api'; import { Button, Badge, Notice, LengthMeter, Segmented } from './ui'; import { IconRefresh, IconExternal, IconShield } from './icons'; import { copyText } from '../copy'; /** * The of one page, in full. * * Every other SEO plugin writes these tags and then never shows them again — * you find out what shipped by reading view-source. This tab is the whole tag * list with three things view-source cannot give you: why each tag is there, * whether it is within its limit, and (on request) a comparison against the * head the server actually delivered, which is the only way a duplicate * canonical from a theme ever becomes visible. */ const STATUS = { ok: { tone: 'good', label: 'ok' }, missing: { tone: 'serious', label: 'missing' }, empty: { tone: 'neutral', label: __('not set', 'ai-rank-suite') }, long: { tone: 'warning', label: __('too long', 'ai-rank-suite') }, off: { tone: 'neutral', label: __('switched off', 'ai-rank-suite') }, delegated: { tone: 'warning', label: __('other plugin', 'ai-rank-suite') }, }; export default function HeadTab({ postId, initial = null, onLoad, onGoTo }) { const [data, setData] = useState(initial); const [error, setError] = useState(null); const [live, setLive] = useState(null); const [liveBusy, setLiveBusy] = useState(false); const [view, setView] = useState('tags'); const [copied, setCopied] = useState(false); const [open, setOpen] = useState({}); const load = () => { setError(null); api .get(`/content/${postId}/head`) .then((next) => { setData(next); onLoad?.(next); }) .catch((e) => setError(e.message)); }; // The drawer usually has this already — refetch only when it does not, so // switching to this tab is instant rather than a second spinner. useEffect(() => { setLive(null); if (initial) { setData(initial); return; } setData(null); load(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [postId, initial]); const fetchLive = async () => { setLiveBusy(true); try { setLive(await api.get(`/content/${postId}/head/live`)); } catch (e) { setLive({ ok: false, reason: e.message }); } finally { setLiveBusy(false); } }; const byGroup = useMemo(() => { if (!data) return []; return data.groups .map((g) => ({ ...g, tags: data.tags.filter((t) => t.group === g.id) })) .filter((g) => g.tags.length > 0); }, [data]); if (error) return {error}; if (!data) return
{__('Reading the head…', 'ai-rank-suite')}
; const c = data.counts || {}; const copy = async () => { if (await copyText(data.source)) { setCopied(true); setTimeout(() => setCopied(false), 1800); } }; return (
{/* Summary strip — what state the head is in, in one line. */}
{data.tags.filter((t) => t.status === 'ok').length} tags in order
{c.missing > 0 && (
{c.missing} missing
)} {c.long > 0 && (
{c.long} over length
)} {c.empty > 0 && (
{c.empty} optional, unset
)}
{data.coexist && ( {data.coexist} is active on this site, so some of these surfaces are written by it rather than by AI Rank Suite. Rows marked other plugin are the ones it owns — nothing here is duplicated, which is the point. )} {view === 'tags' && ( <> {data.issues.length > 0 && (
{data.issues.map((issue, i) => (
{issue.level === 'error' ? '✕' : issue.level === 'warn' ? '!' : 'i'}
{issue.title}
{issue.text}
))}
)} {byGroup.map((group) => (
{group.label}
{group.note}
{group.tags.length}
{group.tags.map((tag) => { const key = `${group.id}:${tag.key}`; const isOpen = !!open[key]; const meta = STATUS[tag.status] || STATUS.ok; return (
{isOpen && (
{tag.why &&

{tag.why}

} {tag.note && (

{tag.note}

)} {tag.limit > 0 && tag.value && ( 100 ? 'desc' : 'title'} /> )} {tag.block && tag.value && ( 
{tag.value.slice(0, 4000)}
)}
{tag.key} written by{' '} {tag.owner === 'airs' ? 'AI Rank Suite' : tag.owner === 'wp' ? 'WordPress' : tag.owner} {onGoTo && jump(tag.key) && ( )}
)}
); })}
))} )} {view === 'source' && (
{__('Open the page', 'ai-rank-suite')} {data.source.split('\n').length} lines 
{data.source || '(nothing would be written)'}

{__('This is what AI Rank Suite writes. The finished head will also contain whatever your theme and other plugins add — use the live check to see the whole thing.', 'ai-rank-suite')}

)} {view === 'live' && (
Requests {data.url} and reads what came back — the only way to catch a second plugin writing the same tag.
{live && !live.ok && {live.reason}} {live && live.ok && ( <>
{live.tags.length} tags on the page
{live.duplicates.length} duplicated
{live.drift.length} differ from plan
{live.jsonld} {__('JSON-LD blocks', 'ai-rank-suite')}
{live.duplicates.length > 0 && (
{__('Written more than once', 'ai-rank-suite')}
{live.duplicates.map((d) => (
✕
{d.key} appears {d.count} times
{__('Two sources are writing this tag. Crawlers pick one, and which one is not something you control — usually the theme or a second SEO plugin. Switch the duplicate off at its source.', 'ai-rank-suite')}
))}
)} {live.drift.length > 0 && (
{__('Different from what we write', 'ai-rank-suite')}
{live.drift.map((d, i) => (
{d.label}
planned {d.planned}
live {d.live || absent}
))}

{__('A difference here is almost always a page cache serving an older head. If it survives a cache purge, something else is overwriting the tag.', 'ai-rank-suite')}

)} {live.duplicates.length === 0 && live.drift.length === 0 && ( {__('The head on the page matches what this plugin writes, and nothing is duplicated.', 'ai-rank-suite')} )} )}
)}
); } /** Which tab edits a given tag, for the "Edit this" shortcut. */ function jump(key) { if (key === 'title' || key === 'name:description') return 'optimize'; if (key.startsWith('property:og') || key.startsWith('name:twitter')) return 'preview'; if (key === 'name:robots' || key.startsWith('rel:canonical')) return 'advanced'; if (key === 'application/ld+json') return 'schema'; return null; }