fn countComponents(items: []const data.Component) comptime_int {
    var total: comptime_int = 0;
    for (items) |c| {
        total += 1 + countComponents(c.children);
    }
    return total;
}

const component_count_label = std.fmt.comptimePrint("{d} components", .{countComponents(&data.components)});
const route_count_label = std.fmt.comptimePrint("{d} Routes", .{data.routes.len});

const features = [_]Feature{
    .{ .icon_fn = icons.Lightning, .title = zx.info.version, .link = "overview" },
    .{ .icon_fn = icons.Hive, .title = component_count_label, .link = "/" },
    .{ .icon_fn = icons.Workflow, .title = route_count_label, .link = "routes" },
};

pub fn Page(ctx: zx.PageContext) zx.Component {
    return (
        <div @allocator={ctx.arena} class="overview-container">
            <div class="banner">
                <div class="hero-content">
                    <div class="hero-title-wrapper">
                        <h1 class="hero-title-main">Ziex</h1>
                        <div class="hero-title-accent">/</div>
                    </div>

                    <p class="hero-subtitle">
                        Ziex DevTools
                    </p>
                    <p class="hero-description">
                        Developer Tools for Ziex Framework
                        <code class="version-badge">{zx.info.version}</code>
                    </p>

                    <div class="features-grid">
                        {for (features) |f| (<FeatureCard allocator={ctx.arena} icon_fn={f.icon_fn} title={f.title} link={f.link} />)}
                    </div>

                    <div class="quick-links">
                        <a href="https://github.com/nurulhudaapon/zx" target="_blank" class="link-item">
                            <span>{icons.Star(ctx.arena)} Star on GitHub</span>
                        </a>
                        <a href="https://ziex.dev" target="_blank" class="link-item">
                            <span>{icons.Document(ctx.arena)} Documentation</span>
                        </a>
                        <a href="https://github.com/nurulhudaapon/zx/issues" target="_blank" class="link-item">
                            <span>{icons.Bug(ctx.arena)} Report Issue</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}

const Feature = struct { icon_fn: *const fn (zx.Allocator) zx.Component, title: []const u8, link: []const u8 };
fn FeatureCard(allocator: zx.Allocator, props: Feature) zx.Component {
    const IconComponent = props.icon_fn(allocator);
    return (
        <a @allocator={allocator} class="feature-card" href={props.link}>
            <div class="feature-icon">{IconComponent}</div>
            <h3 class="feature-title">{props.title}</h3>
        </a>
    );
}

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