@page "/components/alert"
@inject Lumeo.Services.ToastService Toast

<PageTitle>Alert — Lumeo</PageTitle>

<PageHeader Title="Alert" Description="Displays a callout for important messages and feedback." />

<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 important messages that require user attention inline on the page</li>
        <li>Show status notifications such as success, warning, or error feedback</li>
        <li>Communicate system-wide announcements or feature changes</li>
        <li>Provide contextual warnings before a destructive or irreversible action</li>
        <li>Surface validation errors or informational tips within a form</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Alert>
                <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">Heads up!</Heading>
                <Lumeo.Text Size="sm" Leading="relaxed">You can add components to your app using the CLI.</Lumeo.Text>
            </Alert>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Destructive" Code="@_destructiveCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Alert Variant="Alert.AlertVariant.Destructive">
                <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">Error</Heading>
                <Lumeo.Text Size="sm" Leading="relaxed">Your session has expired. Please log in again.</Lumeo.Text>
            </Alert>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Icon" Code="@_iconCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <Alert ShowIcon="false">
                    <Flex Gap="3">
                        <DynamicIcon Name="Info" Class="h-4 w-4 mt-0.5" />
                        <Stack Gap="0">
                            <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">Information</Heading>
                            <Lumeo.Text Size="sm" Leading="relaxed">This action will update your preferences.</Lumeo.Text>
                        </Stack>
                    </Flex>
                </Alert>
                <Alert Variant="Alert.AlertVariant.Destructive" ShowIcon="false">
                    <Flex Gap="3">
                        <DynamicIcon Name="CircleAlert" Class="h-4 w-4 mt-0.5" />
                        <Stack Gap="0">
                            <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">Something went wrong</Heading>
                            <Lumeo.Text Size="sm" Leading="relaxed">Could not save your changes. Please try again.</Lumeo.Text>
                        </Stack>
                    </Flex>
                </Alert>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Action" Code="@_actionCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <Alert ShowIcon="false">
                    <Flex Align="start" Justify="between" Gap="4">
                        <Flex Gap="3">
                            <DynamicIcon Name="Bell" Class="h-4 w-4 mt-0.5 text-primary" />
                            <Stack Gap="0">
                                <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">New feature available</Heading>
                                <Lumeo.Text Size="sm" Leading="relaxed">Dark mode is now available for all users. Try it out in Settings.</Lumeo.Text>
                            </Stack>
                        </Flex>
                        <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" Class="shrink-0"
                                OnClick="@(() => Toast.Success("Dark mode enabled!", "Your theme has been updated."))">
                            Try it
                        </Button>
                    </Flex>
                </Alert>
                <Alert Variant="Alert.AlertVariant.Destructive" ShowIcon="false">
                    <Flex Align="start" Justify="between" Gap="4">
                        <Flex Gap="3">
                            <DynamicIcon Name="CircleAlert" Class="h-4 w-4 mt-0.5" />
                            <Stack Gap="0">
                                <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">Subscription expired</Heading>
                                <Lumeo.Text Size="sm" Leading="relaxed">Your subscription has expired. Renew to continue using premium features.</Lumeo.Text>
                            </Stack>
                        </Flex>
                        <Button Size="Button.ButtonSize.Sm" Class="shrink-0"
                                OnClick="@(() => Toast.Info("Redirecting...", "Taking you to the billing page."))">Renew</Button>
                    </Flex>
                </Alert>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Dismissible" Code="@_dismissCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                @if (_showBanner)
                {
                    <Alert ShowIcon="false">
                        <Flex Align="start" Justify="between" Gap="2">
                            <Flex Gap="3">
                                <DynamicIcon Name="Star" Class="h-4 w-4 mt-0.5 text-primary" />
                                <Stack Gap="0">
                                    <Heading Level="5" Size="sm" Weight="medium" Class="mb-1 leading-none tracking-tight">Welcome to Lumeo!</Heading>
                                    <Lumeo.Text Size="sm" Leading="relaxed">Get started by exploring the components and patterns library.</Lumeo.Text>
                                </Stack>
                            </Flex>
                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="shrink-0 -mt-1 -mr-1"
                                    OnClick="@(() => _showBanner = false)">
                                <DynamicIcon Name="X" Class="h-4 w-4" />
                            </Button>
                        </Flex>
                    </Alert>
                }
                else
                {
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm"
                            OnClick="@(() => _showBanner = true)">Reset</Button>
                }
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Dismissible (IsDismissible)" Code="@_dismissibleCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="3">
                @if (_showAlert)
                {
                    <Alert IsDismissible="true" OnDismiss="@(() => _showAlert = false)">
                        <Lumeo.Text Weight="medium">Heads up!</Lumeo.Text>
                        <Lumeo.Text Size="sm" Class="mt-1">This alert can be dismissed.</Lumeo.Text>
                    </Alert>
                }
                @if (!_showAlert)
                {
                    <Button Variant="Button.ButtonVariant.Outline" OnClick="@(() => _showAlert = true)">Show Alert Again</Button>
                }
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="All Variants" Code="@_allVariantsCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="3">
                <Alert Variant="Alert.AlertVariant.Success"><Lumeo.Text Weight="medium">Success!</Lumeo.Text><Lumeo.Text Size="sm" Class="mt-1">Operation completed.</Lumeo.Text></Alert>
                <Alert Variant="Alert.AlertVariant.Warning"><Lumeo.Text Weight="medium">Warning</Lumeo.Text><Lumeo.Text Size="sm" Class="mt-1">Please review before continuing.</Lumeo.Text></Alert>
                <Alert Variant="Alert.AlertVariant.Info"><Lumeo.Text Weight="medium">Info</Lumeo.Text><Lumeo.Text Size="sm" Class="mt-1">Here's some helpful information.</Lumeo.Text></Alert>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive" Code="@_interactiveVariantCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Lumeo.Text Size="sm" Color="muted">Pick a variant to see it applied live.</Lumeo.Text>
                <Flex Wrap="true" Gap="2">
                    @foreach (var v in _variantOptions)
                    {
                        var variant = v;
                        <Button Size="Button.ButtonSize.Sm"
                                Variant="@(_selectedVariant == variant ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                                OnClick="@(() => _selectedVariant = variant)">@variant</Button>
                    }
                </Flex>
                <Alert Variant="@ParseVariant(_selectedVariant)">
                    <Lumeo.Text Weight="medium">@_selectedVariant alert</Lumeo.Text>
                    <Lumeo.Text Size="sm" Class="mt-1">This is a @_selectedVariant.ToLower() message.</Lumeo.Text>
                </Alert>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive" Code="@_interactiveSizeCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Lumeo.Text Size="sm" Color="muted">Pick a size to see it applied live.</Lumeo.Text>
                <Flex Gap="2">
                    @foreach (var s in new[] { "Small", "Medium", "Large" })
                    {
                        var size = s;
                        <Button Size="Button.ButtonSize.Sm"
                                Variant="@(_selectedSize == size ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                                OnClick="@(() => _selectedSize = size)">@size</Button>
                    }
                </Flex>
                <Alert Size="@ParseSize(_selectedSize)" Variant="Alert.AlertVariant.Info">
                    <Lumeo.Text Weight="medium">@_selectedSize size</Lumeo.Text>
                    <Lumeo.Text Size="sm" Class="mt-1">This alert uses the @_selectedSize.ToLower() size.</Lumeo.Text>
                </Alert>
            </Stack>
        </Container>
    </ComponentDemo>
