@page "/components/table"

<PageTitle>Table — Lumeo</PageTitle>

<PageHeader Title="Table" Description="A responsive table component for displaying tabular data." />

<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>Display structured, tabular data such as invoices, user lists, or logs.</li>
        <li>Show comparison data with consistent columns and rows.</li>
        <li>Present simple read-only lists. For sortable or interactive tables, consider DataTable.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Table>
            <TableCaption>A list of recent invoices.</TableCaption>
            <TableHeader>
                <TableRow>
                    <TableHead>Invoice</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Method</TableHead>
                    <TableHead Class="text-right">Amount</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                @foreach (var invoice in _invoices)
                {
                    <TableRow>
                        <TableCell Class="font-medium">@invoice.Id</TableCell>
                        <TableCell>@invoice.Status</TableCell>
                        <TableCell>@invoice.Method</TableCell>
                        <TableCell Class="text-right">@invoice.Amount</TableCell>
                    </TableRow>
                }
            </TableBody>
        </Table>
    </ComponentDemo>

    <ComponentDemo Title="Simple Table" Code="@_simpleCode">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Department</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow>
                    <TableCell Class="font-medium">Alice Johnson</TableCell>
                    <TableCell>Engineer</TableCell>
                    <TableCell>Engineering</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell Class="font-medium">Bob Smith</TableCell>
                    <TableCell>Designer</TableCell>
                    <TableCell>Product</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell Class="font-medium">Carol Williams</TableCell>
                    <TableCell>Manager</TableCell>
                    <TableCell>Operations</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    </ComponentDemo>

    <ComponentDemo Title="Table with Status Badges" Code="@_statusCode">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead>Task</TableHead>
                    <TableHead>Assignee</TableHead>
                    <TableHead>Priority</TableHead>
                    <TableHead>Status</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                @foreach (var task in _tasks)
                {
                    <TableRow>
                        <TableCell Class="font-medium">@task.Name</TableCell>
                        <TableCell>@task.Assignee</TableCell>
                        <TableCell>
                            <Badge Variant="@task.PriorityVariant">@task.Priority</Badge>
                        </TableCell>
                        <TableCell>
                            <Badge Variant="@task.StatusVariant">@task.Status</Badge>
                        </TableCell>
                    </TableRow>
                }
            </TableBody>
        </Table>
    </ComponentDemo>

    <ComponentDemo Title="Table with Pagination" Code="@_paginatedCode">
        <Stack Gap="4">
            <Table>
                <TableCaption>Showing @(_pageStart + 1)–@(Math.Min(_pageStart + _pageSize, _invoices.Count)) of @_invoices.Count invoices</TableCaption>
                <TableHeader>
                    <TableRow>
                        <TableHead>Invoice</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Method</TableHead>
                        <TableHead Class="text-right">Amount</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    @foreach (var invoice in _invoices.Skip(_pageStart).Take(_pageSize))
                    {
                        <TableRow>
                            <TableCell Class="font-medium">@invoice.Id</TableCell>
                            <TableCell>@invoice.Status</TableCell>
                            <TableCell>@invoice.Method</TableCell>
                            <TableCell Class="text-right">@invoice.Amount</TableCell>
                        </TableRow>
                    }
                </TableBody>
            </Table>
            <Flex Align="center" Justify="end" Gap="2">
                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm"
                        Disabled="@(_tablePage <= 1)" OnClick="@(() => GoTablePage(_tablePage - 1))">
                    <DynamicIcon Name="ChevronLeft" Class="h-4 w-4" /> Previous
                </Button>
                <Lumeo.Text As="span" Size="sm" Color="muted">Page @_tablePage of @_tablePages</Lumeo.Text>
                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm"
                        Disabled="@(_tablePage >= _tablePages)" OnClick="@(() => GoTablePage(_tablePage + 1))">
                    Next <DynamicIcon Name="ChevronRight" Class="h-4 w-4" />
                </Button>
            </Flex>
        </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">Table Components</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">Component</th>
                            <th class="text-left p-3 font-medium text-foreground">Element</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">Table</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;table&gt;</td>
                            <td class="p-3 text-muted-foreground">Root table element wrapped in a scrollable container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TableHeader</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;thead&gt;</td>
                            <td class="p-3 text-muted-foreground">Table header section containing header rows.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TableBody</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;tbody&gt;</td>
                            <td class="p-3 text-muted-foreground">Table body containing data rows.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TableRow</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;tr&gt;</td>
                            <td class="p-3 text-muted-foreground">A table row with hover highlight and border styling.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TableHead</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;th&gt;</td>
                            <td class="p-3 text-muted-foreground">A header cell with muted foreground text. All accept Class and AdditionalAttributes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TableCell</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;td&gt;</td>
                            <td class="p-3 text-muted-foreground">A data cell with standard padding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TableCaption</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&lt;caption&gt;</td>
                            <td class="p-3 text-muted-foreground">Optional caption displayed below the table in muted text.</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/data-table" class="text-primary hover:underline">DataTable</a> — Use for interactive tables with sorting, filtering, and row selection.</li>
        <li><a href="/components/pagination" class="text-primary hover:underline">Pagination</a> — Pair with Table for navigating large data sets across pages.</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — An alternative layout for displaying individual records in a grid.</li>
    </ul>
