import React, { useState } from 'react';
import { Box, Text, useApp, useInput } from 'ink';
import SelectInput from 'ink-select-input';
import { TextInput, Spinner } from '@inkjs/ui';
export function CreateTicketUI({ initialTitle, queues, onComplete }) {
    const { exit } = useApp();
    const [step, setStep] = useState(initialTitle ? 'priority' : 'title');
    const [title, setTitle] = useState(initialTitle || '');
    const [priority, setPriority] = useState('medium');
    const [queue, setQueue] = useState('');
    const [description, setDescription] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    useInput((input, key) => {
        if (key.escape) {
            exit();
        }
    });
    const priorityItems = [
        { label: '🔴 High', value: 'high' },
        { label: '🟡 Medium', value: 'medium' },
        { label: '🟢 Low', value: 'low' }
    ];
    const queueItems = queues.map(q => ({
        label: `${getQueueIcon(q)} ${q.charAt(0).toUpperCase() + q.slice(1)}`,
        value: q
    }));
    function getQueueIcon(queue) {
        const icons = {
            feature: '✨',
            bug: '🐛',
            refactor: '🔧',
            docs: '📚',
            devops: '⚙️',
            research: '🔬'
        };
        return icons[queue.toLowerCase()] || '📋';
    }
    const handleTitleSubmit = (value) => {
        if (value.trim()) {
            setTitle(value);
            setStep('priority');
        }
    };
    const handlePrioritySelect = (item) => {
        setPriority(item.value);
        setStep('queue');
    };
    const handleQueueSelect = (item) => {
        setQueue(item.value);
        setStep('description');
    };
    const handleDescriptionSubmit = (value) => {
        setDescription(value || getDefaultDescription());
        setIsSubmitting(true);
        onComplete({
            title,
            priority,
            queue,
            description: value || getDefaultDescription()
        });
        setStep('done');
        setTimeout(() => exit(), 100);
    };
    const getDefaultDescription = () => {
        return `## Description

## Acceptance Criteria
- [ ] 

## Technical Notes
`;
    };
    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { color: "cyan", bold: true }, "\uD83C\uDFAB Create New Ticket")),
        step === 'title' && (React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null, "Enter ticket title:"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(Text, { color: "gray" }, "\u203A "),
                React.createElement(TextInput, { defaultValue: title, onSubmit: handleTitleSubmit })))),
        step === 'priority' && (React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null, "Select priority:"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(SelectInput, { items: priorityItems, onSelect: handlePrioritySelect })))),
        step === 'queue' && (React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null, "Select queue/category:"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(SelectInput, { items: queueItems, onSelect: handleQueueSelect })))),
        step === 'description' && (React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null, "Enter description (optional, press Enter to skip):"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(Text, { color: "gray" }, "\u203A "),
                React.createElement(TextInput, { defaultValue: description, onSubmit: handleDescriptionSubmit, placeholder: "Press Enter to use default template..." })))),
        step === 'done' && (React.createElement(Box, null, isSubmitting ? (React.createElement(Text, { color: "green" },
            React.createElement(Spinner, { type: "dots" }),
            " Creating ticket...")) : (React.createElement(Text, { color: "green" }, "\u2705 Ticket data collected!")))),
        step !== 'done' && (React.createElement(Box, { marginTop: 1 },
            React.createElement(Text, { dimColor: true },
                "Step: ",
                step === 'title' ? '1/4' : step === 'priority' ? '2/4' : step === 'queue' ? '3/4' : '4/4')))));
}
//# sourceMappingURL=CreateTicketUI.js.map