import { __ } from '@wordpress/i18n';
import { CalendarPlus, X } from 'lucide-react';
import Toggle from '../components/Toggle';
import SchemaSections from '../components/SchemaSections';

const MONTHS = [ 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC' ];

function parts( val ) {
	if ( ! val || val.length < 10 ) return { mon: '—', day: '—', full: '' };
	const [ y, m, d ] = val.split( '-' ).map( ( x ) => parseInt( x, 10 ) );
	const date = new Date( y, m - 1, d );
	return {
		mon: MONTHS[ m - 1 ] || '—',
		day: String( d ),
		full: date.toLocaleDateString( 'en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } ),
	};
}

export default function HolidaysTab( { state, dispatch, accent } ) {
	const s = state.settings;
	const all = Array.isArray( s.skipped_dates ) ? s.skipped_dates : [];
	const custom = all.filter( ( d ) => ( d.type ?? 'cus' ) === 'cus' );

	const commit = ( list ) => dispatch( { type: 'SET_HOLIDAYS', holidays: list } );
	const update = ( idx, p ) => commit( custom.map( ( h, i ) => ( i === idx ? { ...h, ...p } : h ) ) );
	const removeAt = ( idx ) => commit( custom.filter( ( _, i ) => i !== idx ) );
	const add = () => commit( [ ...custom, { type: 'cus', val: '', label: '', on: 'yes' } ] );

	return (
		<>
			<div className="edfw-card">
				<div className="edfw-card__title">{ __( 'Holidays & closures', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 18 } }>{ __( 'One-off dates you don’t ship (public holidays, vacations, closures). Add a date, give it a name, and active holidays are skipped in the delivery calculation — just like non-working weekdays — so orders aren’t promised to arrive while you’re closed. Toggle a holiday off to keep it in your list but ignore it for now. (Recurring weekends are set in General → Working schedule.)', 'wpactpro-estimated-delivery-date' ) }</div>

				{ custom.map( ( h, idx ) => {
					const p = parts( h.val );
					const on = h.on !== 'no' && h.on !== false;
					return (
						<div className="edfw-holiday" key={ idx }>
							<div className="edfw-holiday__date">
								<span className="edfw-holiday__mon">{ p.mon }</span>
								<span className="edfw-holiday__day">{ p.day }</span>
							</div>
							<div style={ { flex: 1, minWidth: 0 } }>
								<input
									className="edfw-holiday__label-input"
									placeholder={ __( 'Holiday name', 'wpactpro-estimated-delivery-date' ) }
									value={ h.label || '' }
									onChange={ ( e ) => update( idx, { label: e.target.value } ) }
									style={ { border: 'none', font: 'inherit', fontSize: 14, fontWeight: 600, width: '100%', padding: 0, background: 'transparent' } }
								/>
								<input
									type="date"
									className="edfw-holiday__date-input"
									value={ h.val || '' }
									onChange={ ( e ) => update( idx, { val: e.target.value } ) }
									style={ { border: 'none', font: 'inherit', fontSize: 12.5, color: '#787c82', padding: 0, marginTop: 2, background: 'transparent' } }
								/>
							</div>
							<Toggle checked={ on } accent={ accent } label={ h.label || __( 'Holiday', 'wpactpro-estimated-delivery-date' ) } onChange={ ( v ) => update( idx, { on: v ? 'yes' : 'no' } ) } />
							<button className="edfw-x" aria-label={ __( 'Remove holiday', 'wpactpro-estimated-delivery-date' ) } onClick={ () => removeAt( idx ) }>
								<X size={ 17 } />
							</button>
						</div>
					);
				} ) }

				<button className="edfw-addbtn" onClick={ add }>
					<CalendarPlus size={ 16 } />{ __( 'Add holiday', 'wpactpro-estimated-delivery-date' ) }
				</button>
			</div>
			<SchemaSections tab="holidays" state={ state } dispatch={ dispatch } accent={ accent } />
		</>
	);
}
