@page "/components/back-to-top"

<PageTitle>BackToTop — Lumeo</PageTitle>

<PageHeader Title="BackToTop" Description="A floating button that appears when the user scrolls down and smoothly scrolls back to the top." />

<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>Long scrolling pages where returning to the top is tedious</li>
        <li>Content-heavy layouts such as blogs, documentation, or feeds</li>
        <li>Pages with anchor navigation that benefit from a quick scroll reset</li>
        <li>Any page where users frequently need to return to the header or nav</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_codeDefault">
        <Stack Class="text-sm text-muted-foreground">
            <Lumeo.Text>Scroll down the page to see the BackToTop button appear in the bottom-right corner.</Lumeo.Text>
            <Lumeo.Text Class="mt-2">The button appears after scrolling past 300px by default.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Threshold" Code="@_codeThreshold">
        <Lumeo.Text Class="text-sm text-muted-foreground">Set <Code class="font-mono bg-muted px-1 rounded">VisibilityThreshold</Code> to control when the button appears.</Lumeo.Text>
    </ComponentDemo>

    <ComponentDemo Title="Interactive: Visibility Threshold" Description="Scroll inside the preview container to see the BackToTop button appear once you pass the threshold." Code="@_codeInteractive">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <div class="flex flex-col gap-1 min-w-[260px]">
                    <Lumeo.Text Size="sm" Weight="medium">VisibilityThreshold: @_backToTopThreshold px</Lumeo.Text>
                    <Slider @bind-Value="_backToTopThreshold" Min="100" Max="1000" Step="50" />
                </div>
            </Flex>
            <div id="btt-scroll-container"
                 class="relative overflow-y-auto rounded-xl border border-border/40 bg-muted/30"
                 style="height: 300px;">
                <div style="height: 1500px;" class="p-6 space-y-4 text-sm text-muted-foreground">
                    <Lumeo.Text Weight="medium" Class="text-foreground">Scroll down inside this box</Lumeo.Text>
                    <Lumeo.Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo posuere pede. Mauris ut est.</Lumeo.Text>
                    <Lumeo.Text>Ut quis purus. Sed ac odio. Sed vehicula hendrerit sem. Duis non odio. Morbi ut dui. Sed accumsan risus eget odio. In hac habitasse platea dictumst.</Lumeo.Text>
                    <Lumeo.Text>Pellentesque non elit. Fusce sed justo eu urna porta tincidunt. Mauris felis odio, sollicitudin sed, volutpat a, ornare ac, erat. Morbi quis dolor.</Lumeo.Text>
                    <Lumeo.Text>Donec pellentesque, erat ac sagittis semper, nunc dui lobortis purus, quis congue purus metus ultricies tellus. Proin et quam.</Lumeo.Text>
                    <Lumeo.Text>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue.</Lumeo.Text>
                    <Lumeo.Text>Sed commodo posuere pede. Mauris ut est. Ut quis purus. Sed ac odio. Sed vehicula hendrerit sem. Duis non odio. Morbi ut dui.</Lumeo.Text>
                </div>
                <BackToTop Target="#btt-scroll-container" VisibilityThreshold="@((int)_backToTopThreshold)" />
            </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 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">VisibilityThreshold</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">300</td><td class="p-3 text-muted-foreground">Scroll distance in pixels before the button appears.</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">Custom content replacing the default arrow icon.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Disabled</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">Hides the button and disables scroll tracking entirely.</td></tr>
            </tbody>
        </table>
    </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 scrollbar for contained scrollable regions</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — The underlying element used for the floating action</li>
    </ul>
</div>

@code {
    private string _codeDefault = @"<BackToTop />";
    private string _codeThreshold = @"<BackToTop VisibilityThreshold=""500"" />";

    private double _backToTopThreshold = 300;

    private string _codeInteractive = @"<BackToTop VisibilityThreshold=""300"" />";
}
