'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Plus, Trash2, Layers } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
import { createEpic, updateEpic, deleteEpic } from '../../../app/actions/manage-epics.js';
const STATUS_VARIANT = {
    InProgress: 'default',
    Planned: 'secondary',
    Completed: 'outline',
    Backlog: 'outline',
    Cancelled: 'destructive',
};
const EPIC_STATUSES = [
    'Backlog',
    'Planned',
    'InProgress',
    'Completed',
    'Cancelled',
];
export function EpicPanel({ projectId, epics, onEpicsChange, className }) {
    const [showCreateDialog, setShowCreateDialog] = useState(false);
    const [newName, setNewName] = useState('');
    const [newDescription, setNewDescription] = useState('');
    const [loading, setLoading] = useState(false);
    const handleCreate = useCallback(async () => {
        if (!newName.trim())
            return;
        setLoading(true);
        const result = await createEpic({
            projectId,
            name: newName.trim(),
            description: newDescription.trim() || undefined,
        });
        setLoading(false);
        if (result.epic) {
            onEpicsChange?.([...epics, result.epic]);
            setShowCreateDialog(false);
            setNewName('');
            setNewDescription('');
        }
    }, [newName, newDescription, projectId, epics, onEpicsChange]);
    const handleStatusChange = useCallback(async (epicId, status) => {
        const result = await updateEpic(epicId, { status });
        if (result.epic) {
            onEpicsChange?.(epics.map((e) => (e.id === result.epic.id ? result.epic : e)));
        }
    }, [epics, onEpicsChange]);
    const handleDelete = useCallback(async (epicId) => {
        const result = await deleteEpic(epicId);
        if (!result.error) {
            onEpicsChange?.(epics.filter((e) => e.id !== epicId));
        }
    }, [epics, onEpicsChange]);
    return (_jsxs("div", { "data-testid": "epic-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: "Epics" }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-6 text-[10px]", onClick: () => setShowCreateDialog(true), "data-testid": "create-epic-btn", children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), "New Epic"] })] }), epics.length === 0 ? (_jsx("div", { className: "text-muted-foreground py-8 text-center text-xs", children: "No epics yet. Create an epic to group related work items." })) : (_jsx("div", { className: "space-y-2", children: epics.map((epic) => (_jsxs("div", { "data-testid": `epic-${epic.id}`, className: "flex items-center justify-between rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Layers, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("span", { className: "text-xs font-medium", children: epic.name }), _jsxs(Select, { value: epic.status, onValueChange: (v) => handleStatusChange(epic.id, v), children: [_jsx(SelectTrigger, { className: "h-5 w-auto gap-1 border-none p-0 text-[10px]", children: _jsx(Badge, { variant: STATUS_VARIANT[epic.status] ?? 'outline', className: "text-[10px]", children: _jsx(SelectValue, {}) }) }), _jsx(SelectContent, { children: EPIC_STATUSES.map((s) => (_jsx(SelectItem, { value: s, className: "text-xs", children: s }, s))) })] }), epic.description ? (_jsx("span", { className: "text-muted-foreground max-w-[200px] truncate text-[10px]", children: epic.description })) : null] }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive h-6 px-2 text-[10px]", onClick: () => handleDelete(epic.id), children: _jsx(Trash2, { className: "h-3 w-3" }) })] }, epic.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 Epic" }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Name" }), _jsx(Input, { value: newName, onChange: (e) => setNewName(e.target.value), placeholder: "User Authentication", className: "h-8 text-xs" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Description (optional)" }), _jsx(Input, { value: newDescription, onChange: (e) => setNewDescription(e.target.value), placeholder: "All auth-related work items", className: "h-8 text-xs" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", className: "h-7 text-xs", onClick: handleCreate, disabled: loading, children: "Create" }) })] }) })] }));
}
