@page "/blocks/file-manager"
@namespace Lumeo.Docs.Pages.Patterns

<PageTitle>File Manager Pattern — Lumeo</PageTitle>

<PageHeader Title="File Manager" Description="A Dropbox-inspired file manager with workspace navigation, pinned folders, recent files grid, full file table, and contextual hover actions." />

<ComponentDemo Title="File Browser" Code="@_code">
    <div class="w-full min-w-[780px] flex rounded-[var(--radius-lg)] border border-border/40 overflow-hidden" style="min-height:620px;">

        <!-- ── Left Sidebar ─────────────────────────────────────────── -->
        <div class="w-60 shrink-0 flex flex-col border-r border-border/40 bg-muted/20">

            <!-- Workspace dropdown -->
            <div class="flex items-center gap-2.5 px-4 py-3.5 border-b border-border/40">
                <div class="h-7 w-7 rounded-md bg-primary flex items-center justify-center shrink-0">
                    <DynamicIcon Name="Layers" Class="h-4 w-4 text-primary-foreground" />
                </div>
                <div class="flex-1 min-w-0">
                    <Lumeo.Text Class="text-sm font-semibold text-foreground truncate leading-none">Lumeo Design</Lumeo.Text>
                    <Lumeo.Text Class="text-[11px] text-muted-foreground leading-none mt-0.5">Personal workspace</Lumeo.Text>
                </div>
                <DynamicIcon Name="ChevronsUpDown" Class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
            </div>

            <!-- Nav links -->
            <div class="flex flex-col gap-0.5 p-2 flex-1">
                @foreach (var nav in _navItems)
                {
                    var n = nav;
                    <button class="@($"flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition-colors w-full text-left {(_activeNav == n.Key ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground")}")"
                            @onclick="@(() => _activeNav = n.Key)">
                        <DynamicIcon Name="@n.Icon" Class="h-4 w-4 shrink-0" />
                        <span class="flex-1">@n.Label</span>
                        @if (n.Count > 0)
                        {
                            <span class="text-xs text-muted-foreground tabular-nums">@n.Count</span>
                        }
                    </button>
                }

                <div class="my-1.5 border-t border-border/40"></div>

                <Lumeo.Text Class="px-2.5 py-1 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">Teams</Lumeo.Text>

                @foreach (var team in _teamItems)
                {
                    var t = team;
                    <button class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors w-full text-left"
                            @onclick="@(() => _activeNav = t)">
                        <div class="h-4 w-4 rounded-sm bg-chart-2/30 flex items-center justify-center shrink-0">
                            <span class="text-[9px] font-bold text-chart-2">@t[0]</span>
                        </div>
                        @t
                    </button>
                }
            </div>

            <!-- Storage widget -->
            <div class="p-3 border-t border-border/40 space-y-2.5">
                <div class="flex items-center justify-between">
                    <Lumeo.Text Class="text-xs font-medium text-foreground">Storage</Lumeo.Text>
                    <Lumeo.Text Class="text-[11px] text-muted-foreground tabular-nums">14.2 / 50 GB</Lumeo.Text>
                </div>
                <Progress Value="28" Class="h-1.5" />
                <Lumeo.Text Class="text-[11px] text-muted-foreground">28% used · 35.8 GB free</Lumeo.Text>
                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" Class="w-full h-8 text-xs">
                    <DynamicIcon Name="Zap" Class="h-3.5 w-3.5 mr-1.5 text-primary" />
                    Upgrade plan
                </Button>
            </div>
        </div>

        <!-- ── Main Area ─────────────────────────────────────────────── -->
        <div class="flex-1 min-w-0 flex flex-col">

            <!-- Top toolbar -->
            <div class="flex items-center gap-3 px-5 py-3 border-b border-border/40 bg-background/60">
                <!-- Breadcrumb -->
                <Breadcrumb Class="flex-1 min-w-0">
                    <BreadcrumbList>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="#">
                                <DynamicIcon Name="House" Class="h-3.5 w-3.5" />
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator />
                        @for (var i = 0; i < _breadcrumb.Count; i++)
                        {
                            var idx = i;
                            if (idx < _breadcrumb.Count - 1)
                            {
                                <BreadcrumbItem>
                                    <BreadcrumbLink @onclick="@(() => _breadcrumb = _breadcrumb.Take(idx + 1).ToList())" style="cursor:pointer">
                                        @_breadcrumb[idx]
                                    </BreadcrumbLink>
                                </BreadcrumbItem>
                                <BreadcrumbSeparator />
                            }
                            else
                            {
                                <BreadcrumbItem>
                                    <BreadcrumbPage>@_breadcrumb[idx]</BreadcrumbPage>
                                </BreadcrumbItem>
                            }
                        }
                    </BreadcrumbList>
                </Breadcrumb>

                <!-- Search -->
                <div class="relative">
                    <DynamicIcon Name="Search" Class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
                    <Input Value="@_search" ValueChanged="@(v => _search = v ?? "")"
                           placeholder="Search files…"
                           Class="pl-8 h-8 w-48 text-sm" />
                </div>

                <!-- View toggle -->
                <div class="flex rounded-md border border-border/40 overflow-hidden">
                    <button class="@($"flex items-center justify-center h-8 w-8 transition-colors {(_viewMode == "grid" ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/40")}")"
                            @onclick="@(() => _viewMode = "grid")">
                        <DynamicIcon Name="LayoutGrid" Class="h-4 w-4" />
                    </button>
                    <button class="@($"flex items-center justify-center h-8 w-8 border-l border-border/40 transition-colors {(_viewMode == "list" ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/40")}")"
                            @onclick="@(() => _viewMode = "list")">
                        <DynamicIcon Name="List" Class="h-4 w-4" />
                    </button>
                </div>

                <!-- Sort -->
                <Select Value="@_sortBy" ValueChanged="@(v => _sortBy = v ?? "Name")" Class="w-36">
                    <SelectTrigger Class="h-8 text-sm">
                        <DynamicIcon Name="ArrowUpDown" Class="h-3.5 w-3.5 mr-1 text-muted-foreground" />
                        <span>@_sortBy</span>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem Value="Name">Name</SelectItem>
                        <SelectItem Value="Modified">Modified</SelectItem>
                        <SelectItem Value="Size">Size</SelectItem>
                        <SelectItem Value="Type">Type</SelectItem>
                    </SelectContent>
                </Select>

                <!-- New button -->
                <DropdownMenu @bind-Open="_newMenuOpen">
                    <DropdownMenuTrigger>
                        <Button Size="Button.ButtonSize.Sm" Class="h-8 gap-1.5">
                            <DynamicIcon Name="Plus" Class="h-4 w-4" />
                            New
                            <DynamicIcon Name="ChevronDown" Class="h-3.5 w-3.5" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent Class="w-44">
                        <DropdownMenuItem>
                            <DynamicIcon Name="FolderPlus" Class="h-4 w-4 mr-2 text-primary" />
                            New folder
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>
                            <DynamicIcon Name="Upload" Class="h-4 w-4 mr-2 text-muted-foreground" />
                            Upload file
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            <DynamicIcon Name="FolderUp" Class="h-4 w-4 mr-2 text-muted-foreground" />
                            Upload folder
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>

            <!-- Scrollable content -->
            <div class="flex-1 overflow-auto p-5 space-y-6">

                <!-- Pinned folders -->
                <div>
                    <Lumeo.Text Class="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-3">Pinned</Lumeo.Text>
                    <div class="grid grid-cols-4 gap-3">
                        @foreach (var folder in _pinnedFolders)
                        {
                            var f = folder;
                            <div class="group flex flex-col gap-2.5 rounded-[var(--radius-lg)] border border-border/40 p-4 cursor-pointer hover:border-border/80 hover:bg-muted/30 hover:shadow-sm transition-all"
                                 @onclick="@(() => { _breadcrumb = new List<string>{ "Projects", f.Name }; })">
                                <div class="@($"h-10 w-10 rounded-lg {f.BgClass} flex items-center justify-center")">
                                    <DynamicIcon Name="Folder" Class="@($"h-5 w-5 {f.IconClass}")" />
                                </div>
                                <div>
                                    <Lumeo.Text Class="text-sm font-semibold text-foreground truncate">@f.Name</Lumeo.Text>
                                    <Lumeo.Text Class="text-[11px] text-muted-foreground">@f.Count items</Lumeo.Text>
                                </div>
                            </div>
                        }
                    </div>
                </div>

                <!-- Recent files grid -->
                @if (_viewMode == "grid")
                {
                    <div>
                        <Lumeo.Text Class="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-3">Recent files</Lumeo.Text>
                        <div class="grid grid-cols-4 gap-3">
                            @foreach (var file in VisibleFiles.Where(f => f.Type != "Folder").Take(8))
                            {
                                var fi = file;
                                <div class="group relative rounded-[var(--radius-lg)] border border-border/40 overflow-hidden cursor-pointer hover:border-border/80 hover:shadow-sm transition-all"
                                     @onclick="@(() => _selectedFile = _selectedFile?.Name == fi.Name ? null : fi)">
                                    <!-- Thumbnail -->
                                    <div class="@($"h-24 flex items-center justify-center {fi.ThumbBg}")">
                                        <DynamicIcon Name="@fi.Icon" Class="@($"h-10 w-10 {fi.IconClass}")" />
                                    </div>
                                    <!-- Hover actions -->
                                    <div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <Tooltip>
                                            <TooltipTrigger>
                                                <button class="h-6 w-6 rounded-md bg-background/90 border border-border/40 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors">
                                                    <DynamicIcon Name="Download" Class="h-3.5 w-3.5" />
                                                </button>
                                            </TooltipTrigger>
                                            <TooltipContent Side="TooltipContent.TooltipSide.Top">Download</TooltipContent>
                                        </Tooltip>
                                        <Tooltip>
                                            <TooltipTrigger>
                                                <button class="h-6 w-6 rounded-md bg-background/90 border border-border/40 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors">
                                                    <DynamicIcon Name="Share2" Class="h-3.5 w-3.5" />
                                                </button>
                                            </TooltipTrigger>
                                            <TooltipContent Side="TooltipContent.TooltipSide.Top">Share</TooltipContent>
                                        </Tooltip>
                                        <Tooltip>
                                            <TooltipTrigger>
                                                <button class="h-6 w-6 rounded-md bg-background/90 border border-border/40 flex items-center justify-center text-muted-foreground hover:text-destructive transition-colors">
                                                    <DynamicIcon Name="Trash2" Class="h-3.5 w-3.5" />
                                                </button>
                                            </TooltipTrigger>
                                            <TooltipContent Side="TooltipContent.TooltipSide.Top">Move to trash</TooltipContent>
                                        </Tooltip>
                                    </div>
                                    <!-- Meta -->
                                    <div class="px-3 py-2.5 border-t border-border/40">
                                        <Lumeo.Text Class="text-xs font-semibold text-foreground truncate">@fi.Name</Lumeo.Text>
                                        <div class="flex items-center justify-between mt-0.5">
                                            <Lumeo.Text Class="text-[11px] text-muted-foreground">@fi.Size</Lumeo.Text>
                                            <Lumeo.Text Class="text-[11px] text-muted-foreground">@fi.Modified</Lumeo.Text>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                }

                <!-- All files table -->
                <div>
                    <Lumeo.Text Class="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-3">
                        @(_viewMode == "grid" ? "All files" : "Files")
                    </Lumeo.Text>

                    @if (VisibleFiles.Count == 0)
                    {
                        <div class="flex flex-col items-center justify-center py-16 text-center">
                            <div class="h-14 w-14 rounded-full bg-muted flex items-center justify-center mb-4">
                                <DynamicIcon Name="FolderOpen" Class="h-7 w-7 text-muted-foreground" />
                            </div>
                            <Lumeo.Text Class="text-sm font-medium text-foreground">No files found</Lumeo.Text>
                            <Lumeo.Text Class="text-xs text-muted-foreground mt-1">Try adjusting your search or navigate to a different folder.</Lumeo.Text>
                        </div>
                    }
                    else
                    {
                        <Card Class="border-border/40">
                            <CardContent Class="p-0">
                                <Table>
                                    <TableHeader>
                                        <TableRow Class="hover:bg-transparent">
                                            <TableHead Class="pl-4 w-[40%]">Name</TableHead>
                                            <TableHead>Owner</TableHead>
                                            <TableHead>Modified</TableHead>
                                            <TableHead>Size</TableHead>
                                            <TableHead Class="w-10"></TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        @foreach (var file in VisibleFiles)
                                        {
                                            var f = file;
                                            <TableRow Class="group hover:bg-muted/30 transition-colors cursor-pointer"
                                                      @onclick="@(() => _selectedFile = _selectedFile?.Name == f.Name ? null : f)">
                                                <TableCell Class="pl-4 py-2.5">
                                                    <div class="flex items-center gap-3">
                                                        <div class="h-8 w-8 rounded-md bg-muted/60 flex items-center justify-center shrink-0">
                                                            <DynamicIcon Name="@f.Icon" Class="@($"h-4 w-4 {f.IconClass}")" />
                                                        </div>
                                                        <div class="min-w-0">
                                                            <Lumeo.Text As="span" Class="text-sm font-medium text-foreground truncate block">@f.Name</Lumeo.Text>
                                                            @if (f.Type != "Folder")
                                                            {
                                                                <Badge Variant="Badge.BadgeVariant.Secondary" Class="text-[10px] py-0 px-1.5 h-4 mt-0.5">@f.Type</Badge>
                                                            }
                                                        </div>
                                                    </div>
                                                </TableCell>
                                                <TableCell Class="py-2.5">
                                                    <div class="flex items-center gap-2">
                                                        <Avatar Size="Avatar.AvatarSize.Sm">
                                                            <AvatarFallback Class="text-[10px]">@f.Owner[0]</AvatarFallback>
                                                        </Avatar>
                                                        <Lumeo.Text As="span" Class="text-sm text-muted-foreground">@f.Owner</Lumeo.Text>
                                                    </div>
                                                </TableCell>
                                                <TableCell Class="py-2.5 text-sm text-muted-foreground">@f.Modified</TableCell>
                                                <TableCell Class="py-2.5 text-sm text-muted-foreground tabular-nums">@(f.Type == "Folder" ? "—" : f.Size)</TableCell>
                                                <TableCell Class="py-2.5 pr-3">
                                                    <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity justify-end">
                                                        <Tooltip>
                                                            <TooltipTrigger>
                                                                <button class="h-7 w-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
                                                                    <DynamicIcon Name="Download" Class="h-3.5 w-3.5" />
                                                                </button>
                                                            </TooltipTrigger>
                                                            <TooltipContent Side="TooltipContent.TooltipSide.Top">Download</TooltipContent>
                                                        </Tooltip>
                                                        <Tooltip>
                                                            <TooltipTrigger>
                                                                <button class="h-7 w-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
                                                                    <DynamicIcon Name="Pencil" Class="h-3.5 w-3.5" />
                                                                </button>
                                                            </TooltipTrigger>
                                                            <TooltipContent Side="TooltipContent.TooltipSide.Top">Rename</TooltipContent>
                                                        </Tooltip>
                                                        <Tooltip>
                                                            <TooltipTrigger>
                                                                <button class="h-7 w-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-destructive hover:bg-muted transition-colors">
                                                                    <DynamicIcon Name="Trash2" Class="h-3.5 w-3.5" />
                                                                </button>
                                                            </TooltipTrigger>
                                                            <TooltipContent Side="TooltipContent.TooltipSide.Top">Move to trash</TooltipContent>
                                                        </Tooltip>
                                                    </div>
                                                </TableCell>
                                            </TableRow>
                                        }
                                    </TableBody>
                                </Table>
                            </CardContent>
                        </Card>
                    }
                </div>
            </div>
        </div>
    </div>
</ComponentDemo>

@code {
    private record FileItem(string Name, string Type, string Size, string Modified, string Icon, string IconClass, string ThumbBg, string Owner);
    private record PinnedFolder(string Name, int Count, string BgClass, string IconClass);
    private record NavItem(string Key, string Label, string Icon, int Count = 0);

    private string _viewMode  = "grid";
    private string _activeNav = "drive";
    private string _sortBy    = "Modified";
    private string _search    = "";
    private bool   _newMenuOpen;
    private FileItem? _selectedFile;
    private List<string> _breadcrumb = new() { "Projects", "Lumeo" };

    private readonly List<NavItem> _navItems = new()
    {
        new("drive",   "My Drive",  "HardDrive"),
        new("starred", "Starred",   "Star"),
        new("recent",  "Recent",    "Clock",      12),
        new("shared",  "Shared with me", "Users", 5),
        new("trash",   "Trash",     "Trash2"),
    };

    private readonly string[] _teamItems = { "Design", "Engineering", "Marketing" };

    private readonly List<PinnedFolder> _pinnedFolders = new()
    {
        new("Design Assets",    47, "bg-primary/10",      "text-primary"),
        new("Engineering",      83, "bg-chart-2/10",      "text-chart-2"),
        new("Marketing",        29, "bg-chart-4/10",      "text-chart-4"),
        new("Archive",          14, "bg-muted-foreground/10", "text-muted-foreground"),
    };

    private readonly List<FileItem> _allFiles = new()
    {
        new("Q2 roadmap.pdf",             "PDF",         "2.4 MB",  "Apr 15, 2026", "FileText",        "text-destructive",      "bg-destructive/10",  "Keiko S."),
        new("design-tokens.fig",          "Figma",       "8.1 MB",  "Apr 14, 2026", "PenTool",         "text-primary",          "bg-primary/10",      "Amara D."),
        new("customers-export.csv",       "CSV",         "512 KB",  "Apr 13, 2026", "FileSpreadsheet", "text-chart-2",          "bg-chart-2/10",      "Noah P."),
        new("team-photo.heic",            "Image",       "4.2 MB",  "Apr 12, 2026", "Image",           "text-chart-3",          "bg-chart-3/10",      "Marcus W."),
        new("keynote-q2-review.pptx",     "PowerPoint",  "18.7 MB", "Apr 11, 2026", "Presentation",    "text-chart-4",          "bg-chart-4/10",      "Priya K."),
        new("api-schema.yaml",            "YAML",        "34 KB",   "Apr 10, 2026", "FileCode",        "text-muted-foreground", "bg-muted/50",        "Noah P."),
        new("brand-guidelines-v4.pdf",    "PDF",         "6.8 MB",  "Apr 9, 2026",  "FileText",        "text-destructive",      "bg-destructive/10",  "Keiko S."),
        new("lumeo-logo-2x.png",          "Image",       "156 KB",  "Apr 8, 2026",  "Image",           "text-chart-3",          "bg-chart-3/10",      "Amara D."),
        new("budget-2026.xlsx",           "Excel",       "840 KB",  "Apr 7, 2026",  "FileSpreadsheet", "text-chart-2",          "bg-chart-2/10",      "Marcus W."),
        new("release-notes-1.0.md",       "Markdown",    "28 KB",   "Apr 6, 2026",  "FileText",        "text-muted-foreground", "bg-muted/50",        "Noah P."),
        new("backup-2026-04.zip",         "Archive",     "95.3 MB", "Apr 5, 2026",  "FileArchive",     "text-muted-foreground", "bg-muted/50",        "Keiko S."),
        new("onboarding-video.mp4",       "Video",       "1.2 GB",  "Apr 4, 2026",  "Video",           "text-chart-4",          "bg-chart-4/10",      "Priya K."),
    };

    private List<FileItem> VisibleFiles
    {
        get
        {
            var files = _allFiles.AsEnumerable();
            if (!string.IsNullOrWhiteSpace(_search))
                files = files.Where(f => f.Name.Contains(_search, StringComparison.OrdinalIgnoreCase));
            return (_sortBy switch
            {
                "Name"     => files.OrderBy(f => f.Name),
                "Modified" => files.OrderBy(f => f.Modified),
                "Size"     => files.OrderBy(f => f.Size),
                "Type"     => files.OrderBy(f => f.Type),
                _          => files
            }).ToList();
        }
    }

    private string _code = @"<!-- File Manager — Lumeo pattern -->
<div class=""flex rounded-[var(--radius-lg)] border border-border/40 overflow-hidden"" style=""min-height:620px;"">

  <!-- Sidebar w-60 -->
  <div class=""w-60 shrink-0 flex flex-col border-r border-border/40 bg-muted/20"">
    <!-- Workspace badge -->
    <div class=""flex items-center gap-2.5 px-4 py-3.5 border-b border-border/40"">
      <div class=""h-7 w-7 rounded-md bg-primary flex items-center justify-center"">
        <DynamicIcon Name=""Layers"" Class=""h-4 w-4 text-primary-foreground"" />
      </div>
      <Lumeo.Text Class=""text-sm font-semibold truncate"">Lumeo Design</Lumeo.Text>
    </div>
    <!-- Nav items -->
    @foreach (var n in _navItems) {
      <button class=""flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-muted-foreground hover:bg-accent/50"">
        <DynamicIcon Name=""@n.Icon"" Class=""h-4 w-4 shrink-0"" /> @n.Label
      </button>
    }
    <!-- Storage -->
    <Progress Value=""28"" Class=""h-1.5"" />
    <Lumeo.Text Class=""text-xs text-muted-foreground"">14.2 / 50 GB</Lumeo.Text>
    <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Sm"" Class=""w-full"">Upgrade plan</Button>
  </div>

  <!-- Main -->
  <div class=""flex-1 flex flex-col"">
    <!-- Toolbar: breadcrumb, search, view toggle, sort, New button -->
    <div class=""flex items-center gap-3 px-5 py-3 border-b border-border/40"">
      <Breadcrumb Class=""flex-1"">...</Breadcrumb>
      <Input placeholder=""Search files…"" Class=""h-8 w-48"" />
      <!-- grid/list toggle, sort select, New dropdown -->
    </div>

    <!-- Content area -->
    <div class=""flex-1 overflow-auto p-5 space-y-6"">
      <!-- Pinned folders: 4-col grid of folder cards -->
      <!-- Recent files: 4-col thumbnail grid with hover actions -->
      <!-- All files: full Table with owner, modified, size, action icons -->
    </div>
  </div>
</div>";
}
