import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { Clock, FileStack, FolderPlus, LayoutGrid, Loader2, Settings, Shield, } from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { DeleteIcon } from "../../components/ui/delete-icon";
import { Button } from "../../components/ui/button";
import { Switch } from "../../components/ui/switch";
import { SearchInput } from "../../components/SearchInput";
import { cn } from "../../lib/utils";
import { TaskStateProgressBar } from "./ProjectDashboard";
export function ProjectOverviewContent({ nav }) {
    const [projectSearch, setProjectSearch] = useState("");
    const [hideArchivedProjects, setHideArchivedProjects] = useState(true);
    const filteredProjectOptions = useMemo(() => {
        const query = projectSearch.trim().toLowerCase();
        return nav.projectOptions.filter((project) => {
            if (project.parentProjectId || (project.depth ?? 0) > 0) {
                return false;
            }
            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));
        });
    }, [hideArchivedProjects, nav.projectOptions, projectSearch]);
    return (_jsxs("div", { className: "flex min-h-full w-full flex-col rounded-2xl border bg-white shadow-sm", "data-testid": "taskboard-project-overview", children: [_jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Workflow Projects" }), _jsx("h2", { className: "text-neutral-grey-100 text-xl font-medium", children: "Projects Overview" }), _jsx("p", { className: "text-neutral-grey-50 max-w-2xl text-sm", children: "Pick a project to open the board. Progress is shown here so you can see where each project stands." })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "h-9 px-3", "data-testid": "taskboard-project-overview-edit-templates-button", onClick: () => nav.onOpenProjectTemplates?.(), children: [_jsx(FileStack, { className: "mr-1.5 h-3.5 w-3.5" }), "Edit Templates"] }), _jsxs(Button, { variant: "default", size: "sm", className: "h-9 px-3", "data-testid": "taskboard-project-overview-create-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-4 py-3", children: _jsxs("div", { className: "grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto_auto] lg:items-center", children: [_jsx(SearchInput, { value: projectSearch, onChange: setProjectSearch, placeholder: "Search projects...", size: "lg", searchIconPosition: "left", inputClassName: "text-sm", testId: "taskboard-project-overview-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-project-overview-hide-archived" }), "Hide archived projects"] }), nav.isAdministrator ? (_jsxs("label", { className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex 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-project-overview-show-all-projects", 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]" })] })) : null] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children: nav.isProjectsLoading && nav.projectOptions.length === 0 ? (_jsxs("div", { className: "text-neutral-grey-50 flex min-h-[240px] items-center justify-center gap-2 rounded-xl border border-dashed text-sm", "data-testid": "taskboard-project-overview-loading", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Loading projects..."] })) : nav.projectOptions.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 rounded-xl border border-dashed px-4 py-12 text-center text-sm", children: "No projects yet" })) : filteredProjectOptions.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 rounded-xl border border-dashed px-4 py-12 text-center text-sm", children: "No matching projects" })) : (_jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: filteredProjectOptions.map((project) => {
                        const counts = project.overview?.taskCounts ?? {
                            total: 0,
                            todo: 0,
                            waiting: 0,
                            inProgress: 0,
                            review: 0,
                            done: 0,
                        };
                        const completionLabel = counts.total > 0
                            ? `${counts.done}/${counts.total} done`
                            : "No tasks yet";
                        const canManage = project.permission === "Owner";
                        const isSelected = project.projectId === nav.selectedProjectId;
                        const depth = Math.max(0, Math.min(project.depth ?? 0, 6));
                        const subprojectCount = project.overview?.directSubprojectCount ?? 0;
                        return (_jsxs("div", { className: cn("group flex flex-col rounded-xl border bg-white transition-colors", isSelected
                                ? "border-border-default shadow-sm"
                                : "border-border-default hover:border-border-default"), "data-testid": `taskboard-project-overview-card-${project.projectId}`, children: [_jsxs("div", { className: "flex items-start justify-between gap-2 px-4 pt-4", children: [_jsxs("button", { type: "button", className: "min-w-0 flex-1 text-left", onClick: () => nav.onSelectProject?.(project.projectId), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: "text-neutral-grey-50 h-4 w-4 flex-none" }), depth > 0 ? (_jsx("span", { className: "text-neutral-grey-50 text-[10px]", children: "↳".repeat(Math.min(depth, 2)) })) : null, _jsx("span", { className: "text-neutral-grey-100 truncate text-base font-medium", children: project.title })] }), project.description?.trim() ? (_jsx("p", { className: "text-neutral-grey-50 mt-2 line-clamp-3 text-xs", children: project.description.trim() })) : (_jsx("p", { className: "text-neutral-grey-50 mt-2 text-xs", children: "No description" }))] }), canManage ? (_jsxs("div", { className: "flex items-center gap-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", onClick: (e) => {
                                                        e.stopPropagation();
                                                        nav.onOpenProjectSettings?.(project.projectId);
                                                    }, title: "Project settings", "data-testid": `taskboard-project-overview-settings-${project.projectId}`, 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-8 w-8", onClick: (e) => {
                                                        e.stopPropagation();
                                                        nav.onDeleteProject?.(project.projectId, project.title);
                                                    }, title: "Delete project", "data-testid": `taskboard-project-overview-delete-${project.projectId}`, children: _jsx(DeleteIcon, { size: "md" }) })] })) : null] }), _jsxs("button", { type: "button", className: "flex flex-1 flex-col px-4 pb-4 text-left", onClick: () => nav.onSelectProject?.(project.projectId), children: [_jsxs("div", { className: "mt-4 space-y-2", children: [_jsxs("div", { className: "text-neutral-grey-50 flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { children: "Progress" }), _jsx("span", { children: completionLabel })] }), _jsx(TaskStateProgressBar, { counts: counts }), _jsxs("div", { className: "text-neutral-grey-50 flex flex-wrap gap-2 text-[11px]", children: [_jsxs("span", { children: [counts.todo, " todo"] }), _jsxs("span", { children: [counts.inProgress, " in progress"] }), _jsxs("span", { children: [counts.review, " review"] }), _jsxs("span", { children: [counts.waiting, " waiting"] })] })] }), _jsxs("div", { className: "text-neutral-grey-50 mt-4 flex flex-wrap items-center gap-3 border-t pt-3 text-[11px]", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Shield, { className: "text-neutral-grey-50 h-3 w-3" }), project.permission] }), subprojectCount > 0 ? (_jsxs("span", { children: [subprojectCount, " subproject", subprojectCount === 1 ? "" : "s"] })) : null, project.updatedAt ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", title: `Last updated: ${new Date(project.updatedAt).toLocaleString()}`, children: [_jsx(Clock, { className: "text-neutral-grey-50 h-3 w-3" }), formatDistanceToNow(new Date(project.updatedAt), {
                                                            addSuffix: true,
                                                        })] })) : null] })] })] }, project.projectId));
                    }) })) })] }));
}
//# sourceMappingURL=ProjectOverviewContent.js.map