Search.razor

@page "/search"
@inject IVirtualFileSystem VFS
@inject VFSStateService StateService
@inject NavigationManager Navigation
@inject RecentFilesService RecentFiles
@rendermode InteractiveServer

<PageTitle>Search - CloudDrive</PageTitle>

<div class="h-full flex flex-col bg-white">
    @* Header *@
    <div class="p-4 border-b border-gray-200">
        <div class="flex items-center gap-3">
            <svg class="w-6 h-6 text-cloud-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
            </svg>
            <h1 class="text-xl font-semibold text-gray-900">Search</h1>
        </div>
    </div>

    @* Search Bar *@
    <div class="p-4 bg-gray-50 border-b border-gray-200">
        <div class="max-w-2xl">
            <div class="flex gap-2">
                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                        </svg>
                    </div>
                    <input type="text"
                           class="block w-full pl-10 pr-3 py-2.5 text-sm bg-white border border-gray-300 rounded-lg focus:border-cloud-500 focus:ring-1 focus:ring-cloud-500"
                           placeholder="Search files and folders..."
                           @bind="SearchTerm"
                           @bind:event="oninput"
                           @onkeydown="HandleKeyDown" />
                </div>
                <Button Variant="primary" OnClick="PerformSearch" Disabled="@string.IsNullOrWhiteSpace(SearchTerm)">
                    Search
                </Button>
            </div>

            @* Filters *@
            <div class="flex flex-wrap gap-4 mt-3">
                <div class="flex items-center gap-2">
                    <label class="text-sm text-gray-600">Type:</label>
                    <select class="text-sm border border-gray-300 rounded-md px-2 py-1 focus:ring-cloud-500 focus:border-cloud-500"
                            @bind="SearchType">
                        <option value="@SearchTypes.Name">Name contains</option>
                        <option value="@SearchTypes.Exact">Exact name</option>
                        <option value="@SearchTypes.Extension">Extension</option>
                        <option value="@SearchTypes.Content">Content contains</option>
                    </select>
                </div>

                <div class="flex items-center gap-2">
                    <label class="text-sm text-gray-600">In:</label>
                    <select class="text-sm border border-gray-300 rounded-md px-2 py-1 focus:ring-cloud-500 focus:border-cloud-500"
                            @bind="SearchTarget">
                        <option value="@SearchTargets.Both">Files & Folders</option>
                        <option value="@SearchTargets.FilesOnly">Files only</option>
                        <option value="@SearchTargets.DirectoriesOnly">Folders only</option>
                    </select>
                </div>

                <label class="flex items-center gap-2 text-sm text-gray-600">
                    <input type="checkbox" class="checkbox" @bind="CaseSensitive" />
                    Case sensitive
                </label>
            </div>
        </div>
    </div>

    @* Results *@
    <div class="flex-1 overflow-auto">
        @if (IsSearching)
        {
            <div class="flex items-center justify-center py-16">
                <div class="text-center">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-cloud-600 mx-auto mb-3"></div>
                    <p class="text-sm text-gray-500">Searching...</p>
                </div>
            </div>
        }
        else if (HasSearched && !SearchResults.Any())
        {
            <EmptyState Title="No results found"
                        Description="@($"No items matching \"{SearchTerm}\" were found")"
                        Icon="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        }
        else if (SearchResults.Any())
        {
            <div class="p-4">
                <p class="text-sm text-gray-500 mb-3">@SearchResults.Count results found</p>

                <div class="space-y-2">
                    @foreach (var result in SearchResults)
                    {
                        <div class="flex items-center gap-4 p-3 bg-white rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all cursor-pointer"
                             @onclick="() => OpenResult(result)">
                            <FileIcon IsDirectory="@result.IsDirectory" FileName="@result.Name" />
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 truncate">@result.Name</p>
                                <p class="text-xs text-gray-500 truncate">@result.Path.Value</p>
                            </div>
                            <Badge Variant="@(result.IsDirectory ? "blue" : "gray")">
                                @(result.IsDirectory ? "Folder" : "File")
                            </Badge>
                        </div>
                    }
                </div>
            </div>
        }
        else
        {
            <div class="flex items-center justify-center py-16">
                <div class="text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                    </svg>
                    <p class="text-gray-500">Enter a search term to find files and folders</p>
                </div>
            </div>
        }
    </div>
</div>

@code {
    [SupplyParameterFromQuery] public string? q { get; set; }

    private string SearchTerm = "";
    private SearchTypes SearchType = SearchTypes.Name;
    private SearchTargets SearchTarget = SearchTargets.Both;
    private bool CaseSensitive = false;
    private bool IsSearching = false;
    private bool HasSearched = false;

    private List<IVirtualFileSystemNode> SearchResults = [];

    private enum SearchTypes { Name, Exact, Extension, Content }
    private enum SearchTargets { Both, FilesOnly, DirectoriesOnly }

    protected override void OnInitialized()
    {
        if (!string.IsNullOrWhiteSpace(q))
        {
            SearchTerm = q;
            _ = PerformSearch();
        }
    }

    protected override void OnParametersSet()
    {
        if (!string.IsNullOrWhiteSpace(q) && q != SearchTerm)
        {
            SearchTerm = q;
            _ = PerformSearch();
        }
    }

    private void HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(SearchTerm))
        {
            _ = PerformSearch();
        }
    }

    private async Task PerformSearch()
    {
        if (string.IsNullOrWhiteSpace(SearchTerm))
            return;

        IsSearching = true;
        HasSearched = true;
        SearchResults.Clear();
        StateHasChanged();

        try
        {
            await Task.Delay(100); // Brief delay for UX

            var allNodes = new List<IVirtualFileSystemNode>();

            if (SearchTarget is SearchTargets.Both or SearchTargets.FilesOnly)
                allNodes.AddRange(VFS.Files);

            if (SearchTarget is SearchTargets.Both or SearchTargets.DirectoriesOnly)
                allNodes.AddRange(VFS.Directories);

            foreach (var node in allNodes)
            {
                if (MatchesSearchCriteria(node))
                    SearchResults.Add(node);
            }

            SearchResults = SearchResults
                .OrderBy(n => n.IsFile ? 1 : 0)
                .ThenBy(n => n.Name, CaseSensitive ? StringComparer.Ordinal : StringComparer.OrdinalIgnoreCase)
                .ToList();
        }
        finally
        {
            IsSearching = false;
            StateHasChanged();
        }
    }

    private bool MatchesSearchCriteria(IVirtualFileSystemNode node)
    {
        var comparison = CaseSensitive ? StringComparison.Ordinal : StringComparison.OrdinalIgnoreCase;

        return SearchType switch
        {
            SearchTypes.Name => node.Name.Contains(SearchTerm, comparison),
            SearchTypes.Exact => node.Name.Equals(SearchTerm, comparison),
            SearchTypes.Extension => node is IFileNode &&
                                   System.IO.Path.GetExtension(node.Name).Equals(
                                       SearchTerm.StartsWith('.') ? SearchTerm : '.' + SearchTerm, comparison),
            SearchTypes.Content => node is IFileNode file &&
                                 file.Content.Contains(SearchTerm, comparison),
            _ => false
        };
    }

    private void OpenResult(IVirtualFileSystemNode result)
    {
        if (result.IsDirectory)
        {
            RecentFiles.RecordAccess(result.Path.Value, true);
            Navigation.NavigateTo(VFSStateService.ToFolderUrl(result.Path.Value));
        }
        else
        {
            RecentFiles.RecordAccess(result.Path.Value, false);
            Navigation.NavigateTo($"/file?path={Uri.EscapeDataString(result.Path.Value)}");
        }
    }
}