@page "/components/date-time-picker"

<PageTitle>DateTimePicker — Lumeo</PageTitle>

<PageHeader Title="DateTimePicker" Description="A combined date and time picker with calendar and time 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>Scheduling events that require both a date and a specific time</li>
        <li>Appointment booking flows where date and time are selected together</li>
        <li>Event creation forms in calendaring applications</li>
        <li>Deadline or due date inputs that need time precision</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic DateTimePicker" Code="@_basicCode">
        <Stack Gap="2" Class="max-w-sm">
            <DateTimePicker @bind-Value="_dateTime1" />
            <Lumeo.Text Size="sm" Color="muted">Selected: @(_dateTime1?.ToString("g") ?? "None")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Clearable" Code="@_clearableCode">
        <DateTimePicker @bind-Value="_dateTime2" Clearable="true" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="12-Hour with Seconds" Code="@_fullCode">
        <DateTimePicker @bind-Value="_dateTime3" Use24Hour="false" ShowSeconds="true" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Min & Max Date" Code="@_minMaxCode">
        <Stack Gap="2" Class="max-w-sm">
            <DateTimePicker @bind-Value="_dateTime4" MinDate="@_dtMinDate" MaxDate="@_dtMaxDate" Placeholder="Select within range" />
            <Lumeo.Text Size="sm" Color="muted">Available: @_dtMinDate.ToString("MMM d") — @_dtMaxDate.ToString("MMM d, yyyy")</Lumeo.Text>
        </Stack>
    </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">DateTimePicker</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">DateTime?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The selected date and time.</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 time format.</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 in time picker.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DateFormat</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">"yyyy-MM-dd"</td>
                            <td class="p-3 text-muted-foreground">Date format string for display.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Clearable</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 a clear button when value is set.</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 date and time"</td>
                            <td class="p-3 text-muted-foreground">Placeholder text when no value.</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">ValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;DateTime?&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; fires when the value changes.</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">CultureInfo?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Culture used for formatting and parsing. Defaults to the current culture.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MinDate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DateTime?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Earliest selectable date. Dates before this are disabled in the calendar.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MaxDate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DateTime?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Latest selectable date. Dates after this are disabled in the calendar.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsDateDisabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;DateTime, bool&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Custom function that returns true for dates that should be disabled in the calendar.</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">FirstDayOfWeek</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DayOfWeek?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Overrides the locale-derived first day of week shown by the embedded calendar.</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-only selection when time is not needed</li>
        <li><a href="/components/time-picker" class="text-primary hover:underline">TimePicker</a> — Standalone time selection without a calendar</li>
        <li><a href="/components/calendar" class="text-primary hover:underline">Calendar</a> — Inline calendar for date browsing and selection</li>
    </ul>
</div>

@code {
    private DateTime? _dateTime1 = DateTime.Now;
    private DateTime? _dateTime2 = DateTime.Today.AddHours(10).AddMinutes(30);
    private DateTime? _dateTime3;

    private DateTime? _dateTime4;
    private DateTime _dtMinDate = DateTime.Today;
    private DateTime _dtMaxDate = DateTime.Today.AddDays(30);

    private string _basicCode = @"<DateTimePicker @bind-Value=""_dateTime"" />";
    private string _clearableCode = @"<DateTimePicker @bind-Value=""_dateTime"" Clearable=""true"" />";
    private string _fullCode = @"<DateTimePicker @bind-Value=""_dateTime"" Use24Hour=""false"" ShowSeconds=""true"" />";
    private string _minMaxCode = @"<DateTimePicker @bind-Value=""_dateTime"" MinDate=""@_minDate"" MaxDate=""@_maxDate"" Placeholder=""Select within range"" />

@code {
    private DateTime? _dateTime;
    private DateTime _minDate = DateTime.Today;
    private DateTime _maxDate = DateTime.Today.AddDays(30);
}";
}