</Stack>

<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>Dismiss the alert when it is dismissible</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Move focus to action buttons or the dismiss button inside the alert</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Activate the focused action or dismiss button</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">Alert</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">AlertVariant</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 alert. Values: Default, Destructive, Success, Warning, Info.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsDismissible</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">When true, renders a close button inside the alert.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnDismiss</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">Callback invoked when the dismiss button is clicked.</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">null</td><td class="p-3 text-muted-foreground">Optional heading text. Can also be provided via the AlertTitle child.</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 body text. Can also be provided via the AlertDescription child.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowIcon</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 to render the leading icon for the variant.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IconContent</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 icon slot that overrides the default variant icon.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">AutoDismissMs</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">null</td><td class="p-3 text-muted-foreground">When set, the alert dismisses itself after this many milliseconds.</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">AlertSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Medium</td><td class="p-3 text-muted-foreground">Controls padding and text size. Values: Small, Medium, Large.</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">Custom content rendered inside the alert body.</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/toast" class="text-primary hover:underline">Toast</a> — Use for transient notifications that auto-dismiss, rather than persistent inline alerts</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — Use when the message requires explicit user acknowledgement or a decision</li>
        <li><a href="/components/badge" class="text-primary hover:underline">Badge</a> — Use for small inline status labels rather than full callout blocks</li>
    </ul>
