pub const SidebarProps = struct {
    pub const Link = struct {
        href: []const u8,
        text: []const u8,
    };

    pub const Section = struct {
        title: []const u8,
        href: []const u8 = "", // Empty string means no link
        items: []const Link = &.{},
    };

    pub const Category = struct {
        title: []const u8,
        sections: []const Section,
    };

    pub const Tab = struct {
        label: []const u8,
        href: []const u8,
        active: bool = false,
    };

    categories: []const Category = &.{},
    links: []const Link = &.{}, // Legacy support
    toc: []const Link = &.{}, // Table of contents for right sidebar
    tabs: []const Tab = &.{}, // Sidebar top tabs (e.g. Learn / Reference)
    active_path: []const u8 = "", // Current path for top-bar active state
    children: zx.Component,
};

pub fn Sidebar(allocator: zx.Allocator, props: SidebarProps) zx.Component {
    const nav_links = [_]struct { href: []const u8, label: []const u8 }{
        .{ .href = "/learn", .label = "Docs" },
        .{ .href = "/playground", .label = "Playground" },
        .{ .href = "/examples", .label = "Examples" },
    };

    return (
        <div @allocator={allocator}>
            <header class="top-bar">
                <div class="top-bar-content">
                    <div class="top-bar-left">
                        <a href="/" class="top-bar-logo">
                            // <span class="top-bar-logo-mark">ZX</span>
                            <span class="top-bar-logo-text">
                                Ziex 
                                // <span class="top-bar-logo-subtitle">v{zx.info.version}</span>
                            </span>
                        </a>
                    </div>
                    <input type="checkbox" id="top-bar-toggle" class="top-bar-toggle" aria-label="Toggle navigation menu" />
                    <label for="top-bar-toggle" class="top-bar-hamburger" aria-label="Toggle menu">
                        <span></span>
                        <span></span>
                        <span></span>
                    </label>
                    // <form class="top-bar-search" role="search" action="/docs">
                    //     <input class="top-bar-search-input" type="search" name="q" placeholder="Search docs" aria-label="Search documentation" autocomplete="off" />
                    //     <span class="top-bar-search-hint">/</span>
                    // </form>
                    <div class="top-bar-right">
                        <nav class="top-bar-nav">
                            {for (nav_links) |nav| (
                                <a link={nav.href} href={nav.href}
                                    class={if (std.mem.eql(u8, props.active_path, nav.href)) "top-bar-link top-bar-link-active" else "top-bar-link"}>{nav.label}</a>
                            )}
                        </nav>
                        <div class="top-bar-actions">
                            <a href="/r/discord" target="_blank" rel="noopener noreferrer" class="top-bar-icon" aria-label="Discord" title="ZX Discord">
                                <DiscordIcon allocator={allocator} />
                            </a>
                            <a href={zx.info.repository} target="_blank" rel="noopener noreferrer" class="top-bar-icon" aria-label="GitHub" title="v{zx.info.version}">
                                <GitHubIcon allocator={allocator} />
                            </a>
                        </div>
                    </div>
                </div>
            </header>
            <div class="container">
                <label for="top-bar-toggle" class="sidebar-overlay" aria-hidden="true"></label>
                <nav class="sidebar">
                    {if (props.tabs.len > 0) (
                        <div class="sidebar-tabs">
                            {for (props.tabs) |tab| (
                                <a href={tab.href} class={if (tab.active) "sidebar-tab sidebar-tab-active" else "sidebar-tab"}>{tab.label}</a>
                            )}
                        </div>
                    )}
                    {if (props.categories.len > 0) (
                        <div class="sidebar-categories">
                            {for (props.categories) |category| (
                                <SidebarCategory allocator={allocator} category={category} />
                            )}
                        </div>
                    ) else (
                        <ul class="nav-menu">
                            {for (props.links) |link| (<li><a href={link.href}>{link.text}</a></li>)}
                        </ul>
                    )}
                </nav>
                <main class="content">
                    {props.children}
                </main>
                {if (props.toc.len > 0) (
                    <aside class="right-sidebar">
                        <div class="right-sidebar-content">
                            <h4 class="right-sidebar-title">On This Page</h4>
                            <nav class="right-sidebar-nav">
                                {for (props.toc) |link| (
                                    <a href={link.href} class="right-sidebar-link">{link.text}</a>
                                )}
                            </nav>
                        </div>
                    </aside>
                )}
            </div>
        </div>
    );
}

const SidebarCategoryProps = struct {
    category: SidebarProps.Category,
};

fn SidebarCategory(allocator: zx.Allocator, props: SidebarCategoryProps) zx.Component {
    return (
        <div class="sidebar-category" @allocator={allocator}>
            <h3 class="sidebar-category-title">{props.category.title}</h3>
            <ul class="sidebar-sections">
                {for (props.category.sections) |section| (
                    <SidebarSection allocator={allocator} section={section} />
                )}
            </ul>
        </div>
    );
}

const SidebarSectionProps = struct {
    section: SidebarProps.Section,
};

fn SidebarSection(allocator: zx.Allocator, props: SidebarSectionProps) zx.Component {
    const has_link = props.section.href.len > 0;
    const has_items = props.section.items.len > 0;

    if (has_items) {
        return (
            <li class="sidebar-section" @allocator={allocator}>
                <details class="sidebar-details">
                    <summary class="sidebar-summary">
                        <SidebarSectionTitle allocator={allocator} section={props.section} />
                        <span class="sidebar-arrow">›</span>
                    </summary>
                    <ul class="sidebar-subitems">
                        {for (props.section.items) |item| (
                            <li><a href={item.href}>{item.text}</a></li>
                        )}
                    </ul>
                </details>
            </li>
        );
    }

    if (has_link) {
        return (
            <li class="sidebar-section" @allocator={allocator}>
                <a href={props.section.href} class="sidebar-section-link">
                    <span>{props.section.title}</span>
                </a>
            </li>
        );
    }

    return (
        <li class="sidebar-section" @allocator={allocator}>
            <span class="sidebar-section-title">
                <span>{props.section.title}</span>
            </span>
        </li>
    );
}

fn SidebarSectionTitle(allocator: zx.Allocator, props: SidebarSectionProps) zx.Component {
    const has_link = props.section.href.len > 0;

    if (has_link) {
        return (
            <a href={props.section.href} class="sidebar-section-link" @allocator={allocator}>
                <span>{props.section.title}</span>
            </a>
        );
    }

    return (
        <span class="sidebar-section-title" @allocator={allocator}>
            <span>{props.section.title}</span>
        </span>
    );
}

const GitHubIcon = icons.GitHub;
const DiscordIcon = icons.Discord;

const icons = @import("../components/icons.zx");
const zx = @import("zx");
const std = @import("std");
const root = @import("root");
