import React, { useEffect, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { api } from '../api';
import { Button, Badge, Notice, LengthMeter } from './ui';
import { IconSparkle } from './icons';
/**
* The review card: what the AI proposes for this page, next to what is there.
*
* Nothing on this card writes to the page except the Apply button, and Apply
* writes what is in the two editable fields — the proposal as it came, or as
* the person changed it. Everything a reviewer needs to decide is on the
* card: the original, the proposal, why, how confident, what to double-check,
* which model, what it cost. Undo puts back the exact previous values.
*
* A proposal made from unchanged content is served from storage; the button
* says so, so nobody wonders why the second press was free.
*/
/** Word-level diff, enough to see what moved. */
function Diff({ from, to }) {
const a = String(from || '').split(/\s+/).filter(Boolean);
const b = String(to || '').split(/\s+/).filter(Boolean);
// LCS on words; both strings are short.
const m = a.length;
const n = b.length;
const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
for (let i = m - 1; i >= 0; i--) for (let j = n - 1; j >= 0; j--) dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
const out = [];
let i = 0;
let j = 0;
while (i < m && j < n) {
if (a[i] === b[j]) {
out.push(['=', a[i]]);
i++;
j++;
} else if (dp[i + 1][j] >= dp[i][j + 1]) {
out.push(['-', a[i]]);
i++;
} else {
out.push(['+', b[j]]);
j++;
}
}
while (i < m) out.push(['-', a[i++]]);
while (j < n) out.push(['+', b[j++]]);
if (a.length === 0) return {b.join(' ')};
return (
{out.map(([k, w], idx) => (
{w}{' '}
))}
);
}
export default function AiReview({ postId, onApplied }) {
const [state, setState] = useState(null);
const [title, setTitle] = useState('');
const [desc, setDesc] = useState('');
const [busy, setBusy] = useState('');
const [error, setError] = useState(null);
const [showHistory, setShowHistory] = useState(false);
const load = () =>
api
.get(`/ai/suggest/${postId}`)
.then((s) => {
setState(s);
if (s.pending) {
setTitle(s.pending.proposal.title || '');
setDesc(s.pending.proposal.description || '');
}
})
.catch((e) => setError(e.message));
useEffect(() => {
load();
}, [postId]); // eslint-disable-line react-hooks/exhaustive-deps
const run = async (name, fn) => {
setBusy(name);
setError(null);
try {
await fn();
} catch (e) {
setError(e.message);
} finally {
setBusy('');
}
};
const propose = (force = false) =>
run('propose', async () => {
const s = await api.post(`/ai/suggest/${postId}`, { force });
setState({ pending: s, stale: false, history: s.history || [], current: s.current });
setTitle(s.proposal.title || '');
setDesc(s.proposal.description || '');
});
const apply = () =>
run('apply', async () => {
const r = await api.post(`/ai/suggest/${postId}/apply`, { title, description: desc });
setState((prev) => ({ ...(prev || {}), current: { title: r.title || '', description: r.description || '' } }));
setState((prev) => ({ pending: null, stale: false, history: r.history || [], current: r.current || prev?.current }));
if (onApplied) onApplied({ seo_title: r.title, seo_desc: r.description });
});
const reject = () =>
run('reject', async () => {
const r = await api.post(`/ai/suggest/${postId}/reject`, {});
setState((prev) => ({ pending: null, stale: false, history: r.history || [], current: r.current || prev?.current }));
});
const undo = () =>
run('undo', async () => {
const r = await api.post(`/ai/suggest/${postId}/undo`, {});
setState((s) => ({ ...s, history: r.history || [] }));
if (onApplied) onApplied({ seo_title: r.restored.title || '', seo_desc: r.restored.description || '' });
});
if (!state) return null;
const p = state.pending;
const canUndo = (state.history || []).some((h) => h.action === 'applied' && !h.undone);
const edited = p && (title !== p.proposal.title || desc !== p.proposal.description);
/*
* A proposal stored by an older version has no `original` block.
*
* Reading original.title threw, and because it threw during render the
* error boundary replaced the whole screen — a page with a stale proposal
* on it became unopenable, and nothing in the message said which page or
* why. Defaulting is enough: the before/after comparison degrades to
* showing the fallback, which is exactly what an empty SEO title means.
*/
/*
* "Now" is what the page carries at this moment, read fresh with every
* load, not the snapshot the proposal took when it was written. The
* snapshot belongs to the undo. A proposal made before an earlier apply
* showed that earlier title as "Now" while the list, reading the page,
* showed the real one, and the two screens disagreed about a fact.
*/
const snapshot = p?.original ?? { title: '', description: '', fallback_title: '' };
const original = state?.current ? { ...snapshot, title: state.current.title || '', description: state.current.description || '' } : snapshot;
const movedSince = !!(state?.current && p?.original && (state.current.title !== (p.original.title || '') || state.current.description !== (p.original.description || '')));
/*
* The receipt block, likewise.
*
* A proposal written before the model receipt was recorded — or by a
* provider that reported none — has no `model`, and reading through it
* threw during render, which the error boundary turns into a blank screen
* for the whole page rather than a missing line in one panel.
*/
const model = p?.model ?? {};
const conf = p ? p.proposal.confidence : 0;
const confTone = conf >= 75 ? 'good' : conf >= 50 ? 'warning' : 'serious';
return (