<?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-header')]
final readonly class AdminHeader implements StaticComponent
{
    private string $pageTitle;
    private bool $showSearch;

    public function __construct(
        string $content = '',
        array $attributes = []
    ) {
        // Extract attributes with defaults
        $this->pageTitle = $attributes['page-title'] ?? 'Admin';
        $this->showSearch = isset($attributes['show-search'])
            ? filter_var($attributes['show-search'], FILTER_VALIDATE_BOOLEAN)
            : true;
    }

    public function getRootNode(): Node
    {
        $header = new ElementNode('header');
        $header->setAttribute('class', 'admin-header');
        $header->setAttribute('role', 'banner');

        // Use TextNode for HTML content
        $content = new TextNode($this->buildHeaderContent());
        $header->appendChild($content);

        return $header;
    }

    private function buildHeaderContent(): string
    {
        $searchHtml = $this->showSearch ? $this->buildSearchBar() : '';

        return <<<HTML
            <h1 class="admin-header__title">{$this->pageTitle}</h1>

            {$searchHtml}

            <div class="admin-header__actions">
                <button
                    class="admin-action-btn"
                    aria-label="Notifications"
                    data-dropdown-trigger="notifications"
                >
                    <span class="admin-action-btn__icon">🔔</span>
                    <span class="admin-action-btn__badge admin-action-btn__badge--count">3</span>
                </button>

                <button
                    class="admin-theme-toggle"
                    data-theme-toggle
                    aria-label="Toggle theme"
                    title="Toggle dark/light mode"
                >
                    <span class="admin-theme-toggle__icon" data-theme-icon="light" style="display: none;">☀️</span>
                    <span class="admin-theme-toggle__icon" data-theme-icon="dark" style="display: none;">🌙</span>
                    <span class="admin-theme-toggle__label">Theme</span>
                </button>

                <div class="admin-user-menu" data-dropdown>
                    <button class="admin-user-menu__trigger" data-dropdown-trigger="user-menu" aria-haspopup="true" aria-expanded="false">
                        <div class="admin-user-menu__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>
                        <span class="admin-user-menu__name">Admin</span>
                        <span class="admin-user-menu__chevron">▼</span>
                    </button>

                    <ul class="admin-user-menu__dropdown" role="menu">
                        <li class="admin-user-menu__item">
                            <a href="/admin/profile" class="admin-user-menu__link" role="menuitem">
                                <span class="admin-user-menu__icon">👤</span>
                                <span>Profile</span>
                            </a>
                        </li>
                        <li class="admin-user-menu__item">
                            <a href="/admin/settings" class="admin-user-menu__link" role="menuitem">
                                <span class="admin-user-menu__icon">⚙️</span>
                                <span>Settings</span>
                            </a>
                        </li>
                        <li class="admin-user-menu__item">
                            <a href="/logout" class="admin-user-menu__link" role="menuitem">
                                <span class="admin-user-menu__icon">🚪</span>
                                <span>Logout</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        HTML;
    }

    private function buildSearchBar(): string
    {
        return <<<HTML
            <div class="admin-header__search">
                <div class="admin-search">
                    <label for="admin-search-input" class="admin-visually-hidden">Search admin</label>
                    <input
                        type="search"
                        id="admin-search-input"
                        class="admin-search__input"
                        placeholder="Search..."
                        aria-label="Search"
                    />
                    <span class="admin-search__icon" aria-hidden="true">🔍</span>
                </div>
            </div>
        HTML;
    }
}
