import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { LayoutGrid, Search, Shield, Settings, Trash2, FolderPlus, Clock, Loader2, } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
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-xs font-semibold tracking-wider text-slate-500 uppercase", children: "Projects" }), nav.isProjectsLoading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-slate-400", "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: "h-8 px-2.5 text-slate-600", "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: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" }), _jsx(Input, { value: projectSearch, onChange: (e) => setProjectSearch(e.target.value), placeholder: "Search projects...", className: "h-8 pl-8 text-xs", "data-testid": "taskboard-project-search-input" })] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-slate-600", 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: "flex items-center gap-2 text-xs text-slate-600", children: [_jsx("input", { type: "checkbox", checked: nav.showAllProjects, onChange: (e) => nav.onToggleShowAllProjects?.(e.target.checked), "data-testid": "taskboard-show-all-projects-checkbox" }), "Show all projects"] }), _jsx("p", { className: "pl-5 text-[10px] text-slate-500", "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: "flex items-center justify-center gap-2 rounded-md border border-dashed px-3 py-8 text-xs text-slate-400", "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: "rounded-md border border-dashed px-3 py-8 text-center text-xs text-slate-400", children: "No projects yet" })) : filteredProjectOptions.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed px-3 py-8 text-center text-xs text-slate-400", 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-slate-300 bg-slate-50"
                                : "border-transparent hover:border-slate-200 hover:bg-slate-50/60"), 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-slate-400", isSubproject ? "h-3 w-3" : "h-3.5 w-3.5") }), project.depth && project.depth > 0 ? (_jsx("span", { className: "text-[10px] text-slate-400", children: "\u21B3" })) : null, _jsx("span", { className: cn("truncate text-slate-800", isSubproject
                                                        ? "text-xs font-medium"
                                                        : "text-sm font-medium"), children: project.title })] }), project.description?.trim() && (_jsx("div", { className: cn("line-clamp-2 pl-5 text-slate-500", 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-slate-400", isSubproject ? "h-2 w-2" : "h-2.5 w-2.5") }), _jsx("span", { className: cn("font-semibold tracking-wider text-slate-400 uppercase", 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-slate-300", isSubproject ? "h-2 w-2" : "h-2.5 w-2.5") }), _jsx("span", { className: cn("font-medium text-slate-400", 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-destructive hover:bg-destructive/10 hover:text-destructive h-7 w-7", onClick: (e) => {
                                                e.stopPropagation();
                                                nav.onDeleteProject?.(project.projectId, project.title);
                                            }, title: "Delete project", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }))] }, project.projectId));
                    }) })) })] }));
}
//# sourceMappingURL=ProjectListContent.js.map