import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { Tabs } from './ui';
/**
* Renders the page exactly as Google, Facebook/LinkedIn and X will show it.
* The values come from the server's own resolver, so what you see here is what
* actually ships in the — no second implementation to drift apart.
*/
function truncate(text, max) {
const value = String(text || '');
return value.length > max ? `${value.slice(0, max - 1).trimEnd()}…` : value;
}
function prettyUrl(url) {
try {
const u = new URL(url);
const parts = u.pathname.split('/').filter(Boolean);
return [u.hostname.replace(/^www\./, ''), ...parts].join(' › ');
} catch {
return url;
}
}
/**
* A card image that degrades to the placeholder when the URL fails to load — a
* broken-image icon in a preview reads as a plugin bug, when it is really the
* user's image URL that is wrong.
*/
function CardImage({ src, style, placeholder, placeholderStyle }) {
const [failed, setFailed] = useState(false);
if (!src || failed) {
return (
{src ? __('That image URL could not be loaded', 'ai-rank-suite') : placeholder}
);
}
return 
setFailed(true)} />;
}
function Frame({ children, width = 500 }) {
return (
{children}
);
}
export function GoogleSerp({ serp, device = 'desktop', emptyTitle, emptyDesc }) {
const titleMax = device === 'mobile' ? 55 : 60;
const descMax = device === 'mobile' ? 120 : 160;
return (
{(serp.site || '?').slice(0, 1).toUpperCase()}
{serp.site}
{truncate(prettyUrl(serp.url), 60)}
{truncate(serp.title, titleMax) || emptyTitle || __('Untitled', 'ai-rank-suite')}
{truncate(serp.desc, descMax) || emptyDesc || __('No meta description — Google will invent one from the page text.', 'ai-rank-suite')}
);
}
function Facebook({ card, url }) {
let host = url;
try {
host = new URL(url).hostname.replace(/^www\./, '');
} catch {
/* keep the raw string */
}
return (
{host}
{truncate(card.og_title, 88)}
{truncate(card.og_desc, 110)}
);
}
function Twitter({ card, url }) {
let host = url;
try {
host = new URL(url).hostname.replace(/^www\./, '');
} catch {
/* keep the raw string */
}
const large = card.tw_card === 'summary_large_image';
return (
{host}
{truncate(card.tw_title, 70)}
{truncate(card.tw_desc, large ? 100 : 60)}
);
}
/**
* How the page looks as an AI citation.
*
* Not a mock of any one product's chrome — those change monthly and a pixel
* copy dates instantly. What is stable is the *shape* of a generative answer:
* a paragraph the assistant wrote, and beneath it a short list of sources,
* each reduced to a site name and a page title. That is the entire surface a
* page gets, and it is why the meta description and the entity name matter
* more here than the title tag does.
*
* The paragraph shown is the page's own summary or description, because that
* is the text an assistant is most likely to paraphrase. Where there is none,
* saying so is more useful than inventing filler that suggests the page is
* ready when it is not.
*/
function AiAnswer({ serp, engine, brand }) {
const engines = {
chatgpt: { name: 'ChatGPT', accent: '#10a37f', lead: __('Based on the sources I found:', 'ai-rank-suite') },
overview: { name: __('Google AI Overview', 'ai-rank-suite'), accent: '#4285f4', lead: __('AI Overview', 'ai-rank-suite') },
perplexity: { name: 'Perplexity', accent: '#20808d', lead: __('Answer', 'ai-rank-suite') },
copilot: { name: 'Copilot', accent: '#0067b8', lead: __('Here is what I found:', 'ai-rank-suite') },
};
const e = engines[engine] || engines.chatgpt;
const summary = (serp.summary || serp.desc || '').trim();
const site = brand || serp.site;
return (
{e.lead}
{summary ? (
{truncate(summary, 260)}{' '}
1
) : (
{__('This page has no summary or meta description, so an assistant has to build a sentence from whatever text it happens to extract — and it will attribute that sentence to you.', 'ai-rank-suite')}
)}
{__('Sources', 'ai-rank-suite')}
{(site || '?').slice(0, 1).toUpperCase()}
{truncate(serp.title, 70) || __('Untitled', 'ai-rank-suite')}
{site} · {truncate(prettyUrl(serp.url), 52)}
);
}
export default function SnippetPreview({ serp, card, brand }) {
const [view, setView] = useState('google');
const [device, setDevice] = useState('desktop');
const [engine, setEngine] = useState('chatgpt');
if (!serp) return null;
return (
{view === 'google' && (
)}
{view === 'ai' && (
)}
{view === 'google' &&
}
{view === 'ai' &&
}
{view === 'facebook' && card &&
}
{view === 'twitter' && card &&
}
{view === 'ai'
? __('Assistants redraw their interfaces constantly; what does not change is the shape — a paragraph they wrote, and a short source list. This is the surface your page actually gets.', 'ai-rank-suite')
: __('Rendered from the same resolver that writes your
— save to refresh after an edit.', 'ai-rank-suite')}
);
}