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 ClaimTicketUI({ tickets, needsAgentName, defaultAgentName = '', onComplete }) {
    const { exit } = useApp();
    const [step, setStep] = useState(tickets.length === 0 ? 'done' : 'select');
    const [selectedTicket, setSelectedTicket] = useState('');
    const [agentName, setAgentName] = useState(defaultAgentName);
    useInput((input, key) => {
        if (key.escape) {
            exit();
        }
    });
    if (tickets.length === 0) {
        return (React.createElement(Box, { padding: 1 },
            React.createElement(Text, { color: "yellow" }, "No tickets available in backlog.")));
    }
    const ticketItems = tickets.map(ticket => ({
        label: `${ticket.id} - ${ticket.title}`,
        value: ticket.id
    }));
    const handleTicketSelect = (item) => {
        setSelectedTicket(item.value);
        if (needsAgentName && !defaultAgentName) {
            setStep('agent');
        }
        else {
            onComplete({ ticketId: item.value, agentName: agentName || defaultAgentName });
            setStep('done');
            setTimeout(() => exit(), 100);
        }
    };
    const handleAgentSubmit = (value) => {
        if (value.trim()) {
            setAgentName(value);
            onComplete({ ticketId: selectedTicket, agentName: value });
            setStep('done');
            setTimeout(() => exit(), 100);
        }
    };
    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { color: "cyan", bold: true }, "\uD83C\uDFAF Claim Ticket")),
        step === 'select' && (React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null, "Select ticket to claim:"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(SelectInput, { items: ticketItems, onSelect: handleTicketSelect })),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(Text, { dimColor: true },
                    tickets.length,
                    " ticket",
                    tickets.length !== 1 ? 's' : '',
                    " available")))),
        step === 'agent' && (React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null, "Enter agent name:"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(Text, { color: "gray" }, "\u203A "),
                React.createElement(TextInput, { defaultValue: agentName, onSubmit: handleAgentSubmit, placeholder: process.env.USER || 'agent' })))),
        step === 'done' && (React.createElement(Box, null,
            React.createElement(Text, { color: "green" },
                React.createElement(Spinner, { type: "dots" }),
                " Claiming ticket...")))));
}
//# sourceMappingURL=ClaimTicketUI.js.map