@page "/patterns"
@namespace Lumeo.Docs.Pages.PatternsIndex
@using Lumeo.Services
@using Lumeo.Docs.Services
@using Lumeo.Docs.Shared.Patterns
@inject IJSRuntime JS
@inject ToastService Toast
@inject PatternFilterService Filter
@implements IDisposable

<PageTitle>Patterns — Lumeo</PageTitle>

<ToastProvider Position="_toastPosition" />

<Stack Gap="8">
    <Stack Gap="1">
        <Heading Level="1" Size="3xl">Patterns</Heading>
        <Lumeo.Text Color="muted">Live component variants built with Lumeo.</Lumeo.Text>
    </Stack>

    <!-- Inline Category Filter -->
    <Flex Align="center" Gap="2" Class="overflow-x-auto pb-2">
        <button class="@CategoryClass("All")" @onclick='() => Filter.SetCategory("All")'>
            All <Lumeo.Text As="span" Class="ml-1 text-xs text-muted-foreground">@PatternFilterService.TotalCount</Lumeo.Text>
        </button>
        @foreach (var cat in PatternFilterService.Categories)
        {
            var c = cat;
            <button class="@CategoryClass(c.Name)" @onclick="() => Filter.SetCategory(c.Name)">
                @c.Name <Lumeo.Text As="span" Class="ml-1 text-xs text-muted-foreground">@c.Count</Lumeo.Text>
            </button>
        }
    </Flex>

    <!-- Pattern sections -->
    <Stack Gap="10">

        @if (Show("Accordion")) { <Section Title="Accordion" ShowHeading="IsAll"><AccordionPattern /></Section> }
        @if (Show("Alert")) { <Section Title="Alert" ShowHeading="IsAll"><AlertPattern /></Section> }
        @if (Show("AlertDialog")) { <Section Title="AlertDialog" ShowHeading="IsAll"><AlertDialogPattern /></Section> }
        @if (Show("AspectRatio")) { <Section Title="AspectRatio" ShowHeading="IsAll"><AspectRatioPattern /></Section> }
        @if (Show("Avatar")) { <Section Title="Avatar" ShowHeading="IsAll"><AvatarPattern /></Section> }
        @if (Show("BackToTop")) { <Section Title="BackToTop" ShowHeading="IsAll"><BackToTopPattern /></Section> }
        @if (Show("Badge")) { <Section Title="Badge" ShowHeading="IsAll"><BadgePattern /></Section> }
        @if (Show("Breadcrumb")) { <Section Title="Breadcrumb" ShowHeading="IsAll"><BreadcrumbPattern /></Section> }
        @if (Show("Button")) { <Section Title="Button" ShowHeading="IsAll"><ButtonPattern /></Section> }
        @if (Show("Calendar")) { <Section Title="Calendar" ShowHeading="IsAll"><Lumeo.Docs.Shared.Patterns.CalendarPattern /></Section> }
        @if (Show("Cascader")) { <Section Title="Cascader" ShowHeading="IsAll"><CascaderPattern /></Section> }
        @if (Show("Card")) { <Section Title="Card" ShowHeading="IsAll"><CardPattern /></Section> }
        @if (Show("Charts")) { <Section Title="Charts" ShowHeading="IsAll"><ChartPatternDemos /></Section> }
        @if (Show("Checkbox")) { <Section Title="Checkbox" ShowHeading="IsAll"><CheckboxPattern /></Section> }
        @if (Show("Collapsible")) { <Section Title="Collapsible" ShowHeading="IsAll"><CollapsiblePattern /></Section> }
        @if (Show("ColorPicker")) { <Section Title="ColorPicker" ShowHeading="IsAll"><ColorPickerPattern /></Section> }
        @if (Show("Combobox")) { <Section Title="Combobox" ShowHeading="IsAll"><ComboboxPattern /></Section> }
        @if (Show("Command")) { <Section Title="Command" ShowHeading="IsAll"><CommandPattern /></Section> }
        @if (Show("ContextMenu")) { <Section Title="ContextMenu" ShowHeading="IsAll"><ContextMenuPattern /></Section> }
        @if (Show("DatePicker")) { <Section Title="DatePicker" ShowHeading="IsAll"><DatePickerPattern /></Section> }
        @if (Show("Descriptions")) { <Section Title="Descriptions" ShowHeading="IsAll"><DescriptionsPattern /></Section> }
        @if (Show("Dialog")) { <Section Title="Dialog" ShowHeading="IsAll"><DialogPattern /></Section> }
        @if (Show("Drawer")) { <Section Title="Drawer" ShowHeading="IsAll"><DrawerPattern /></Section> }
        @if (Show("DropdownMenu")) { <Section Title="DropdownMenu" ShowHeading="IsAll"><DropdownMenuPattern /></Section> }
        @if (Show("EmptyState")) { <Section Title="EmptyState" ShowHeading="IsAll"><EmptyStatePattern /></Section> }
        @if (Show("FileUpload")) { <Section Title="FileUpload" ShowHeading="IsAll"><FileUploadPattern /></Section> }
        @if (Show("HoverCard")) { <Section Title="HoverCard" ShowHeading="IsAll"><HoverCardPattern /></Section> }
        @if (Show("Image")) { <Section Title="Image" ShowHeading="IsAll"><ImagePattern /></Section> }
        @if (Show("Input")) { <Section Title="Input" ShowHeading="IsAll"><InputPattern /></Section> }
        @if (Show("Kbd")) { <Section Title="Kbd" ShowHeading="IsAll"><KbdPattern /></Section> }
        @if (Show("Label")) { <Section Title="Label" ShowHeading="IsAll"><LabelPattern /></Section> }
        @if (Show("NumberInput")) { <Section Title="NumberInput" ShowHeading="IsAll"><NumberInputPattern /></Section> }
        @if (Show("OtpInput")) { <Section Title="OtpInput" ShowHeading="IsAll"><OtpInputPattern /></Section> }
        @if (Show("Pagination")) { <Section Title="Pagination" ShowHeading="IsAll"><PaginationPattern /></Section> }
        @if (Show("Popover")) { <Section Title="Popover" ShowHeading="IsAll"><PopoverPattern /></Section> }
        @if (Show("Progress")) { <Section Title="Progress" ShowHeading="IsAll"><ProgressPattern /></Section> }
        @if (Show("RadioGroup")) { <Section Title="RadioGroup" ShowHeading="IsAll"><RadioGroupPattern /></Section> }
        @if (Show("Rating")) { <Section Title="Rating" ShowHeading="IsAll"><RatingPattern /></Section> }
        @if (Show("Result")) { <Section Title="Result" ShowHeading="IsAll"><ResultPattern /></Section> }
        @if (Show("ScrollArea")) { <Section Title="ScrollArea" ShowHeading="IsAll"><ScrollAreaPattern /></Section> }
        @if (Show("Segmented")) { <Section Title="Segmented" ShowHeading="IsAll"><SegmentedPattern /></Section> }
        @if (Show("Select")) { <Section Title="Select" ShowHeading="IsAll"><SelectPattern /></Section> }
        @if (Show("Separator")) { <Section Title="Separator" ShowHeading="IsAll"><SeparatorPattern /></Section> }
        @if (Show("Sheet")) { <Section Title="Sheet" ShowHeading="IsAll"><SheetPattern /></Section> }
        @if (Show("Skeleton")) { <Section Title="Skeleton" ShowHeading="IsAll"><SkeletonPattern /></Section> }
        @if (Show("Slider")) { <Section Title="Slider" ShowHeading="IsAll"><SliderPattern /></Section> }
        @if (Show("Spinner")) { <Section Title="Spinner" ShowHeading="IsAll"><SpinnerPattern /></Section> }
        @if (Show("Statistic")) { <Section Title="Statistic" ShowHeading="IsAll"><StatisticPattern /></Section> }
        @if (Show("Steps")) { <Section Title="Steps" ShowHeading="IsAll"><StepsPattern /></Section> }
        @if (Show("Switch")) { <Section Title="Switch" ShowHeading="IsAll"><SwitchPattern /></Section> }
        @if (Show("Table")) { <Section Title="Table" ShowHeading="IsAll"><TablePattern /></Section> }
        @if (Show("Tabs")) { <Section Title="Tabs" ShowHeading="IsAll"><TabsPattern /></Section> }
        @if (Show("TagInput")) { <Section Title="TagInput" ShowHeading="IsAll"><TagInputPattern /></Section> }
        @if (Show("Textarea")) { <Section Title="Textarea" ShowHeading="IsAll"><TextareaPattern /></Section> }
        @if (Show("Timeline")) { <Section Title="Timeline" ShowHeading="IsAll"><TimelinePattern /></Section> }
        @if (Show("Toast")) { <Section Title="Toast" ShowHeading="IsAll"><ToastPattern /></Section> }
        @if (Show("Toggle")) { <Section Title="Toggle" ShowHeading="IsAll"><TogglePattern /></Section> }
        @if (Show("ToggleGroup")) { <Section Title="ToggleGroup" ShowHeading="IsAll"><ToggleGroupPattern /></Section> }
        @if (Show("Tooltip")) { <Section Title="Tooltip" ShowHeading="IsAll"><TooltipPattern /></Section> }
        @if (Show("Transfer")) { <Section Title="Transfer" ShowHeading="IsAll"><TransferPattern /></Section> }
        @if (Show("TreeView")) { <Section Title="TreeView" ShowHeading="IsAll"><TreeViewPattern /></Section> }
        @if (Show("Watermark")) { <Section Title="Watermark" ShowHeading="IsAll"><WatermarkPattern /></Section> }

    </Stack>
</Stack>

@code {
    protected override void OnInitialized() => Filter.OnChange += StateHasChanged;
    public void Dispose() => Filter.OnChange -= StateHasChanged;

    private bool IsAll => Filter.SelectedCategory == "All";

    private bool Show(string category) =>
        Filter.SelectedCategory == "All" || Filter.SelectedCategory == category;

    private string CategoryClass(string name)
    {
        var active = name == Filter.SelectedCategory;
        return active
            ? "shrink-0 rounded-full px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground transition-colors"
            : "shrink-0 rounded-full px-3 py-1.5 text-sm font-medium bg-muted text-muted-foreground hover:text-foreground hover:bg-accent transition-colors";
    }

    private ToastViewport.ToastPosition _toastPosition = ToastViewport.ToastPosition.BottomRight;
}
