import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { Pane } from "./design/Pane.js";
import { StatusBadge } from "./design/StatusBadge.js";
import { flattenCellText, truncateCells } from "./design/textLayout.js";
import { useTerminalSize } from "../hooks/useTerminalSize.js";
export function QuestionPanel(props) {
    const { columns } = useTerminalSize();
    const width = Math.max(42, Math.min(104, columns - 4));
    const model = questionPanelModel(props.record, props.title);
    return (_jsxs(Pane, { width: width, title: model.title, tone: toneForStatus(model.status), paddingX: 1, children: [_jsxs(Text, { children: [_jsx(StatusBadge, { label: model.status, tone: toneForStatus(model.status) }), " ", _jsx(Text, { color: "gray", children: model.statusDetail })] }), _jsx(QuestionRow, { label: "run", value: model.runLabel }), model.answer ? _jsx(QuestionRow, { label: "answer", value: model.answer, color: "green" }) : null, model.questions.map((question, index) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: `${index + 1}. ${question.header}` }), " ", _jsx(Text, { children: question.question }), question.multiSelect ? _jsx(Text, { color: "gray", children: " multi" }) : null] }), question.options.map((option) => (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Text, { children: [_jsx(Text, { color: "gray", children: option.label.padEnd(10) }), _jsx(Text, { color: "gray", children: option.description })] }), option.preview ? _jsx(Text, { color: "gray", children: `preview ${option.preview}` }) : null] }, option.label)))] }, `${index}-${question.question}`))), _jsx(QuestionCommandRows, { commands: model.commands })] }));
}
export function questionPanelModel(record, title = "Question") {
    return {
        title,
        gateId: record.gateId,
        runId: record.runId,
        runLabel: displayRunLabel(record.runId),
        statusDetail: questionStatusDetail(record),
        status: record.status,
        answer: record.answer ?? "",
        questions: record.questions.map((question) => ({
            header: question.header,
            question: truncateCells(flattenCellText(question.question), 120),
            multiSelect: Boolean(question.multiSelect),
            options: question.options.map((option) => ({
                label: truncateCells(flattenCellText(option.label), 32),
                description: truncateCells(flattenCellText(option.description), 120),
                preview: option.preview ? truncateCells(flattenCellText(option.preview), 120) : "",
            })),
        })),
        commands: questionCommands(record),
    };
}
function questionCommands(record) {
    const commands = [
        {
            label: "show",
            command: record.status === "pending" ? "/question show latest" : `/question show ${record.gateId}`,
            description: "print the full prompt",
            tone: "inspect",
        },
    ];
    if (record.status === "pending") {
        commands.push({
            label: "answer",
            command: "/question answer latest <answer>",
            description: "resume the paused run",
            tone: "allow",
        }, {
            label: "reject",
            command: "/question reject latest <reason>",
            description: "ask DeepSeekCode to revise",
            tone: "reject",
        });
    }
    return commands;
}
function QuestionCommandRows(props) {
    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "gray", children: "commands" }), props.commands.map((command, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: commandTone(command.tone), children: ` ${index + 1}. ${command.label.padEnd(8)} ` }), _jsx(Text, { color: "gray", children: command.command }), _jsx(Text, { color: "gray", children: `  ${command.description}` })] }, `${command.label}-${command.command}`)))] }));
}
function QuestionRow(props) {
    return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "gray", children: [props.label.padEnd(9), " "] }), _jsx(Text, { color: props.color ?? "gray", children: props.value })] }));
}
function questionStatusDetail(record) {
    if (record.status === "pending")
        return "waiting for answer";
    if (record.status === "approved")
        return "answered";
    if (record.status === "cancelled")
        return "cancelled";
    return record.status;
}
function displayRunLabel(runId) {
    return /^run_[0-9a-f-]{8,}$/i.test(runId) ? "current run" : runId;
}
function toneForStatus(status) {
    if (status === "approved")
        return "success";
    if (status === "pending")
        return "warning";
    if (status === "cancelled")
        return "muted";
    return "error";
}
function commandTone(tone) {
    if (tone === "allow")
        return "green";
    if (tone === "reject")
        return "red";
    return "cyan";
}
