@page "/components/window"

<PageTitle>Window — Lumeo</PageTitle>

<PageHeader Title="Window" Description="A non-modal draggable and resizable floating panel — like a desktop application window." />

<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>Display secondary content (logs, previews, tools) while the main page remains interactive.</li>
        <li>Create floating panels that users can reposition and resize to fit their workflow.</li>
        <li>Build desktop-like multi-window UIs in web applications.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Window" Code="@_basicCode">
        <div class="relative h-64 border border-border/40 rounded-lg overflow-hidden bg-muted/20">
            <Button @onclick="@(() => _win1Open = true)" Class="m-4">Open Window</Button>
            <Window Open="_win1Open"
                    OpenChanged="@((v) => _win1Open = v)"
                    Title="My Window"
                    Width="360px"
                    Height="200px"
                    InitialX="40"
                    InitialY="40">
                <p class="text-sm text-muted-foreground">This is a draggable, resizable floating window. Drag the title bar to move it.</p>
            </Window>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Window with Footer" Code="@_footerCode">
        <div class="relative h-72 border border-border/40 rounded-lg overflow-hidden bg-muted/20">
            <Button @onclick="@(() => _win2Open = true)" Class="m-4">Open Window</Button>
            <Window Open="_win2Open"
                    OpenChanged="@((v) => _win2Open = v)"
                    Title="Save Document"
                    Width="380px"
                    Height="220px"
                    InitialX="20"
                    InitialY="20">
                <ChildContent>
                    <p class="text-sm text-muted-foreground">You have unsaved changes. Would you like to save?</p>
                </ChildContent>
                <FooterContent>
                    <div class="flex gap-2 justify-end">
                        <Button Variant="Button.ButtonVariant.Outline" @onclick="@(() => _win2Open = false)">Discard</Button>
                        <Button @onclick="@(() => _win2Open = false)">Save</Button>
                    </div>
                </FooterContent>
            </Window>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Non-Resizable Window" Code="@_noResizeCode">
        <div class="relative h-64 border border-border/40 rounded-lg overflow-hidden bg-muted/20">
            <Button @onclick="@(() => _win3Open = true)" Class="m-4">Open Fixed Window</Button>
            <Window Open="_win3Open"
                    OpenChanged="@((v) => _win3Open = v)"
                    Title="Fixed Size Panel"
                    Width="300px"
                    Height="160px"
                    Resizable="false"
                    InitialX="20"
                    InitialY="20">
                <p class="text-sm text-muted-foreground">This window cannot be resized, but can still be dragged.</p>
            </Window>
        </div>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> Title-bar buttons (close, minimize, maximize) are now 44×44 px on touch screens (<code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">h-11 w-11 sm:h-7 sm:w-7</code>) and the resize handle corner expands to a 44×44 px tap target, making the window fully usable on mobile.
</Alert>

<!-- 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">Window</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">Open</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">Controls whether the window is visible. Use @@bind-Open for two-way binding.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Title</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">Text shown in the title bar.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">TitleContent</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 title bar content (replaces Title text).</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">Body content of the window.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">FooterContent</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">Optional footer content rendered below the body.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Width</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">"480px"</td><td class="p-3 text-muted-foreground">Initial width as a CSS pixel value.</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">"360px"</td><td class="p-3 text-muted-foreground">Initial height as a CSS pixel value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Draggable</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">Enables pointer-based drag via the title bar.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Resizable</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">Shows a resize handle in the bottom-right corner.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowClose</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">Shows a close button in the title bar.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowMinimize</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">Shows a minimize button that collapses to title bar only.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowMaximize</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">Shows a maximize button that expands to fill most of the viewport.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">InitialX</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">Initial left position in pixels (defaults to 80px).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">InitialY</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">Initial top position in pixels (defaults to 80px).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OpenChanged</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">Callback invoked when the window open 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/dialog" class="text-primary hover:underline">Dialog</a> — Modal dialog that blocks interaction with the rest of the page.</li>
        <li><a href="/components/sheet" class="text-primary hover:underline">Sheet</a> — Slide-in panel from an edge — less intrusive than a dialog.</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — Anchored floating panel positioned relative to a trigger.</li>
    </ul>
</div>

@code {
    private bool _win1Open;
    private bool _win2Open;
    private bool _win3Open;

    private string _basicCode = @"<Window @bind-Open=""_open"" Title=""My Window"" Width=""360px"" Height=""200px"">
    <p class=""text-sm text-muted-foreground"">Drag the title bar to move. Drag the bottom-right corner to resize.</p>
</Window>

<Button @onclick=""@(() => _open = true)"">Open Window</Button>

@code { private bool _open; }";

    private string _footerCode = @"<Window @bind-Open=""_open"" Title=""Save Document"">
    <p class=""text-sm text-muted-foreground"">You have unsaved changes.</p>
    <FooterContent>
        <div class=""flex gap-2 justify-end"">
            <Button Variant=""Button.ButtonVariant.Outline"" @onclick=""@(() => _open = false)"">Discard</Button>
            <Button @onclick=""@(() => _open = false)"">Save</Button>
        </div>
    </FooterContent>
</Window>";

    private string _noResizeCode = @"<Window @bind-Open=""_open"" Title=""Fixed Panel"" Resizable=""false"">
    <p class=""text-sm text-muted-foreground"">This window has a fixed size.</p>
</Window>";
}
