import React from 'react';
import { Skeleton } from '@pdfdraft/ui/components/skeleton';

function SkeletonField({ labelWidth = 'w-32' }: { labelWidth?: string }) {
	return (
		<div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px', padding: '20px 0' }}>
			<div style={{ minWidth: '200px', paddingTop: '4px' }}>
				<Skeleton className={`h-4 ${labelWidth}`} />
			</div>
			<div style={{ flex: 1 }}>
				<Skeleton className="h-9 w-full max-w-md" />
			</div>
		</div>
	);
}

function SkeletonSwitchField({ labelWidth = 'w-40' }: { labelWidth?: string }) {
	return (
		<div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px', padding: '20px 0' }}>
			<div style={{ minWidth: '200px', paddingTop: '4px' }}>
				<Skeleton className={`h-4 ${labelWidth}`} />
			</div>
			<div style={{ flex: 1 }}>
				<Skeleton className="h-6 w-10 rounded-full" />
			</div>
		</div>
	);
}

function SkeletonCardSelectField({ labelWidth = 'w-36' }: { labelWidth?: string }) {
	return (
		<div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px', padding: '20px 0' }}>
			<div style={{ minWidth: '200px', paddingTop: '4px' }}>
				<Skeleton className={`h-4 ${labelWidth}`} />
			</div>
			<div style={{ flex: 1, display: 'flex', gap: '12px' }}>
				<Skeleton className="h-20 flex-1 rounded-[10px]" />
				<Skeleton className="h-20 flex-1 rounded-[10px]" />
			</div>
		</div>
	);
}

function SkeletonHr() {
	return <hr style={{ margin: 0, border: 'none', borderTop: '1px solid #e2e4e7' }} />;
}

function SkeletonCard({ children, titleWidth = 'w-36' }: { children: React.ReactNode; titleWidth?: string }) {
	return (
		<div
			style={{
				background: '#fff',
				borderRadius: '15px',
				border: '1px solid #e2e4e7',
				padding: '4px 24px 8px',
			}}
		>
			<div style={{ padding: '20px 0 16px' }}>
				<Skeleton className={`h-5 ${titleWidth}`} />
			</div>
			<SkeletonHr />
			{children}
		</div>
	);
}

function TemplateSelectorSkeleton() {
	return (
		<SkeletonCard titleWidth="w-40">
			<div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px', padding: '20px 0' }}>
				<div style={{ minWidth: '200px', paddingTop: '6px' }}>
					<Skeleton className="h-4 w-32" />
				</div>
				<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
					<Skeleton className="h-9 rounded-md" style={{ width: 300 }} />
					<Skeleton className="h-4 w-24" />
				</div>
			</div>
		</SkeletonCard>
	);
}

/**
 * Content-only skeleton — page chrome (header, sidebar, Save) is on the parent settings page.
 */
export function SettingsSkeleton() {
	return (
		<div style={{ padding: '24px 32px', minHeight: 0, display: 'flex', flexDirection: 'column', gap: '20px' }}>
			<TemplateSelectorSkeleton />

			<SkeletonCard titleWidth="w-36">
				<SkeletonCardSelectField labelWidth="w-36" />
				<SkeletonHr />
				<SkeletonCardSelectField labelWidth="w-40" />
				<SkeletonSwitchField labelWidth="w-48" />
				<div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px', padding: '20px 0' }}>
					<div style={{ minWidth: '200px', paddingTop: '4px' }}>
						<Skeleton className="h-4 w-28" />
					</div>
					<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '8px' }}>
						<Skeleton className="h-9 w-36 rounded-md" />
						<Skeleton className="h-4 w-32" />
						<Skeleton className="h-9 w-36 rounded-md" />
					</div>
				</div>
			</SkeletonCard>

			<SkeletonCard titleWidth="w-36">
				<SkeletonField labelWidth="w-32" />
				<SkeletonHr />
				<SkeletonSwitchField labelWidth="w-44" />
				<div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px', padding: '20px 0' }}>
					<div style={{ minWidth: '200px', paddingTop: '4px' }}>
						<Skeleton className="h-4 w-28" />
					</div>
					<div style={{ flex: 1 }}>
						<Skeleton className="h-8 w-72 rounded-md" />
					</div>
				</div>
			</SkeletonCard>
		</div>
	);
}
