import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { useTerminalSize } from "../hooks/useTerminalSize.js";
import { Pane } from "./design/Pane.js";
import { StatusBadge } from "./design/StatusBadge.js";
import { truncateCells } from "./design/textLayout.js";
import { ValidationErrorsList } from "./ValidationErrorsList.js";
export function OutputStylePanel(props) {
    const { columns } = useTerminalSize();
    const width = Math.max(52, Math.min(112, columns - 4));
    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Pane, { width: width, title: "output style", tone: "brand", paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: props.model.title }), _jsx(Text, { color: "gray", children: truncateCells(props.model.subtitle, Math.max(24, width - 20)) })] }), _jsx(StatusBadge, { label: `${props.model.rows.length}`, tone: props.model.rows.length > 0 ? "brand" : "muted" })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: props.model.rows.map((row) => (_jsx(OutputStylePanelRowView, { row: row, width: width }, row.key))) }), props.model.preview && props.model.preview.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "gray", children: "prompt preview" }), props.model.preview.map((line, index) => (_jsx(Text, { color: "gray", children: truncateCells(`  ${line}`, Math.max(24, width - 4)) }, `${index}-${line}`)))] })) : null, _jsx(ValidationErrorsList, { errors: props.model.validationErrors ?? [], width: width - 2 }), _jsx(Text, { color: "gray", children: truncateCells(props.model.footer, Math.max(24, width - 4)) })] }) }));
}
export function outputStyleListPanelModel(styles, currentName) {
    return {
        title: "Output styles",
        subtitle: `${styles.length} available style${styles.length === 1 ? "" : "s"}; current ${currentName}`,
        rows: styles.map((style) => ({
            key: `${style.scope}/${style.name}`,
            name: `${style.scope}/${style.name}`,
            status: style.name === currentName ? "current" : style.scope,
            tone: style.name === currentName ? "success" : toneForScope(style.scope),
            detail: style.description,
            note: style.path ?? "(builtin)",
        })),
        footer: "/output-style set <name> | /output-style show <name> | /output-style create <name> <description>",
    };
}
export function outputStyleDetailPanelModel(style, currentName) {
    return {
        title: `Output style: ${style.name}`,
        subtitle: `${style.scope}${style.name === currentName ? " / current" : ""}`,
        rows: [{
                key: `${style.scope}/${style.name}`,
                name: `${style.scope}/${style.name}`,
                status: style.name === currentName ? "current" : style.scope,
                tone: style.name === currentName ? "success" : toneForScope(style.scope),
                detail: style.description,
                note: style.path ?? "(builtin)",
            }],
        preview: previewLines(style.prompt),
        footer: `/output-style set ${style.name} | /output-style validate ${style.name}`,
    };
}
export function outputStyleValidationPanelModel(results) {
    return {
        title: "Output style validation",
        subtitle: `${results.length} validation result${results.length === 1 ? "" : "s"}`,
        rows: results.map((result) => ({
            key: result.name,
            name: result.name,
            status: result.ok ? "ok" : "failed",
            tone: result.ok ? "success" : "error",
            detail: result.path || "(missing)",
            note: [
                ...result.errors.map((error) => `error: ${error}`),
                ...result.warnings.map((warning) => `warning: ${warning}`),
            ].join("; "),
        })),
        validationErrors: results.flatMap((result) => [
            ...result.errors.map((error) => ({
                file: result.path || result.name,
                path: result.name,
                message: error,
                severity: "error",
            })),
            ...result.warnings.map((warning) => ({
                file: result.path || result.name,
                path: result.name,
                message: warning,
                severity: "warning",
            })),
        ]),
        footer: "/output-style list | /output-style show <name>",
    };
}
function OutputStylePanelRowView(props) {
    const detailWidth = Math.max(20, props.width - 38);
    const noteWidth = Math.max(20, props.width - 12);
    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(StatusBadge, { label: props.row.status, tone: props.row.tone }), _jsx(Text, { children: " " }), _jsx(Text, { color: "cyan", children: truncateCells(props.row.name.padEnd(20), 20) }), _jsx(Text, { color: "gray", children: truncateCells(props.row.detail, detailWidth) })] }), props.row.note ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "gray", children: "  " }), _jsx(Text, { color: "gray", children: truncateCells(props.row.note, noteWidth) })] })) : null] }));
}
function toneForScope(scope) {
    if (scope === "builtin")
        return "brand";
    if (scope === "project" || scope === "user")
        return "success";
    if (scope === "plugin")
        return "warning";
    return "muted";
}
function previewLines(prompt) {
    return prompt
        .split(/\r?\n/)
        .map((line) => line.trim())
        .filter(Boolean)
        .slice(0, 5);
}
