@page "/components/dialog"

<PageTitle>Dialog — Lumeo</PageTitle>

<PageHeader Title="Dialog" Description="A modal dialog that overlays the main content and requires user interaction." />

<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>Present confirmation prompts for destructive or irreversible actions.</li>
        <li>Display forms that require the user's full attention, such as editing a profile.</li>
        <li>Show important decisions that must be acknowledged before continuing.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Dialog @bind-Open="_isOpen">
            <DialogTrigger data-testid="dialog-open-trigger">
                <Button Variant="Button.ButtonVariant.Outline">Edit Profile</Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Edit Profile</DialogTitle>
                    <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
                </DialogHeader>
                <Grid Columns="4" Gap="4" Class="items-center py-4">
                    <Label Class="text-right">Name</Label>
                    <Input Class="col-span-3" Value="John Doe" />
                    <Label Class="text-right">Username</Label>
                    <Input Class="col-span-3" Value="@("@johndoe")" />
                </Grid>
                <DialogFooter>
                    <DialogClose>
                        <Button Variant="Button.ButtonVariant.Outline">Cancel</Button>
                    </DialogClose>
                    <DialogClose>
                        <Button>Save Changes</Button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    </ComponentDemo>

    <ComponentDemo Title="Simple Dialog" Code="@_simpleCode">
        <Dialog @bind-Open="_isSimpleOpen">
            <DialogTrigger>
                <Button>Share</Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Share this document</DialogTitle>
                    <DialogDescription>Anyone with the link can view this document.</DialogDescription>
                </DialogHeader>
                <Stack Gap="4" Class="py-4">
                    <Input Value="https://example.com/share/abc123" />
                </Stack>
                <DialogFooter>
                    <DialogClose>
                        <Button>Copy Link</Button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    </ComponentDemo>

    <ComponentDemo Title="Confirmation Dialog" Code="@_confirmCode">
        <Dialog @bind-Open="_isConfirmOpen">
            <DialogTrigger>
                <Button Variant="Button.ButtonVariant.Destructive">
                    <DynamicIcon Name="Trash" Class="h-4 w-4" />
                    Delete Account
                </Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Are you absolutely sure?</DialogTitle>
                    <DialogDescription>
                        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <DialogClose>
                        <Button Variant="Button.ButtonVariant.Outline">Cancel</Button>
                    </DialogClose>
                    <DialogClose>
                        <Button Variant="Button.ButtonVariant.Destructive">Yes, delete account</Button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    </ComponentDemo>

    <ComponentDemo Title="Prevent Close" Code="@_preventCloseCode">
        <Dialog @bind-Open="_preventCloseOpen">
            <DialogTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Open Protected Dialog</Button>
            </DialogTrigger>
            <DialogContent PreventClose="true">
                <DialogHeader>
                    <DialogTitle>Unsaved Changes</DialogTitle>
                    <DialogDescription>You have unsaved changes. Are you sure you want to leave?</DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <Button Variant="Button.ButtonVariant.Outline" OnClick="@(() => _preventCloseOpen = false)">Discard</Button>
                    <Button OnClick="@(() => _preventCloseOpen = false)">Save Changes</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> The dialog close button is now a 44×44 px touch target on small screens, making it reliably tappable without accidentally dismissing or missing the button.
