@page "/components/app-bar"

<PageTitle>AppBar — Lumeo</PageTitle>

<PageHeader Title="AppBar" Description="A top application bar with start, center, and end content slots — sticky by default, with optional border and elevation." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Provide a consistent top navigation bar across all pages of an app.</li>
        <li>Group branding (logo), search, and user actions (avatar, theme toggle) in one bar.</li>
        <li>Use as the primary anchor for app navigation and global actions.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default AppBar" Code="@_defaultCode">
        <div class="relative border border-border/40 rounded-lg overflow-hidden">
            <AppBar Sticky="false">
                <StartContent>
                    <Flex Gap="2" Align="center">
                        <div class="h-6 w-6 rounded bg-primary"></div>
                        <Lumeo.Text Size="sm" Weight="semibold">Acme Corp</Lumeo.Text>
                    </Flex>
                </StartContent>
                <EndContent>
                    <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">Sign In</Button>
                    <Button Size="Button.ButtonSize.Sm">Get Started</Button>
                </EndContent>
            </AppBar>
            <div class="p-6 text-center">
                <Lumeo.Text Size="sm" Color="muted">Page content here</Lumeo.Text>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="With Search" Code="@_searchCode">
        <div class="relative border border-border/40 rounded-lg overflow-hidden">
            <AppBar Sticky="false">
                <StartContent>
                    <Flex Gap="2" Align="center">
                        <div class="h-6 w-6 rounded bg-primary"></div>
                        <Lumeo.Text Size="sm" Weight="semibold">Dashboard</Lumeo.Text>
                    </Flex>
                </StartContent>
                <ChildContent>
                    <div class="flex justify-center px-4">
                        <Input Placeholder="Search..." Class="max-w-xs h-8 text-sm" />
                    </div>
                </ChildContent>
                <EndContent>
                    <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                        <Blazicon Svg="Lucide.Bell" class="h-4 w-4" />
                    </Button>
                    <Avatar>
                        <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                </EndContent>
            </AppBar>
            <div class="p-6 text-center">
                <Lumeo.Text Size="sm" Color="muted">Page content here</Lumeo.Text>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Appearance toggles — interactive" Code="@_appearanceInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Toggle options to see them applied live.</Lumeo.Text>
            <Flex Gap="6" Wrap="true">
                <Flex Align="center" Gap="2">
                    <Switch @bind-Checked="_appBarElevated" />
                    <Label>Elevated</Label>
                </Flex>
                <Flex Align="center" Gap="2">
                    <Switch @bind-Checked="_appBarBordered" />
                    <Label>Bordered</Label>
                </Flex>
            </Flex>
            <div class="relative border border-border/40 rounded-lg overflow-hidden">
                <AppBar Sticky="false" Elevated="@_appBarElevated" Bordered="@_appBarBordered" Class="bg-background">
                    <StartContent>
                        <Flex Gap="2" Align="center">
                            <div class="h-6 w-6 rounded bg-primary"></div>
                            <Lumeo.Text Size="sm" Weight="semibold">My App</Lumeo.Text>
                        </Flex>
                    </StartContent>
                    <EndContent>
                        <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">Sign In</Button>
                        <Button Size="Button.ButtonSize.Sm">Get Started</Button>
                    </EndContent>
                </AppBar>
                <div class="p-6 text-center">
                    <Lumeo.Text Size="sm" Color="muted">Page content here</Lumeo.Text>
                </div>
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Elevated (no border)" Code="@_elevatedCode">
        <div class="relative border border-border/40 rounded-lg overflow-hidden bg-muted/10">
            <AppBar Sticky="false" Elevated="true" Bordered="false" Class="bg-background">
                <StartContent>
                    <Flex Gap="2" Align="center">
                        <div class="h-6 w-6 rounded-full bg-primary"></div>
                        <Lumeo.Text Size="sm" Weight="semibold">My App</Lumeo.Text>
                    </Flex>
                </StartContent>
                <EndContent>
                    <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                        <Blazicon Svg="Lucide.Settings" class="h-4 w-4" />
                    </Button>
                </EndContent>
            </AppBar>
            <div class="p-6 text-center">
                <Lumeo.Text Size="sm" Color="muted">Page content here</Lumeo.Text>
            </div>
        </div>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">AppBar</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr><td class="p-3 font-mono text-xs text-primary">StartContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Left-side slot (logo, hamburger menu, brand name).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Center slot — grows to fill remaining space (search bar, nav links).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">EndContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Right-side slot (avatar, theme toggle, action buttons).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Sticky</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">true</td><td class="p-3 text-muted-foreground">When true, uses <code>sticky top-0 z-30</code> to pin to the viewport.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Bordered</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">true</td><td class="p-3 text-muted-foreground">When true, adds a subtle bottom border.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Elevated</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">When true, adds a <code>shadow-sm</code> drop shadow for depth.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Height</td><td class="p-3 font-mono text-xs text-muted-foreground">string</td><td class="p-3 font-mono text-xs text-muted-foreground">"h-14"</td><td class="p-3 text-muted-foreground">Tailwind height class applied to the bar (e.g., "h-12", "h-16").</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/toolbar" class="text-primary hover:underline">Toolbar</a> — A contextual toolbar within a panel or editor — not full-width.</li>
        <li><a href="/components/sidebar" class="text-primary hover:underline">Sidebar</a> — Collapsible vertical navigation — often used alongside AppBar.</li>
        <li><a href="/components/navigation-menu" class="text-primary hover:underline">NavigationMenu</a> — Horizontal mega-navigation for site-level nav links.</li>
    </ul>