</div>

@code {
    private string[] _variantOptions = ["Default", "Destructive", "Success", "Warning", "Info"];
    private string _selectedVariant = "Default";
    private string _selectedSize = "Medium";

    private Alert.AlertVariant ParseVariant(string v) => v switch
    {
        "Destructive" => Alert.AlertVariant.Destructive,
        "Success"     => Alert.AlertVariant.Success,
        "Warning"     => Alert.AlertVariant.Warning,
        "Info"        => Alert.AlertVariant.Info,
        _             => Alert.AlertVariant.Default,
    };

    private Alert.AlertSize ParseSize(string s) => s switch
    {
        "Small" => Alert.AlertSize.Small,
        "Large" => Alert.AlertSize.Large,
        _       => Alert.AlertSize.Medium,
    };

    private string _interactiveVariantCode = @"@* Pick a variant to see it applied live *@
<Alert Variant=""Alert.AlertVariant.Success"">
    <Lumeo.Text Weight=""medium"">Success alert</Lumeo.Text>
    <Lumeo.Text Size=""sm"" Class=""mt-1"">This is a success message.</Lumeo.Text>
</Alert>";

    private string _interactiveSizeCode = @"@* Pick a size to see it applied live *@
<Alert Size=""Alert.AlertSize.Small"" Variant=""Alert.AlertVariant.Info"">
    <Lumeo.Text Weight=""medium"">Small size</Lumeo.Text>
    <Lumeo.Text Size=""sm"" Class=""mt-1"">This alert uses the small size.</Lumeo.Text>
</Alert>";

    private string _defaultCode = @"<Alert>
    <Heading Level=""5"" Size=""sm"" Weight=""medium"" Class=""mb-1 leading-none tracking-tight"">Heads up!</Heading>
    <Lumeo.Text Size=""sm"" Leading=""relaxed"">You can add components to your app using the CLI.</Lumeo.Text>
</Alert>";

    private string _destructiveCode = @"<Alert Variant=""Alert.AlertVariant.Destructive"">
    <Heading Level=""5"" Size=""sm"" Weight=""medium"" Class=""mb-1 leading-none tracking-tight"">Error</Heading>
    <Lumeo.Text Size=""sm"" Leading=""relaxed"">Your session has expired. Please log in again.</Lumeo.Text>
</Alert>";

    private string _iconCode = @"<Alert>
    <Flex Gap=""3"">
        <Blazicon Svg=""Lucide.Info"" class=""h-4 w-4 mt-0.5"" />
        <Stack Gap=""0"">
            <Heading Level=""5"" Size=""sm"" Weight=""medium"" Class=""mb-1 leading-none tracking-tight"">Information</Heading>
            <Lumeo.Text Size=""sm"" Leading=""relaxed"">This action will update your preferences.</Lumeo.Text>
        </Stack>
    </Flex>
</Alert>
<Alert Variant=""Alert.AlertVariant.Destructive"">
    <Flex Gap=""3"">
        <Blazicon Svg=""Lucide.CircleAlert"" class=""h-4 w-4 mt-0.5"" />
        <Stack Gap=""0"">
            <Heading Level=""5"" Size=""sm"" Weight=""medium"" Class=""mb-1 leading-none tracking-tight"">Something went wrong</Heading>
            <Lumeo.Text Size=""sm"" Leading=""relaxed"">Could not save your changes. Please try again.</Lumeo.Text>
        </Stack>
    </Flex>
</Alert>";

    private bool _showBanner = true;
    private bool _showAlert = true;

    private string _actionCode = @"<Alert>
    <Flex Align=""start"" Justify=""between"" Gap=""4"">
        <Flex Gap=""3"">
            <Blazicon Svg=""Lucide.Bell"" class=""h-4 w-4 mt-0.5 text-primary"" />
            <Stack Gap=""0"">
                <Heading Level=""5"" Size=""sm"" Weight=""medium"" Class=""mb-1 leading-none tracking-tight"">New feature available</Heading>
                <Lumeo.Text Size=""sm"" Leading=""relaxed"">Dark mode is now available for all users.</Lumeo.Text>
            </Stack>
        </Flex>
        <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Sm"">Try it</Button>
    </Flex>
</Alert>";

    private string _dismissCode = @"@if (_showBanner)
{
    <Alert>
        <Flex Align=""start"" Justify=""between"" Gap=""2"">
            <Flex Gap=""3"">
                <Blazicon Svg=""Lucide.Star"" class=""h-4 w-4 mt-0.5 text-primary"" />
                <Stack Gap=""0"">
                    <Heading Level=""5"" Size=""sm"" Weight=""medium"" Class=""mb-1 leading-none tracking-tight"">Welcome to Lumeo!</Heading>
                    <Lumeo.Text Size=""sm"" Leading=""relaxed"">Get started by exploring the components library.</Lumeo.Text>
                </Stack>
            </Flex>
            <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Icon""
                    OnClick=""@(() => _showBanner = false)"">
                <Blazicon Svg=""Lucide.X"" class=""h-4 w-4"" />
            </Button>
        </Flex>
    </Alert>
}

@code {
    private bool _showBanner = true;
}";

    private string _dismissibleCode = @"@if (_showAlert)
{
    <Alert IsDismissible=""true"" OnDismiss=""@(() => _showAlert = false)"">
        <Lumeo.Text Weight=""medium"">Heads up!</Lumeo.Text>
        <Lumeo.Text Size=""sm"" Class=""mt-1"">This alert can be dismissed.</Lumeo.Text>
    </Alert>
}
@if (!_showAlert)
{
    <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""@(() => _showAlert = true)"">Show Alert Again</Button>
}

@code {
    private bool _showAlert = true;
}";

    private string _allVariantsCode = @"<Alert Variant=""Alert.AlertVariant.Success"">
    <Lumeo.Text Weight=""medium"">Success!</Lumeo.Text>
    <Lumeo.Text Size=""sm"" Class=""mt-1"">Operation completed.</Lumeo.Text>
</Alert>
<Alert Variant=""Alert.AlertVariant.Warning"">
    <Lumeo.Text Weight=""medium"">Warning</Lumeo.Text>
    <Lumeo.Text Size=""sm"" Class=""mt-1"">Please review before continuing.</Lumeo.Text>
</Alert>
<Alert Variant=""Alert.AlertVariant.Info"">
    <Lumeo.Text Weight=""medium"">Info</Lumeo.Text>
    <Lumeo.Text Size=""sm"" Class=""mt-1"">Here's some helpful information.</Lumeo.Text>
</Alert>";
}
