/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { FormTokenField } from '@wordpress/components';
import { CircleHelp } from 'lucide-react';
/**
 * Internal Dependencies
 */
import { CheckRow } from '../components/CheckRow';
import { StepTitle } from '../components/StepTitle';
import { ToggleRow } from '../components/ToggleRow';
import { Field } from '../components/Field';
import { Card } from '@admin/components/Card';
import { DISABLE_OPTIONS, ROLES } from '../constants';

export function StepVisibility( { state, set, toggleIn } ) {
	return (
		<div className="flex flex-col gap-6">
			<StepTitle
				title={ __( 'Who should see your ads?', 'advanced-ads' ) }
				description={ __(
					'Choose where ads should not appear and who should never see them. These match the Disable ads settings in Advanced Ads.',
					'advanced-ads'
				) }
			/>

			<Card className="mb-0 flex flex-col gap-3.5">
				<h2 className="m-0 text-[15px] font-semibold">
					{ __( 'Disable ads', 'advanced-ads' ) }
				</h2>
				<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
					{ DISABLE_OPTIONS.map( ( d ) => (
						<CheckRow
							key={ d.id }
							label={ d.label }
							checked={ state.disableAds.includes( d.id ) }
							onChange={ () => toggleIn( 'disableAds', d.id ) }
						/>
					) ) }
				</div>
			</Card>

			<Card className="mb-0 flex flex-col gap-3.5">
				<div className="flex flex-col gap-0.5">
					<h2 className="m-0 text-[15px] font-semibold">
						{ __( 'Hide ads for user roles', 'advanced-ads' ) }
					</h2>
					<p className="m-0 text-[12.5px] text-gray-500">
						{ __(
							'Choose the roles a user must have in order to not see any ads.',
							'advanced-ads'
						) }
					</p>
				</div>
				<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
					{ ROLES.map( ( r ) => (
						<CheckRow
							key={ r.id }
							label={ r.label }
							checked={ state.hideFrom.includes( r.id ) }
							onChange={ () => toggleIn( 'hideFrom', r.id ) }
						/>
					) ) }
				</div>
				<div className="flex items-start gap-2.5 rounded border border-gray-200 bg-gray-50 px-3.5 py-3">
					<CircleHelp className="mt-0.5 size-4.5 shrink-0 text-gray-500" />
					<span className="text-[12.5px] leading-relaxed text-gray-600">
						<strong className="font-semibold">
							{ __(
								'Why hide ads from administrators?',
								'advanced-ads'
							) }
						</strong>{ ' ' }
						{ __(
							'Administrators often visit their own site while managing content. Excluding them can prevent those visits from affecting ad statistics.',
							'advanced-ads'
						) }
					</span>
				</div>
			</Card>

			<Card className="mb-0 flex flex-col gap-4.5">
				<ToggleRow
					checked={ state.hideBots }
					onChange={ ( v ) => set( 'hideBots', v ) }
					label={ __( 'Hide ads from bots', 'advanced-ads' ) }
					description={ __(
						'Hide ads from crawlers, bots and empty user agents.',
						'advanced-ads'
					) }
				/>
				<ToggleRow
					bordered
					checked={ state.ipModule }
					onChange={ ( v ) => set( 'ipModule', v ) }
					label={ __( 'Hide ads for IP addresses', 'advanced-ads' ) }
					description={ __(
						'Activate the module to stop showing ads to specific IP addresses.',
						'advanced-ads'
					) }
				>
					{ state.ipModule && (
						<Field
							className="max-w-[520px]"
							label={ __( 'IP addresses', 'advanced-ads' ) }
						>
							<FormTokenField
								value={ state.ipList }
								onChange={ ( tokens ) =>
									set( 'ipList', tokens )
								}
								placeholder={ __(
									'Type an IP and press Enter',
									'advanced-ads'
								) }
								__next40pxDefaultSize
								__nextHasNoMarginBottom
							/>
						</Field>
					) }
				</ToggleRow>
			</Card>
		</div>
	);
}