</Alert>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Closes the dialog (unless PreventClose is enabled).</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Cycles focus through focusable elements inside the dialog.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Shift+Tab</Kbd></TableCell><TableCell>Moves focus to the previous focusable element inside the dialog.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- 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">Dialog</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 dialog is open. Use with @@bind-Open for two-way binding.</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 open state changes. Part of the two-way binding pair.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpen</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">Alias for Open; kept for backwards compatibility with @@bind-IsOpen.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpenChanged</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">Alias for OpenChanged; kept for backwards compatibility with @@bind-IsOpen.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogContent</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">PreventClose</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">Prevents closing via backdrop click or Escape key.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">The dialog panel. Renders as a centered modal with a close button, backdrop, focus trap, and scroll lock. Must be a descendant of Dialog.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DialogSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Maximum width of the dialog. Values: Sm, Default, Lg, Xl, Full.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Scrollable</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">Allows the content area to scroll when it exceeds the viewport.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogTrigger</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 italic text-muted-foreground" colspan="4">Wraps any element and opens the dialog when clicked. Must be a descendant of Dialog.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogClose</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 italic text-muted-foreground" colspan="4">Wraps any element and closes the dialog when clicked. Must be a descendant of Dialog.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogHeader</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 italic text-muted-foreground" colspan="4">Container for dialog title and description. Renders as a flex column with spacing.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogFooter</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 italic text-muted-foreground" colspan="4">Container for dialog action buttons. Renders as a flex row (stacked on mobile).</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogTitle</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 italic text-muted-foreground" colspan="4">The dialog title rendered as an h2 with semibold styling.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DialogDescription</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 italic text-muted-foreground" colspan="4">Muted descriptive text rendered below the dialog title.</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/alert-dialog" class="text-primary hover:underline">AlertDialog</a> — A stricter dialog for confirmations that requires an explicit response.</li>
        <li><a href="/components/sheet" class="text-primary hover:underline">Sheet</a> — A panel that slides in from the edge for supplementary content.</li>
        <li><a href="/components/drawer" class="text-primary hover:underline">Drawer</a> — A bottom-sheet style overlay, ideal for mobile-friendly interactions.</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — A lightweight overlay anchored to a trigger, for non-modal content.</li>
    </ul>
</div>

@code {
    private bool _isOpen;
    private bool _isSimpleOpen;
    private bool _isConfirmOpen;
    private bool _preventCloseOpen;

    private string _preventCloseCode = @"<Dialog @bind-Open=""_preventCloseOpen"">
    <DialogTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Protected Dialog</Button>
    </DialogTrigger>
    <DialogContent PreventClose=""true"">
        <DialogHeader>
            <DialogTitle>Unsaved Changes</DialogTitle>
            <DialogDescription>You have unsaved changes. Are you sure you want to leave?</DialogDescription>
        </DialogHeader>
        <DialogFooter>
            <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""@(() => _preventCloseOpen = false)"">Discard</Button>
            <Button OnClick=""@(() => _preventCloseOpen = false)"">Save Changes</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

@code {
    private bool _preventCloseOpen;
}";

    private string _defaultCode = @"<Dialog @bind-Open=""_isOpen"">
    <DialogTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Edit Profile</Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Edit Profile</DialogTitle>
            <DialogDescription>Make changes to your profile here.</DialogDescription>
        </DialogHeader>
        <Grid Columns=""4"" Gap=""4"" Class=""items-center py-4"">
            <Label Class=""text-right"">Name</Label>
            <Input Class=""col-span-3"" Value=""John Doe"" />
            <Label Class=""text-right"">Username</Label>
            <Input Class=""col-span-3"" Value=""@johndoe"" />
        </Grid>
        <DialogFooter>
            <DialogClose>
                <Button Variant=""Button.ButtonVariant.Outline"">Cancel</Button>
            </DialogClose>
            <DialogClose>
                <Button>Save Changes</Button>
            </DialogClose>
        </DialogFooter>
    </DialogContent>
</Dialog>

@code {
    private bool _isOpen;
}";

    private string _simpleCode = @"<Dialog @bind-Open=""_isOpen"">
    <DialogTrigger>
        <Button>Share</Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Share this document</DialogTitle>
            <DialogDescription>Anyone with the link can view this document.</DialogDescription>
        </DialogHeader>
        <Stack Gap=""4"" Class=""py-4"">
            <Input Value=""https://example.com/share/abc123"" />
        </Stack>
        <DialogFooter>
            <DialogClose>
                <Button>Copy Link</Button>
            </DialogClose>
        </DialogFooter>
    </DialogContent>
</Dialog>

@code {
    private bool _isOpen;
}";

    private string _confirmCode = @"<Dialog @bind-Open=""_isOpen"">
    <DialogTrigger>
        <Button Variant=""Button.ButtonVariant.Destructive"">
            <Blazicon Svg=""Lucide.Trash"" class=""h-4 w-4"" /> Delete Account
        </Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Are you absolutely sure?</DialogTitle>
            <DialogDescription>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
            </DialogDescription>
        </DialogHeader>
        <DialogFooter>
            <DialogClose>
                <Button Variant=""Button.ButtonVariant.Outline"">Cancel</Button>
            </DialogClose>
            <DialogClose>
                <Button Variant=""Button.ButtonVariant.Destructive"">Yes, delete account</Button>
            </DialogClose>
        </DialogFooter>
    </DialogContent>
</Dialog>

@code {
    private bool _isOpen;
}";
}
