import React from 'react';
import { __ } from '@wordpress/i18n';
import { Progress, ScoreRing } from './ui';

/**
 * The screen before its first run — same hero as after it.
 *
 * A screen that has never run used to be one sentence in a card, and beside
 * the dashboard's hero it looked broken rather than new. This is the same
 * shape with the numbers still empty: the ring says "not yet", the sentence
 * says what the first run does, the button starts it, and the four tiles
 * name what will be measured. Below it, the steps that stand between now and
 * the first result, each with its state.
 *
 * @param {object}   props
 * @param {string}   props.badge     Short state, e.g. "Not run yet".
 * @param {string}   props.title     What the first run does, in one sentence.
 * @param {string}   props.why       Why it matters.
 * @param {string}   [props.action]  Primary button label.
 * @param {Function} [props.onAction]
 * @param {boolean}  [props.busy]
 * @param {boolean}  [props.disabled]
 * @param {string}   [props.ringLabel]
 * @param {Array<{label: string, hint?: string}>} props.stats  The four measures.
 * @param {Array<{label: string, detail?: string, done: boolean, action?: string, onAction?: Function}>} [props.steps]
 * @param {Array<{title: string, text: string}>} [props.previews]  What the screen will show.
 */
export default function FirstRun({ badge = __('Not run yet', 'ai-rank-suite'), title, why, action, onAction, busy = false, disabled = false, ringLabel = 'Score', stats = [], steps = [], previews = [], progress = null }) {
	const next = steps.find((s) => !s.done);
	return (
		<div className="grid gap-4">
			<div className="ars-hero">
				<div className="ars-hero-ring">
					<ScoreRing value={null} size={132} label={ringLabel} onLight />
				</div>
				<div className="ars-hero-body">
					<span className="ars-hero-badge">{badge}</span>
					<h2 className="ars-hero-title">{title}</h2>
					<p className="ars-hero-why">{why}</p>
					<div className="ars-hero-actions">
						{action && (
							<button type="button" className="ars-btn ars-btn-primary" onClick={onAction} disabled={busy || disabled}>
								{busy ? __( 'Working…', 'ai-rank-suite' ) : action}
							</button>
						)}
						{next && next.action && (
							<button type="button" className="ars-btn ars-btn-ghost" onClick={next.onAction}>
								{next.action}
							</button>
						)}
					</div>
					{/*
					 * The run says where it is, right here.
					 *
					 * Pressing the button turned it into "Working…" and that was
					 * the whole of it: no count, no bar, nothing that changed for
					 * as long as the crawl lasted. Every other long job in the
					 * plugin draws a bar; this screen is where the longest one
					 * starts, and it drew nothing.
					 */}
					{progress && progress.running && (
						<div className="ars-hero-progress">
							<Progress label={progress.label} done={progress.done} total={progress.total} percent={progress.percent} note={progress.note} />
						</div>
					)}
				</div>
				<div className="ars-hero-stats">
					{stats.slice(0, 4).map((st) => (
						<div key={st.label} className="ars-hero-stat" style={{ cursor: 'default' }} title={st.hint || ''}>
							<span className="ars-hero-stat-v" style={{ color: 'var(--ars-ink-3)' }}>
								—
							</span>
							<span className="ars-hero-stat-l">{st.label}</span>
						</div>
					))}
				</div>
			</div>

			{steps.length > 0 && (
				<ol className="ars-steps">
					{steps.map((s, i) => (
						<li key={s.label} className={`ars-step${s.done ? ' is-done' : ''}${next === s ? ' is-next' : ''}`}>
							<span className="ars-step-n">{s.done ? '✓' : i + 1}</span>
							<span className="grid gap-0.5 min-w-0">
								<span className="ars-step-label">{s.label}</span>
								{s.detail && <span className="ars-step-detail">{s.detail}</span>}
							</span>
							{!s.done && s.action && (
								<button type="button" className="ars-btn ars-btn-ghost" onClick={s.onAction}>
									{s.action}
								</button>
							)}
						</li>
					))}
				</ol>
			)}

			{previews.length > 0 && (
				<div className="ars-previews">
					{previews.map((p) => (
						<div key={p.title} className="ars-preview">
							<span className="ars-preview-title">{p.title}</span>
							<span className="ars-preview-text">{p.text}</span>
						</div>
					))}
				</div>
			)}
		</div>
	);
}