/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { TriangleAlert } from 'lucide-react';

/**
 * Internal Dependencies
 */
import { SelectCard } from '../components/SelectCard';
import { StepTitle } from '../components/StepTitle';
import { AdConfigFields } from '../components/AdConfigFields';
import { Field } from '../components/Field';
import { Card } from '@admin/components/Card';
import { TextInput } from '@admin/components/TextInput';
import { AD_TYPES, PLACEMENTS } from '../constants';

export function StepAdSetup( { state, set, errors } ) {
	return (
		<div className="flex flex-col gap-7">
			<StepTitle
				title={ __( 'Create your first ad', 'advanced-ads' ) }
				description={ __(
					'Choose the type of ad, configure it, and decide where it should appear on your site.',
					'advanced-ads'
				) }
			/>

			<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">
						{ __(
							'What type of ad do you want to create?',
							'advanced-ads'
						) }
					</h2>
					<span className="text-[12.5px] text-gray-500">
						{ __(
							'Advanced Ads then only asks for what that type needs.',
							'advanced-ads'
						) }
					</span>
				</div>
				<div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
					{ AD_TYPES.map( ( t ) => (
						<SelectCard
							key={ t.id }
							Icon={ t.Icon }
							title={ t.title }
							desc={ t.desc }
							selected={ state.source === t.id }
							onClick={ () => set( 'source', t.id ) }
						/>
					) ) }
				</div>
				{ errors.source && (
					<p className="m-0 text-[13px] text-red-700">
						{ __(
							'Choose an ad type to continue.',
							'advanced-ads'
						) }
					</p>
				) }
			</Card>

			<Card className="mb-0 flex flex-col gap-4.5">
				<h2 className="m-0 text-[15px] font-semibold">
					{ __( 'Your first ad', 'advanced-ads' ) }
				</h2>
				<Field
					className="max-w-[320px]"
					label={ __( 'Ad name', 'advanced-ads' ) }
					error={
						errors.adName &&
						__( 'Enter a name for this ad.', 'advanced-ads' )
					}
				>
					<TextInput
						value={ state.adName }
						onChange={ ( v ) => set( 'adName', v ) }
					/>
				</Field>

				<AdConfigFields state={ state } set={ set } errors={ errors } />
			</Card>

			<section className="mt-2 flex flex-col gap-3.5">
				<div className="flex flex-col gap-0.5">
					<h2 className="m-0 text-[15px] font-semibold">
						{ __( 'Where should we display it?', 'advanced-ads' ) }
					</h2>
					<p className="m-0 text-[12.5px] text-gray-500">
						{ __(
							'Choose where Advanced Ads should insert your ad. You can add more placements later.',
							'advanced-ads'
						) }
					</p>
				</div>
				<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
					{ PLACEMENTS.map( ( p ) => (
						<SelectCard
							key={ p.id }
							title={ p.title }
							desc={ p.desc }
							badge={ p.badge }
							selected={ state.placement === p.id }
							onClick={ () => set( 'placement', p.id ) }
						/>
					) ) }
				</div>
				{ errors.placement && (
					<p className="m-0 flex items-center gap-1.5 text-[13px] text-red-700">
						<TriangleAlert className="size-4" />
						{ __(
							'Choose a placement for your ad.',
							'advanced-ads'
						) }
					</p>
				) }
			</section>
		</div>
	);
}