import React from 'react';
import { Skeleton } from '@pdfdraft/ui/components/skeleton';
import { PostsToPdfSettingsSkeleton } from './posts-to-pdf/PostsToPdfSettings';

const WP_ADMIN_BAR = 32;
const HEADER_HEIGHT = 53;
const STICKY_TOP = WP_ADMIN_BAR + HEADER_HEIGHT;

function NavItemSkeleton({ active = false }: { active?: boolean }) {
	return (
		<Skeleton
			className="w-full rounded-md"
			style={{
				height: 40,
				marginBottom: 2,
				opacity: active ? 1 : 0.65,
			}}
		/>
	);
}

export function SettingsSkeleton() {
	const addonSections = window.__PDFDRAFT_SETTINGS__?.sections ?? [];
	const navCount = 1 + addonSections.length;

	return (
		<div style={{ width: '100%' }}>
			{/* Header — matches SettingsPage headerStyle */}
			<div
				style={{
					position: 'sticky',
					top: WP_ADMIN_BAR,
					zIndex: 50,
					display: 'flex',
					alignItems: 'stretch',
					borderBottom: '1px solid #e2e4e7',
					background: '#fff',
					height: `${HEADER_HEIGHT}px`,
				}}
			>
				<div
					style={{
						display: 'flex',
						alignItems: 'center',
						gap: '8px',
						padding: '0 20px',
						borderRight: '1px solid #e2e4e7',
						flexShrink: 0,
					}}
				>
					<Skeleton className="h-8 w-7" />
					<Skeleton className="h-5 w-20" />
				</div>
				<div
					style={{
						display: 'flex',
						alignItems: 'center',
						padding: '0 20px',
						position: 'relative',
					}}
				>
					<Skeleton className="h-4 w-16" />
					<Skeleton
						style={{
							position: 'absolute',
							bottom: 0,
							left: 20,
							right: 20,
							height: 2,
							borderRadius: '1px 1px 0 0',
						}}
					/>
				</div>
				<div style={{ display: 'flex', alignItems: 'center', marginLeft: 'auto', padding: '0 24px' }}>
					<Skeleton className="h-9 w-16 rounded-md" />
				</div>
			</div>

			<div style={{ display: 'flex', alignItems: 'flex-start' }}>
				<aside
					style={{
						position: 'sticky',
						top: STICKY_TOP,
						alignSelf: 'flex-start',
						width: '220px',
						flexShrink: 0,
						height: `calc(100vh - ${STICKY_TOP}px)`,
						overflowY: 'auto',
						borderRight: '1px solid #e2e4e7',
						background: '#fff',
					}}
				>
					<nav style={{ padding: '12px 8px' }}>
						{Array.from({ length: navCount }).map((_, index) => (
							<NavItemSkeleton key={index} active={index === 0} />
						))}
					</nav>
				</aside>

				<main style={{ flex: 1, minHeight: 0 }}>
					<PostsToPdfSettingsSkeleton />
				</main>
			</div>
		</div>
	);
}
