@page "/components/time-picker"

<PageTitle>TimePicker — Lumeo</PageTitle>

<PageHeader Title="TimePicker" Description="A time selection input with hour, minute, and optional second columns." />

<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>Standalone time selection for scheduling or alarm settings</li>
        <li>Forms where only time input is needed without a date</li>
        <li>Configuring time-based intervals like business hours or reminders</li>
        <li>Time-of-day inputs with customizable step intervals</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic TimePicker" Code="@_basicCode">
        <Stack Gap="2">
            <TimePicker @bind-Value="_time1" />
            <Lumeo.Text Size="sm" Color="muted">Selected: @(_time1?.ToString(@"hh\:mm") ?? "None")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="12-Hour Format" Code="@_format12Code">
        <TimePicker @bind-Value="_time2" Use24Hour="false" />
    </ComponentDemo>

    <ComponentDemo Title="With Seconds" Code="@_secondsCode">
        <TimePicker @bind-Value="_time3" ShowSeconds="true" />
    </ComponentDemo>

    <ComponentDemo Title="Minute Step" Code="@_stepCode">
        <TimePicker @bind-Value="_time4" MinuteStep="15" Placeholder="Select in 15-min intervals" />
    </ComponentDemo>

    <ComponentDemo Title="Wheel Variant (Mobile)" Code="@_wheelCode">
        <TimePicker @bind-Value="_wheelTime" Variant="TimePicker.TimePickerVariant.Wheel" />
        @if (_wheelTime.HasValue)
        {
            <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_wheelTime.Value.ToString(@"hh\:mm")</Lumeo.Text>
        }
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">TimePicker</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">TimeSpan?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The selected time value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Use24Hour</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">true</td>
                            <td class="p-3 text-muted-foreground">Use 24-hour format. Set false for 12-hour with AM/PM.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowSeconds</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 seconds column.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MinuteStep</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">1</td>
                            <td class="p-3 text-muted-foreground">Step interval for minutes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Placeholder</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">"Select time"</td>
                            <td class="p-3 text-muted-foreground">Placeholder text when no value selected.</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">Disable the picker.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SecondStep</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">1</td>
                            <td class="p-3 text-muted-foreground">Step interval for seconds.</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;TimeSpan?&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback for two-way binding when the selected time changes.</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>
                        <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">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 field 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 field when not invalid.</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 field (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">FormField</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">FormField.FormFieldContext?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Cascaded context from a parent FormField; wires label, validation, and required state automatically.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">TimePickerVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List</td>
                            <td class="p-3 text-muted-foreground">Calendar (default) or Wheel for iOS-style drum scrolling.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Culture</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">System.Globalization.CultureInfo?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Overrides CurrentCulture for 24h/12h detection and AM/PM designators.</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/date-picker" class="text-primary hover:underline">DatePicker</a> — Date selection when you also need a calendar</li>
        <li><a href="/components/date-time-picker" class="text-primary hover:underline">DateTimePicker</a> — Combined date and time picker in a single control</li>
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Basic text input for manual time entry</li>
    </ul>
</div>

@code {
    private TimeSpan? _time1 = new TimeSpan(14, 30, 0);
    private TimeSpan? _time2 = new TimeSpan(9, 0, 0);
    private TimeSpan? _time3;
    private TimeSpan? _time4;

    private string _basicCode = @"<TimePicker @bind-Value=""_time"" />";
    private string _format12Code = @"<TimePicker @bind-Value=""_time"" Use24Hour=""false"" />";
    private string _secondsCode = @"<TimePicker @bind-Value=""_time"" ShowSeconds=""true"" />";
    private string _stepCode = @"<TimePicker @bind-Value=""_time"" MinuteStep=""15"" />";

    private TimeSpan? _wheelTime;
    private string _wheelCode = @"<TimePicker @bind-Value=""_time"" Variant=""TimePicker.TimePickerVariant.Wheel"" />";
}
