import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState, useSyncExternalStore } from "react";
import { Check, Folder, FolderOpen, Loader2, Plus } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Switch } from "../../components/ui/switch";
import { SearchInput } from "../../components/SearchInput";
import { cn } from "../../lib/utils";
import { SimpleTabs } from "../../editor/ui/SimpleTabs";
import { getTaskBoardNavSnapshot, subscribeTaskBoardNav, } from "../taskBoardNavStore";
function ProjectProgressIndicator({ done, total, }) {
    if (!total || total <= 0) {
        return null;
    }
    const progress = Math.max(0, Math.min(100, Math.round(((done ?? 0) / total) * 100)));
    if (progress >= 100) {
        return (_jsx("span", { className: "bg-feedback-green flex size-4 shrink-0 items-center justify-center rounded-full text-white", title: "Completed", "aria-label": "Completed", children: _jsx(Check, { className: "size-2.5", strokeWidth: 1 }) }));
    }
    return (_jsxs("span", { className: "text-neutral-grey-50 shrink-0 text-xs font-medium tabular-nums", children: [progress, "%"] }));
}
export function TaskBoardProjectListSidebar() {
    const nav = useSyncExternalStore(subscribeTaskBoardNav, getTaskBoardNavSnapshot, getTaskBoardNavSnapshot);
    const [search, setSearch] = useState("");
    const [filterMode, setFilterMode] = useState("active");
    const filterTabs = useMemo(() => [
        {
            id: "active",
            label: "Active projects",
            content: null,
            testId: "taskboard-project-list-filter-active",
        },
        {
            id: "archived",
            label: "Archive",
            content: null,
            testId: "taskboard-project-list-filter-archived",
        },
    ], []);
    const expandedProjectIds = useMemo(() => {
        if (!nav.selectedProjectId)
            return new Set();
        const projectById = new Map(nav.projectOptions.map((project) => [project.projectId, project]));
        const expanded = new Set();
        const visited = new Set();
        let currentProjectId = nav.selectedProjectId;
        while (currentProjectId && !visited.has(currentProjectId)) {
            visited.add(currentProjectId);
            expanded.add(currentProjectId);
            const parentProjectId = projectById.get(currentProjectId)?.parentProjectId ?? null;
            currentProjectId = parentProjectId;
        }
        return expanded;
    }, [nav.projectOptions, nav.selectedProjectId]);
    const scopedProjectOptions = useMemo(() => {
        return nav.projectOptions.filter((project) => !project.parentProjectId ||
            (project.depth ?? 0) === 0 ||
            expandedProjectIds.has(project.parentProjectId));
    }, [expandedProjectIds, nav.projectOptions]);
    const projects = useMemo(() => {
        const query = search.trim().toLowerCase();
        return scopedProjectOptions.filter((project) => {
            const isArchived = project.status?.toLowerCase() === "archived";
            if (filterMode === "active" && isArchived)
                return false;
            if (filterMode === "archived" && !isArchived)
                return false;
            if (!query)
                return true;
            const title = project.title?.toLowerCase() ?? "";
            const description = project.description?.toLowerCase() ?? "";
            const status = project.status?.toLowerCase() ?? "";
            return (title.includes(query) ||
                description.includes(query) ||
                status.includes(query));
        });
    }, [filterMode, scopedProjectOptions, search]);
    const emptyMessage = useMemo(() => {
        if (filterMode === "archived")
            return "No archived projects";
        if (search.trim())
            return "No matching projects";
        return "No projects found";
    }, [filterMode, search]);
    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-white", "data-testid": "taskboard-project-list-sidebar", children: [_jsxs("div", { className: "flex shrink-0 flex-col gap-3 px-4 pt-3", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "h-10 w-full justify-center gap-3 rounded-md bg-white px-4 text-sm font-medium shadow-none", onClick: () => nav.onCreateProject?.(), "data-testid": "taskboard-project-list-create-button", children: [_jsx("span", { className: "truncate", children: "Create new project" }), _jsx(Plus, { className: "h-4 w-4", strokeWidth: 1 })] }), _jsx(SearchInput, { value: search, onChange: setSearch, placeholder: "Search projects...", size: "md", searchIconPosition: "left", testId: "taskboard-project-list-search" }), _jsx("div", { className: "border-border-default border-b", children: _jsx(SimpleTabs, { tabs: filterTabs, activeTab: filterMode === "archived" ? 1 : 0, setActiveTab: (index) => setFilterMode(index === 1 ? "archived" : "active"), hideContent: true, className: "w-full gap-0", tabClassName: "w-1/2 px-0 pt-3 pb-[9px] text-xs font-medium", underlineTarget: "label", testId: "taskboard-project-list-filter-tabs" }) }), nav.isAdministrator ? (_jsxs("div", { className: "border-border-default border-b pb-3", children: [_jsxs("label", { className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex min-h-8 cursor-pointer items-center justify-end gap-2 rounded text-right 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 mt-1 text-right text-[10px]", "data-testid": "taskboard-show-all-projects-hint", children: "Admin feature: includes projects across all users." })] })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pt-6 pb-3", 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-project-list-loading", children: [_jsx(Loader2, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" }), "Loading projects..."] })) : projects.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 rounded-md border border-dashed px-3 py-8 text-center text-xs", children: emptyMessage })) : (_jsx("div", { className: "flex flex-col gap-1", children: projects.map((project) => {
                        const selected = project.projectId === nav.selectedProjectId;
                        const depth = Math.max(0, Math.min(project.depth ?? (project.parentProjectId ? 1 : 0), 6));
                        const ProjectIcon = selected ? FolderOpen : Folder;
                        const counts = project.overview?.taskCounts;
                        return (_jsxs("button", { type: "button", className: cn("group flex min-h-9 w-full items-center gap-2 rounded-md px-3 py-2 text-left transition-colors", selected
                                ? "bg-neutral-grey-5 text-neutral-grey-100"
                                : "text-neutral-grey-100 hover:bg-neutral-grey-5/70"), style: { paddingLeft: `${12 + depth * 20}px` }, onClick: () => nav.onSelectProject?.(project.projectId), "data-testid": `taskboard-project-list-option-${project.projectId}`, children: [_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(ProjectIcon, { className: "text-neutral-grey-100 h-4 w-4 shrink-0", strokeWidth: 1 }) }), _jsx("span", { className: cn("min-w-0 flex-1 truncate", "text-xs font-medium"), children: project.title }), _jsx(ProjectProgressIndicator, { done: counts?.done, total: counts?.total })] }, project.projectId));
                    }) })) })] }));
}
//# sourceMappingURL=TaskBoardProjectListSidebar.js.map