import { useState, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Eye, Truck, CalendarDays, Clock, Package, Zap, ShoppingCart } from 'lucide-react';
import { computePreview } from '../preview-calc';

const ICONS = { truck: Truck, calendar: CalendarDays, clock: Clock, box: Package };

export default function LivePreview( { state, accent } ) {
	const s = state.settings;
	const enabled = s.enabled !== 'no';
	const [ , force ] = useState( 0 );

	// Re-render every 30s so the countdown stays live.
	useEffect( () => {
		const id = setInterval( () => force( ( x ) => x + 1 ), 30000 );
		return () => clearInterval( id );
	}, [] );

	const pv = computePreview( s, state.rules );
	const WidgetIcon = ICONS[ s.icon ] || Truck;
	// Always show the countdown row while the toggle is on: a live timer before
	// the cutoff, and an explanatory "cutoff passed" note after it — otherwise
	// the toggle looks broken to anyone testing after the cutoff time.
	const showCountdown = enabled && s.countdown_enabled !== 'no';
	const customRuleCount = Object.values( state.rules || {} ).filter( ( r ) => ( r.conditions || [] ).some( ( c ) => c.vals && c.vals.length ) ).length;

	// Reflect the "Position on product page" setting: after_cart / after_meta
	// render the badge below the Add to cart button; everything else above it.
	const belowCart = [ 'after_cart', 'after_meta' ].includes( s.position || 'after_price' );

	const widget = enabled ? (
		<div className="edfw-preview__widget">
			<span style={ { color: accent, display: 'inline-flex', flex: 'none', marginTop: 1 } }>
				<WidgetIcon size={ 19 } />
			</span>
			<div style={ { minWidth: 0 } }>
				<div className="edfw-preview__msg">{ pv.message }</div>
				{ showCountdown && (
					<div className="edfw-preview__count" style={ { color: pv.tone } }>
						<Zap size={ 13 } />{ pv.countdown }
					</div>
				) }
			</div>
		</div>
	) : (
		<div className="edfw-preview__disabled">
			{ __( 'Estimate hidden — plugin is disabled', 'wpactpro-estimated-delivery-date' ) }
		</div>
	);

	return (
		<>
			<div className="edfw-preview">
				<div className="edfw-preview__head">
					<Eye size={ 17 } color="#6a4595" />
					<span className="edfw-preview__head-title">{ __( 'Live preview', 'wpactpro-estimated-delivery-date' ) }</span>
					<span className="edfw-preview__chip">{ __( 'Product page', 'wpactpro-estimated-delivery-date' ) }</span>
				</div>
				<div className="edfw-preview__body">
					<div className="edfw-preview__shot"><span>product shot</span></div>
					<div className="edfw-preview__stock">{ __( 'In stock', 'wpactpro-estimated-delivery-date' ) }</div>
					<div className="edfw-preview__name">Aurora Wool Throw</div>
					<div className="edfw-preview__price">$128.00</div>

					{ ! belowCart && widget }

					<button className="edfw-preview__cart">
						<ShoppingCart size={ 17 } />{ __( 'Add to cart', 'wpactpro-estimated-delivery-date' ) }
					</button>

					{ belowCart && widget }
				</div>
			</div>
			<div className="edfw-preview__foot">
				{ pv.hasDefault
					? __( 'Preview shows your default estimate.', 'wpactpro-estimated-delivery-date' )
					: __( 'No default estimate — this shows only on products matched by a rule or enabled individually.', 'wpactpro-estimated-delivery-date' ) }<br />
				{ sprintf(
					/* translators: %s: date like "Thursday, July 2" */
					__( 'Calculated from today, %s.', 'wpactpro-estimated-delivery-date' ),
					pv.today
				) }
				{ customRuleCount > 0 && (
					<>
						<br />
						{ __( 'Product rules apply per matching product and aren’t shown here.', 'wpactpro-estimated-delivery-date' ) }
					</>
				) }
			</div>
		</>
	);
}
