@page "/components/toast"

@using Lumeo.Services

<PageTitle>Toast — Lumeo</PageTitle>

<PageHeader Title="Toast" Description="Displays a temporary notification popup message." />

<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>Show non-blocking notifications that do not interrupt the user's workflow.</li>
        <li>Confirm the result of an action such as saving, copying, or deleting.</li>
        <li>Display async operation results like API responses or background task completions.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default Toast" Code="@_defaultCode">
        <Button OnClick="ShowDefault">Show Toast</Button>
    </ComponentDemo>

    <ComponentDemo Title="Success Toast" Code="@_successCode">
        <Button Variant="Button.ButtonVariant.Outline" OnClick="ShowSuccess">Show Success</Button>
    </ComponentDemo>

    <ComponentDemo Title="Destructive Toast" Code="@_destructiveCode">
        <Button Variant="Button.ButtonVariant.Destructive" OnClick="ShowError">Show Error</Button>
    </ComponentDemo>

    <ComponentDemo Title="All Variants" Code="@_allCode">
        <Flex Wrap="true" Gap="2">
            <Button OnClick="ShowDefault">Default</Button>
            <Button Variant="Button.ButtonVariant.Secondary" OnClick="ShowSuccess">Success</Button>
            <Button Variant="Button.ButtonVariant.Destructive" OnClick="ShowError">Error</Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Messages" Code="@_customCode">
        <Flex Wrap="true" Gap="2">
            <Button Variant="Button.ButtonVariant.Outline" OnClick="ShowSaved">
                <DynamicIcon Name="Check" Class="h-4 w-4" /> Saved
            </Button>
            <Button Variant="Button.ButtonVariant.Outline" OnClick="ShowCopied">
                <DynamicIcon Name="Copy" Class="h-4 w-4" /> Copy Link
            </Button>
            <Button Variant="Button.ButtonVariant.Outline" OnClick="ShowDeleted">
                <DynamicIcon Name="Trash" Class="h-4 w-4" /> Delete Item
            </Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Toast with Actions" Code="@_actionsCode">
        <Button OnClick="@ShowWithAction">Show with Action</Button>
    </ComponentDemo>

    <ComponentDemo Title="Persistent Toast" Code="@_persistentCode">
        <Button OnClick="@ShowPersistent">Show Persistent</Button>
    </ComponentDemo>

    <ComponentDemo Title="Promise Toast" Code="@_promiseCode">
        <Button OnClick="@ShowPromise">Save Changes</Button>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a variant then show a toast to see it applied live.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var v in new[] { ToastVariant.Default, ToastVariant.Success, ToastVariant.Destructive, ToastVariant.Warning, ToastVariant.Info })
                {
                    var variant = v;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_toastVariant == variant ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _toastVariant = variant)">@variant</Button>
                }
            </Flex>
            <Button OnClick="ShowVariantToast">Show @_toastVariant toast</Button>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Position — interactive" Code="@_positionInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a position then click Show to see where the toast appears.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var p in Enum.GetValues<ToastPosition>())
                {
                    var pos = p;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_toastPosition == pos ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _toastPosition = pos)">@pos</Button>
                }
            </Flex>
            <Button Variant="Button.ButtonVariant.Outline" OnClick="ShowPositionToast">Show at @_toastPosition</Button>
        </Stack>
    </ComponentDemo>
</Stack>

