@page "/components/timeline"

<PageTitle>Timeline — Lumeo</PageTitle>

<PageHeader Title="Timeline" Description="Displays a list of events in chronological order." />

<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>Activity feeds showing user actions or system events</li>
        <li>Event history logs such as order tracking or audit trails</li>
        <li>Changelogs and release notes displayed chronologically</li>
        <li>Process tracking where each stage has a timestamp</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Vertical Timeline" Code="@_codeVertical">
        <Timeline Class="max-w-md">
            <TimelineItem Title="Order placed" Description="Your order has been placed successfully." Time="Jan 1, 2025" />
            <TimelineItem Title="Processing" Description="Your order is being processed." Time="Jan 2, 2025" />
            <TimelineItem Title="Shipped" Description="Your order has been shipped via express." Time="Jan 3, 2025" />
            <TimelineItem Title="Delivered" Description="Your order has been delivered." Time="Jan 5, 2025" />
        </Timeline>
    </ComponentDemo>

    <ComponentDemo Title="With Icons" Code="@_codeIcons">
        <Timeline Class="max-w-md">
            <TimelineItem Title="Account created" Description="Welcome to the platform." Time="9:00 AM">
                <IconContent><DynamicIcon Name="UserPlus" Class="h-4 w-4" /></IconContent>
            </TimelineItem>
            <TimelineItem Title="Profile updated" Description="Added profile picture and bio." Time="10:30 AM">
                <IconContent><DynamicIcon Name="Pencil" Class="h-4 w-4" /></IconContent>
            </TimelineItem>
            <TimelineItem Title="First post" Description="Published your first article." Time="2:00 PM">
                <IconContent><DynamicIcon Name="FileText" Class="h-4 w-4" /></IconContent>
            </TimelineItem>
        </Timeline>
    </ComponentDemo>

    <ComponentDemo Title="Horizontal Timeline" Code="@_codeHorizontal">
        <Timeline Orientation="Timeline.TimelineOrientation.Horizontal" Class="w-full">
            <TimelineItem Title="Step 1" Description="Planning" />
            <TimelineItem Title="Step 2" Description="Design" />
            <TimelineItem Title="Step 3" Description="Development" />
            <TimelineItem Title="Step 4" Description="Launch" />
        </Timeline>
    </ComponentDemo>

    <ComponentDemo Title="Orientation (interactive)" Code="@_codeOrientationInteractive">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch orientation to compare vertical and horizontal layouts.</Lumeo.Text>
            <Segmented @bind-Value="_timelineOrientation">
                <SegmentedItem Value="Vertical">Vertical</SegmentedItem>
                <SegmentedItem Value="Horizontal">Horizontal</SegmentedItem>
            </Segmented>
            <Timeline Orientation="@_timelineOrientationEnum" Class="@(_timelineOrientation == "Vertical" ? "max-w-md" : "w-full")">
                <TimelineItem Title="Planning" Description="Scope defined" Time="Jan 1" />
                <TimelineItem Title="Design" Description="Wireframes approved" Time="Jan 8" />
                <TimelineItem Title="Development" Description="Sprint in progress" Time="Jan 15" />
                <TimelineItem Title="Launch" Description="Shipped to production" Time="Feb 1" />
            </Timeline>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="ActiveIndexChanged — interactive" Description="Clicking Next / Previous advances or retreats the active step. ActiveIndexChanged fires on each change and updates the status line below." Code="@_codeActiveChanged">
        <Stack Gap="4" Class="max-w-md">
            <Timeline ActiveIndex="@_timelineActiveIdx"
                      ActiveIndexChanged="@((int i) => _timelineActiveIdx = i)"
                      Animated="true">
                <TimelineItem Title="Requirements" Description="Gathered and approved." Time="Week 1" />
                <TimelineItem Title="Design" Description="Wireframes signed off." Time="Week 2" />
                <TimelineItem Title="Development" Description="Feature branch in progress." Time="Week 3" />
                <TimelineItem Title="QA" Description="Test suite running." Time="Week 4" />
                <TimelineItem Title="Release" Description="Deployed to production." Time="Week 5" />
            </Timeline>
            <Flex Gap="2">
                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm"
                        OnClick="@(() => { if (_timelineActiveIdx > 0) _timelineActiveIdx--; })">Previous</Button>
                <Button Size="Button.ButtonSize.Sm"
                        OnClick="@(() => { if (_timelineActiveIdx < 4) _timelineActiveIdx++; })">Next</Button>
            </Flex>
            <Lumeo.Text Size="sm" Color="muted">Active: step @(_timelineActiveIdx + 1) of 5</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Animated Timeline" Code="@_codeAnimated">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <div @key="@($"timeline-{_timelineReplay}")">
                    <Timeline Animated="true" @bind-ActiveIndex="_activeIndex">
                        <TimelineItem Title="Order placed" Description="Your order has been placed." Time="Jan 1, 2025" />
                        <TimelineItem Title="Processing" Description="Your order is being processed." Time="Jan 2, 2025" />
                        <TimelineItem Title="Shipped" Description="Shipped via express." Time="Jan 3, 2025" />
                        <TimelineItem Title="Delivered" Description="Has been delivered." Time="Jan 5, 2025" />
                    </Timeline>
                </div>
                <Flex Justify="center" Gap="2">
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" OnClick="() => { if (_activeIndex > 0) _activeIndex--; }">Previous</Button>
                    <Button Size="Button.ButtonSize.Sm" OnClick="() => { if (_activeIndex < 3) _activeIndex++; }">Next</Button>
                    <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm" OnClick="() => _timelineReplay++">
                        <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5 mr-2" />
                        Replay
                    </Button>
                </Flex>
                <Lumeo.Text Size="xs" Color="muted" Align="center">
                    Active dot pulses at <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ActiveIndex</code>; earlier items fill in as completed, connectors draw in.
                </Lumeo.Text>
            </Stack>
        </Container>
    </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">Timeline</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">Orientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">TimelineOrientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Vertical</td>
                            <td class="p-3 text-muted-foreground">Layout direction. Values: Vertical, Horizontal.</td>
                        </tr>
                        <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 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">TimelineItem children.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Animated</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">When true, items fade-in with staggered delay, connectors draw in, and the active item pulses.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ActiveIndex</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">null</td>
                            <td class="p-3 text-muted-foreground">When set with Animated, drives active-dot progression: items before the index are "completed", the item at ActiveIndex pulses, later items are pending. Connectors draw in as you advance.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ActiveIndexChanged</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 ActiveIndex.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">TimelineItem</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">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">Event title.</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 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Event description text.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Time</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">Timestamp label.</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 replacing the default dot. (<c>Icon</c> is a deprecated alias.)</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsActive</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 this item as the current step. When the parent Timeline is Animated, the indicator pulses.</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/steps" class="text-primary hover:underline">Steps</a> — Track progress through actionable sequential stages</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Wrap timeline events in cards for richer content display</li>
    </ul>
