<layout src="admin"/>
    <div class="admin-card">
        <div class="admin-card__header">
            <h1 class="admin-card__title">🎨 Component Playground</h1>
            <p class="admin-card__subtitle">Framework Component Library & Design System</p>
        </div>
        <div class="admin-card__content">
            <p>Framework-konform mit <strong>readonly Value Objects</strong>, <strong>Immutability</strong> und <strong>Type Safety</strong>.</p>
            <p style="margin-top: var(--space-md);">
                <a href="/design-system" class="admin-button admin-button--secondary" style="margin-right: var(--space-md);">Design System Analytics</a>
                <a href="#php-components" class="admin-button">PHP Component Classes ↓</a>
            </p>
        </div>
    </div>

    <!-- Framework Component Test Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">🧪 Framework Components Test (x-* Tags)</h2>
            <p class="admin-card__subtitle">Testing reflection-based component rendering</p>
        </div>
        <div class="admin-card__content">
            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);">
                <x-button variant="primary">Primary via x-tag</x-button>
                <x-button variant="secondary">Secondary via x-tag</x-button>
                <x-button variant="danger">Danger via x-tag</x-button>
            </div>

            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);">
                <x-badge variant="success">Success Badge</x-badge>
                <x-badge variant="warning">Warning Badge</x-badge>
                <x-badge variant="danger">Danger Badge</x-badge>
            </div>

            <div style="margin-top: var(--space-lg);">
                <x-alert variant="info">This is an info alert rendered via x-alert tag!</x-alert>
            </div>
        </div>
    </div>

    <!-- Buttons Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">Buttons</h2>
        </div>
        <div class="admin-card__content">
            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);">
                <button class="admin-button">Primary Button</button>
                <button class="admin-button admin-button--secondary">Secondary Button</button>
                <button class="admin-button admin-button--success">Success Button</button>
                <button class="admin-button admin-button--warning">Warning Button</button>
                <button class="admin-button admin-button--error">Error Button</button>
            </div>
            
            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap;">
                <button class="admin-button admin-button--small">Small Button</button>
                <button class="admin-button">Regular Button</button>
                <button class="admin-button admin-button--large">Large Button</button>
            </div>
        </div>
    </div>

    <!-- Cards Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">Cards & Components</h2>
        </div>
        <div class="admin-card__content">
            <div class="admin-cards admin-cards--3-col">
                <!-- Component-based Card -->
                <component name="admin-card" title="Basic Component Card">
                    This card uses the admin-card component system.
                </component>

                <!-- Status Card Component -->
                <component name="admin-card" title="✅ Success Card" status="success" badge="PASS" badge_type="success">
                    This is a success status card using components.
                </component>

                <!-- Metric Card Component -->
                <component name="metric-card" value="1,234" label="Total Users" change="+12% this month" change_type="positive"></component>
            </div>

            <h4 style="margin: var(--space-lg) 0 var(--space-md);">Component Usage</h4>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted);">
&lt;component name="admin-card" title="Title" status="success"&gt;
  Content here
&lt;/component&gt;