</div>

@code {
    // Interactive: appearance bools
    private bool _appBarElevated = false;
    private bool _appBarBordered = true;
    private string _appearanceInteractiveCode = @"<Switch @bind-Checked=""_elevated"" />
<Switch @bind-Checked=""_bordered"" />
<AppBar Elevated=""@_elevated"" Bordered=""@_bordered"">
    <StartContent>
        <Lumeo.Text Size=""sm"" Weight=""semibold"">My App</Lumeo.Text>
    </StartContent>
    <EndContent>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Sign In</Button>
        <Button Size=""Button.ButtonSize.Sm"">Get Started</Button>
    </EndContent>
</AppBar>

@code {
    private bool _elevated = false;
    private bool _bordered = true;
}";

    private string _defaultCode = @"<AppBar>
    <StartContent>
        <Flex Gap=""2"" Align=""center"">
            <img src=""/logo.svg"" class=""h-6 w-6"" alt=""Logo"" />
            <Lumeo.Text Size=""sm"" Weight=""semibold"">Acme Corp</Lumeo.Text>
        </Flex>
    </StartContent>
    <EndContent>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Sign In</Button>
        <Button Size=""Button.ButtonSize.Sm"">Get Started</Button>
    </EndContent>
</AppBar>";

    private string _searchCode = @"<AppBar>
    <StartContent>
        <Lumeo.Text Size=""sm"" Weight=""semibold"">Dashboard</Lumeo.Text>
    </StartContent>
    <ChildContent>
        <Input Placeholder=""Search..."" Class=""max-w-xs h-8 text-sm"" />
    </ChildContent>
    <EndContent>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">
            <Blazicon Svg=""Lucide.Bell"" class=""h-4 w-4"" />
        </Button>
        <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
    </EndContent>
</AppBar>";

    private string _elevatedCode = @"<AppBar Elevated=""true"" Bordered=""false"">
    <StartContent>
        <Lumeo.Text Size=""sm"" Weight=""semibold"">My App</Lumeo.Text>
    </StartContent>
    <EndContent>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">
            <Blazicon Svg=""Lucide.Settings"" class=""h-4 w-4"" />
        </Button>
    </EndContent>
</AppBar>";
}
