@page "/components/inplace-editor"

<PageTitle>Inplace Editor — Lumeo</PageTitle>

<PageHeader Title="Inplace Editor" Description="Edit text directly inline — click to switch between display and edit mode without navigating to a separate form." />

<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>Inline editing where users click text to edit it directly in place</li>
        <li>Quick updates to titles, names, or status fields without opening a modal</li>
        <li>Editable table cells or list items for rapid data entry</li>
        <li>Settings panels where values should be editable with minimal friction</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Inplace Edit" Code="@_basicCode">
        <Stack Gap="4" Class="max-w-sm">
            <InplaceEditor @bind-Value="_name" Placeholder="Click to edit name..." />
            <Lumeo.Text Class="text-sm text-muted-foreground">Value: @_name</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Save / Cancel Buttons" Code="@_buttonsCode">
        <Stack Gap="4" Class="max-w-sm">
            <InplaceEditor @bind-Value="_title" ShowButtons="true" Placeholder="Click to edit title..." />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Textarea Mode" Code="@_textareaCode">
        <Stack Gap="4" Class="max-w-sm">
            <InplaceEditor @bind-Value="_bio" EditMode="InplaceEditor.InplaceEditMode.Textarea" Placeholder="Click to add a bio..." />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Select Mode" Code="@_selectCode">
        <Stack Gap="4" Class="max-w-sm">
            <InplaceEditor @bind-Value="_status"
                           EditMode="InplaceEditor.InplaceEditMode.Select"
                           SelectOptions="@_statusOptions"
                           Placeholder="Select status..." />
            <Lumeo.Text Class="text-sm text-muted-foreground">Selected: @_status</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <InplaceEditor Value="This value is locked" Disabled="true" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="EditMode — interactive preview" Code="@_editModeInteractiveCode">
        <Stack Gap="4" Class="max-w-sm">
            <Lumeo.Text Size="sm" Color="muted">Switch EditMode to see how the edit control changes when you click to edit.</Lumeo.Text>
            <Segmented @bind-Value="_previewEditMode">
                <SegmentedItem Value="Text">Text</SegmentedItem>
                <SegmentedItem Value="Textarea">Textarea</SegmentedItem>
                <SegmentedItem Value="Select">Select</SegmentedItem>
            </Segmented>
            @if (_previewEditMode == "Select")
            {
                <InplaceEditor @bind-Value="_previewEditorValue"
                               EditMode="InplaceEditor.InplaceEditMode.Select"
                               SelectOptions="@_previewSelectOptions"
                               Placeholder="Click to select a value..." />
            }
            else
            {
                <InplaceEditor @bind-Value="_previewEditorValue"
                               EditMode="_inplaceEditModeEnum"
                               Placeholder="@($"Click to edit ({_previewEditMode} mode)...")" />
            }
            <Lumeo.Text Size="sm" Color="muted">Value: @_previewEditorValue</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>
            <Heading Level="3" Class="mb-3">InplaceEditor</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">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The current text value. Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">EditMode</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">InplaceEditMode</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Text</td>
                            <td class="p-3 text-muted-foreground">Controls the edit control: Text, Textarea, or Select.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SelectOptions</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Option list when EditMode is Select.</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">—</td>
                            <td class="p-3 text-muted-foreground">Hint shown when value is empty.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowButtons</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 checkmark (save) and X (cancel) action buttons.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SaveOnBlur</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">Automatically save when the input loses focus.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SaveOnEnter</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">Save when Enter is pressed.</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">Prevent editing.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnSave</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Fired when the value is saved.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnCancel</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 editing is cancelled.</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">—</td>
                            <td class="p-3 text-muted-foreground">Custom display content shown in view mode.</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;string?&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 is saved.</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 for form validation.</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 a destructive ring to indicate a validation error.</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 shown below when Invalid is true (standalone, not inside FormField).</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">Help text shown below when there is no error (standalone, not inside FormField).</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">Inline label rendered above the editor (standalone, not inside 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 identification.</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">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; drives validation state automatically.</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/input" class="text-primary hover:underline">Input</a> — Standard text input for form-based editing</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Full form layout with validation for more complex editing scenarios</li>
        <li><a href="/components/datagrid" class="text-primary hover:underline">DataGrid</a> — Data grid with built-in inline editing for tabular data</li>
    </ul>
</div>

@code {
    private string? _name = "John Doe";
    private string? _title = "Senior Engineer";
    private string? _bio = "A software engineer who loves clean code.";
    private string? _status = "Active";
    private List<string> _statusOptions = new() { "Active", "Inactive", "Pending", "Archived" };

    private string _basicCode = @"<InplaceEditor @bind-Value=""_name"" Placeholder=""Click to edit..."" />

@code {
    private string? _name = ""John Doe"";
}";

    private string _buttonsCode = @"<InplaceEditor @bind-Value=""_title"" ShowButtons=""true"" Placeholder=""Click to edit title..."" />";

    private string _textareaCode = @"<InplaceEditor @bind-Value=""_bio""
               EditMode=""InplaceEditor.InplaceEditMode.Textarea""
               Placeholder=""Click to add a bio..."" />";

    private string _selectCode = @"<InplaceEditor @bind-Value=""_status""
               EditMode=""InplaceEditor.InplaceEditMode.Select""
               SelectOptions=""@_options"" />

@code {
    private string? _status = ""Active"";
    private List<string> _options = new() { ""Active"", ""Inactive"", ""Pending"" };
}";

    private string _disabledCode = @"<InplaceEditor Value=""This value is locked"" Disabled=""true"" />";

    private string _previewEditMode = "Text";
    private string? _previewEditorValue = "Sample value";
    private List<string> _previewSelectOptions = new() { "Active", "Inactive", "Pending", "Archived" };
    private InplaceEditor.InplaceEditMode _inplaceEditModeEnum =>
        Enum.TryParse<InplaceEditor.InplaceEditMode>(_previewEditMode, out var m) ? m : InplaceEditor.InplaceEditMode.Text;

    private string _editModeInteractiveCode = @"<Segmented @bind-Value=""_mode"">
    <SegmentedItem Value=""Text"">Text</SegmentedItem>
    <SegmentedItem Value=""Textarea"">Textarea</SegmentedItem>
    <SegmentedItem Value=""Select"">Select</SegmentedItem>
</Segmented>
<InplaceEditor @bind-Value=""_value""
               EditMode=""@Enum.Parse<InplaceEditor.InplaceEditMode>(_mode)""
               SelectOptions=""@(_mode == """"Select"""" ? _options : null)""
               Placeholder=""Click to edit..."" />

@code {
    private string _mode = ""Text"";
    private string? _value = ""Sample value"";
    private List<string> _options = new() { ""Active"", ""Inactive"", ""Pending"" };
}";
}