&lt;component name="metric-card" value="1,234" label="Users" 
           change="+12%" change_type="positive"&gt;&lt;/component&gt;
            </div>
        </div>
    </div>

    <!-- Forms Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">Form Elements</h2>
        </div>
        <div class="admin-card__content">
            <div class="admin-grid admin-grid--2-col">
                <div>
                    <h4 style="margin-bottom: var(--space-md);">Input Fields</h4>
                    <div style="display: flex; flex-direction: column; gap: var(--space-md);">
                        <input type="text" class="admin-input" placeholder="Text input">
                        <select class="admin-input admin-select">
                            <option>Choose option</option>
                            <option>Option 1</option>
                            <option>Option 2</option>
                        </select>
                        <div class="admin-search">
                            <input type="search" class="admin-input admin-search__input" placeholder="Search...">
                        </div>
                    </div>
                </div>
                
                <div>
                    <h4 style="margin-bottom: var(--space-md);">Button Variants</h4>
                    <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
                        <button class="admin-button admin-button--outline">Outline Button</button>
                        <button class="admin-button admin-button--ghost">Ghost Button</button>
                        <button class="admin-button" disabled>Disabled Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tables Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">Tables</h2>
        </div>
        <div class="admin-card__content">
            <div class="admin-table-wrapper">
                <div class="admin-table-wrapper__header">
                    <h3 class="admin-table-wrapper__title">Sample Data</h3>
                </div>
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Value</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Sample Item 1</td>
                            <td>
                                <span class="admin-table__status admin-table__status--success">
                                    <span class="status-indicator status-indicator--success"></span>
                                    ACTIVE
                                </span>
                            </td>
                            <td>$123.45</td>
                            <td class="admin-table__actions">
                                <a href="#" class="admin-table__action">Edit</a>
                                <a href="#" class="admin-table__action admin-table__action--danger">Delete</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Sample Item 2</td>
                            <td>
                                <span class="admin-table__status admin-table__status--warning">
                                    <span class="status-indicator status-indicator--warning"></span>
                                    PENDING
                                </span>
                            </td>
                            <td>$67.89</td>
                            <td class="admin-table__actions">
                                <a href="#" class="admin-table__action">Edit</a>
                                <a href="#" class="admin-table__action admin-table__action--danger">Delete</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Sample Item 3</td>
                            <td>
                                <span class="admin-table__status admin-table__status--error">
                                    <span class="status-indicator status-indicator--error"></span>
                                    ERROR
                                </span>
                            </td>
                            <td>$0.00</td>
                            <td class="admin-table__actions">
                                <a href="#" class="admin-table__action">Edit</a>
                                <a href="#" class="admin-table__action admin-table__action--danger">Delete</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Color Tokens Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">Color System</h2>
        </div>
        <div class="admin-card__content">
            <div class="admin-grid admin-grid--2-col">
                <div>
                    <h4 style="margin-bottom: var(--space-md);">Primary Colors</h4>
                    <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
                        <div style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md);">
                            <div style="width: 3rem; height: 3rem; background: var(--accent); border-radius: var(--radius-md); border: 1px solid var(--border);"></div>
                            <div>
                                <div style="font-weight: 600;">--accent</div>
                                <div style="font-family: monospace; font-size: 0.75rem; color: var(--muted);">var(--accent)</div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md);">
                            <div style="width: 3rem; height: 3rem; background: var(--bg); border-radius: var(--radius-md); border: 1px solid var(--border);"></div>
                            <div>
                                <div style="font-weight: 600;">--bg</div>
                                <div style="font-family: monospace; font-size: 0.75rem; color: var(--muted);">var(--bg)</div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md);">
                            <div style="width: 3rem; height: 3rem; background: var(--text); border-radius: var(--radius-md); border: 1px solid var(--border);"></div>
                            <div>
                                <div style="font-weight: 600;">--text</div>
                                <div style="font-family: monospace; font-size: 0.75rem; color: var(--muted);">var(--text)</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h4 style="margin-bottom: var(--space-md);">Semantic Colors</h4>
                    <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
                        <div style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md);">
                            <div style="width: 3rem; height: 3rem; background: var(--success); border-radius: var(--radius-md); border: 1px solid var(--border);"></div>
                            <div>
                                <div style="font-weight: 600;">--success</div>
                                <div style="font-family: monospace; font-size: 0.75rem; color: var(--muted);">var(--success)</div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md);">
                            <div style="width: 3rem; height: 3rem; background: var(--warning); border-radius: var(--radius-md); border: 1px solid var(--border);"></div>
                            <div>
                                <div style="font-weight: 600;">--warning</div>
                                <div style="font-family: monospace; font-size: 0.75rem; color: var(--muted);">var(--warning)</div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md);">
                            <div style="width: 3rem; height: 3rem; background: var(--error); border-radius: var(--radius-md); border: 1px solid var(--border);"></div>
                            <div>
                                <div style="font-weight: 600;">--error</div>
                                <div style="font-family: monospace; font-size: 0.75rem; color: var(--muted);">var(--error)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- PHP Component Classes Section -->
    <div id="php-components" class="admin-card" style="scroll-margin-top: var(--space-lg);">
        <div class="admin-card__header">
            <h2 class="admin-card__title">⚡ PHP Component Classes</h2>
            <p class="admin-card__subtitle">Framework-konforme Value Objects mit Typsicherheit</p>
        </div>
        <div class="admin-card__content">
            <div style="background: oklch(from var(--accent) l c h / 0.1); border-left: 4px solid var(--accent); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg);">
                <h4 style="margin-bottom: var(--space-sm);">🎯 Framework-Prinzipien</h4>
                <ul style="margin-left: var(--space-lg); line-height: 1.8;">
                    <li><strong>readonly</strong> Klassen & Properties</li>
                    <li><strong>Immutable</strong> mit Transformation-Methoden</li>
                    <li><strong>Type Safety</strong> durch Value Objects</li>
                    <li><strong>XSS-Schutz</strong> via automatisches Escaping</li>
                    <li><strong>Fluent API</strong> für einfache Komposition</li>
                </ul>
            </div>

            <!-- Buttons -->
            <h3 style="margin-bottom: var(--space-md);">Buttons</h3>
            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); padding: var(--space-md); background: var(--bg-alt); border-radius: var(--radius-md);">
                {{ phpComponents.buttons.primary }}
                {{ phpComponents.buttons.secondary }}
                {{ phpComponents.buttons.danger }}
                {{ phpComponents.buttons.success }}
                {{ phpComponents.buttons.ghost }}
            </div>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-lg);">
