@page "/components/form-field"

<PageTitle>Form Field — Lumeo</PageTitle>

<PageHeader Title="Form Field" Description="A composite form field that wraps an input with a label, help text, and error messaging." />

<Stack Gap="8">
    <ComponentDemo Title="Basic" Code="@_basicCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <FormField Label="Email">
                <Input Type="email" placeholder="you@example.com" />
            </FormField>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Help Text" Code="@_helpCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <FormField Label="Username" HelpText="This will be your public display name.">
                <Input placeholder="johndoe" />
            </FormField>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Error" Code="@_errorCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <FormField Label="Password" Error="Password must be at least 8 characters.">
                <Input Type="password" placeholder="Enter password" />
            </FormField>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Required" Code="@_requiredCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <FormField Label="Full Name" Required="true">
                <Input placeholder="Jane Doe" />
            </FormField>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Horizontal Layout" Code="@_horizontalCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <FormField Label="First Name" Orientation="FormField.FormFieldOrientation.Horizontal" LabelWidth="120px">
                    <Input placeholder="Jane" />
                </FormField>
                <FormField Label="Last Name" Orientation="FormField.FormFieldOrientation.Horizontal" LabelWidth="120px">
                    <Input placeholder="Doe" />
                </FormField>
                <FormField Label="Email" Orientation="FormField.FormFieldOrientation.Horizontal" LabelWidth="120px" HelpText="We'll never share your email.">
                    <Input Type="email" placeholder="jane@example.com" />
                </FormField>
            </Stack>
        </Container>
    </ComponentDemo>

    <!-- API Reference -->
    <Stack Gap="6" Class="mt-12">
        <Heading Level="2">API Reference</Heading>
        <Stack Gap="8">
            <Stack>
                <Heading Level="3" Class="mb-3">FormField</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">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">—</td>
                                <td class="p-3 text-muted-foreground">Label text displayed above (vertical) or beside (horizontal) the input.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">HelpText</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">Helper text shown below the input. Hidden when an error is present.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Error</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">Error message displayed below the input in destructive color.</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">Shows a red asterisk (*) next to the label.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Orientation</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">FormFieldOrientation</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 (label above), Horizontal (label beside).</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">LabelWidth</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">Fixed label width for horizontal orientation (e.g. "120px").</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">—</td>
                                <td class="p-3 text-muted-foreground">Field name passed via cascading FormFieldContext for form integration.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _basicCode = @"<FormField Label=""Email"">
    <Input Type=""email"" placeholder=""you@example.com"" />
</FormField>";

    private string _helpCode = @"<FormField Label=""Username"" HelpText=""This will be your public display name."">
    <Input placeholder=""johndoe"" />
</FormField>";

    private string _errorCode = @"<FormField Label=""Password"" Error=""Password must be at least 8 characters."">
    <Input Type=""password"" placeholder=""Enter password"" />
</FormField>";

    private string _requiredCode = @"<FormField Label=""Full Name"" Required=""true"">
    <Input placeholder=""Jane Doe"" />
</FormField>";

    private string _horizontalCode = @"<FormField Label=""First Name"" Orientation=""FormField.FormFieldOrientation.Horizontal"" LabelWidth=""120px"">
    <Input placeholder=""Jane"" />
</FormField>";
}
