@page "/components/pop-confirm"

<PageTitle>Pop Confirm — Lumeo</PageTitle>

<PageHeader Title="Pop Confirm" Description="A lightweight confirmation popover that appears inline — prompts users before executing irreversible actions without interrupting the full page flow." />

<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>Lightweight confirmations for delete, archive, or destructive actions</li>
        <li>Inline confirmation without the weight of a full modal dialog</li>
        <li>Quick yes/no prompts attached to buttons or action triggers</li>
        <li>Situations where context should remain visible during confirmation</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Pop Confirm" Code="@_basicCode">
        <Flex Class="items-center gap-3 flex-wrap">
            <PopConfirm Title="Delete this item?"
                        Description="This action cannot be undone."
                        OnConfirm="@(() => _result = "Confirmed!")"
                        OnCancel="@(() => _result = "Cancelled.")">
                <Button Variant="Button.ButtonVariant.Outline">Delete item</Button>
            </PopConfirm>
            @if (!string.IsNullOrEmpty(_result))
            {
                <Lumeo.Text Class="text-sm text-muted-foreground">@_result</Lumeo.Text>
            }
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Destructive Action" Code="@_destructiveCode">
        <PopConfirm Title="Delete account?"
                    Description="All your data will be permanently removed. This cannot be undone."
                    ConfirmText="Yes, delete"
                    CancelText="Cancel"
                    IsDestructive="true"
                    OnConfirm="@(() => _deleteResult = "Account deleted.")">
            <Button Variant="Button.ButtonVariant.Destructive">Delete Account</Button>
        </PopConfirm>
        @if (!string.IsNullOrEmpty(_deleteResult))
        {
            <Alert Class="mt-3" Variant="Alert.AlertVariant.Destructive" Title="@_deleteResult">
            </Alert>
        }
    </ComponentDemo>

    <ComponentDemo Title="Custom Texts" Code="@_customCode">
        <PopConfirm Title="Archive project?"
                    Description="The project will be moved to your archive."
                    ConfirmText="Archive"
                    CancelText="Keep active"
                    OnConfirm="@(() => _archiveResult = "Archived.")">
            <Button Variant="Button.ButtonVariant.Secondary">Archive Project</Button>
        </PopConfirm>
        <Lumeo.Text Class="text-sm text-muted-foreground mt-2">@_archiveResult</Lumeo.Text>
    </ComponentDemo>

    <ComponentDemo Title="No Description" Code="@_noDescCode">
        <PopConfirm Title="Mark as complete?"
                    OnConfirm="@(() => _completeResult = "Marked complete!")">
            <Button Variant="Button.ButtonVariant.Ghost">
                <DynamicIcon Name="Check" Class="h-4 w-4 mr-2" />
                Complete
            </Button>
        </PopConfirm>
        <Lumeo.Text Class="text-sm text-muted-foreground mt-2">@_completeResult</Lumeo.Text>
    </ComponentDemo>

    <ComponentDemo Title="IsDestructive — interactive preview" Description="Toggle the switch to flip between standard and destructive confirmation styles." Code="@_interactiveDestructiveCode">
        <Stack Gap="4">
            <Flex Align="center" Gap="3">
                <Switch @bind-Checked="_popConfirmDestructive" />
                <Lumeo.Text Size="sm" Color="muted">Destructive mode</Lumeo.Text>
            </Flex>
            <Flex Align="center" Gap="3" Wrap="true">
                <PopConfirm Title="Remove this item?"
                            Description="This will permanently remove the item from your workspace."
                            ConfirmText="@(_popConfirmDestructive ? "Yes, remove" : "Confirm")"
                            IsDestructive="@_popConfirmDestructive"
                            OnConfirm="@(() => _interactiveResult = _popConfirmDestructive ? "Removed!" : "Confirmed!")">
                    <Button Variant="@(_popConfirmDestructive ? Button.ButtonVariant.Destructive : Button.ButtonVariant.Outline)">
                        @(_popConfirmDestructive ? "Remove item" : "Perform action")
                    </Button>
                </PopConfirm>
                @if (!string.IsNullOrEmpty(_interactiveResult))
                {
                    <Lumeo.Text Class="text-sm text-muted-foreground">@_interactiveResult</Lumeo.Text>
                }
            </Flex>
            <Lumeo.Text Class="text-xs text-muted-foreground">Currently: @(_popConfirmDestructive ? "destructive" : "standard")</Lumeo.Text>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- 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">PopConfirm</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">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">"Are you sure?"</td>
                            <td class="p-3 text-muted-foreground">The confirmation question shown in the popover.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Description</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">Optional explanatory text below the title.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ConfirmText</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">"Yes"</td>
                            <td class="p-3 text-muted-foreground">Label for the confirm button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">CancelText</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">"No"</td>
                            <td class="p-3 text-muted-foreground">Label for the cancel button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsDestructive</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">Style the confirm button as destructive (red).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnConfirm</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Fired when the user confirms.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnCancel</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Fired when the user cancels.</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">—</td>
                            <td class="p-3 text-muted-foreground">The trigger element (button, link, etc.) that opens the confirmation.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Placement</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">"top"</td>
                            <td class="p-3 text-muted-foreground">Popover placement relative to trigger.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Icon</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SvgIcon?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Optional leading icon (Blazicons) shown in the confirmation popover.</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/popover" class="text-primary hover:underline">Popover</a> — General-purpose popover for custom content overlays</li>
        <li><a href="/components/alert-dialog" class="text-primary hover:underline">AlertDialog</a> — Full modal dialog for more complex confirmation flows</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Action triggers that pair with PopConfirm for destructive actions</li>
    </ul>
</div>

@code {
    private string _result = "";
    private string _deleteResult = "";
    private string _archiveResult = "";
    private string _completeResult = "";
    private bool _popConfirmDestructive;
    private string _interactiveResult = "";

    private string _basicCode = @"<PopConfirm Title=""Delete this item?""
            Description=""This action cannot be undone.""
            OnConfirm=""@HandleConfirm"">
    <Button Variant=""Button.ButtonVariant.Outline"">Delete item</Button>
</PopConfirm>";

    private string _destructiveCode = @"<PopConfirm Title=""Delete account?""
            Description=""All data will be permanently removed.""
            ConfirmText=""Yes, delete""
            IsDestructive=""true""
            OnConfirm=""@HandleDelete"">
    <Button Variant=""Button.ButtonVariant.Destructive"">Delete Account</Button>
</PopConfirm>";

    private string _customCode = @"<PopConfirm Title=""Archive project?""
            ConfirmText=""Archive""
            CancelText=""Keep active""
            OnConfirm=""@HandleArchive"">
    <Button Variant=""Button.ButtonVariant.Secondary"">Archive Project</Button>
</PopConfirm>";

    private string _noDescCode = @"<PopConfirm Title=""Mark as complete?"" OnConfirm=""@HandleComplete"">
    <Button Variant=""Button.ButtonVariant.Ghost"">Complete</Button>
</PopConfirm>";

    private string _interactiveDestructiveCode = @"<Switch @bind-Checked=""_destructive"" />

<PopConfirm Title=""Remove this item?""
            Description=""This will permanently remove the item from your workspace.""
            ConfirmText=""@(_destructive ? \""Yes, remove\"" : \""Confirm\"")""
            IsDestructive=""@_destructive""
            OnConfirm=""@HandleConfirm"">
    <Button Variant=""@(_destructive ? Button.ButtonVariant.Destructive : Button.ButtonVariant.Outline)"">
        @(_destructive ? ""Remove item"" : ""Perform action"")
    </Button>
</PopConfirm>

@code {
    private bool _destructive;
}";
}
