import { __ } from '@wordpress/i18n';
import { Package, Store, ShoppingCart, CreditCard, Mail, Truck, CalendarDays, Clock } from 'lucide-react';
import Toggle from '../components/Toggle';
import SchemaSections from '../components/SchemaSections';

const LOCATIONS = [
	[ 'show_single', 'Single product page', 'On each product’s own page (place it with the Position setting below).', Package ],
	[ 'show_archive', 'Shop / archive', 'Under each product in shop, category and search listings.', Store ],
	[ 'cart_overall', 'Cart page', 'One overall estimate in the cart, based on the slowest item.', ShoppingCart ],
	[ 'show_checkout', 'Checkout page', 'In the checkout order summary, to reassure shoppers before they pay.', CreditCard ],
	[ 'order_item', 'Order emails', 'On each item in the order-confirmation email and the order details.', Mail ],
];

const POSITIONS = [
	[ 'after_price', 'After the price' ],
	[ 'after_short_desc', 'After the short description' ],
	[ 'before_cart', 'Before the Add to cart button' ],
	[ 'after_cart', 'After the Add to cart button' ],
	[ 'after_meta', 'After product meta' ],
];

const ICON_OPTS = [
	[ 'truck', 'Truck', Truck ],
	[ 'calendar', 'Calendar', CalendarDays ],
	[ 'clock', 'Clock', Clock ],
	[ 'box', 'Box', Package ],
];

const ACCENTS = [ '#7f54b3', '#2271b1', '#00854a', '#1d2327', '#c9356e' ];
const TAGS = [ '{start}', '{end}', '{days}' ];

export default function DisplayTab( { state, dispatch, accent } ) {
	const s = state.settings;
	const set = ( key, value ) => dispatch( { type: 'SET_FIELD', key, value } );
	const isOn = ( key ) => ( s[ key ] ?? 'yes' ) === 'yes';
	const template = s.message_template || 'Estimated delivery: {start} – {end}';

	return (
		<>
			<div className="edfw-card">
				<div className="edfw-card__title">{ __( 'Where to show the estimate', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 8 } }>{ __( 'Turn the delivery estimate on or off for each place it can appear across your store.', 'wpactpro-estimated-delivery-date' ) }</div>
				{ LOCATIONS.map( ( [ key, title, desc, Icon ] ) => (
					<div className="edfw-locrow" key={ key }>
						<Icon size={ 18 } color="#787c82" />
						<div style={ { flex: 1 } }>
							<div className="edfw-locrow__title">{ __( title, 'wpactpro-estimated-delivery-date' ) }</div>
							<div className="edfw-locrow__desc">{ __( desc, 'wpactpro-estimated-delivery-date' ) }</div>
						</div>
						<Toggle checked={ isOn( key ) } accent={ accent } label={ __( title, 'wpactpro-estimated-delivery-date' ) } onChange={ ( v ) => set( key, v ? 'yes' : 'no' ) } />
					</div>
				) ) }
			</div>

			<div className="edfw-card">
				<div className="edfw-card__title">{ __( 'Position on product page', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 14 } }>{ __( 'Where the estimate appears on a single product page, relative to the price, short description, Add to cart button and product meta. If your theme places it oddly, try another position.', 'wpactpro-estimated-delivery-date' ) }</div>
				<select className="edfw-select" style={ { width: '100%', maxWidth: 340 } } value={ s.position || 'after_price' } onChange={ ( e ) => set( 'position', e.target.value ) }>
					{ POSITIONS.map( ( [ v, l ] ) => <option key={ v } value={ v }>{ __( l, 'wpactpro-estimated-delivery-date' ) }</option> ) }
				</select>
			</div>

			<div className="edfw-card">
				<div className="edfw-card__title">{ __( 'Message template', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 14 } }>{ __( 'The exact wording shoppers read. Type your own text and click a tag to insert it: {start} = earliest date, {end} = latest date, {days} = the range in days (e.g. “2–5 days”). Example: “Get it by {end}”.', 'wpactpro-estimated-delivery-date' ) }</div>
				<textarea className="edfw-textarea" rows={ 2 } value={ template } onChange={ ( e ) => set( 'message_template', e.target.value ) } />
				<div className="edfw-chips">
					{ TAGS.map( ( t ) => (
						<button key={ t } className="edfw-chip" onClick={ () => set( 'message_template', template + t ) }>{ t }</button>
					) ) }
				</div>
				<div style={ { marginTop: 18, maxWidth: 340 } }>
					<div className="edfw-field-label">{ __( 'Date format', 'wpactpro-estimated-delivery-date' ) }</div>
					<input
						className="edfw-input"
						style={ { width: '100%' } }
						value={ s.date_format_custom || 'M j, Y' }
						onChange={ ( e ) => set( 'date_format_custom', e.target.value ) }
					/>
					<div style={ { fontSize: 12, color: '#787c82', marginTop: 6 } }>{ __( 'How the dates are written, using WordPress (PHP) date formats. Examples: “M j, Y” → Jul 8, 2026 · “d/m/Y” → 08/07/2026 · “D, M j” → Wed, Jul 8.', 'wpactpro-estimated-delivery-date' ) }</div>
				</div>
			</div>

			<div className="edfw-card">
				<div className="edfw-card__title">{ __( 'Icon', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 14 } }>{ __( 'The icon shown before the estimate text on your store.', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-iconrow">
					{ ICON_OPTS.map( ( [ key, label, Icon ] ) => (
						<button key={ key } className={ `edfw-iconbtn ${ ( s.icon || 'truck' ) === key ? 'is-active' : '' }` } onClick={ () => set( 'icon', key ) }>
							<Icon size={ 20 } /><span>{ __( label, 'wpactpro-estimated-delivery-date' ) }</span>
						</button>
					) ) }
				</div>
				<div className="edfw-card__title">{ __( 'Accent color', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 14 } }>{ __( 'The color of the icon and countdown on your storefront. This only affects the store — it does not change this admin screen.', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-swatches">
					{ ACCENTS.map( ( color ) => {
						const sel = ( s.accent_color || '#7f54b3' ) === color;
						return (
							<button
								key={ color }
								className="edfw-swatch"
								aria-label={ color }
								style={ { background: color, boxShadow: sel ? `0 0 0 2px #fff, 0 0 0 4px ${ color }` : '0 0 0 2px #fff, 0 0 0 2px #fff' } }
								onClick={ () => set( 'accent_color', color ) }
							/>
						);
					} ) }
				</div>
			</div>
			<SchemaSections tab="display" state={ state } dispatch={ dispatch } accent={ accent } />
		</>
	);
}
