import DismissibleVideoTutorial from '../media/DismissibleVideo';
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/* Inline icons (concept theme) */
const CloseIcon = () => (
    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11 1L1 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1 1L11 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
);
const DocsIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M2 4h6a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H2Z" /><path d="M22 4h-6a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H22Z" />
    </svg>
);
const ResetIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 2v6h6" /><path d="M3 13a9 9 0 1 0 3-7.7L3 8" />
    </svg>
);
const CheckIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="9" /><path d="m8.5 12 2.5 2.5L16 9.5" />
    </svg>
);

function Offcanvas({
    open = false,
    onClose = () => {},
    heading = 'Settings',
    subtitle = '',
    badge = '',
    children,
    onSave = () => {},
    onReset = null,
    video = '',
    id = '',
    docs = '',
    preview = null,
    autosaveNote = false,
}) {
    const [ready, setReady] = useState(false);

    useEffect(() => {
        // Double-RAF: first RAF runs before paint, second runs after the first paint
        // has been committed — guarantees the panel is off-screen before transitions enable.
        let raf2;
        const raf1 = requestAnimationFrame(() => {
            raf2 = requestAnimationFrame(() => setReady(true));
        });
        return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); };
    }, []);

    const areaClass = [
        'strb-offcanvas-area',
        ready  ? 'strb-offcanvas-ready'  : '',
        open   ? 'strb-offcanvas-opened' : '',
    ].filter(Boolean).join(' ');

    return (
        <>
            <div className={areaClass}>
                <div className="strb-offcanvas-wrapper">
                    <div className="strb-offcanvas-main">
                        <div className="strb-offcanvas-header">
                            <div className="strb-oc-head-left">
                                <button className="strb-offcanvas-close-btn" onClick={onClose} aria-label={__('Close', 'shopbuild')}>
                                    <CloseIcon />
                                </button>
                                <div className="strb-oc-head-text">
                                    <div className="strb-oc-title-row">
                                        <h2>{heading}</h2>
                                        {badge && <span className="strb-oc-badge">{badge}</span>}
                                    </div>
                                    {subtitle && <p className="strb-oc-subtitle">{subtitle}</p>}
                                </div>
                            </div>
                            {docs && (
                                <a className="strb-oc-docs" href={docs} target="_blank" rel="noreferrer">
                                    <DocsIcon />{__('Read Docs', 'shopbuild')}
                                </a>
                            )}
                        </div>
                        <div className="strb-offcanvas-content">
                            {preview && <div className="strb-oc-preview">{preview}</div>}
                            {video && <DismissibleVideoTutorial moduleId={id} videoUrl={video} />}
                            {children}
                        </div>
                    </div>
                    <div className="strb-offcanvas-footer">
                        {onReset && (
                            <button type="button" className="strb-offcanvas-btn-reset" onClick={onReset}>
                                <ResetIcon />{__('Reset to Default', 'shopbuild')}
                            </button>
                        )}
                        {autosaveNote && <span className="strb-oc-autosave">{__('Your changes are saved automatically.', 'shopbuild')}</span>}
                        <button type="button" className="strb-offcanvas-btn-fill" onClick={onSave}>
                            <CheckIcon />{__('Save Settings', 'shopbuild')}
                        </button>
                    </div>
                </div>
            </div>
            <div className={open ? "strb-body-overlay opened" : "strb-body-overlay"} onClick={onClose} />
        </>
    );
}

export default Offcanvas;