<?php
// components/Drawer.php
namespace Components;

class Drawer extends Base
{
    /**
     * Render the configuration drawer markup.
     *
     * Follows the same pattern as Modal::render() using output buffering.
     * The HTML markup is kept identical to the existing pages/components/config_drawer.php.
     */
    public static function render(array $opts = []): string
    {
        // Support multiple instances via configurable base id (like Modal)
        $drawerId = isset($opts['id']) && $opts['id'] !== '' ? (string)$opts['id'] : 'config-drawer';
        $titleText = isset($opts['title']) ? (string)$opts['title'] : 'Panel title';
        // Optional visual style: 'default' (edge-aligned) | 'floating' (rounded, spaced)
        $style = isset($opts['style']) && $opts['style'] !== '' ? (string)$opts['style'] : 'default';

        // Derived element ids
        $titleId   = $drawerId . '-title';
        $bodyId    = $drawerId . '-body';
        $footerId  = $drawerId . '-footer';
        $loadingId = $drawerId . '-loading';

        // Escaped ids/text for HTML
        $drawerIdEsc = self::h($drawerId);
        $titleIdEsc  = self::h($titleId);
        $bodyIdEsc   = self::h($bodyId);
        $footerIdEsc = self::h($footerId);
        $loadingIdEsc= self::h($loadingId);
        $titleTextEsc= self::h($titleText);

        // CSS presets
        $panelCssDefault = 'ml-auto block size-full max-w-2xl transform transition data-closed:translate-x-full data-enter:duration-400 data-enter:ease-out-back-sm data-leave:duration-400 data-leave:ease-in sm:data-enter:duration-600';
        $drawerCssDefault = 'relative flex h-full flex-col overflow-hidden bg-white shadow-xl dark:bg-gray-800 dark:after:absolute dark:after:inset-y-0 dark:after:left-0 dark:after:w-px dark:after:bg-white/10';

        // Optional vertical scroll hint overlays (similar to ItemList horizontal hints)
        $scrollHints = isset($opts['scroll_hints']) ? (bool)$opts['scroll_hints'] : true;

        // Floating variant (optional)
        if ($style === 'floating') {
            // keep width behavior controlled by the panel (max-w-2xl) and allow a sensible min-width
            $panelCssDefault = $panelCssDefault; // unchanged to preserve width handling
            $drawerCssDefault = 'relative m-2 ml-auto flex flex-col overflow-hidden bg-canvas-modal '
                . 'ring ring-black/5 shadow-lg rounded-2xl '
                . 'dark:bg-gray-800 dark:ring-gray-700 '
                . 'max-h-[calc(100dvh-1rem)] min-h-[calc(100dvh-1rem)] md:min-w-[25rem]';
        }

        ob_start();
        ?>
<el-dialog>
    <dialog id="<?= $drawerIdEsc; ?>" aria-labelledby="<?= $titleIdEsc; ?>"
            data-style="<?= self::h($style); ?>"
            data-scroll-hints="<?= $scrollHints ? 'true' : 'false'; ?>"
            class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent">
        <div tabindex="0" class="absolute inset-0 pl-10 focus:outline-none sm:pl-16">
            <el-dialog-panel
                class="<?= self::h($panelCssDefault); ?> relative"
                <?php if ($scrollHints): ?>
                <?= self::scrollHintsData(); ?>
                <?php endif; ?>
            >
                <!-- drawer div -->
                <div class="<?= self::h($drawerCssDefault); ?>">
                    <div class="relative flex-1 flex flex-col min-h-0">
                        <div class="flex-1 overflow-y-auto py-6"
                             <?php if ($scrollHints): ?>
                             x-ref="scroller"
                             @scroll.passive="update()"
                             <?php endif; ?>>
                            <div class="px-4 sm:px-6">
                                <div class="flex items-start justify-between">
                                    <h2 id="<?= $titleIdEsc; ?>" class="text-md font-medium text-secondary "><?= $titleTextEsc; ?></h2>
                                    <div class="ml-3 flex h-7 items-center">
                                        <button type="button" command="close" commandfor="<?= $drawerIdEsc; ?>"
                                                class="relative rounded-md text-gray-400 hover:text-gray-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand dark:hover:text-white dark:focus-visible:outline-brand-500">
                                            <span class="absolute -inset-2.5"></span>
                                            <span class="sr-only">Close panel</span>
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                 data-slot="icon" aria-hidden="true" class="size-6">
                                                <path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="relative mt-6 flex-1 px-4 sm:px-6">
                                <!-- Loading overlay -->
                                <?= \Components\Base::loaderOverlay($loadingId,'z-10'); ?>
                                <div id="<?= $bodyIdEsc; ?>"></div>
                            </div>
                        </div>

                        <?php if ($scrollHints) echo self::scrollHintsHtml(array_merge(
                            ['top_classes' => 'rounded-t-xl'],
                            $style === 'floating'
                                ? ['top_from' => 'from-canvas-modal', 'bottom_from' => 'from-canvas-modal']
                                : []
                        )); ?>
                    </div>
                    <!-- Optional footer slot (empty by default) -->
                    <div id="<?= $footerIdEsc; ?>" class="hidden shrink-0 border-t border-divider p-4 dark:border-white/10"></div>
                </div>
            </el-dialog-panel>
        </div>
    </dialog>
</el-dialog>

<script>
(function(){
    try{
        var bodyId = <?= json_encode($bodyId); ?>;
        var loadingId = <?= json_encode($loadingId); ?>;
        if(window.MBLoader && window.MBLoader.bindHtmxOverlay){
            window.MBLoader.bindHtmxOverlay(bodyId, loadingId, 350);
        }
    }catch(e){/* no-op */}
})();
</script>
<?php
        return ob_get_clean();
    }
}