Button::primary('Save')
Button::secondary('Cancel')
Button::danger('Delete')
Button::success('Confirm')
Button::ghost('Dismiss')</div>

            <!-- Button Groups -->
            <h3 style="margin-bottom: var(--space-md);">Button Groups</h3>
            <div style="margin-bottom: var(--space-md);">
                {{ phpComponents.button_groups.horizontal }}
            </div>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-lg);">
ButtonGroup::create(
    Button::primary('Left'),
    Button::secondary('Center'),
    Button::secondary('Right')
)</div>

            <!-- Badges -->
            <h3 style="margin-bottom: var(--space-md);">Badges</h3>
            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-md);">
                {{ phpComponents.badges.default }}
                {{ phpComponents.badges.primary }}
                {{ phpComponents.badges.success }}
                {{ phpComponents.badges.warning }}
                {{ phpComponents.badges.danger }}
                {{ phpComponents.badges.info }}
                {{ phpComponents.badges.pill }}
            </div>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-lg);">
Badge::success('Active')
Badge::danger('Error')
Badge::primary('New')->asPill()</div>

            <!-- Alerts -->
            <h3 style="margin-bottom: var(--space-md);">Alerts</h3>
            {{ phpComponents.alerts.info }}
            {{ phpComponents.alerts.success }}
            {{ phpComponents.alerts.warning }}
            {{ phpComponents.alerts.danger }}
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-lg);">
Alert::success('Operation completed!')
Alert::danger('An error occurred!')
Alert::info('Info message')->withDismissible()</div>

            <!-- Forms -->
            <h3 style="margin-bottom: var(--space-md);">Form Components</h3>
            <div class="admin-grid admin-grid--2-col" style="margin-bottom: var(--space-md);">
                <div>
                    {{ phpComponents.forms.text_input }}
                    {{ phpComponents.forms.email_input }}
                    {{ phpComponents.forms.password_input }}
                </div>
                <div>
                    {{ phpComponents.forms.select }}
                    {{ phpComponents.forms.checkbox }}
                </div>
            </div>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-lg);">
FormInput::email('email', 'Email Address')
FormInput::password('password', 'Password')
FormSelect::create('status', $options, 'Status')
FormCheckbox::create('agree', 'I agree', '1')</div>

            <!-- Cards -->
            <h3 style="margin-bottom: var(--space-md);">Cards</h3>
            <div class="admin-grid admin-grid--2-col" style="margin-bottom: var(--space-md);">
                <div>{{ phpComponents.cards.basic }}</div>
                <div>{{ phpComponents.cards.with_title }}</div>
            </div>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); font-family: monospace; font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-lg);">
Card::withTitle('Title', 'Content')
    ->withSubtitle('Subtitle')
    ->withFooter(Button::primary('Action'))</div>
        </div>
    </div>

    <!-- Usage Guidelines -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h2 class="admin-card__title">Usage Guidelines</h2>
        </div>
        <div class="admin-card__content">
            <h3>Warum PHP Component Classes?</h3>
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); margin: var(--space-md) 0;">
                <ul style="margin-left: var(--space-lg); line-height: 1.8;">
                    <li>✅ <strong>Framework-konform</strong>: readonly, final, immutable</li>
                    <li>✅ <strong>Typsicherheit</strong>: Statische Analyse mit PHPStan</li>
                    <li>✅ <strong>Testbarkeit</strong>: Einfaches Unit Testing</li>
                    <li>✅ <strong>XSS-Schutz</strong>: Automatisches htmlspecialchars()</li>
                    <li>✅ <strong>IDE-Support</strong>: Autocomplete und Type Hints</li>
                </ul>
            </div>

            <h3 style="margin-top: var(--space-lg);">Best Practices</h3>
            <ul style="margin-left: var(--space-lg);">
                <li>Verwende <strong>PHP Component Classes</strong> für wiederverwendbare UI-Elemente</li>
                <li>Template-Komponenten nur für sehr komplexe, admin-spezifische Layouts</li>
                <li>Nutze Fluent API für lesbare Component-Komposition</li>
                <li>Alle Components returnen HTML-Strings via <code style="background: var(--bg-alt); padding: 0.25rem; border-radius: 0.25rem;">__toString()</code></li>
            </ul>

            <div style="margin-top: var(--space-lg);">
                <a href="/admin" class="admin-button admin-button--secondary">← Back to Admin</a>
                <a href="/design-system" class="admin-button">Design System Analytics</a>
            </div>
        </div>
    </div>