import { __ } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import useProGate from '../../hooks/useProGate';
import { UltimateBadge } from '../../components/SettingRow';
import ScheduleFields from './ScheduleFields';
import { CheckMarkIcon, LiveSyncIcon, ScheduleIcon, SheetIcon, WooIcon } from './icons';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

const WooToSheet = () => (
	<span className="radio-text">
		<span className="icon-woo">
			<WooIcon /> { __( 'WooCommerce', TEXT_DOMAIN ) }
		</span>{ ' ' }
		→{ ' ' }
		<span className="icon-sheet">
			<SheetIcon /> { __( 'Google Sheets only', TEXT_DOMAIN ) }
		</span>
	</span>
);

const SheetToWoo = () => (
	<span className="radio-text">
		<span className="icon-sheet">
			<SheetIcon /> { __( 'Google Sheets', TEXT_DOMAIN ) }
		</span>{ ' ' }
		→{ ' ' }
		<span className="icon-woo">
			<WooIcon /> { __( 'WooCommerce only', TEXT_DOMAIN ) }
		</span>
	</span>
);

const MODES = [
	{
		value: 'live-sync',
		icon: <LiveSyncIcon />,
		title: __( 'Real-Time Auto Sync', TEXT_DOMAIN ),
		text: __( 'This mode ensures instant updates. Every change is synced live between WooCommerce and Google Sheets.', TEXT_DOMAIN ),
	},
	{
		value: 'perodic-sync',
		icon: <ScheduleIcon />,
		title: __( 'Schedule Auto Sync', TEXT_DOMAIN ),
		text: __( 'This mode ensures periodic sync. Just set it and forget it. Your data syncs automatically at your fixed intervals.', TEXT_DOMAIN ),
	},
];

/**
 * A direction radio. Ultimate-only directions stay unselectable for free users and open the upgrade popup.
 *
 * @param {Object} props
 */
const DirectionOption = ( { id, group, value, current, onSelect, locked, onLockedClick, children, description } ) => (
	<label htmlFor={ id } className={ `radio-label${ locked ? ' ssgsw-ultimate ssgsw-promo' : '' }` }>
		<input
			type="radio"
			id={ id }
			name={ group }
			value={ value }
			checked={ current === value }
			aria-disabled={ locked || undefined }
			onChange={ () => ! locked && onSelect( value ) }
			onClick={ ( event ) => {
				if ( locked ) {
					event.preventDefault();
					onLockedClick();
				}
			} }
		/>
		{ children }
		{ locked && <UltimateBadge /> }
		<p>{ description }</p>
	</label>
);

// "Sync Settings" card (admin only): sync mode, direction and the scheduled frequency.
const SyncSettingsSection = () => {
	const { options, updateOption } = useSettings();
	const { isPro, showLockedMessage } = useProGate();
	const mode = options.selected_sync_mode;
	const live = mode === 'live-sync';

	return (
		<div className="ssgs-dashboard__block">
			<h4 className="title">{ __( 'Sync Settings', TEXT_DOMAIN ) }</h4>
			<div className="sync-modes">
				<fieldset className="ssgsw-fieldset">
					<legend className="entry-title">
						<h3 className="title">{ __( 'Sync Mode', TEXT_DOMAIN ) }</h3>
						<p className="description">
							{ __( 'Decide how your products update between WooCommerce and Google Sheets. Choose between real-time, scheduled, or manual sync.', TEXT_DOMAIN ) }
						</p>
					</legend>
					<div className="sync-modes__grid">
						{ MODES.map( ( item ) => (
							<label key={ item.value } className={ `sync-modes__card${ mode === item.value ? ' active' : '' }` }>
								<input
									type="radio"
									name="selected_sync_mode"
									value={ item.value }
									checked={ mode === item.value }
									onChange={ () => updateOption( 'selected_sync_mode', item.value ) }
									className="screen-reader-text"
								/>
								<div className="icon">{ item.icon }</div>
								<div className="text">
									<h4 className="title">{ item.title }</h4>
									<p>{ item.text }</p>
								</div>
								<div className="check-mark">
									<CheckMarkIcon />
								</div>
							</label>
						) ) }
					</div>
				</fieldset>

				<fieldset className="sync-modes__direction ssgsw-fieldset">
					<legend className="entry-title">
						<h3 className="title">{ __( 'Sync Direction', TEXT_DOMAIN ) }</h3>
						<p className="description">{ __( 'Choose which way your data flows between WooCommerce and Google Sheets.', TEXT_DOMAIN ) }</p>
					</legend>

					{ live ? (
						<div className="radio-group">
							<DirectionOption
								id="sync-direction-1"
								group="sync-direction"
								value="bidirectional"
								current={ options.live_sync_direction }
								onSelect={ ( value ) => updateOption( 'live_sync_direction', value ) }
								description={ __( 'Sync both ways: WooCommerce ↔ Google Sheets.', TEXT_DOMAIN ) }
							>
								<span className="radio-text">{ __( 'Bidirectional', TEXT_DOMAIN ) }</span>
							</DirectionOption>
							<DirectionOption
								id="sync-direction-2"
								group="sync-direction"
								value="woocommerce-to-sheets"
								current={ options.live_sync_direction }
								onSelect={ ( value ) => updateOption( 'live_sync_direction', value ) }
								description={ __( 'Send WooCommerce updates to your Google Sheet only.', TEXT_DOMAIN ) }
							>
								<WooToSheet />
							</DirectionOption>
							<DirectionOption
								id="sync-direction-3"
								group="sync-direction"
								value="sheets-to-woocommerce"
								current={ options.live_sync_direction }
								onSelect={ ( value ) => updateOption( 'live_sync_direction', value ) }
								locked={ ! isPro }
								onLockedClick={ showLockedMessage }
								description={ __( 'Push your spreadsheet changes into WooCommerce only.', TEXT_DOMAIN ) }
							>
								<SheetToWoo />
							</DirectionOption>
						</div>
					) : (
						<div className="radio-group">
							<DirectionOption
								id="scheduled-sync-direction-1"
								group="scheduled-sync-direction"
								value="woocommerce-to-sheets"
								current={ options.peroidic_sync_direction }
								onSelect={ ( value ) => updateOption( 'peroidic_sync_direction', value ) }
								description={ __( 'Send WooCommerce updates to your Google Sheet only.', TEXT_DOMAIN ) }
							>
								<WooToSheet />
							</DirectionOption>
							<DirectionOption
								id="scheduled-sync-direction-2"
								group="scheduled-sync-direction"
								value="sheets-to-woocommerce"
								current={ options.peroidic_sync_direction }
								onSelect={ ( value ) => updateOption( 'peroidic_sync_direction', value ) }
								locked={ ! isPro }
								onLockedClick={ showLockedMessage }
								description={ __( 'Push your spreadsheet changes into WooCommerce only.', TEXT_DOMAIN ) }
							>
								<SheetToWoo />
							</DirectionOption>
						</div>
					) }
				</fieldset>

				{ ! live && (
					<div className="sync-modes__scheduled">
						<div className="entry-title">
							<h3 className="title">{ __( 'Scheduled Sync Frequency', TEXT_DOMAIN ) }</h3>
							<p className="description">{ __( 'Choose how often you want to sync your store and sheet. You set the schedule, we’ll do the rest.', TEXT_DOMAIN ) }</p>
						</div>
						<ScheduleFields prefix="ssgsw-sync" intervalKey="cron_perdic_sync" dayKey="perdic_sync_day" timeKey="perdic_sync_time" lockable />
					</div>
				) }
			</div>
		</div>
	);
};

export default SyncSettingsSection;