/**
 * Shois Chat Button — Holiday Blackout Component
 *
 * Date picker for adding blackout dates to agent schedules.
 *
 * @package ShoisChatButton
 */
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * HolidayBlackout — date list with add/remove.
 *
 * @param {Object}   props          Component props.
 * @param {Array}    props.dates    Current blackout dates (YYYY-MM-DD).
 * @param {Function} props.onChange Change handler.
 * @return {JSX.Element} Blackout dates editor.
 */
export default function HolidayBlackout({ dates = [], onChange }) {
    const [newDate, setNewDate] = useState('');

    const addDate = () => {
        if (!newDate || dates.includes(newDate)) return;
        const updated = [...dates, newDate].sort();
        onChange(updated);
        setNewDate('');
    };

    const removeDate = (date) => {
        const updated = dates.filter((d) => d !== date);
        onChange(updated);
    };

    const formatDate = (dateStr) => {
        try {
            const d = new Date(dateStr + 'T00:00:00');
            return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
        } catch (e) {
            return dateStr;
        }
    };

    return (
        <div className="shcb-holiday-blackout">
            <div className="shcb-modern-card-header">
                <span>📅</span>
                <h3>{__('Holiday Blackout', 'shois-chat-button')}</h3>
            </div>
            <p className="shcb-field-help">
                {__('The widget will show as offline on these dates.', 'shois-chat-button')}
            </p>

            <div className="shcb-blackout-list">
                {dates.length === 0 && (
                    <p className="shcb-no-data">{__('No blackout dates set.', 'shois-chat-button')}</p>
                )}
                {dates.map((date) => (
                    <div key={date} className="shcb-blackout-row">
                        <span className="shcb-blackout-date">{date}</span>
                        <span className="shcb-blackout-label">{formatDate(date)}</span>
                        <button
                            className="shcb-blackout-remove"
                            onClick={() => removeDate(date)}
                            type="button"
                            title={__('Remove', 'shois-chat-button')}
                        >
                            ✕
                        </button>
                    </div>
                ))}
            </div>

            <div className="shcb-blackout-add">
                <input
                    type="date"
                    value={newDate}
                    onChange={(e) => setNewDate(e.target.value)}
                    min={new Date().toISOString().split('T')[0]}
                />
                <button
                    className="shcb-btn shcb-btn-secondary shcb-btn-sm"
                    onClick={addDate}
                    type="button"
                    disabled={!newDate}
                >
                    + {__('Add', 'shois-chat-button')}
                </button>
            </div>
        </div>
    );
}