'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { FolderKanban, Plus } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { Badge } from '../../ui/badge.js';
import { CreateProjectDialog } from './create-project-dialog.js';
export function ProjectsPageClient({ projects: initialProjects, className, }) {
    const [projects, setProjects] = useState(initialProjects);
    const [showCreateDialog, setShowCreateDialog] = useState(false);
    const router = useRouter();
    const handleProjectCreated = (project) => {
        setProjects((prev) => [...prev, project]);
        setShowCreateDialog(false);
    };
    return (_jsxs("div", { "data-testid": "projects-page-client", className: cn('space-y-4', className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FolderKanban, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Projects" }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [projects.length, " projects"] })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 text-xs", onClick: () => setShowCreateDialog(true), "data-testid": "create-project-btn", children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), "New Project"] })] }), projects.length === 0 ? (_jsxs("div", { "data-testid": "projects-page-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: [_jsx(FolderKanban, { className: "mb-2 h-6 w-6 opacity-20" }), _jsx("p", { className: "text-xs", children: "No projects yet. Create your first project to get started." })] })) : (_jsx("div", { "data-testid": "projects-page-grid", className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: projects.map((project) => (_jsxs("button", { type: "button", "data-testid": `project-card-${project.slug}`, className: "bg-card hover:bg-accent text-card-foreground rounded-lg border p-4 text-left transition-colors", onClick: () => router.push(`/projects/${project.slug}`), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: project.name }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: project.identifierPrefix })] }), project.description ? (_jsx("p", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: project.description })) : null, _jsxs("div", { className: "text-muted-foreground mt-2 text-[10px]", children: [project.workItemCounter, " items"] })] }, project.id))) })), _jsx(CreateProjectDialog, { open: showCreateDialog, onOpenChange: setShowCreateDialog, onCreated: handleProjectCreated })] }));
}
