import React from "react";
import { __, sprintf } from "@wordpress/i18n";
import { Info } from "lucide-react";

const PERIODS = [
	{ value: "day", label: __("Day", "arraysubs") },
	{ value: "week", label: __("Week", "arraysubs") },
	{ value: "month", label: __("Month", "arraysubs") },
	{ value: "year", label: __("Year", "arraysubs") },
];

export const scheduleLabel = (schedule) => {
	const period = PERIODS.find((p) => p.value === schedule.period)?.label || schedule.period;
	return Number(schedule.interval) === 1
		? sprintf(
				/* translators: %s: billing period (e.g. "Month"). */
				__("every %s", "arraysubs"),
				period.toLowerCase()
		  )
		: sprintf(
				/* translators: 1: interval, 2: billing period. */
				__("every %1$d %2$ss", "arraysubs"),
				Number(schedule.interval),
				period.toLowerCase()
		  );
};

/**
 * Box schedule: billing period + interval + length, plus the signup-fee
 * policy. This schedule is what makes a set of products combinable — every
 * product offered inside the box must bill on this exact cycle.
 */
const ScheduleSection = ({ schedule, onChange }) => {
	const update = (patch) => onChange({ ...schedule, ...patch });

	return (
		<div className="arraysubs-box-section">
			<div className="arraysubs-box-section__head">
				<h3 className="arraysubs-box-section__title">{__("Box Schedule", "arraysubs")}</h3>
				<p className="arraysubs-box-section__desc">
					{__(
						"How often the whole box is billed. This cycle also decides which products can go inside it.",
						"arraysubs"
					)}
				</p>
			</div>

			<div className="arraysubs-box-grid-3">
				<label className="arraysubs-box-field">
					<span className="arraysubs-box-field__label">
						{__("Billing Period", "arraysubs")}
					</span>
					<select
						className="arraysubs-box-input"
						value={schedule.period}
						onChange={(event) => update({ period: event.target.value })}
					>
						{PERIODS.map((period) => (
							<option key={period.value} value={period.value}>
								{period.label}
							</option>
						))}
					</select>
				</label>

				<label className="arraysubs-box-field">
					<span className="arraysubs-box-field__label">
						{__("Billing Interval", "arraysubs")}
					</span>
					<input
						type="number"
						className="arraysubs-box-input"
						min="1"
						max="12"
						step="1"
						value={schedule.interval}
						onChange={(event) =>
							update({
								interval: Math.min(12, Math.max(1, parseInt(event.target.value, 10) || 1)),
							})
						}
					/>
					<span className="arraysubs-box-field__help">
						{__("Charge every X periods", "arraysubs")}
					</span>
				</label>

				<label className="arraysubs-box-field">
					<span className="arraysubs-box-field__label">
						{__("Subscription Length", "arraysubs")}
					</span>
					<input
						type="number"
						className="arraysubs-box-input"
						min="0"
						max="365"
						step="1"
						value={schedule.length}
						onChange={(event) =>
							update({
								length: Math.min(365, Math.max(0, parseInt(event.target.value, 10) || 0)),
							})
						}
					/>
					<span className="arraysubs-box-field__help">
						{__("Number of cycles (0 = never expires)", "arraysubs")}
					</span>
				</label>
			</div>

			<label className="arraysubs-box-checkbox">
				<input
					type="checkbox"
					checked={!!schedule.keep_signup_fees}
					onChange={(event) => update({ keep_signup_fees: event.target.checked })}
				/>
				<span>
					<strong>{__("Keep signup fees", "arraysubs")}</strong>
					<span className="arraysubs-box-field__help">
						{__(
							"Add up the signup fee of every product the customer puts in the box and charge it once on the first payment. Leave unchecked to charge no extra fees.",
							"arraysubs"
						)}
					</span>
				</span>
			</label>

			<div className="arraysubs-box-alert">
				<Info size={16} className="arraysubs-box-alert__icon" />
				<div className="arraysubs-box-alert__body">
					<strong>
						{sprintf(
							/* translators: %s: billing schedule phrase, e.g. "every month". */
							__("This box bills %s — product search is limited to that cycle.", "arraysubs"),
							scheduleLabel(schedule)
						)}
					</strong>
					<ul>
						<li>
							{__(
								"Subscription products are only offered when their billing period and interval match this box exactly — products on any other cycle are hidden from the search and from the customer's box.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Regular (non-subscription) products are always available and are included in the box for as long as the subscription runs.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Products using a different renewal price are excluded, because the box charges one frozen recurring total.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Adding a box empties the cart first: a box is bought on its own, its contents are added to the order at zero cost, and the whole box renews or cancels as a single subscription.",
								"arraysubs"
							)}
						</li>
						<li>
							{__(
								"Free trials are switched off for everything inside a box.",
								"arraysubs"
							)}
						</li>
					</ul>
				</div>
			</div>
		</div>
	);
};

export default ScheduleSection;