import React, { useEffect, useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { api } from '../api';
import { Card, Button, Gauge, Notice } from '../components/ui';
import SiteAnalyzer from '../components/SiteAnalyzer';
import EngineReadiness from '../components/EngineReadiness';

/*
 * Site analysis (1.0 Phase 2): the full website analyzer, the AI score
 * with its four dimensions, and the answer-engine readiness — moved here
 * from the dashboard, which now opens on the verdict and the work queue
 * and links here for the evidence.
 */

const DIMENSIONS = [
	{ key: 'discovery', label: __('Discovery', 'ai-rank-suite'), hint: __('Can AI crawlers find and map your site?', 'ai-rank-suite') },
	{ key: 'structure', label: __('Structure', 'ai-rank-suite'), hint: __('Is content chunkable for LLMs?', 'ai-rank-suite') },
	{ key: 'answers', label: __('Answers', 'ai-rank-suite'), hint: __('Does content answer questions directly?', 'ai-rank-suite') },
	{ key: 'schema', label: __('Schema', 'ai-rank-suite'), hint: __('Is meaning machine-readable?', 'ai-rank-suite') },
];

export default function Analyzer() {
	const [data, setData] = useState(null);
	const [busy, setBusy] = useState(false);
	const [error, setError] = useState(null);

	useEffect(() => {
		api.get('/score').then(setData).catch((e) => setError(e.message));
	}, []);

	const recalc = async () => {
		setBusy(true);
		setError(null);
		try {
			setData(await api.post('/score/recalculate'));
		} catch (e) {
			setError(e.message);
		} finally {
			setBusy(false);
		}
	};

	const overall = data?.dimensions?.overall;

	return (
		<div className="ars-page">
			{error && <Notice tone="serious">{error}</Notice>}

			{/* The whole-site verdict: one barometer per score, the spread
			    behind it, and the button that goes and measures. */}
			<SiteAnalyzer />

			<div className="grid gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] items-stretch">
				<Card
					title={__('AI Score', 'ai-rank-suite')}
					subtitle={__('How ready this site is for AI search and assistants', 'ai-rank-suite')}
					action={
						<Button variant="ghost" onClick={recalc} busy={busy}>
							{busy ? __('Recalculating…', 'ai-rank-suite') : __('Recalculate', 'ai-rank-suite')}
						</Button>
					}
				>
					<div className="ars-scoreband">
						<Gauge value={overall ?? 0} label={__('AI Score', 'ai-rank-suite')} />
						<div>
							{DIMENSIONS.map((d) => {
								const v = data?.dimensions?.[d.key] ?? 0;
								return (
									<div key={d.key} className="ars-dimrow" title={d.hint}>
										<span className="ars-dimrow-label">{d.label}</span>
										<span className="ars-dimrow-track">
											<span className="ars-dimrow-fill" style={{ width: `${v}%` }} />
										</span>
										<span className="ars-dimrow-value">{v}</span>
									</div>
								);
							})}
						</div>
					</div>
					<p className="m-0 mt-3 t-caption">
						{data?.calculated_at
							? sprintf(__('Last run %s · each area is weighted, so the score is these four and nothing else', 'ai-rank-suite'), new Date(data.calculated_at * 1000).toLocaleString())
							: __('Not calculated yet.', 'ai-rank-suite')}
					</p>
				</Card>

				<EngineReadiness />
			</div>
		</div>
	);
}