@page "/components/chip"

<PageTitle>Chip — Lumeo</PageTitle>

<PageHeader Title="Chip" Description="A compact element representing an input, attribute, or action — used for tags, filters, status labels, and selected items in multi-select fields." />

<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>Status tags indicating state such as active, pending, or archived</li>
        <li>Filter chips that users can toggle to narrow down content</li>
        <li>Removable labels for selected items in multi-select or tag inputs</li>
        <li>Category or topic indicators in lists and cards</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Variants" Code="@_variantsCode">
        <ChipGroup>
            <Chip>Default</Chip>
            <Chip Variant="Chip.ChipVariant.Outline">Outline</Chip>
            <Chip Variant="Chip.ChipVariant.Solid" Color="primary">Primary</Chip>
            <Chip Variant="Chip.ChipVariant.Solid" Color="destructive">Destructive</Chip>
            <Chip Variant="Chip.ChipVariant.Solid" Color="success">Success</Chip>
            <Chip Variant="Chip.ChipVariant.Solid" Color="warning">Warning</Chip>
        </ChipGroup>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Class="items-center gap-2 flex-wrap">
            <Chip Size="Chip.ChipSize.Sm">Small</Chip>
            <Chip>Default</Chip>
            <Chip Size="Chip.ChipSize.Lg">Large</Chip>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Closable" Code="@_closableCode">
        <Stack Gap="3">
            <ChipGroup>
                @foreach (var tag in _tags)
                {
                    var t = tag;
                    <Chip Closable="true" OnClose="@(() => _tags.Remove(t))">@t</Chip>
                }
            </ChipGroup>
            @if (!_tags.Any())
            {
                <Lumeo.Text Class="text-sm text-muted-foreground">All chips removed.</Lumeo.Text>
            }
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Clickable" Code="@_clickableCode">
        <Stack Gap="3">
            <ChipGroup>
                @foreach (var filter in _filters)
                {
                    var f = filter;
                    <Chip Clickable="true"
                          Variant="@(_activeFilter == f ? Chip.ChipVariant.Solid : Chip.ChipVariant.Outline)"
                          Color="@(_activeFilter == f ? "primary" : null)"
                          OnClick="@(() => _activeFilter = f)">
                        @f
                    </Chip>
                }
            </ChipGroup>
            <Lumeo.Text Class="text-sm text-muted-foreground">Active: @_activeFilter</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Variant (interactive)" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch variant to compare Default, Outline, and Solid styling.</Lumeo.Text>
            <Segmented @bind-Value="_chipVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Outline">Outline</SegmentedItem>
                <SegmentedItem Value="Solid">Solid</SegmentedItem>
            </Segmented>
            <ChipGroup>
                <Chip Variant="@_chipVariantEnum" Color="@(_chipVariant == "Solid" ? "primary" : null)">React</Chip>
                <Chip Variant="@_chipVariantEnum" Color="@(_chipVariant == "Solid" ? "success" : null)">TypeScript</Chip>
                <Chip Variant="@_chipVariantEnum" Color="@(_chipVariant == "Solid" ? "warning" : null)">Blazor</Chip>
            </ChipGroup>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Icon" Code="@_iconCode">
        <ChipGroup>
            <Chip Icon="🔥">Hot</Chip>
            <Chip Icon="⭐">Featured</Chip>
            <Chip Icon="✅" Variant="Chip.ChipVariant.Solid" Color="success">Verified</Chip>
            <Chip Icon="⚠️" Variant="Chip.ChipVariant.Solid" Color="warning">Warning</Chip>
        </ChipGroup>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> The close button on closable chips is now a 44×44 px touch target on small screens, meeting the WCAG minimum for touch affordances.
</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">Chip</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">ChipVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Default (bg-secondary), Outline (border only), Solid (colored fill).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Color</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">Color key for Solid variant: "primary", "destructive", "success", "warning".</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">ChipSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Sm, Default, or Lg.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Closable</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">Show an × button to remove the chip.</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">Fired when the × button is clicked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Clickable</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 hover effects and pointer cursor.</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">Fired when the chip is clicked (requires Clickable=true).</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">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Icon or emoji shown before the chip content.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Avatar</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">Image URL for a small rounded avatar shown before the content.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Press feedback when Clickable. Values: None, Scale, Brightness, Ripple.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</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">Disables click and close interactions and dims the chip.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">ChipGroup</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">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <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 text-muted-foreground">Chip components to display in a wrapping flex row.</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/badge" class="text-primary hover:underline">Badge</a> — Simpler status indicators without close or click actions</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Actionable elements when a chip is not the right fit</li>
    </ul>
</div>

@code {
    private string _chipVariant = "Default";
    private Chip.ChipVariant _chipVariantEnum =>
        Enum.TryParse<Chip.ChipVariant>(_chipVariant, out var v) ? v : Chip.ChipVariant.Default;
    private List<string> _tags = new() { "React", "TypeScript", "Tailwind", "Blazor", "C#" };
    private string _activeFilter = "All";
    private List<string> _filters = new() { "All", "Active", "Paused", "Completed" };

    private string _variantsCode = @"<ChipGroup>
    <Chip>Default</Chip>
    <Chip Variant=""Chip.ChipVariant.Outline"">Outline</Chip>
    <Chip Variant=""Chip.ChipVariant.Solid"" Color=""primary"">Primary</Chip>
    <Chip Variant=""Chip.ChipVariant.Solid"" Color=""destructive"">Destructive</Chip>
    <Chip Variant=""Chip.ChipVariant.Solid"" Color=""success"">Success</Chip>
</ChipGroup>";

    private string _sizesCode = @"<Flex Class=""items-center gap-2"">
    <Chip Size=""Chip.ChipSize.Sm"">Small</Chip>
    <Chip>Default</Chip>
    <Chip Size=""Chip.ChipSize.Lg"">Large</Chip>
</Flex>";

    private string _closableCode = @"<ChipGroup>
    @foreach (var tag in _tags)
    {
        var t = tag;
        <Chip Closable=""true"" OnClose=""@(() => _tags.Remove(t))"">@t</Chip>
    }
</ChipGroup>";

    private string _clickableCode = @"<ChipGroup>
    @foreach (var filter in _filters)
    {
        var f = filter;
        <Chip Clickable=""true""
              Variant=""@(_active == f ? Chip.ChipVariant.Solid : Chip.ChipVariant.Outline)""
              Color=""@(_active == f ? ""primary"" : null)""
              OnClick=""@(() => _active = f)"">
            @f
        </Chip>
    }
</ChipGroup>";

    private string _variantInteractiveCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""@Chip.ChipVariant.Default"">Default</SegmentedItem>
    <SegmentedItem Value=""@Chip.ChipVariant.Outline"">Outline</SegmentedItem>
    <SegmentedItem Value=""@Chip.ChipVariant.Solid"">Solid</SegmentedItem>
</Segmented>
<ChipGroup>
    <Chip Variant=""@_variant"">React</Chip>
    <Chip Variant=""@_variant"">TypeScript</Chip>
    <Chip Variant=""@_variant"">Blazor</Chip>
</ChipGroup>

@code { private Chip.ChipVariant _variant = Chip.ChipVariant.Default; }";

    private string _iconCode = @"<ChipGroup>
    <Chip Icon=""🔥"">Hot</Chip>
    <Chip Icon=""⭐"">Featured</Chip>
    <Chip Icon=""✅"" Variant=""Chip.ChipVariant.Solid"" Color=""success"">Verified</Chip>
</ChipGroup>";
}
