import { Accordion } from '@bsf/force-ui';
import { __, sprintf } from '@wordpress/i18n';
import { Check } from 'lucide-react';
import LearnTaskCard from './learn-task-card';

const LearnChapter = ( {
	chapter,
	stats,
	isStepComplete,
	isStepAutoDetected,
	markStep,
	onCta,
	// Forwarded by the parent <Accordion>:
	value,
	isOpen,
	onToggle,
	type,
	disabled,
} ) => {
	const pct =
		stats.total === 0
			? 0
			: Math.round( ( stats.done / stats.total ) * 100 );
	const countLabel = sprintf(
		// translators: 1: completed steps, 2: total steps
		__( '%1$d/%2$d', 'surerank' ),
		stats.done,
		stats.total
	);

	return (
		<Accordion.Item
			value={ value }
			isOpen={ isOpen }
			onToggle={ onToggle }
			type={ type }
			disabled={ disabled }
			className={ [
				'border border-solid rounded-lg overflow-hidden',
				'focus:outline-none focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-focus',
				'[&>h3]:focus-visible:outline-none',
				isOpen ? 'border-brand-border-300' : 'border-border-subtle',
			].join( ' ' ) }
		>
			<Accordion.Trigger className="[&>div:first-child]:flex-1 [&>div:first-child]:justify-between transition-[box-shadow,color] focus:outline-none focus-visible:outline-none">
				<span className="text-base font-semibold text-text-primary text-left">
					{ chapter.title }
				</span>
				<span
					className="relative inline-flex items-center justify-center gap-1 min-w-[2.75rem] h-5 px-2 rounded-full overflow-hidden bg-background-secondary border border-solid border-brand-border-300"
					aria-label={ sprintf(
						// translators: %d: percent complete
						__( 'Chapter progress: %d%%', 'surerank' ),
						pct
					) }
				>
					<span
						aria-hidden="true"
						className="absolute inset-y-0 left-0 bg-brand-200"
						style={ { width: `${ pct }%` } }
					/>
					{ stats.total > 0 && stats.done === stats.total && (
						<Check
							aria-hidden="true"
							className="relative size-3 shrink-0 text-text-primary"
							strokeWidth={ 3 }
						/>
					) }
					<span className="relative text-xs font-medium text-text-primary leading-none">
						{ countLabel }
					</span>
				</span>
			</Accordion.Trigger>
			<Accordion.Content>
				<div className="flex flex-col gap-4 pt-2">
					<span className="text-sm text-text-secondary leading-5">
						{ chapter.description }
					</span>
					<div className="flex flex-col gap-3">
						{ chapter.steps.map( ( step ) => (
							<LearnTaskCard
								key={ step.id }
								chapterId={ chapter.id }
								step={ step }
								completed={ isStepComplete(
									chapter.id,
									step.id
								) }
								autoDetected={ isStepAutoDetected(
									chapter.id,
									step.id
								) }
								onToggle={ markStep }
								onCta={ onCta }
							/>
						) ) }
					</div>
				</div>
			</Accordion.Content>
		</Accordion.Item>
	);
};

export default LearnChapter;
