/**
 * Form controls.
 *
 * Every control here is a real, focusable element with correct ARIA — the
 * switch is a `button[role=switch]`, not a styled div, so keyboard and screen
 * reader users get the same affordances as everyone else.
 */

import { IconCheck, IconSearch } from '../icons';

/**
 * Toggle for a single boolean.
 *
 * @param {Object}   props
 * @param {boolean}  props.checked
 * @param {Function} props.onChange Receives the next boolean.
 * @param {string}   props.label    Accessible name (visually hidden here when
 *                                  a visible label sits elsewhere).
 * @return {Element} Switch.
 */
export function Switch( { checked, onChange, label, id, disabled } ) {
	return (
		<button
			type="button"
			role="switch"
			id={ id }
			aria-checked={ checked }
			aria-label={ label }
			disabled={ disabled }
			data-state={ checked ? 'on' : 'off' }
			onClick={ () => onChange( ! checked ) }
			className="c-switch disabled:tw-opacity-50"
		>
			<span className="c-switch-thumb" />
		</button>
	);
}

/**
 * Checkbox for multi-select lists, where a column of switches would
 * over-weight what is really one grouped choice.
 *
 * @param {Object}   props
 * @param {boolean}  props.checked
 * @param {Function} props.onChange
 * @return {Element} Checkbox with its label.
 */
export function Checkbox( { checked, onChange, children, disabled } ) {
	return (
		<label
			className={ [
				'tw-inline-flex tw-cursor-pointer tw-select-none tw-items-center tw-gap-2',
				'tw-rounded-md tw-border tw-px-3 tw-h-9 tw-text-[13px] tw-transition tw-duration-120',
				checked
					? 'tw-border-brand-line tw-bg-brand-soft tw-text-brand-ink'
					: 'tw-border-line tw-bg-surface tw-text-ink-soft hover:tw-bg-surface-sunken',
				disabled ? 'tw-cursor-not-allowed tw-opacity-50' : '',
			].join( ' ' ) }
		>
			<input
				type="checkbox"
				className="tw-sr-only tw-peer"
				checked={ checked }
				disabled={ disabled }
				onChange={ ( e ) => onChange( e.target.checked ) }
			/>
			<span
				data-state={ checked ? 'on' : 'off' }
				className="c-check peer-focus-visible:tw-shadow-[shadow:var(--c-ring)]"
			>
				{ checked && <IconCheck size={ 11 } strokeWidth={ 3 } /> }
			</span>
			{ children }
		</label>
	);
}

/**
 * Segmented control for 2–3 mutually exclusive options.
 *
 * @param {Object}   props
 * @param {Array}    props.options  `[{ value, label }]`.
 * @param {string}   props.value
 * @param {Function} props.onChange
 * @param {string}   props.label    Accessible group name.
 * @return {Element} Segmented control.
 */
export function Segmented( { options, value, onChange, label } ) {
	return (
		<div className="c-segment" role="radiogroup" aria-label={ label }>
			{ options.map( ( option ) => (
				<button
					key={ option.value }
					type="button"
					role="radio"
					aria-checked={ value === option.value }
					data-state={ value === option.value ? 'on' : 'off' }
					className="c-segment-item"
					onClick={ () => onChange( option.value ) }
				>
					{ option.label }
				</button>
			) ) }
		</div>
	);
}

/**
 * Text input with an optional label and hint.
 *
 * @return {Element} Field.
 */
export function Field( { label, hint, id, className = '', ...props } ) {
	return (
		<div className={ className }>
			{ label && (
				<label className="c-label tw-mb-1.5" htmlFor={ id }>
					{ label }
				</label>
			) }
			<input id={ id } className="c-input" { ...props } />
			{ hint && <p className="c-hint tw-mt-1.5">{ hint }</p> }
		</div>
	);
}

/**
 * Search input with a leading icon and a clear affordance.
 *
 * @return {Element} Search field.
 */
export function SearchInput( { value, onChange, placeholder, label } ) {
	return (
		<div className="tw-relative">
			<IconSearch
				size={ 15 }
				className="tw-pointer-events-none tw-absolute tw-left-3 tw-top-1/2 tw--translate-y-1/2 tw-text-ink-faint"
			/>
			<input
				type="search"
				value={ value }
				aria-label={ label }
				placeholder={ placeholder }
				onChange={ ( e ) => onChange( e.target.value ) }
				className="c-input tw-pl-9"
			/>
		</div>
	);
}

/**
 * Select styled to match the rest of the control set (the native chevron is
 * replaced with our own so it matches at every OS/zoom level).
 *
 * @return {Element} Select.
 */
export function Select( { label, hint, id, children, className = '', ...props } ) {
	return (
		<div className={ className }>
			{ label && (
				<label className="c-label tw-mb-1.5" htmlFor={ id }>
					{ label }
				</label>
			) }
			<select id={ id } className="c-select" { ...props }>
				{ children }
			</select>
			{ hint && <p className="c-hint tw-mt-1.5">{ hint }</p> }
		</div>
	);
}

/**
 * Monospace textarea, for content that is code-shaped (llms.txt overrides).
 *
 * @return {Element} Textarea.
 */
export function Textarea( { label, hint, id, className = '', ...props } ) {
	return (
		<div className={ className }>
			{ label && (
				<label className="c-label tw-mb-1.5" htmlFor={ id }>
					{ label }
				</label>
			) }
			<textarea id={ id } className="c-textarea" { ...props } />
			{ hint && <p className="c-hint tw-mt-1.5">{ hint }</p> }
		</div>
	);
}