@page "/components/affix"

<PageTitle>Affix — Lumeo</PageTitle>

<PageHeader Title="Affix" Description="Pins content to a fixed position when scrolling past a threshold." />

<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>Sticky elements that should remain visible as the user scrolls</li>
        <li>Pinned headers, toolbars, or navigation bars within scrollable content</li>
        <li>Fixed-position call-to-action buttons or summary panels</li>
        <li>Table of contents or sidebar navigation that stays in view</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Affix" Code="@_basicCode">
        <Stack Gap="2" Class="text-sm text-muted-foreground">
            <Lumeo.Text>The Affix component wraps content and makes it stick when the user scrolls past it.</Lumeo.Text>
            <Lumeo.Text>It uses <Code class="font-mono bg-muted px-1 rounded">ComponentInteropService</Code> to track scroll position.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Interactive: Anchor & Offset" Description="Choose the anchor side and adjust the offset to control when the element becomes fixed." Code="@_interactiveAffixCode">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <div class="flex flex-col gap-1">
                    <Lumeo.Text Size="sm" Weight="medium">Anchor</Lumeo.Text>
                    <Segmented @bind-Value="_affixAnchor">
                        <SegmentedItem Value="@("Top")">Top</SegmentedItem>
                        <SegmentedItem Value="@("Bottom")">Bottom</SegmentedItem>
                    </Segmented>
                </div>
                <div class="flex flex-col gap-1 min-w-[220px]">
                    <Lumeo.Text Size="sm" Weight="medium">
                        @(_affixAnchor == "Top" ? "OffsetTop" : "OffsetBottom"): @_affixOffset px
                    </Lumeo.Text>
                    <Slider @bind-Value="_affixOffset" Min="0" Max="200" Step="10" />
                </div>
            </Flex>
            <div class="overflow-y-auto rounded-xl border border-border/40 bg-muted/30 p-4" style="height: 260px;">
                <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Scroll inside this box to see the chip stick.</Lumeo.Text>
                <div style="height: 600px;">
                    @if (_affixAnchor == "Top")
                    {
                        <Affix OffsetTop="@((int)_affixOffset)">
                            <Badge Class="px-4 py-1.5 text-sm shadow">
                                Affixed — Top @_affixOffset px
                            </Badge>
                        </Affix>
                    }
                    else
                    {
                        <Affix OffsetBottom="@((int)_affixOffset)">
                            <Badge Class="px-4 py-1.5 text-sm shadow">
                                Affixed — Bottom @_affixOffset px
                            </Badge>
                        </Affix>
                    }
                </div>
            </div>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2" Class="text-2xl font-bold text-foreground">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="text-lg font-semibold text-foreground mb-3">Affix</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">OffsetTop</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">0</td>
                            <td class="p-3 text-muted-foreground">Pixels from top before becoming fixed.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OffsetBottom</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Pixels from bottom before becoming fixed.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Target</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">—</td>
                            <td class="p-3 text-muted-foreground">CSS selector for scroll container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnChange</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Fired when fixed state changes.</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/scroll-area" class="text-primary hover:underline">ScrollArea</a> — Custom scrollable container for content areas</li>
        <li><a href="/components/scrollspy" class="text-primary hover:underline">Scrollspy</a> — Scroll-aware navigation that tracks active sections</li>
    </ul>
</div>

@code {
    private string _basicCode = @"<Affix OffsetTop=""80"">
    <div class=""bg-background border rounded-lg p-4 shadow-sm"">
        This content sticks at 80px from top.
    </div>
</Affix>";

    private string _affixAnchor = "Top";
    private double _affixOffset = 80;

    private string _interactiveAffixCode = @"@* Top anchor *@
<Affix OffsetTop=""80"">
    <Badge Class=""px-4 py-1.5 text-sm shadow"">Affixed — Top 80px</Badge>
</Affix>

@* Bottom anchor *@
<Affix OffsetBottom=""40"">
    <Badge Class=""px-4 py-1.5 text-sm shadow"">Affixed — Bottom 40px</Badge>
</Affix>";
}
