'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Plus, Trash2, Package } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { Badge } from '../../ui/badge.js';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from '../../ui/dialog.js';
import { Input } from '../../ui/input.js';
import { Label } from '../../ui/label.js';
import { createModule, deleteModule } from '../../../app/actions/manage-modules.js';
const STATUS_VARIANT = {
    InProgress: 'default',
    Planned: 'secondary',
    Completed: 'outline',
    Backlog: 'outline',
    Paused: 'secondary',
    Cancelled: 'destructive',
};
export function ModulePanel({ projectId, modules, onModulesChange, className }) {
    const [showCreateDialog, setShowCreateDialog] = useState(false);
    const [newModuleName, setNewModuleName] = useState('');
    const [newModuleDescription, setNewModuleDescription] = useState('');
    const [loading, setLoading] = useState(false);
    const handleCreate = useCallback(async () => {
        if (!newModuleName.trim())
            return;
        setLoading(true);
        const result = await createModule({
            projectId,
            name: newModuleName.trim(),
            description: newModuleDescription.trim() || undefined,
        });
        setLoading(false);
        if (result.module) {
            onModulesChange?.([...modules, result.module]);
            setShowCreateDialog(false);
            setNewModuleName('');
            setNewModuleDescription('');
        }
    }, [newModuleName, newModuleDescription, projectId, modules, onModulesChange]);
    const handleDelete = useCallback(async (moduleId) => {
        const result = await deleteModule(moduleId);
        if (!result.error) {
            onModulesChange?.(modules.filter((m) => m.id !== moduleId));
        }
    }, [modules, onModulesChange]);
    return (_jsxs("div", { "data-testid": "module-panel", className: cn('space-y-3', className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-xs font-medium", children: "Modules" }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-6 text-[10px]", onClick: () => setShowCreateDialog(true), "data-testid": "create-module-btn", children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), "New Module"] })] }), modules.length === 0 ? (_jsx("div", { className: "text-muted-foreground py-8 text-center text-xs", children: "No modules yet. Create a module to group related work items." })) : (_jsx("div", { className: "space-y-2", children: modules.map((mod) => (_jsxs("div", { "data-testid": `module-${mod.id}`, className: "flex items-center justify-between rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("span", { className: "text-xs font-medium", children: mod.name }), _jsx(Badge, { variant: STATUS_VARIANT[mod.status] ?? 'outline', className: "text-[10px]", children: mod.status }), mod.description ? (_jsx("span", { className: "text-muted-foreground max-w-[200px] truncate text-[10px]", children: mod.description })) : null] }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive h-6 px-2 text-[10px]", onClick: () => handleDelete(mod.id), children: _jsx(Trash2, { className: "h-3 w-3" }) })] }, mod.id))) })), _jsx(Dialog, { open: showCreateDialog, onOpenChange: setShowCreateDialog, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "text-sm", children: "Create Module" }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Name" }), _jsx(Input, { value: newModuleName, onChange: (e) => setNewModuleName(e.target.value), placeholder: "Authentication", className: "h-8 text-xs" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Description (optional)" }), _jsx(Input, { value: newModuleDescription, onChange: (e) => setNewModuleDescription(e.target.value), placeholder: "User login, signup, and session management", className: "h-8 text-xs" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", className: "h-7 text-xs", onClick: handleCreate, disabled: loading, children: "Create" }) })] }) })] }));
}
