<?php
// pages/dev_icons.php
require_once BEEZUI_ROOT . '/components/index.php';
require_once BEEZUI_ROOT . '/pages/layout.php';

use Components\Base;

$pageId = 'dev_icons';
ob_start();

$reflection = new ReflectionClass(Base::class);
$constants = $reflection->getConstants();

$svgIcons = [];
foreach ($constants as $name => $value) {
    if (strpos($name, 'SVG_') === 0) {
        $svgIcons[$name] = $value;
    }
}

ksort($svgIcons);
?>
<div>
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">BeezUI Icon Library</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Internal developer support page displaying all SVG constants from <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-pink-600 dark:text-pink-400">Components\Base</code>. Click an icon to copy its constant name.
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-t border-l border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
        <?php foreach ($svgIcons as $name => $svg): ?>
            <div onclick="copyToClipboard('Base::<?= $name ?>', this)" 
                 class="flex items-center gap-4 p-4 border-r border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer group transition-colors">
                <div class="flex-shrink-0 flex items-center justify-center size-10 text-gray-500 group-hover:text-brand transition-colors">
                    <?= $svg ?>
                </div>
                <div class="flex-grow min-w-0">
                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate group-hover:text-brand js-name">
                        <?php
                        $cleanName = str_replace('SVG_', '', $name);
                        $formattedName = str_replace(' ', '', ucwords(strtolower(str_replace('_', ' ', $cleanName)))) . 'Icon';
                        echo $formattedName;
                        ?>
                    </div>
                    <div class="text-[10px] font-mono text-gray-400 dark:text-gray-500 truncate">
                        Base::<?= $name ?>
                    </div>
                </div>
                <div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-gray-400">
                    <?= Base::SVG_COPY ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    
    <?php if (empty($svgIcons)): ?>
        <div class="text-center py-20 bg-gray-50 dark:bg-gray-900/50 rounded-2xl border-2 border-dashed border-gray-200 dark:border-gray-800">
            <p class="text-gray-500">No SVG icons found in Components\Base.</p>
        </div>
    <?php endif; ?>
</div>

<script>
function copyToClipboard(text, el) {
    const copy = (text) => {
        if (navigator.clipboard && window.isSecureContext) {
            return navigator.clipboard.writeText(text);
        } else {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.position = "fixed";
            textArea.style.left = "-9999px";
            textArea.style.top = "0";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            return new Promise((res, rej) => {
                document.execCommand('copy') ? res() : rej();
                document.body.removeChild(textArea);
            });
        }
    };

    copy(text).then(() => {
        const nameEl = el.querySelector('.js-name');
        const originalName = nameEl.innerText;
        
        nameEl.innerText = 'Copied!';
        el.classList.add('bg-green-50', 'dark:bg-green-900/20');
        
        setTimeout(() => {
            nameEl.innerText = originalName;
            el.classList.remove('bg-green-50', 'dark:bg-green-900/20');
        }, 1000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
}
</script>
<?php
$content = ob_get_clean();
echo layout($pageId, $content);
