/**
 * Date Range Picker
 *
 * Small self-contained range picker for the dashboard. Emits a { from, to }
 * range in unix seconds. No external dependencies - just two native date
 * inputs plus a few presets.
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useRef, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

const DAY = 86400;

/**
 * Format a unix-seconds timestamp as YYYY-MM-DD for <input type="date">.
 */
const toInputValue = (seconds) => {
	const d = new Date(seconds * 1000);
	const pad = (n) => String(n).padStart(2, '0');
	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
};

/**
 * Parse a YYYY-MM-DD input value into unix seconds at local midnight.
 */
const fromInputValue = (value) => {
	const [y, m, d] = value.split('-').map(Number);
	return Math.floor(new Date(y, m - 1, d).getTime() / 1000);
};

/**
 * Human-readable range label, e.g. "Aug 21 – Aug 27, 2026". Exported so the
 * dashboard can label the previous comparison period the same way.
 *
 * @param {number} from Start of the range, unix seconds.
 * @param {number} to   End of the range, unix seconds.
 * @return {string} Formatted range.
 */
export const formatRangeLabel = (from, to) => {
	const opts = { month: 'short', day: 'numeric' };
	const start = new Date(from * 1000).toLocaleDateString(undefined, opts);
	const end = new Date(to * 1000).toLocaleDateString(undefined, { ...opts, year: 'numeric' });
	return `${start} – ${end}`;
};

function DateRangePicker({ value, onChange }) {
	const [open, setOpen] = useState(false);
	const [draftFrom, setDraftFrom] = useState(toInputValue(value.from));
	const [draftTo, setDraftTo] = useState(toInputValue(value.to));
	const rootRef = useRef(null);

	useEffect(() => {
		setDraftFrom(toInputValue(value.from));
		setDraftTo(toInputValue(value.to));
	}, [value.from, value.to]);

	useEffect(() => {
		if (!open) return undefined;
		const handleClick = (e) => {
			if (rootRef.current && !rootRef.current.contains(e.target)) {
				setOpen(false);
			}
		};
		document.addEventListener('mousedown', handleClick);
		return () => document.removeEventListener('mousedown', handleClick);
	}, [open]);

	const applyRange = (from, to) => {
		// End of the chosen end day, so "today" includes everything so far.
		const normalizedTo = to + DAY - 1;
		onChange({ from, to: normalizedTo });
		setOpen(false);
	};

	const applyPreset = (days) => {
		const now = Math.floor(Date.now() / 1000);
		const startOfToday = fromInputValue(toInputValue(now));
		applyRange(startOfToday - (days - 1) * DAY, startOfToday);
	};

	const applyThisMonth = () => {
		const d = new Date();
		const from = Math.floor(new Date(d.getFullYear(), d.getMonth(), 1).getTime() / 1000);
		const startOfToday = fromInputValue(toInputValue(Math.floor(Date.now() / 1000)));
		applyRange(from, startOfToday);
	};

	const presets = [
		{ label: __( 'Today', 'everyone-accessibility-suite' ), run: () => applyPreset(1) },
		{ label: __( 'Last 7 days', 'everyone-accessibility-suite' ), run: () => applyPreset(7) },
		{ label: __( 'Last 30 days', 'everyone-accessibility-suite' ), run: () => applyPreset(30) },
		{ label: __( 'This month', 'everyone-accessibility-suite' ), run: applyThisMonth },
	];

	return (
		<div className="evas-date-range-picker" ref={rootRef}>
			<button
				type="button"
				className="evas-date-range-picker__trigger"
				onClick={() => setOpen((v) => !v)}
				aria-expanded={open}
			>
				<span className="dashicons dashicons-calendar-alt"></span>
				{formatRangeLabel(value.from, value.to)}
				<span className="dashicons dashicons-arrow-down-alt2"></span>
			</button>

			{open && (
				<div className="evas-date-range-picker__popover">
					<div className="evas-date-range-picker__presets">
						{presets.map((preset) => (
							<button
								key={preset.label}
								type="button"
								className="evas-date-range-picker__preset"
								onClick={preset.run}
							>
								{preset.label}
							</button>
						))}
					</div>

					<div className="evas-date-range-picker__fields">
						<label>
							{__( 'From', 'everyone-accessibility-suite' )}
							<input
								type="date"
								value={draftFrom}
								max={draftTo}
								onChange={(e) => setDraftFrom(e.target.value)}
							/>
						</label>
						<label>
							{__( 'To', 'everyone-accessibility-suite' )}
							<input
								type="date"
								value={draftTo}
								min={draftFrom}
								max={toInputValue(Math.floor(Date.now() / 1000))}
								onChange={(e) => setDraftTo(e.target.value)}
							/>
						</label>
					</div>

					<div className="evas-date-range-picker__footer">
						<button
							type="button"
							className="button button-primary"
							onClick={() => {
								if (!draftFrom || !draftTo) return;
								applyRange(fromInputValue(draftFrom), fromInputValue(draftTo));
							}}
						>
							{__( 'Apply', 'everyone-accessibility-suite' )}
						</button>
					</div>
				</div>
			)}
		</div>
	);
}

export default DateRangePicker;