@page "/components/tour"

<PageTitle>Tour — Lumeo</PageTitle>

<PageHeader Title="Tour" Description="A guided product tour that highlights elements with a spotlight overlay and step-by-step tooltip popups — great for onboarding and feature introductions." />

<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>Feature walkthroughs introducing new or updated functionality</li>
        <li>Onboarding flows guiding first-time users through the interface</li>
        <li>Guided tutorials with step-by-step instructions anchored to UI elements</li>
        <li>Contextual help that highlights specific parts of the page</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Tour" Code="@_basicCode">
        <Stack Gap="6">
            <Flex Class="gap-3 flex-wrap">
                <Button id="tour-feature-1" Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="LayoutDashboard" Class="h-4 w-4 mr-2" />
                    Dashboard
                </Button>
                <Button id="tour-feature-2" Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Users" Class="h-4 w-4 mr-2" />
                    Team
                </Button>
                <Button id="tour-feature-3" Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Settings" Class="h-4 w-4 mr-2" />
                    Settings
                </Button>
            </Flex>
            <Flex Class="gap-2">
                <Button Variant="Button.ButtonVariant.Default" OnClick="@(() => _tourOpen = true)">
                    <DynamicIcon Name="Play" Class="h-4 w-4 mr-2" />
                    Start Tour
                </Button>
                @if (_tourCompleted)
                {
                    <Alert Class="flex-1" Title="Tour complete!">
                    </Alert>
                }
            </Flex>
        </Stack>

        <Tour @bind-Open="_tourOpen"
              Steps="@_tourSteps"
              OnComplete="@HandleComplete"
              OnSkip="@HandleSkip" />
    </ComponentDemo>

    <ComponentDemo Title="Custom Placements" Code="@_placementsCode">
        <Stack Gap="4">
            <Flex Class="justify-between items-center gap-3">
                <Button id="tour-top" Variant="Button.ButtonVariant.Outline" Class="flex-1">Top tooltip</Button>
                <Button id="tour-right" Variant="Button.ButtonVariant.Outline" Class="flex-1">Right tooltip</Button>
                <Button id="tour-bottom" Variant="Button.ButtonVariant.Outline" Class="flex-1">Bottom tooltip</Button>
                <Button id="tour-left" Variant="Button.ButtonVariant.Outline" Class="flex-1">Left tooltip</Button>
            </Flex>
            <Button Variant="Button.ButtonVariant.Secondary" OnClick="@(() => _placementsOpen = true)">
                <DynamicIcon Name="Navigation" Class="h-4 w-4 mr-2" />
                Tour Placements
            </Button>
        </Stack>

        <Tour @bind-Open="_placementsOpen"
              Steps="@_placementSteps"
              OnComplete="@(() => _placementsOpen = false)"
              OnSkip="@(() => _placementsOpen = false)" />
    </ComponentDemo>
</Stack>

<!-- 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">Tour</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">Steps</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;TourStepConfig&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">List of step definitions with target, title, description, and placement.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Open</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">Whether the tour is active. Supports two-way binding (@@bind-Open).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">CurrentStep</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">0</td>
                            <td class="p-3 text-muted-foreground">Current step index (zero-based). Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnComplete</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 user reaches and completes the last step.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnSkip</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 user clicks Skip or dismisses the tour.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">CurrentStepChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;int&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 for the current step index.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&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 for the tour open state.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpen</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">Alias for Open; kept for backwards compatibility with @@bind-IsOpen.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Alias for OpenChanged; kept for backwards compatibility with @@bind-IsOpen.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">TourStepConfig</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">Parameter</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">TargetSelector</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 text-muted-foreground">CSS selector for the element to highlight (e.g., "#my-button").</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 text-muted-foreground">Tooltip heading.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Description</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 text-muted-foreground">Optional body text below the title.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Placement</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">TourPlacement</td>
                            <td class="p-3 text-muted-foreground">Where to place the tooltip: Top, Bottom, Left, Right.</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/tooltip" class="text-primary hover:underline">Tooltip</a> — On-hover hints for individual elements without a guided flow</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — Rich content anchored to an element, triggered by click</li>
        <li><a href="/components/steps" class="text-primary hover:underline">Steps</a> — Visual step tracker for multi-step workflows</li>
    </ul>
