import React, { useEffect, useMemo, useRef, useState } from 'react';
import { __, _n, sprintf } from '@wordpress/i18n';
/**
* The operations floor.
*
* A wiring diagram of the plugin: the circuits along the top, the engines
* feeding the bus, the desks they staff below, and the clockwork ticking on
* the right. Nothing here is decorative in the sense of being made up — every
* node is a stored credential, every wire is a row in the routing table, every
* gear is a real WordPress cron entry with a real next-run time.
*
* The motion rule is the whole discipline of this component: **it only moves
* when something is actually happening.**
*
* - The bus carries current when an engine can answer. No key, no current.
* - A desk lights up only while the agent reports work routed to it.
* - A gear turns only while its job is scheduled and not overdue.
*
* A dashboard that animates identically whether or not anything is running
* teaches people to stop looking at it, and then it is worse than a static
* table. An idle plugin should look idle. That is why the dark state has as
* much design in it as the live one.
*/
/*
* The desks, keyed on something that does not change when the language does.
*
* These were matched against the desk *name* the server sent, which is a
* translated string: on a German site the router said "Textredaktion" and this
* list said "Copy desk", nothing matched, and every desk silently vanished —
* the whole point of the panel, missing, with no error anywhere. The server now
* sends a stable `desk_id` beside the translated label, and the label is used
* only for reading.
*/
const DESKS = [
{ id: 'copy', label: __('Copy desk', 'ai-rank-suite'), hint: __('Writes', 'ai-rank-suite') },
{ id: 'research', label: __('Research', 'ai-rank-suite'), hint: __('Finds', 'ai-rank-suite') },
{ id: 'technical', label: __('Technical', 'ai-rank-suite'), hint: __('Structures', 'ai-rank-suite') },
{ id: 'analysis', label: __('Analysis', 'ai-rank-suite'), hint: __('Measures', 'ai-rank-suite') },
{ id: 'operations', label: __('Operations', 'ai-rank-suite'), hint: __('Runs at scale', 'ai-rank-suite') },
];
/** The stable key for a job's desk, with the old translated name as a fallback. */
const deskKey = (job) => job?.desk_id || job?.desk || '';
/**
* @param {boolean} compact Drop the supply rail and the clockwork column and
* keep the part that shows the AI at work: the bus,
* the engines feeding it and the desks they staff.
* The dashboard wants "is it running", not the whole
* wiring diagram — that stays on the Autopilot screen.
*/
// Every array below is read defensively. This component is fed straight from
// /autopilot/status, it is now mounted on the dashboard as well as the
// autopilot screen, and a payload missing one key would take both down — the
// same failure BandScale had, in the component with the widest blast radius.
export default function AgencyFloor({ routing, systems, now, running, compact = false }) {
const engines = routing?.engines || [];
const jobs = routing?.jobs || [];
const live = engines.length > 0;
const reduce = usePrefersReducedMotion();
const desks = useMemo(() => {
const byDesk = new Map();
jobs.forEach((j) => {
const key = deskKey(j);
if (!byDesk.has(key)) byDesk.set(key, []);
byDesk.get(key).push(j);
});
// Known desks in their intended order first, then anything the server
// adds later — a new desk should appear, not disappear.
const known = DESKS.filter((d) => byDesk.has(d.id)).map((d) => ({ ...d, jobs: byDesk.get(d.id) }));
const extra = [...byDesk.keys()]
.filter((k) => k && !DESKS.some((d) => d.id === k))
.map((k) => ({ id: k, label: byDesk.get(k)[0]?.desk || k, hint: '', jobs: byDesk.get(k) }));
return [...known, ...extra];
}, [jobs]);
const activeDesk = useMemo(() => {
if (!now) return null;
const job = jobs.find((j) => j.id === jobFor(now.task));
return job ? deskKey(job) : null;
}, [now, jobs]);
const engineIndex = useMemo(() => {
const map = new Map();
engines.forEach((e, i) => map.set(e.id, i));
return map;
}, [engines]);
const circuits = systems?.circuits || [];
const clock = systems?.clockwork || null;
/*
* How many kinds of work exist, from the server rather than from the length
* of whichever array this component happens to be holding. The load bar
* used to divide by `jobs.length`, which is the same number only for as
* long as nobody filters that list.
*/
const jobsTotal = Number(routing?.jobs_total) || jobs.length || 1;
return (
{/* ── What it is plugged into, hanging off the artery ─────────── */}
{circuits.length > 0 && (
{__('Connected to', 'ai-rank-suite')}
{sprintf(
/* translators: 1: connected count, 2: total. */
__('%1$s of %2$s services are plugged in. Each one below says what stops working while it is dark.', 'ai-rank-suite'),
circuits.filter((c) => c.live).length,
circuits.length
)}
{/*
* The artery.
*
* One moving line with a stub dropping into every service
* below it, so the picture reads as current going somewhere
* rather than as a loading bar. It moves only while an
* engine can answer: no key, no current, and the whole row
* goes still. That rule is the reason the animation is worth
* having at all.
*/}
{circuits.map((c) => (
))}
)}
{!live && (
<>
{__('The floor is dark', 'ai-rank-suite')}
{__('No API key is stored, so nothing downstream can run. Connect one engine and every desk below wakes up at once — the assignments already exist, they are just unpowered.', 'ai-rank-suite')}
{/*
* The unpowered floor, drawn anyway.
*
* The desks and their assignments exist whether or not a key
* does — they are rows in the routing table. Showing them
* greyed is the difference between "this plugin does nothing"
* and "this plugin is wired and waiting", and it is the same
* diagram that lights up, so nothing moves when the key
* arrives; it only gains colour.
*/}
{/*
* The clockwork runs whether or not an engine is connected —
* a rank snapshot and a backlink re-check need no model. It
* was drawn only in the live branch, so on the screen most
* people see first the two overdue jobs were invisible: the
* one thing here that is genuinely broken, hidden behind the
* one thing that is merely unconfigured.
*/}
{! compact && clock && }
{desks.length > 0 && (
<>
{__('Would be done with AI', 'ai-rank-suite')}
{sprintf(
/* translators: 1: number of job types. */
__('%s kinds of work are wired up and waiting for a key. Nothing here is running.', 'ai-rank-suite'),
jobsTotal
)}
{sprintf(
/* translators: 1: jobs routed here, 2: jobs in total. */
__('%1$s of %2$s job types', 'ai-rank-suite'),
e.load,
jobsTotal
)}
);
})}
{__('Done with AI', 'ai-rank-suite')}
{sprintf(
/* translators: 1: number of job types. */
__('%s kinds of work, each one sent to the engine named beside it. A line lights up only while that work is actually running.', 'ai-rank-suite'),
jobsTotal
)}
);
}
/**
* The scheduled machinery.
*
* A gear turns only while its job is scheduled and on time. The honest part is
* the note underneath: WordPress cron fires on page views, not on a timer, so
* "daily" on a quiet site means "whenever somebody next turns up" — and with
* DISABLE_WP_CRON set and no system cron behind it, none of this has ever run.
* That failure is completely silent in WordPress, which is exactly why it gets
* a sentence here instead of a green dot.
*/
function Clockwork({ clock, still }) {
return (