Alert Dialog LLM

@inject IAlertDialogService AlertDialogService

<button @onclick="ShowConfirm">
    Show Confirmation
</button>

@code {
    private async Task ShowConfirm()
    {
        var confirmed = await AlertDialogService.ConfirmAsync(
            "Are you sure you want to proceed?",
            new AlertDialogOptions
            {
                Title = "Confirm Action",
                ConfirmText = "Yes, proceed",
                CancelText = "No, cancel"
            });

        if (confirmed)
        {
            // User confirmed
        }
        else
        {
            // User cancelled
        }
    }
}

@inject IAlertDialogService AlertDialogService

<button class="btn btn-destructive" @onclick="DeleteItem">
    Delete Item
</button>

@code {
    private async Task DeleteItem()
    {
        var confirmed = await AlertDialogService.ConfirmAsync(
            "This action cannot be undone. This will permanently delete the item and all associated data.",
            new AlertDialogOptions
            {
                Title = "Delete Item",
                ConfirmText = "Delete",
                CancelText = "Cancel",
                IsDestructive = true,
                AllowEscapeClose = false,
                AllowOverlayClose = false
            });

        if (confirmed)
        {
            // Perform delete operation
        }
    }
}

@inject IAlertDialogService AlertDialogService

<button @onclick="ShowCustomDialog">
    Show Custom Dialog
</button>

@code {
    private async Task ShowCustomDialog()
    {
        var result = await AlertDialogService.ConfirmAsync(
            "Please review the terms and conditions before continuing. By clicking accept, you agree to be bound by these terms.",
            new AlertDialogOptions
            {
                Title = "Terms & Conditions",
                ConfirmText = "I Accept",
                CancelText = "Decline",
                IsDestructive = false,
                AllowEscapeClose = true,
                AllowOverlayClose = false
            });

        if (result)
        {
            // User accepted terms
        }
        else
        {
            // User declined
        }
    }
}

@inject IAlertDialogService AlertDialogService

<div class="flex gap-2">
    <button @onclick="ShowSimpleConfirm">Simple</button>
    <button @onclick="ShowDestructiveConfirm">Destructive</button>
    <button @onclick="ShowNoEscapeConfirm">No Escape</button>
</div>

@code {
    private async Task ShowSimpleConfirm()
    {
        // Simple confirmation with defaults
        var confirmed = await AlertDialogService.ConfirmAsync("Are you sure?");

        if (confirmed)
        {
            // Proceed with action
        }
    }

    private async Task ShowDestructiveConfirm()
    {
        // Destructive action with warning
        var confirmed = await AlertDialogService.ConfirmAsync(
            "Permanently delete this item?",
            new AlertDialogOptions
            {
                Title = "Delete Item",
                IsDestructive = true
            });

        if (confirmed)
        {
            // Delete the item
        }
    }

    private async Task ShowNoEscapeConfirm()
    {
        // Dialog that cannot be dismissed with Escape
        var confirmed = await AlertDialogService.ConfirmAsync(
            "This requires your attention. Please confirm to continue.",
            new AlertDialogOptions
            {
                Title = "Attention Required",
                AllowEscapeClose = false,
                AllowOverlayClose = false
            });

        if (confirmed)
        {
            // User explicitly confirmed
        }
    }
}

/* Overlay styles */
.alert-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.alert-dialog-overlay[data-state="open"] {
    animation: fadeIn 200ms ease-out;
}

/* Content styles */
.alert-dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    min-width: 400px;
    max-width: 90vw;
    z-index: 1001;
}

.alert-dialog-content[data-state="open"] {
    animation: scaleIn 200ms ease-out;
}

/* Destructive dialog styling */
.alert-dialog-content[data-destructive] {
    border-left: 4px solid #ef4444;
}

/* Actions container */
.alert-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Button styling */
.alert-dialog-cancel {
    background: transparent;
    border: 1px solid #e0e0e0;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.alert-dialog-cancel:hover {
    background: #f5f5f5;
}

.alert-dialog-confirm {
    background: #0066cc;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.alert-dialog-confirm:hover {
    background: #0052a3;
}

/* Destructive confirm button */
.alert-dialog-content[data-destructive] .alert-dialog-confirm {
    background: #ef4444;
}

.alert-dialog-content[data-destructive] .alert-dialog-confirm:hover {
    background: #dc2626;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}