import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Text, Box, useInput } from "ink";
import { useTheme } from "../theme/theme.js";
import { useTerminalSize } from "../hooks/useTerminalSize.js";
import { Markdown } from "./Markdown.js";
import { visualWidth } from "../utils/table-text.js";
const ART_LINE_1 = " ▀█▀ █ █ █▀▀   █▀█ █   █▀█ █▄ █";
const ART_LINE_2 = "  █  █▀█ ██▄   █▀▀ █▄▄ █▀█ █ ▀█";
// Use visual width (not .length) so padding is correct on all terminals
const ART_VISUAL_WIDTH = visualWidth(ART_LINE_1);
// ║ + space on each side = 4
const FRAME_OVERHEAD = 4;
function frameLine(content, innerWidth) {
    const contentVisual = visualWidth(content);
    const pad = Math.max(0, innerWidth - contentVisual);
    return "║ " + content + " ".repeat(pad) + " ║";
}
export function PlanApproval({ planPath, planContent, onDecision }) {
    const theme = useTheme();
    const { columns } = useTerminalSize();
    const [mode, setMode] = useState("prompt");
    const [feedback, setFeedback] = useState("");
    useInput((input, key) => {
        if (mode === "feedback") {
            if (key.return) {
                onDecision("reject", feedback);
                return;
            }
            if (key.escape) {
                setMode("prompt");
                setFeedback("");
                return;
            }
            if (key.backspace || key.delete) {
                setFeedback((prev) => prev.slice(0, -1));
                return;
            }
            if (input && !key.ctrl && !key.meta) {
                setFeedback((prev) => prev + input);
            }
            return;
        }
        // Prompt mode
        const lower = input.toLowerCase();
        if (lower === "a") {
            onDecision("approve");
        }
        else if (lower === "r") {
            setMode("feedback");
        }
        else if (lower === "c" || key.escape) {
            onDecision("cancel");
        }
    });
    const innerWidth = Math.max(ART_VISUAL_WIDTH, columns - FRAME_OVERHEAD);
    const statusContent = "Review plan · Awaiting your decision";
    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, width: columns, children: [_jsx(Text, { color: theme.planPrimary, children: "╔" + "═".repeat(innerWidth + 2) + "╗" }), _jsx(Text, { color: theme.planPrimary, children: frameLine(ART_LINE_1, innerWidth) }), _jsx(Text, { color: theme.planPrimary, children: frameLine(ART_LINE_2, innerWidth) }), _jsx(Text, { color: theme.planPrimary, children: "╠" + "═".repeat(innerWidth + 2) + "╣" }), _jsx(Text, { color: theme.planPrimary, children: frameLine(statusContent, innerWidth) }), _jsx(Text, { color: theme.planPrimary, children: "╚" + "═".repeat(innerWidth + 2) + "╝" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.textDim, children: "Plan: " }), _jsx(Text, { color: theme.planPrimary, children: planPath })] }), _jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: theme.planBorder, paddingLeft: 1, paddingRight: 1, flexDirection: "column", children: _jsx(Markdown, { children: planContent }) }), mode === "prompt" ? (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.planPrimary, bold: true, children: "[A]" }), _jsx(Text, { color: theme.text, children: "pprove  " }), _jsx(Text, { color: theme.planPrimary, bold: true, children: "[R]" }), _jsx(Text, { color: theme.text, children: "eject with feedback  " }), _jsx(Text, { color: theme.planPrimary, bold: true, children: "[C]" }), _jsx(Text, { color: theme.text, children: "ancel" })] })) : (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.planPrimary, children: "Feedback (Enter to submit, Esc to cancel):" }), _jsx(Box, { children: _jsxs(Text, { color: theme.text, children: ["> ", feedback, "\u258D"] }) })] }))] }));
}
//# sourceMappingURL=PlanApproval.js.map