</div>

@code {
    private int _timelineActiveIdx = 1;

    private string _codeActiveChanged = @"<Timeline ActiveIndex=""@_activeIdx""
           ActiveIndexChanged=""@((int i) => _activeIdx = i)""
           Animated=""true"">
    <TimelineItem Title=""Requirements"" Time=""Week 1"" />
    <TimelineItem Title=""Design"" Time=""Week 2"" />
    <TimelineItem Title=""Development"" Time=""Week 3"" />
    <TimelineItem Title=""QA"" Time=""Week 4"" />
    <TimelineItem Title=""Release"" Time=""Week 5"" />
</Timeline>
<Flex Gap=""2"">
    <Button OnClick=""@(() => { if (_activeIdx > 0) _activeIdx--; })"">Previous</Button>
    <Button OnClick=""@(() => { if (_activeIdx < 4) _activeIdx++; })"">Next</Button>
</Flex>
<Lumeo.Text Size=""sm"" Color=""muted"">Active: step @(_activeIdx + 1) of 5</Lumeo.Text>

@code { private int _activeIdx = 1; }";

    private string _timelineOrientation = "Vertical";
    private Timeline.TimelineOrientation _timelineOrientationEnum =>
        Enum.TryParse<Timeline.TimelineOrientation>(_timelineOrientation, out var v) ? v : Timeline.TimelineOrientation.Vertical;
    private int _timelineReplay;
    private int _activeIndex = 1;

    private string _codeOrientationInteractive = @"<Segmented @bind-Value=""_orientation"">
    <SegmentedItem Value=""@Timeline.TimelineOrientation.Vertical"">Vertical</SegmentedItem>
    <SegmentedItem Value=""@Timeline.TimelineOrientation.Horizontal"">Horizontal</SegmentedItem>
</Segmented>
<Timeline Orientation=""@_orientation"">
    <TimelineItem Title=""Planning"" Description=""Scope defined"" Time=""Jan 1"" />
    <TimelineItem Title=""Design"" Description=""Wireframes approved"" Time=""Jan 8"" />
    <TimelineItem Title=""Development"" Description=""Sprint in progress"" Time=""Jan 15"" />
    <TimelineItem Title=""Launch"" Description=""Shipped to production"" Time=""Feb 1"" />
</Timeline>

@code { private Timeline.TimelineOrientation _orientation = Timeline.TimelineOrientation.Vertical; }";

    private string _codeVertical = @"<Timeline>
    <TimelineItem Title=""Order placed"" Description=""Your order has been placed."" Time=""Jan 1, 2025"" />
    <TimelineItem Title=""Processing"" Description=""Being processed."" Time=""Jan 2, 2025"" />
    <TimelineItem Title=""Shipped"" Description=""Shipped via express."" Time=""Jan 3, 2025"" />
    <TimelineItem Title=""Delivered"" Description=""Has been delivered."" Time=""Jan 5, 2025"" />
</Timeline>";

    private string _codeIcons = @"<Timeline>
    <TimelineItem Title=""Account created"" Time=""9:00 AM"">
        <IconContent><Blazicon Svg=""Lucide.UserPlus"" class=""h-4 w-4"" /></IconContent>
    </TimelineItem>
    <TimelineItem Title=""Profile updated"" Time=""10:30 AM"">
        <IconContent><Blazicon Svg=""Lucide.Pencil"" class=""h-4 w-4"" /></IconContent>
    </TimelineItem>
</Timeline>";

    private string _codeHorizontal = @"<Timeline Orientation=""Timeline.TimelineOrientation.Horizontal"">
    <TimelineItem Title=""Step 1"" Description=""Planning"" />
    <TimelineItem Title=""Step 2"" Description=""Design"" />
    <TimelineItem Title=""Step 3"" Description=""Development"" />
    <TimelineItem Title=""Step 4"" Description=""Launch"" />
</Timeline>";

    private string _codeAnimated = @"<Timeline Animated=""true"" @bind-ActiveIndex=""_activeIndex"">
    <TimelineItem Title=""Order placed"" Time=""Jan 1, 2025"" />
    <TimelineItem Title=""Processing"" Time=""Jan 2, 2025"" />
    <TimelineItem Title=""Shipped"" Time=""Jan 3, 2025"" />
    <TimelineItem Title=""Delivered"" Time=""Jan 5, 2025"" />
</Timeline>
<Flex Gap=""2"">
    <Button OnClick=""() => { if (_activeIndex > 0) _activeIndex--; }"">Previous</Button>
    <Button OnClick=""() => { if (_activeIndex < 3) _activeIndex++; }"">Next</Button>
</Flex>

@code { private int _activeIndex = 1; }";
}
