<?php

declare(strict_types=1);

namespace App\Framework\View\Components;

use App\Framework\View\Attributes\ComponentName;
use App\Framework\View\Contracts\StaticComponent;
use App\Framework\View\Dom\ElementNode;
use App\Framework\View\Dom\Node;
use App\Framework\View\Dom\TextNode;

#[ComponentName('admin-sidebar')]
final readonly class AdminSidebar implements StaticComponent
{
    private string $title;
    private string $logoUrl;
    private string $currentPath;

    public function __construct(
        string $content = '',
        array $attributes = []
    ) {
        // Extract attributes with defaults
        $this->title = $attributes['title'] ?? 'Admin Panel';
        $this->logoUrl = $attributes['logo-url'] ?? '/admin';
        $this->currentPath = $attributes['current-path'] ?? '/admin';
    }

    public function getRootNode(): Node
    {
        $nav = new ElementNode('nav');
        $nav->setAttribute('class', 'admin-sidebar');
        $nav->setAttribute('role', 'navigation');
        $nav->setAttribute('aria-label', 'Admin navigation');

        // Use TextNode for HTML content (will be parsed by HtmlRenderer)
        $content = new TextNode($this->buildSidebarContent());
        $nav->appendChild($content);

        return $nav;
    }

    private function buildSidebarContent(): string
    {
        return <<<HTML
            <div class="admin-sidebar__header">
                <a href="{$this->logoUrl}" class="admin-sidebar__logo-link">
                    <span class="admin-sidebar__title">{$this->title}</span>
                </a>
            </div>

            <nav class="admin-nav">
                <div class="admin-nav__section">
                    <h3 class="admin-nav__section-title">Dashboard</h3>
                    <ul class="admin-nav__list" role="list">
                        <li class="admin-nav__item">
                            <a href="/admin" class="admin-nav__link" {$this->getActiveState('/admin')}>
                                <span class="admin-nav__icon">📊</span>
                                <span>Overview</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="admin-nav__section">
                    <h3 class="admin-nav__section-title">System</h3>
                    <ul class="admin-nav__list" role="list">
                        <li class="admin-nav__item">
                            <a href="/admin/infrastructure/cache" class="admin-nav__link" {$this->getActiveState('/admin/infrastructure/cache')}>
                                <span class="admin-nav__icon">💾</span>
                                <span>Cache</span>
                            </a>
                        </li>
                        <li class="admin-nav__item">
                            <a href="/admin/infrastructure/logs" class="admin-nav__link" {$this->getActiveState('/admin/infrastructure/logs')}>
                                <span class="admin-nav__icon">📝</span>
                                <span>Logs</span>
                            </a>
                        </li>
                        <li class="admin-nav__item">
                            <a href="/admin/infrastructure/migrations" class="admin-nav__link" {$this->getActiveState('/admin/infrastructure/migrations')}>
                                <span class="admin-nav__icon">🔄</span>
                                <span>Migrations</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="admin-nav__section">
                    <h3 class="admin-nav__section-title">Content</h3>
                    <ul class="admin-nav__list" role="list">
                        <li class="admin-nav__item">
                            <a href="/admin/images" class="admin-nav__link" {$this->getActiveState('/admin/images')}>
                                <span class="admin-nav__icon">🖼️</span>
                                <span>Images</span>
                            </a>
                        </li>
                        <li class="admin-nav__item">
                            <a href="/admin/users" class="admin-nav__link" {$this->getActiveState('/admin/users')}>
                                <span class="admin-nav__icon">👥</span>
                                <span>Users</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="admin-sidebar__footer">
                <div class="admin-sidebar__user">
                    <div class="admin-sidebar__avatar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">A</div>
                    <div class="admin-sidebar__user-info">
                        <span class="admin-sidebar__user-name">Admin User</span>
                        <span class="admin-sidebar__user-role">Administrator</span>
                    </div>
                </div>
            </div>
        HTML;
    }

    private function getActiveState(string $path): string
    {
        return $path === $this->currentPath ? 'aria-current="page"' : '';
    }
}