<ToastProvider />

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> The dismiss button is now always visible and 44×44 px on small screens (<code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">opacity-100 sm:opacity-0 sm:group-hover:opacity-100</code>), meeting the WCAG touch-target minimum without requiring a hover.
</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">Toast</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">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ToastVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style of the toast. Values: Default, Success, Destructive, Warning, Info.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToastOptions</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">—</td>
                            <td class="p-3 text-muted-foreground">The main heading text of the toast.</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">null</td>
                            <td class="p-3 text-muted-foreground">Optional secondary text displayed below the title.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Duration</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">5000</td>
                            <td class="p-3 text-muted-foreground">Auto-dismiss duration in milliseconds. Set to 0 to disable auto-dismiss.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Dismissible</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">Whether the toast can be manually dismissed by the user.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ActionLabel</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">Label text for the optional action button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnAction</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Action?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the action button is clicked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Position</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ToastPosition?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Per-toast position override. When null the toast inherits the position from the ToastProvider.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ToastVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style. Values: Default, Success, Destructive, Warning, Info.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToastService</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">Method</th>
                            <th class="text-left p-3 font-medium text-foreground">Signature</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">Show</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Show(title, description?)</td>
                            <td class="p-3 text-muted-foreground">Shows a default toast with optional description.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Show</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Show(ToastOptions)</td>
                            <td class="p-3 text-muted-foreground">Shows a toast with full options including action button and duration.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Success</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Success(title, description?)</td>
                            <td class="p-3 text-muted-foreground">Shows a success-styled toast.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Error</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Error(title, description?)</td>
                            <td class="p-3 text-muted-foreground">Shows a destructive-styled error toast.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Promise</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Promise(task, loading, success, error)</td>
                            <td class="p-3 text-muted-foreground">Shows loading state while the async task runs, then transitions to success or error.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToastProvider</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">Position</td><td class="p-3 font-mono text-xs text-muted-foreground">ToastPosition</td><td class="p-3 font-mono text-xs text-muted-foreground">BottomRight</td><td class="p-3 text-muted-foreground">Viewport corner the toasts stack in. Values: TopLeft, TopRight, TopCenter, BottomLeft, BottomRight, BottomCenter.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">DefaultDuration</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">4000</td><td class="p-3 text-muted-foreground">Default lifetime for toasts in milliseconds when Duration is not specified.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">MaxToasts</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">5</td><td class="p-3 text-muted-foreground">Maximum number of toasts shown at once; older toasts are dismissed.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToastAction / ToastClose</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">Label</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">ToastAction — button text.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OnClick</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">ToastAction — invoked when the action button is clicked.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OnClose</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">ToastClose — invoked when the close button dismisses the toast.</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" class="text-primary hover:underline">Alert</a> — Use for persistent, inline messages that stay visible on the page.</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — Use when a notification requires user acknowledgment or action.</li>
        <li><a href="/components/progress" class="text-primary hover:underline">Progress</a> — Pair with toast for showing progress of long-running operations.</li>
    </ul>
</div>

@inject ToastService ToastService

@code {
    private ToastVariant _toastVariant = ToastVariant.Default;
    private ToastPosition _toastPosition = ToastPosition.BottomRight;

    private void ShowVariantToast()
    {
        ToastService.Show(new ToastOptions
        {
            Title = $"{_toastVariant} Toast",
            Description = $"This is a {_toastVariant.ToString().ToLower()} toast message.",
            Variant = _toastVariant,
        });
    }

    private void ShowPositionToast()
    {
        ToastService.Show(new ToastOptions
        {
            Title = "Position demo",
            Description = $"Appearing at {_toastPosition}.",
            Position = _toastPosition,
        });
    }

    private string _variantInteractiveCode = @"@inject ToastService ToastService

<Button OnClick=""@(() => ToastService.Show(new ToastOptions { Title = ""Info"", Variant = ToastVariant.Info }))"">
    Show Info Toast
</Button>";

    private string _positionInteractiveCode = @"@inject ToastService ToastService

<Button OnClick=""@(() => ToastService.Show(new ToastOptions {
    Title = ""Top-right"",
    Position = ToastPosition.TopRight
}))"">Show at TopRight</Button>";

    private void ShowDefault()
    {
        ToastService.Show("Scheduled", "Your event has been created.");
    }

    private void ShowSuccess()
    {
        ToastService.Success("Success", "Your changes have been saved.");
    }

    private void ShowError()
    {
        ToastService.Error("Error", "Something went wrong. Please try again.");
    }

    private void ShowSaved()
    {
        ToastService.Success("Changes saved", "Your profile has been updated successfully.");
    }

    private void ShowCopied()
    {
        ToastService.Show("Link copied", "The link has been copied to your clipboard.");
    }

    private void ShowDeleted()
    {
        ToastService.Error("Item deleted", "The item has been removed from your list.");
    }

    private string _defaultCode = @"@inject ToastService ToastService

<Button OnClick=""ShowDefault"">Show Toast</Button>

<ToastProvider />

@code {
    private void ShowDefault()
    {
        ToastService.Show(""Scheduled"", ""Your event has been created."");
    }
}";

    private string _successCode = @"ToastService.Success(""Success"", ""Your changes have been saved."");";

    private string _destructiveCode = @"ToastService.Error(""Error"", ""Something went wrong. Please try again."");";

    private string _allCode = @"@inject ToastService ToastService

<Button OnClick=""ShowDefault"">Default</Button>
<Button OnClick=""ShowSuccess"">Success</Button>
<Button OnClick=""ShowError"">Error</Button>

<ToastProvider />

@code {
    private void ShowDefault()
        => ToastService.Show(""Scheduled"", ""Your event has been created."");
    private void ShowSuccess()
        => ToastService.Success(""Success"", ""Your changes have been saved."");
    private void ShowError()
        => ToastService.Error(""Error"", ""Something went wrong. Please try again."");
}";

    private string _customCode = @"// Success with description
ToastService.Success(""Changes saved"", ""Your profile has been updated successfully."");

// Default info toast
ToastService.Show(""Link copied"", ""The link has been copied to your clipboard."");

// Error with description
ToastService.Error(""Item deleted"", ""The item has been removed from your list."");";

    private void ShowWithAction()
    {
        ToastService.Show(new ToastOptions
        {
            Title = "Event Created",
            Description = "Friday, February 28, 2026 at 5:00 PM",
            ActionLabel = "Undo",
            OnAction = () => ToastService.Show("Undo", "Event creation undone")
        });
    }

    private void ShowPersistent()
    {
        ToastService.Show(new ToastOptions
        {
            Title = "Upload in progress",
            Description = "Uploading file...",
            Duration = 0,
            Dismissible = true
        });
    }

    private async Task ShowPromise()
    {
        await ToastService.Promise(
            async () => { await Task.Delay(2000); return true; },
            new ToastOptions { Title = "Saving changes...", Variant = ToastVariant.Default },
            result => new ToastOptions { Title = "Changes saved successfully!", Variant = ToastVariant.Success },
            ex => new ToastOptions { Title = "Failed to save changes", Variant = ToastVariant.Destructive }
        );
    }

    private string _actionsCode = @"@inject ToastService ToastService

<Button OnClick=""@ShowWithAction"">Show with Action</Button>

<ToastProvider />

@code {
    private void ShowWithAction()
    {
        ToastService.Show(new ToastOptions
        {
            Title = ""Event Created"",
            Description = ""Friday, February 28, 2026 at 5:00 PM"",
            ActionLabel = ""Undo"",
            OnAction = () => ToastService.Show(""Undo"", ""Event creation undone"")
        });
    }
}";

    private string _persistentCode = @"@inject ToastService ToastService

<Button OnClick=""@ShowPersistent"">Show Persistent</Button>

<ToastProvider />

@code {
    private void ShowPersistent()
    {
        ToastService.Show(new ToastOptions
        {
            Title = ""Upload in progress"",
            Description = ""Uploading file..."",
            Duration = 0,
            Dismissible = true
        });
    }
}";

    private string _promiseCode = @"@inject ToastService ToastService

<Button OnClick=""@ShowPromise"">Save Changes</Button>

<ToastProvider />

@code {
    private async Task ShowPromise()
    {
        await ToastService.Promise(
            async () => { await Task.Delay(2000); return true; },
            ""Saving changes..."",
            ""Changes saved successfully!"",
            ""Failed to save changes""
        );
    }
}";
}
