// app.jsx — Top-level App: routing state + theme + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
	palette: ['#b86a4a', '#f0e7dd', '#2b1e18', '#efddce'],
	viewport: 'desktop',
	showTweaksHint: true,
	showAISections: true,
}; /*EDITMODE-END*/

// Curated palettes — each is [accent, bg, ink, accent-soft].
// All palettes are LIGHT THEME, WCAG-compliant. No cream/ivory/bone bgs.
// Backgrounds are cool stones, linens, tinted whites and accent-leaning hues.
const PALETTES = [
	// ── Slate court (slate viola) ─────────────────────────────────────────
	// 1. Slate · Linen — lino freddo neutro
	['#54577C', '#eeeef0', '#1f2230', '#e0e0e8'],
	// 2. Slate · Lavanda — bg tinto verso l'accent
	['#54577C', '#edecf1', '#1f2030', '#dedce8'],

	// ── Clay & ink (terracotta) ───────────────────────────────────────────
	// 3. Clay · Argilla — argilla rosata
	['#b86a4a', '#f0e7dd', '#2b1e18', '#efddce'],
	// 4. Clay · Carta — paper neutro più freddo
	['#b86a4a', '#ecebe6', '#241d18', '#eedccc'],

	// ── Dusty plum (prugna) ───────────────────────────────────────────────
	// 5. Plum · Greige — greige neutrale
	['#6e4d6a', '#ecebe7', '#241f23', '#e8dde4'],
	// 6. Plum · Cipria — cipria rosato pallido
	['#6e4d6a', '#f1eaea', '#2a1f24', '#ece1e7'],

	// ── Cobalt linen (slate blu) ──────────────────────────────────────────
	// 7. Cobalt · Pietra — pietra neutra
	['#3d5980', '#ebebe8', '#1d2330', '#dadfeb'],
	// 8. Cobalt · Azzurrino — bg tinto verso l'accent
	['#3d5980', '#ebecf1', '#1a2030', '#d9dee9'],
];

function applyPalette(palette) {
	const [accent, bg, ink, soft] = palette;
	const r = document.documentElement;
	r.style.setProperty('--accent', accent);
	r.style.setProperty('--accent-strong', shade(accent, -0.15));
	r.style.setProperty('--accent-soft', soft);
	r.style.setProperty(
		'--accent-fg',
		luminance(accent) > 0.55 ? '#1a1a14' : '#ffffff',
	);
	r.style.setProperty('--bg', bg);
	r.style.setProperty('--surface', shade(bg, 0.025));
	r.style.setProperty('--surface-deep', shade(bg, -0.025));
	r.style.setProperty('--ink', ink);
	r.style.setProperty('--muted', mix(ink, bg, 0.5));
	r.style.setProperty('--border', mix(ink, bg, 0.85));
}

// Simple hex helpers
function hexToRgb(hex) {
	const h = hex.replace('#', '');
	const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
	const n = parseInt(x, 16);
	return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
function rgbToHex(r, g, b) {
	return (
		'#' +
		[r, g, b]
			.map((v) =>
				Math.max(0, Math.min(255, Math.round(v)))
					.toString(16)
					.padStart(2, '0'),
			)
			.join('')
	);
}
function shade(hex, amt) {
	const [r, g, b] = hexToRgb(hex);
	const f = amt < 0 ? 1 + amt : 1;
	if (amt < 0) return rgbToHex(r * f, g * f, b * f);
	return rgbToHex(
		r + (255 - r) * amt,
		g + (255 - g) * amt,
		b + (255 - b) * amt,
	);
}
function mix(hexA, hexB, ratio) {
	const a = hexToRgb(hexA),
		b = hexToRgb(hexB);
	return rgbToHex(
		a[0] * (1 - ratio) + b[0] * ratio,
		a[1] * (1 - ratio) + b[1] * ratio,
		a[2] * (1 - ratio) + b[2] * ratio,
	);
}
function luminance(hex) {
	const [r, g, b] = hexToRgb(hex);
	return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
}

function App() {
	const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
	const [route, setRoute] = React.useState('landing');
	const [params, setParams] = React.useState({});
	const [navKey, setNavKey] = React.useState(0);

	const go = React.useCallback((r, p = {}) => {
		setRoute(r);
		setParams(p);
		setNavKey((k) => k + 1);
		requestAnimationFrame(() => {
			const scroller = document.querySelector('[data-app-scroll]');
			if (scroller) scroller.scrollTop = 0;
		});
	}, []);

	React.useEffect(() => {
		applyPalette(t.palette);
	}, [t.palette]);

	// Expose AI sections flag globally so screens can read it without prop drilling
	React.useEffect(() => {
		window.__showAISections = t.showAISections;
	}, [t.showAISections]);

	const Screen =
		{
			landing: LandingScreen,
			auth: AuthScreen,
			register: RegisterScreen,
			dashboard: DashboardScreen,
			'dashboard-v2': DashboardV2Screen,
			'dashboard-coach': DashboardCoachScreen,
		}[route] || LandingScreen;

	return (
		<>
			<div
				data-app-scroll
				style={{
					position: 'fixed',
					inset: 0,
					overflow: 'auto',
					background: 'var(--bg)',
					color: 'var(--ink)',
				}}
			>
				<Screen key={navKey} go={go} params={params} tweaks={t} />
			</div>

			<TweaksPanel title="Tweaks">
				<TweakSection label="Flusso Atleta" />
				<TweakButton
					label="→ Landing"
					secondary
					onClick={() => go('landing')}
				/>
				<TweakButton
					label="→ Registrazione"
					secondary
					onClick={() => go('auth', { mode: 'signup' })}
				/>
				<TweakButton
					label="→ Accedi"
					secondary
					onClick={() => go('auth', { mode: 'signin' })}
				/>
				<TweakButton
					label="→ Scelta ruolo"
					secondary
					onClick={() => go('register', { email: 'demo@trygo.app' })}
				/>
				<TweakButton
					label="→ Reg. atleta (step)"
					secondary
					onClick={() =>
						go('register', { email: 'demo@trygo.app', role: 'student' })
					}
				/>
				<TweakButton
					label="→ Dashboard atleta"
					secondary
					onClick={() => go('dashboard-v2', { mockUser: true })}
				/>

				<TweakSection label="Flusso allenatore" />
				<TweakButton
					label="→ Landing"
					secondary
					onClick={() => go('landing')}
				/>
				<TweakButton
					label="→ Registrazione"
					secondary
					onClick={() => go('auth', { mode: 'signup' })}
				/>
				<TweakButton
					label="→ Accedi"
					secondary
					onClick={() => go('auth', { mode: 'signin' })}
				/>
				<TweakButton
					label="→ Scelta ruolo"
					secondary
					onClick={() => go('register', { email: 'demo@trygo.app' })}
				/>
				<TweakButton
					label="→ Reg. allenatore"
					secondary
					onClick={() =>
						go('register', { email: 'coach@trygo.app', role: 'coach' })
					}
				/>
				<TweakButton
					label="→ Dashboard allenatore"
					secondary
					onClick={() => go('dashboard-coach')}
				/>
			</TweaksPanel>
		</>
	);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);