import { useEffect, useRef } from 'react';
import { formatAutoPlayDelay } from '../hooks/useExplorer.js';
import Button from './ui/Button.jsx';

const SHORTCUTS = [['Enter', 'Apply'], ['F', 'Flip'], ['C', 'Clear'], ['←', 'Back'], ['→', 'Forward']];

const DELAY_MIN = 0;
const DELAY_MAX = 2500;

export default function SettingsPanel({ explorer }) {
    const { settingsOpen, setSettingsOpen, showRootRow, variant, autoplayDelayMs, actions } = explorer;
    const panelRef = useRef(null);
    const chess960 = variant === 'chess960';

    useEffect(() => {
        if (!settingsOpen) return;
        function onDocClick(e) {
            if (panelRef.current && !panelRef.current.contains(e.target) && !e.target.closest('#settings-btn')) {
                setSettingsOpen(false);
            }
        }
        function onKeydown(e) {
            if (e.key === 'Escape') { e.preventDefault(); setSettingsOpen(false); }
        }
        document.addEventListener('click', onDocClick);
        document.addEventListener('keydown', onKeydown);
        return () => {
            document.removeEventListener('click', onDocClick);
            document.removeEventListener('keydown', onKeydown);
        };
    }, [settingsOpen, setSettingsOpen]);

    const pct = ((autoplayDelayMs - DELAY_MIN) / (DELAY_MAX - DELAY_MIN)) * 100;

    return (
        <div id="settings-panel" ref={panelRef} className={`settings-panel${settingsOpen ? ' is-open' : ''}`}
             role="dialog" aria-modal="false" aria-label="Board settings">
            <div className="settings-panel__header">
                <span className="settings-panel__title">Board Settings</span>
                <Button id="settings-close-btn" compact iconOnly icon="close" aria-label="Close settings"
                        onClick={() => setSettingsOpen(false)} />
            </div>

            <div className="settings-row settings-row--toggle">
                <label className="settings-toggle" htmlFor="show-root-row-toggle">
                    <span className="settings-toggle__label">Show Root Row</span>
                    <span className="toggle-switch">
                        <input type="checkbox" id="show-root-row-toggle" className="toggle-switch__input" role="switch"
                               checked={showRootRow} onChange={(e) => actions.setShowRootRowAction(e.target.checked)} />
                        <span className="toggle-switch__track" aria-hidden="true"></span>
                    </span>
                </label>
            </div>

            <div className="settings-row settings-row--toggle">
                <label className="settings-toggle" htmlFor="chess960-mode-toggle">
                    <span className="settings-toggle__label">Chess960 Mode</span>
                    <span className="toggle-switch">
                        <input type="checkbox" id="chess960-mode-toggle" className="toggle-switch__input" role="switch"
                               checked={chess960} onChange={(e) => actions.setChess960Action(e.target.checked)} />
                        <span className="toggle-switch__track" aria-hidden="true"></span>
                    </span>
                </label>
            </div>

            <div className="settings-row settings-row--slider">
                <span className="settings-slider__label">Autoplay Delay</span>
                <div className="settings-slider__control">
                    <input type="range" id="autoplay-delay-slider" className="range-slider"
                           min={DELAY_MIN} max={DELAY_MAX} step={50} value={autoplayDelayMs}
                           style={{ '--range-fill': `${pct}%` }}
                           aria-label="Autoplay delay" aria-valuetext={formatAutoPlayDelay(autoplayDelayMs)}
                           onChange={(e) => actions.setAutoplayDelayAction(parseInt(e.target.value, 10))} />
                    <div className="range-slider__ticks" aria-hidden="true">
                        <span>0s</span><span>1.25s</span><span>2.5s</span>
                    </div>
                </div>
                <span className="settings-slider__value" id="autoplay-delay-value">{formatAutoPlayDelay(autoplayDelayMs)}</span>
            </div>

            <div className="settings-row settings-row--shortcuts">
                <span className="settings-shortcuts__title">Keyboard Shortcuts</span>
                <ul className="settings-shortcuts__list">
                    {SHORTCUTS.map(([key, action]) => (
                        <li key={key}><kbd>{key}</kbd> {action}</li>
                    ))}
                </ul>
            </div>
        </div>
    );
}