@page "/components/rating"

<PageTitle>Rating — Lumeo</PageTitle>

<PageHeader Title="Rating" Description="A star rating input for collecting 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>Product or service reviews where users submit star ratings</li>
        <li>Feedback forms for satisfaction or experience scoring</li>
        <li>Displaying average ratings in read-only mode on product cards</li>
        <li>Any scenario requiring a quick visual numeric rating (e.g., difficulty, quality)</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Rating" Code="@_codeBasic">
        <Rating @bind-Value="_rating1" />
    </ComponentDemo>

    <ComponentDemo Title="Half Stars" Code="@_codeHalf">
        <Stack Gap="2">
            <Rating @bind-Value="_rating2" AllowHalf="true" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_rating2</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_codeSizes">
        <Stack Gap="3">
            <Rating Value="3" ReadOnly="true" Size="Rating.RatingSize.Small" />
            <Rating Value="3" ReadOnly="true" />
            <Rating Value="3" ReadOnly="true" Size="Rating.RatingSize.Large" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Read-Only" Code="@_codeReadonly">
        <Rating Value="4.5" ReadOnly="true" AllowHalf="true" />
    </ComponentDemo>

    <ComponentDemo Title="Custom Max" Code="@_codeMax">
        <Rating @bind-Value="_rating3" Max="10" />
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive preview" Code="@_codeSizeInteractive">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see the star scale live.</Lumeo.Text>
            <Segmented @bind-Value="_previewRatingSize">
                <SegmentedItem Value="Small">Small</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Large">Large</SegmentedItem>
            </Segmented>
            <Rating @bind-Value="_previewRatingValue"
                    Size="_ratingSizeEnum" />
            <Lumeo.Text Size="sm" Color="muted">Size: @_previewRatingSize — Value: @_previewRatingValue</Lumeo.Text>
        </Stack>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> The star rating now uses pointer events so users can drag a finger across the stars to set a value in one smooth gesture — no need to lift and tap each star individually.
</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">Rating</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">Value</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Current rating value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Max</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 stars.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">AllowHalf</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">Enable half-star precision.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ReadOnly</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">Disable user interaction.</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">RatingSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Default</td><td class="p-3 text-muted-foreground">Star size. Values: Small, Default, Large.</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">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Custom icon replacing default stars.</td></tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;double&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Two-way binding callback; fires when the rating changes.</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 used for each rating unit.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ErrorText</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">Error message displayed below the rating when Invalid is true.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">HelperText</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">Helper text shown below the rating when not invalid.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Invalid</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">Applies error styling. Syncs with a parent FormField.</td>
                        </tr>
                        <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">Label rendered above the rating (standalone, without FormField).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Name</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">HTML name attribute for form submission.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Required</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">Marks the field as required. Syncs with a parent FormField.</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/slider" class="text-primary hover:underline">Slider</a> — Continuous range input when discrete star levels are insufficient</li>
        <li><a href="/components/progress" class="text-primary hover:underline">Progress</a> — Display a score or completion percentage as a bar</li>
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Free-form numeric input for precise rating values</li>
    </ul>
</div>

@code {
    private double _rating1 = 3;
    private double _rating2 = 3.5;
    private double _rating3 = 7;

    private string _codeBasic = @"<Rating @bind-Value=""_rating"" />";
    private string _codeHalf = @"<Rating @bind-Value=""_rating"" AllowHalf=""true"" />";
    private string _codeSizes = @"<Rating Value=""3"" ReadOnly=""true"" Size=""Rating.RatingSize.Small"" />
<Rating Value=""3"" ReadOnly=""true"" />
<Rating Value=""3"" ReadOnly=""true"" Size=""Rating.RatingSize.Large"" />";
    private string _codeReadonly = @"<Rating Value=""4.5"" ReadOnly=""true"" AllowHalf=""true"" />";
    private string _codeMax = @"<Rating @bind-Value=""_rating"" Max=""10"" />";

    private string _previewRatingSize = "Default";
    private double _previewRatingValue = 3;
    private Rating.RatingSize _ratingSizeEnum =>
        Enum.TryParse<Rating.RatingSize>(_previewRatingSize, out var s) ? s : Rating.RatingSize.Default;

    private string _codeSizeInteractive = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Small"">Small</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Large"">Large</SegmentedItem>
</Segmented>
<Rating @bind-Value=""_rating"" Size=""@Enum.Parse<Rating.RatingSize>(_size)"" />

@code {
    private string _size = ""Default"";
    private double _rating = 3;
}";
}
