@page "/components/result"

<PageTitle>Result — Lumeo</PageTitle>

<PageHeader Title="Result" Description="Displays the outcome of an operation with status icon, title, description, and action buttons." />

<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>Success or error pages after a form submission or payment</li>
        <li>Operation outcomes such as completed actions or failed processes</li>
        <li>Confirmation screens showing the result of a user action</li>
        <li>HTTP error pages like 404 Not Found or 403 Forbidden</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Success" Code="@_codeSuccess">
        <Result Status="Result.ResultStatus.Success" Title="Payment Successful" SubTitle="Order #2024-0127 has been confirmed.">
            <Extra>
                <Button>Go to Dashboard</Button>
                <Button Variant="Button.ButtonVariant.Outline">View Order</Button>
            </Extra>
        </Result>
    </ComponentDemo>

    <ComponentDemo Title="Error" Code="@_codeError">
        <Result Status="Result.ResultStatus.Error" Title="Submission Failed" SubTitle="Please check your form and try again.">
            <Extra>
                <Button Variant="Button.ButtonVariant.Destructive">Retry</Button>
            </Extra>
        </Result>
    </ComponentDemo>

    <ComponentDemo Title="All Statuses" Code="@_codeStatuses">
        <Grid Columns="2" Gap="4">
            <Result Status="Result.ResultStatus.Warning" Title="Warning" SubTitle="Proceed with caution." />
            <Result Status="Result.ResultStatus.Info" Title="Information" SubTitle="Here is some useful info." />
            <Result Status="Result.ResultStatus.NotFound" Title="404 Not Found" SubTitle="The page you are looking for does not exist." />
            <Result Status="Result.ResultStatus.Forbidden" Title="403 Forbidden" SubTitle="You do not have permission to access this." />
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Status — interactive" Code="@_codeStatusInteractive">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a status to see it applied live.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var s in _statusOptions)
                {
                    var status = s;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_selectedStatus == status ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _selectedStatus = status)">@status</Button>
                }
            </Flex>
            <Result Status="@ParseResultStatus(_selectedStatus)"
                    Title="@($"{_selectedStatus} Result")"
                    SubTitle="@($"This is a {_selectedStatus.ToLower()} result page.")" />
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</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">Status</td><td class="p-3 font-mono text-xs text-muted-foreground">ResultStatus</td><td class="p-3 font-mono text-xs text-muted-foreground">Info</td><td class="p-3 text-muted-foreground">Status type. Values: Success, Error, Warning, Info, NotFound, Forbidden, ServerError.</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">ResultSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Medium</td><td class="p-3 text-muted-foreground">Component size. Values: Small, Medium, Large.</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">Main heading text.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">SubTitle</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">Secondary description text.</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 status icon.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Extra</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">Action buttons area below the description.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Class</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">Additional CSS classes.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">AdditionalAttributes</td><td class="p-3 font-mono text-xs text-muted-foreground">Dictionary&lt;string, object&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Additional HTML attributes.</td></tr>
</tbody>
        </table>
    </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> — Inline status messages within a page rather than full-page outcomes</li>
        <li><a href="/components/empty-state" class="text-primary hover:underline">EmptyState</a> — Placeholder when there is no data, rather than an operation result</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Container for embedding result content within a layout</li>
    </ul>
</div>

@code {
    private string[] _statusOptions = ["Success", "Error", "Warning", "Info", "NotFound", "Forbidden", "ServerError"];
    private string _selectedStatus = "Success";

    private Result.ResultStatus ParseResultStatus(string s) => s switch
    {
        "Error"       => Result.ResultStatus.Error,
        "Warning"     => Result.ResultStatus.Warning,
        "Info"        => Result.ResultStatus.Info,
        "NotFound"    => Result.ResultStatus.NotFound,
        "Forbidden"   => Result.ResultStatus.Forbidden,
        "ServerError" => Result.ResultStatus.ServerError,
        _             => Result.ResultStatus.Success,
    };

    private string _codeStatusInteractive = @"<Result Status=""Result.ResultStatus.Success"" Title=""Success Result"" SubTitle=""This is a success result page."" />";

    private string _codeSuccess = @"<Result Status=""Result.ResultStatus.Success"" Title=""Payment Successful"" SubTitle=""Order confirmed."">
    <Extra>
        <Button>Go to Dashboard</Button>
        <Button Variant=""Button.ButtonVariant.Outline"">View Order</Button>
    </Extra>
</Result>";

    private string _codeError = @"<Result Status=""Result.ResultStatus.Error"" Title=""Submission Failed"" SubTitle=""Please check and try again."">
    <Extra>
        <Button Variant=""Button.ButtonVariant.Destructive"">Retry</Button>
    </Extra>
</Result>";

    private string _codeStatuses = @"<Result Status=""Result.ResultStatus.Warning"" Title=""Warning"" SubTitle=""Proceed with caution."" />
<Result Status=""Result.ResultStatus.Info"" Title=""Information"" SubTitle=""Useful info."" />
<Result Status=""Result.ResultStatus.NotFound"" Title=""404 Not Found"" SubTitle=""Page does not exist."" />
<Result Status=""Result.ResultStatus.Forbidden"" Title=""403 Forbidden"" SubTitle=""No permission."" />";
}