</div>

@code {
    private List<Invoice> _invoices = new()
    {
        new("INV001", "Paid", "Credit Card", "$250.00"),
        new("INV002", "Pending", "PayPal", "$150.00"),
        new("INV003", "Unpaid", "Bank Transfer", "$350.00"),
        new("INV004", "Paid", "Credit Card", "$450.00"),
        new("INV005", "Paid", "PayPal", "$550.00"),
        new("INV006", "Pending", "Bank Transfer", "$200.00"),
        new("INV007", "Unpaid", "Credit Card", "$300.00"),
    };

    private record Invoice(string Id, string Status, string Method, string Amount);

    private int _tablePage = 1;
    private int _pageSize = 3;
    private int _tablePages => (int)Math.Ceiling(_invoices.Count / (double)_pageSize);
    private int _pageStart => (_tablePage - 1) * _pageSize;

    private void GoTablePage(int page)
    {
        if (page >= 1 && page <= _tablePages) _tablePage = page;
    }

    private List<TaskItem> _tasks = new()
    {
        new("Design onboarding flow", "Alice Johnson", "High", "In Progress"),
        new("Fix login bug", "Bob Smith", "Critical", "Done"),
        new("Write API docs", "Carol Williams", "Medium", "Todo"),
        new("Update homepage copy", "David Lee", "Low", "In Progress"),
        new("Code review: auth module", "Alice Johnson", "High", "Todo"),
    };

    private record TaskItem(string Name, string Assignee, string Priority, string Status)
    {
        public Badge.BadgeVariant PriorityVariant => Priority switch
        {
            "Critical" => Badge.BadgeVariant.Destructive,
            "High" => Badge.BadgeVariant.Warning,
            "Medium" => Badge.BadgeVariant.Secondary,
            _ => Badge.BadgeVariant.Outline
        };
        public Badge.BadgeVariant StatusVariant => Status switch
        {
            "Done" => Badge.BadgeVariant.Success,
            "In Progress" => Badge.BadgeVariant.Default,
            _ => Badge.BadgeVariant.Secondary
        };
    }

    private string _defaultCode = @"<Table>
    <TableCaption>A list of recent invoices.</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead Class=""text-right"">Amount</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        @foreach (var invoice in _invoices)
        {
            <TableRow>
                <TableCell Class=""font-medium"">@invoice.Id</TableCell>
                <TableCell>@invoice.Status</TableCell>
                <TableCell>@invoice.Method</TableCell>
                <TableCell Class=""text-right"">@invoice.Amount</TableCell>
            </TableRow>
        }
    </TableBody>
</Table>";

    private string _simpleCode = @"<Table>
    <TableHeader>
        <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Role</TableHead>
            <TableHead>Department</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableCell Class=""font-medium"">Alice Johnson</TableCell>
            <TableCell>Engineer</TableCell>
            <TableCell>Engineering</TableCell>
        </TableRow>
        <TableRow>
            <TableCell Class=""font-medium"">Bob Smith</TableCell>
            <TableCell>Designer</TableCell>
            <TableCell>Product</TableCell>
        </TableRow>
    </TableBody>
</Table>";

    private string _statusCode = @"<Table>
    <TableHeader>
        <TableRow>
            <TableHead>Task</TableHead>
            <TableHead>Assignee</TableHead>
            <TableHead>Priority</TableHead>
            <TableHead>Status</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        @foreach (var task in _tasks)
        {
            <TableRow>
                <TableCell Class=""font-medium"">@task.Name</TableCell>
                <TableCell>@task.Assignee</TableCell>
                <TableCell><Badge Variant=""@task.PriorityVariant"">@task.Priority</Badge></TableCell>
                <TableCell><Badge Variant=""@task.StatusVariant"">@task.Status</Badge></TableCell>
            </TableRow>
        }
    </TableBody>
</Table>";

    private string _paginatedCode = @"<Table>
    <TableHeader>
        <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead Class=""text-right"">Amount</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        @foreach (var invoice in _invoices.Skip(_pageStart).Take(_pageSize))
        {
            <TableRow>
                <TableCell Class=""font-medium"">@invoice.Id</TableCell>
                <TableCell>@invoice.Status</TableCell>
                <TableCell>@invoice.Method</TableCell>
                <TableCell Class=""text-right"">@invoice.Amount</TableCell>
            </TableRow>
        }
    </TableBody>
</Table>
<Flex Align=""center"" Justify=""end"" Gap=""2"" Class=""mt-4"">
    <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Sm""
            Disabled=""@(_tablePage <= 1)"" OnClick=""@(() => GoTablePage(_tablePage - 1))"">
        <DynamicIcon Name=""ChevronLeft"" Class=""h-4 w-4"" /> Previous
    </Button>
    <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">Page @_tablePage of @_tablePages</Lumeo.Text>
    <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Sm""
            Disabled=""@(_tablePage >= _tablePages)"" OnClick=""@(() => GoTablePage(_tablePage + 1))"">
        Next <DynamicIcon Name=""ChevronRight"" Class=""h-4 w-4"" />
    </Button>
</Flex>";
}
