import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { LayoutGrid, Shield, Settings, FolderPlus, Clock, Loader2, } from "lucide-react";
import { Button } from "../../components/ui/button";
import { DeleteIcon } from "../../components/ui/delete-icon";
import { Switch } from "../../components/ui/switch";
import { SearchInput } from "../../components/SearchInput";
import { cn } from "../../lib/utils";
import { formatDistanceToNow } from "date-fns";
export function ProjectListContent({ nav, onProjectSelected, className, maxHeight = 360, }) {
    const [projectSearch, setProjectSearch] = useState("");
    const [hideArchivedProjects, setHideArchivedProjects] = useState(true);
    const filteredProjectOptions = useMemo(() => {
        const query = projectSearch.trim().toLowerCase();
        return nav.projectOptions.filter((project) => {
            if (hideArchivedProjects &&
                project.status?.toLowerCase() === "archived") {
                return false;
            }
            if (!query)
                return true;
            const title = project.title?.toLowerCase() ?? "";
            const description = project.description?.toLowerCase() ?? "";
            const permission = project.permission?.toLowerCase() ?? "";
            const status = project.status?.toLowerCase() ?? "";
            return (title.includes(query) ||
                description.includes(query) ||
                permission.includes(query) ||
                status.includes(query));
        });
    }, [nav.projectOptions, projectSearch, hideArchivedProjects]);
    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Projects" }), nav.isProjectsLoading ? (_jsx(Loader2, { className: "text-neutral-grey-50 h-3.5 w-3.5 animate-spin", "data-testid": "taskboard-projects-loading-spinner" })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [nav.selectedProjectId ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "text-neutral-grey-50 h-8 px-2.5", "data-testid": "taskboard-open-project-overview-button", onClick: () => {
                                    nav.onSelectProject?.(null);
                                    onProjectSelected?.();
                                }, children: [_jsx(LayoutGrid, { className: "mr-1.5 h-3.5 w-3.5" }), "Overview"] })) : null, _jsxs(Button, { variant: "default", size: "sm", className: "h-8 px-3", "data-testid": "taskboard-create-project-button", onClick: () => nav.onCreateProject?.(), children: [_jsx(FolderPlus, { className: "mr-1.5 h-3.5 w-3.5" }), "New project"] })] })] }), _jsx("div", { className: "border-b px-3 py-2", children: _jsxs("div", { className: "grid gap-2", children: [_jsx(SearchInput, { value: projectSearch, onChange: setProjectSearch, placeholder: "Search projects...", size: "md", searchIconPosition: "left", testId: "taskboard-project-search-input" }), _jsxs("label", { className: "text-neutral-grey-50 flex items-center gap-2 text-xs", children: [_jsx("input", { type: "checkbox", checked: hideArchivedProjects, onChange: (e) => setHideArchivedProjects(e.target.checked), "data-testid": "taskboard-hide-archived-checkbox" }), "Hide archived projects"] }), nav.isAdministrator ? (_jsxs("div", { className: "grid gap-1", children: [_jsxs("label", { className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex cursor-pointer items-center justify-start gap-2 rounded text-[12px] font-medium transition-colors", children: [_jsx("span", { className: "truncate select-none", children: "Show all projects" }), _jsx(Switch, { checked: nav.showAllProjects, onCheckedChange: (checked) => nav.onToggleShowAllProjects?.(checked === true), "aria-label": "Show all projects", "data-testid": "taskboard-show-all-projects-checkbox", className: "data-[state=checked]:bg-neutral-grey-100 data-[state=unchecked]:bg-neutral-grey-15 h-[20px] w-[38px] p-[2px] shadow-none [&_[data-slot=switch-thumb]]:size-[16px] [&_[data-slot=switch-thumb]]:data-[state=checked]:translate-x-[18px]" })] }), _jsx("p", { className: "text-neutral-grey-50 text-[10px]", "data-testid": "taskboard-show-all-projects-hint", children: "Admin feature: includes projects across all users." })] })) : null] }) }), _jsx("div", { className: cn("overflow-y-auto p-2", maxHeight === "none" && "min-h-0 flex-1"), style: maxHeight !== "none" ? { maxHeight } : undefined, children: nav.isProjectsLoading && nav.projectOptions.length === 0 ? (_jsxs("div", { className: "text-neutral-grey-50 flex items-center justify-center gap-2 rounded-md border border-dashed px-3 py-8 text-xs", "data-testid": "taskboard-projects-empty-loading", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), "Loading projects..."] })) : nav.projectOptions.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 rounded-md border border-dashed px-3 py-8 text-center text-xs", children: "No projects yet" })) : filteredProjectOptions.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 rounded-md border border-dashed px-3 py-8 text-center text-xs", children: "No matching projects" })) : (_jsx("div", { className: "flex flex-col gap-1", children: filteredProjectOptions.map((project) => {
                        const isSelected = project.projectId === nav.selectedProjectId;
                        const canManage = project.permission === "Owner";
                        const isSubproject = (project.depth ?? 0) > 0;
                        const indent = Math.max(0, Math.min(project.depth ?? 0, 6)) * 14;
                        return (_jsxs("div", { "data-testid": `taskboard-project-option-${project.projectId}`, className: cn("group relative flex items-start justify-between gap-2 rounded-lg border px-2.5 transition-all", isSubproject ? "py-1.5" : "py-2", isSelected
                                ? "border-border-default bg-neutral-grey-5"
                                : "hover:border-border-default hover:bg-neutral-grey-5/60 border-transparent"), children: [_jsxs("button", { type: "button", className: "min-w-0 flex-1 text-left", style: {
                                        paddingLeft: indent > 0 ? `${indent}px` : undefined,
                                    }, onClick: () => {
                                        nav.onSelectProject?.(project.projectId);
                                        onProjectSelected?.();
                                    }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: cn("text-neutral-grey-50", isSubproject ? "h-3 w-3" : "h-3.5 w-3.5") }), project.depth && project.depth > 0 ? (_jsx("span", { className: "text-neutral-grey-50 text-[10px]", children: "\u21B3" })) : null, _jsx("span", { className: cn("text-neutral-grey-100 truncate", isSubproject
                                                        ? "text-xs font-medium"
                                                        : "text-sm font-medium"), children: project.title })] }), project.description?.trim() && (_jsx("div", { className: cn("text-neutral-grey-50 line-clamp-2 pl-5", isSubproject ? "mt-0.5 text-[10px]" : "mt-1 text-xs"), children: project.description.trim() })), _jsxs("div", { className: "mt-1 flex items-center gap-3 pl-5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Shield, { className: cn("text-neutral-grey-50", isSubproject ? "h-2 w-2" : "h-2.5 w-2.5") }), _jsx("span", { className: cn("text-neutral-grey-50 font-medium tracking-wider", isSubproject ? "text-[9px]" : "text-[10px]"), children: project.permission })] }), project.updatedAt && (_jsxs("div", { className: "flex items-center gap-1.5", title: `Last updated: ${new Date(project.updatedAt).toLocaleString()}`, children: [_jsx(Clock, { className: cn("text-neutral-grey-50", isSubproject ? "h-2 w-2" : "h-2.5 w-2.5") }), _jsx("span", { className: cn("text-neutral-grey-50 font-medium", isSubproject ? "text-[9px]" : "text-[10px]"), children: formatDistanceToNow(new Date(project.updatedAt), {
                                                                addSuffix: true,
                                                            }) })] }))] })] }), canManage && (_jsxs("div", { className: "flex items-center gap-1 transition-opacity md:opacity-0 md:group-hover:opacity-100", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", onClick: (e) => {
                                                e.stopPropagation();
                                                nav.onOpenProjectSettings?.(project.projectId);
                                                onProjectSelected?.();
                                            }, title: "Project settings", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 h-7 w-7", onClick: (e) => {
                                                e.stopPropagation();
                                                nav.onDeleteProject?.(project.projectId, project.title);
                                            }, title: "Delete project", children: _jsx(DeleteIcon, { size: "md" }) })] }))] }, project.projectId));
                    }) })) })] }));
}
//# sourceMappingURL=ProjectListContent.js.map