</div>

@code {
    private bool _tourOpen;
    private bool _tourCompleted;
    private bool _placementsOpen;

    private List<Tour.TourStepConfig> _tourSteps = new()
    {
        new("#tour-feature-1", "Dashboard", "Get an overview of all your key metrics and recent activity.", Tour.TourPlacement.Bottom),
        new("#tour-feature-2", "Team Management", "Invite team members and manage permissions.", Tour.TourPlacement.Bottom),
        new("#tour-feature-3", "Settings", "Customize your workspace, notifications, and account details.", Tour.TourPlacement.Bottom),
    };

    private List<Tour.TourStepConfig> _placementSteps = new()
    {
        new("#tour-top", "Top Placement", "The tooltip appears above the highlighted element.", Tour.TourPlacement.Top),
        new("#tour-right", "Right Placement", "The tooltip appears to the right.", Tour.TourPlacement.Right),
        new("#tour-bottom", "Bottom Placement", "The tooltip appears below the highlighted element.", Tour.TourPlacement.Bottom),
        new("#tour-left", "Left Placement", "The tooltip appears to the left.", Tour.TourPlacement.Left),
    };

    private void HandleComplete()
    {
        _tourOpen = false;
        _tourCompleted = true;
    }

    private void HandleSkip()
    {
        _tourOpen = false;
    }

    private string _basicCode = @"<Flex Class=""gap-3 flex-wrap"">
    <Button id=""tour-feature-1"" Variant=""Button.ButtonVariant.Outline"">Dashboard</Button>
    <Button id=""tour-feature-2"" Variant=""Button.ButtonVariant.Outline"">Team</Button>
    <Button id=""tour-feature-3"" Variant=""Button.ButtonVariant.Outline"">Settings</Button>
</Flex>
<Button Variant=""Button.ButtonVariant.Default"" OnClick=""@(() => _tourOpen = true)"">
    Start Tour
</Button>

<Tour @bind-Open=""_tourOpen""
      Steps=""@_tourSteps""
      OnComplete=""@HandleComplete""
      OnSkip=""@(() => _tourOpen = false)"" />

@code {
    private bool _tourOpen;

    private List<Tour.TourStepConfig> _tourSteps = new()
    {
        new(""#tour-feature-1"", ""Dashboard"", ""Get an overview of your key metrics."", Tour.TourPlacement.Bottom),
        new(""#tour-feature-2"", ""Team Management"", ""Invite members and manage permissions."", Tour.TourPlacement.Bottom),
        new(""#tour-feature-3"", ""Settings"", ""Customize your workspace and account."", Tour.TourPlacement.Bottom),
    };

    private void HandleComplete() => _tourOpen = false;
}";

    private string _placementsCode = @"<Flex Class=""justify-between gap-3"">
    <Button id=""tour-top""    Variant=""Button.ButtonVariant.Outline"">Top</Button>
    <Button id=""tour-right""  Variant=""Button.ButtonVariant.Outline"">Right</Button>
    <Button id=""tour-bottom"" Variant=""Button.ButtonVariant.Outline"">Bottom</Button>
    <Button id=""tour-left""   Variant=""Button.ButtonVariant.Outline"">Left</Button>
</Flex>
<Button Variant=""Button.ButtonVariant.Secondary"" OnClick=""@(() => _open = true)"">
    Tour Placements
</Button>

<Tour @bind-Open=""_open""
      Steps=""@_steps""
      OnComplete=""@(() => _open = false)""
      OnSkip=""@(() => _open = false)"" />

@code {
    private bool _open;

    private List<Tour.TourStepConfig> _steps = new()
    {
        new(""#tour-top"",    ""Top Placement"",    ""Tooltip above the element."",  Tour.TourPlacement.Top),
        new(""#tour-right"",  ""Right Placement"",  ""Tooltip to the right."",       Tour.TourPlacement.Right),
        new(""#tour-bottom"", ""Bottom Placement"", ""Tooltip below the element."",  Tour.TourPlacement.Bottom),
        new(""#tour-left"",   ""Left Placement"",   ""Tooltip to the left."",        Tour.TourPlacement.Left),
    };
}";
}
