@page "/components/safe-area"

<PageTitle>SafeArea — Lumeo</PageTitle>

<PageHeader Title="SafeArea" Description="Applies CSS env() safe-area insets so content stays clear of device notches, home indicators, and rounded display corners." />

<Alert Variant="Alert.AlertVariant.Default" Class="mt-6"
      Title="Desktop / Android note"
      Description="SafeArea is invisible on desktop browsers and most Android devices — env(safe-area-inset-*) resolves to 0px there. It only does real work on iPhones (notch / Dynamic Island / home indicator) and other devices with display cutouts where the browser runs in viewport-fit=cover mode." />

<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>Wrapping full-screen layouts on iPhones with notches or dynamic islands to avoid clipped content</li>
        <li>Fixing bottom navigation bars and action sheets that overlap the home indicator on notched devices</li>
        <li>PWAs and hybrid apps running in standalone mode where the OS chrome is absent</li>
        <li>Modals, drawers, and sheets that extend edge to edge and need inset compensation</li>
        <li>Any layout where <code class="font-mono text-xs bg-muted px-1 py-0.5 rounded">viewport-fit=cover</code> is set in the meta tag</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Top and Bottom Safe Area" Code="@_topBottomCode">
        <div class="rounded-lg border border-border/40 bg-muted/10 overflow-hidden">
            <SafeArea Top="true" Bottom="true">
                <div class="flex flex-col gap-2 p-4">
                    <div class="rounded-md border border-border/40 bg-background px-4 py-3">
                        <Lumeo.Text Size="sm" Class="font-medium">Safe content</Lumeo.Text>
                        <Lumeo.Text Size="xs" Color="muted">Padded away from top and bottom insets via env(safe-area-inset-top/bottom)</Lumeo.Text>
                    </div>
                </div>
            </SafeArea>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="All Edges" Code="@_allEdgesCode">
        <div class="rounded-lg border border-border/40 bg-muted/10 overflow-hidden">
            <SafeArea Top="true" Bottom="true" Left="true" Right="true">
                <div class="rounded-md border border-border/40 bg-background px-4 py-3">
                    <Lumeo.Text Size="sm" Class="font-medium">Full safe area</Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted">Padding applied on all four edges — useful for full-screen overlays</Lumeo.Text>
                </div>
            </SafeArea>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Bottom Only (navigation bar pattern)" Code="@_bottomCode">
        <div class="rounded-lg border border-border/40 bg-background overflow-hidden">
            <SafeArea Top="false" Bottom="true">
                <div class="flex items-center justify-around border-t border-border/40 px-4 py-3">
                    <Lumeo.Text Size="xs" Color="muted">Home</Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted">Search</Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted">Profile</Lumeo.Text>
                </div>
            </SafeArea>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Sticky bottom tab bar (realistic example)" Description="On iPhone, SafeArea pushes the bar above the home indicator. On desktop it has no visual effect — the bar just sits at the bottom as normal." Code="@_stickyBarCode">
        <div class="relative h-64 border border-border/40 rounded-md overflow-hidden bg-background">
            <div class="p-4 space-y-2 overflow-y-auto h-full pb-16">
                @for (int i = 1; i <= 8; i++)
                {
                    <div class="rounded-md border border-border/40 px-3 py-2">
                        <Lumeo.Text Size="sm">List item @i</Lumeo.Text>
                    </div>
                }
            </div>
            <SafeArea Bottom="true" Top="false" Class="absolute bottom-0 left-0 right-0 bg-card border-t border-border/40">
                <Flex Justify="around" Class="py-3">
                    <Button Variant="Button.ButtonVariant.Ghost" Class="flex-col gap-0.5 h-auto py-1">
                        <Blazicon Svg="Lucide.Bell" class="h-5 w-5" />
                        <Lumeo.Text Size="xs">Home</Lumeo.Text>
                    </Button>
                    <Button Variant="Button.ButtonVariant.Ghost" Class="flex-col gap-0.5 h-auto py-1">
                        <Blazicon Svg="Lucide.Search" class="h-5 w-5" />
                        <Lumeo.Text Size="xs">Search</Lumeo.Text>
                    </Button>
                    <Button Variant="Button.ButtonVariant.Ghost" Class="flex-col gap-0.5 h-auto py-1">
                        <Blazicon Svg="Lucide.User" class="h-5 w-5" />
                        <Lumeo.Text Size="xs">Profile</Lumeo.Text>
                    </Button>
                </Flex>
            </SafeArea>
        </div>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">SafeArea</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">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">—</td>
                            <td class="p-3 text-muted-foreground">Content to wrap with safe-area padding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Top</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">Apply <code class="font-mono text-xs">padding-top: env(safe-area-inset-top)</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Bottom</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">Apply <code class="font-mono text-xs">padding-bottom: env(safe-area-inset-bottom)</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Left</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">Apply <code class="font-mono text-xs">padding-left: env(safe-area-inset-left)</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Right</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">Apply <code class="font-mono text-xs">padding-right: env(safe-area-inset-right)</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">null</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes applied to the wrapper element.</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/pull-to-refresh" class="text-primary hover:underline">PullToRefresh</a> — Gesture-driven data reload typically used inside a safe-area layout</li>
        <li><a href="/components/sheet" class="text-primary hover:underline">Sheet</a> — Bottom sheet overlay that benefits from bottom safe-area insets</li>
        <li><a href="/components/drawer" class="text-primary hover:underline">Drawer</a> — Side drawer that may require left/right safe-area on landscape phones</li>
    </ul>
</div>

@code {
    private string _topBottomCode = @"<SafeArea Top=""true"" Bottom=""true"">
    <div class=""p-4"">
        <p>Content padded away from notch and home indicator.</p>
    </div>
</SafeArea>";

    private string _allEdgesCode = @"<SafeArea Top=""true"" Bottom=""true"" Left=""true"" Right=""true"">
    <div class=""p-4"">
        <p>Full safe-area padding on all four edges.</p>
    </div>
</SafeArea>";

    private string _bottomCode = @"<!-- Bottom tab bar pattern: only bottom inset needed -->
<SafeArea Top=""false"" Bottom=""true"">
    <nav class=""flex items-center justify-around border-t border-border/40 px-4 py-3"">
        <span>Home</span>
        <span>Search</span>
        <span>Profile</span>
    </nav>
</SafeArea>";

    private string _stickyBarCode = @"<div class=""relative h-64 border border-border/40 rounded-md overflow-hidden bg-background"">
    <div class=""p-4 space-y-2 overflow-y-auto h-full pb-16"">
        <!-- scrollable content -->
    </div>
    <SafeArea Bottom=""true"" Top=""false""
              Class=""absolute bottom-0 left-0 right-0 bg-card border-t border-border/40"">
        <Flex Justify=""around"" Class=""py-3"">
            <Button Variant=""Button.ButtonVariant.Ghost"">
                <Blazicon Svg=""Lucide.Bell"" class=""h-5 w-5"" />
            </Button>
            <Button Variant=""Button.ButtonVariant.Ghost"">
                <Blazicon Svg=""Lucide.Search"" class=""h-5 w-5"" />
            </Button>
            <Button Variant=""Button.ButtonVariant.Ghost"">
                <Blazicon Svg=""Lucide.User"" class=""h-5 w-5"" />
            </Button>
        </Flex>
    </SafeArea>
</div>";
}
