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

<PageTitle>Date Range Picker — Lumeo</PageTitle>

<PageHeader Title="Date Range Picker" Description="Select a continuous range of dates — built on top of DatePicker in range mode, with two-calendar display and optional preset shortcuts." />

<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>Selecting date ranges for booking systems and reservation flows</li>
        <li>Report filters that require a start and end date</li>
        <li>Analytics dashboards with customizable time windows</li>
        <li>Invoice or billing period selection</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Date Range Picker" Code="@_basicCode">
        <Stack Gap="3" Class="max-w-sm">
            <DateRangePicker @bind-StartDate="_start" @bind-EndDate="_end" />
            @if (_start.HasValue && _end.HasValue)
            {
                <Lumeo.Text Class="text-sm text-muted-foreground">
                    @_start.Value.ToString("MMM dd, yyyy") → @_end.Value.ToString("MMM dd, yyyy")
                </Lumeo.Text>
            }
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Preset Shortcuts" Code="@_presetsCode">
        <DateRangePicker @bind-StartDate="_start2"
                         @bind-EndDate="_end2"
                         Presets="@_presets"
                         Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Min / Max Constraints" Code="@_constraintsCode">
        <Stack Gap="2" Class="max-w-sm">
            <DateRangePicker @bind-StartDate="_start3"
                             @bind-EndDate="_end3"
                             MinDate="@DateOnly.FromDateTime(DateTime.Today)"
                             MaxDate="@DateOnly.FromDateTime(DateTime.Today.AddDays(30))" />
            <Lumeo.Text Class="text-xs text-muted-foreground">Can only select dates within the next 30 days.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Format" Code="@_formatCode">
        <DateRangePicker @bind-StartDate="_start4"
                         @bind-EndDate="_end4"
                         Format="dd/MM/yyyy"
                         Placeholder="DD/MM/YYYY — DD/MM/YYYY"
                         Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <DateRangePicker Disabled="true" Class="max-w-sm" />
    </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">DateRangePicker</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">StartDate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DateOnly?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The range start date. Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">EndDate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DateOnly?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The range end date. Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Presets</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;DateRangePreset&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Shortcut presets (e.g., "Last 7 days", "This month").</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">DateOnly?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Earliest selectable date.</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">DateOnly?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Latest selectable date.</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 range"</td>
                            <td class="p-3 text-muted-foreground">Placeholder text when no range is selected.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Format</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">"MMM dd, yyyy"</td>
                            <td class="p-3 text-muted-foreground">Date display format string.</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">true</td>
                            <td class="p-3 text-muted-foreground">Show a clear button when a range is 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 date range picker.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">DateRangePreset</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">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <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 text-muted-foreground">Display label for the preset shortcut.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Start</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DateOnly</td>
                            <td class="p-3 text-muted-foreground">Start date of the preset range.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">End</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DateOnly</td>
                            <td class="p-3 text-muted-foreground">End date of the preset range.</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> — Single date selection when only one date is needed</li>
        <li><a href="/components/calendar" class="text-primary hover:underline">Calendar</a> — Inline calendar display for date browsing and selection</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Wrap date range pickers in validated form layouts</li>
    </ul>
</div>

@code {
    private DateOnly? _start;
    private DateOnly? _end;
    private DateOnly? _start2;
    private DateOnly? _end2;
    private DateOnly? _start3;
    private DateOnly? _end3;
    private DateOnly? _start4;
    private DateOnly? _end4;

    private List<DateRangePicker.DateRangePreset> _presets = new()
    {
        new() { Label = "Today", Start = DateOnly.FromDateTime(DateTime.Today), End = DateOnly.FromDateTime(DateTime.Today) },
        new() { Label = "Last 7 days", Start = DateOnly.FromDateTime(DateTime.Today.AddDays(-6)), End = DateOnly.FromDateTime(DateTime.Today) },
        new() { Label = "Last 30 days", Start = DateOnly.FromDateTime(DateTime.Today.AddDays(-29)), End = DateOnly.FromDateTime(DateTime.Today) },
        new() { Label = "This month", Start = new DateOnly(DateTime.Today.Year, DateTime.Today.Month, 1), End = DateOnly.FromDateTime(DateTime.Today) },
    };

    private string _basicCode = @"<DateRangePicker @bind-StartDate=""_start"" @bind-EndDate=""_end"" />";
    private string _presetsCode = @"<DateRangePicker @bind-StartDate=""_start"" @bind-EndDate=""_end"" Presets=""@_presets"" />

@code {
    private List<DateRangePicker.DateRangePreset> _presets = new()
    {
        new() { Label = ""Last 7 days"", Start = DateOnly.FromDateTime(DateTime.Today.AddDays(-6)), End = DateOnly.FromDateTime(DateTime.Today) },
        new() { Label = ""Last 30 days"", Start = DateOnly.FromDateTime(DateTime.Today.AddDays(-29)), End = DateOnly.FromDateTime(DateTime.Today) },
    };
}";
    private string _constraintsCode = @"<DateRangePicker @bind-StartDate=""_start"" @bind-EndDate=""_end""
               MinDate=""@DateOnly.FromDateTime(DateTime.Today)""
               MaxDate=""@DateOnly.FromDateTime(DateTime.Today.AddDays(30))"" />";
    private string _formatCode = @"<DateRangePicker @bind-StartDate=""_start"" @bind-EndDate=""_end""
               Format=""dd/MM/yyyy"" />";
    private string _disabledCode = @"<DateRangePicker Disabled=""true"" />";
}
