/**
 * Shois Chat Button — Schedule Editor Component
 *
 * Weekly day-by-day schedule with start/end time pickers.
 *
 * @package ShoisChatButton
 */
import { __ } from '@wordpress/i18n';

const DAYS = [
    { key: '0', label: __('Sunday', 'shois-chat-button'), short: 'Sun' },
    { key: '1', label: __('Monday', 'shois-chat-button'), short: 'Mon' },
    { key: '2', label: __('Tuesday', 'shois-chat-button'), short: 'Tue' },
    { key: '3', label: __('Wednesday', 'shois-chat-button'), short: 'Wed' },
    { key: '4', label: __('Thursday', 'shois-chat-button'), short: 'Thu' },
    { key: '5', label: __('Friday', 'shois-chat-button'), short: 'Fri' },
    { key: '6', label: __('Saturday', 'shois-chat-button'), short: 'Sat' },
];

/**
 * ScheduleEditor — weekly availability schedule.
 *
 * @param {Object}   props          Component props.
 * @param {Object}   props.schedule Schedule config.
 * @param {Function} props.onChange Change handler.
 * @return {JSX.Element} Schedule editor.
 */
export default function ScheduleEditor({ schedule = {}, onChange }) {
    const enabled = schedule.enabled || false;
    const hours = schedule.hours || {};

    const toggleEnabled = (val) => {
        onChange({ ...schedule, enabled: val });
    };

    const toggleDay = (dayKey) => {
        const dayData = hours[dayKey] || { enabled: false, start: '09:00', end: '17:00' };
        const updated = {
            ...hours,
            [dayKey]: { ...dayData, enabled: !dayData.enabled },
        };
        onChange({ ...schedule, hours: updated });
    };

    const updateTime = (dayKey, field, value) => {
        const dayData = hours[dayKey] || { enabled: true, start: '09:00', end: '17:00' };
        const updated = {
            ...hours,
            [dayKey]: { ...dayData, [field]: value },
        };
        onChange({ ...schedule, hours: updated });
    };

    const applyToAll = (dayKey) => {
        const source = hours[dayKey] || { enabled: true, start: '09:00', end: '17:00' };
        const updated = {};
        DAYS.forEach((d) => {
            updated[d.key] = { ...source };
        });
        onChange({ ...schedule, hours: updated });
    };

    return (
        <div className="shcb-schedule-editor">
            <div className="shcb-field-group shcb-field-toggle">
                <label className="shcb-toggle-label">
                    <div className="shcb-toggle-text">
                        <span className="shcb-field-label">
                            {__('Enable Schedule', 'shois-chat-button')}
                        </span>
                        <p className="shcb-field-help">
                            {__('When enabled, this agent is only shown as online during scheduled hours.', 'shois-chat-button')}
                        </p>
                    </div>
                    <label className="shcb-master-toggle">
                        <input type="checkbox" checked={enabled} onChange={(e) => toggleEnabled(e.target.checked)} />
                        <span className="shcb-toggle-slider"></span>
                    </label>
                </label>
            </div>

            {enabled && (
                <div className="shcb-schedule-days">
                    {DAYS.map((day) => {
                        const dayData = hours[day.key] || { enabled: false, start: '09:00', end: '17:00' };
                        return (
                            <div
                                key={day.key}
                                className={`shcb-schedule-day ${dayData.enabled ? '' : 'shcb-schedule-day-off'}`}
                            >
                                <label className="shcb-schedule-day-toggle">
                                    <input
                                        type="checkbox"
                                        checked={dayData.enabled || false}
                                        onChange={() => toggleDay(day.key)}
                                    />
                                    <span className="shcb-schedule-day-name">{day.short}</span>
                                </label>

                                {dayData.enabled && (
                                    <div className="shcb-schedule-times">
                                        <input
                                            type="time"
                                            className="shcb-input shcb-time-input"
                                            value={dayData.start || '09:00'}
                                            onChange={(e) => updateTime(day.key, 'start', e.target.value)}
                                        />
                                        <span className="shcb-schedule-sep">–</span>
                                        <input
                                            type="time"
                                            className="shcb-input shcb-time-input"
                                            value={dayData.end || '17:00'}
                                            onChange={(e) => updateTime(day.key, 'end', e.target.value)}
                                        />
                                        <button
                                            className="shcb-btn shcb-btn-secondary shcb-btn-xs"
                                            onClick={() => applyToAll(day.key)}
                                            title={__('Apply to all days', 'shois-chat-button')}
                                            type="button"
                                        >
                                            {__('All', 'shois-chat-button')}
                                        </button>
                                    </div>
                                )}

                                {!dayData.enabled && (
                                    <span className="shcb-schedule-closed">
                                        {__('Closed', 'shois-chat-button')}
                                    </span>
                                )}
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}