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";
export function BrowserPanel(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: "browser", 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.length === 0 ? (_jsx(Text, { color: "gray", children: "No browser records" })) : props.model.rows.map((row) => (_jsx(BrowserPanelRowView, { 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: "browser detail" }), props.model.preview.map((line, index) => (_jsx(Text, { color: "gray", children: truncateCells(`  ${line}`, Math.max(24, width - 4)) }, `${index}-${line}`)))] })) : null, _jsx(Text, { color: "gray", children: truncateCells(props.model.footer, Math.max(24, width - 4)) })] }) }));
}
export function browserStatusPanelModel(enabled) {
    return {
        title: "Browser bridge",
        subtitle: enabled ? "permission enabled" : "permission disabled",
        rows: [{
                key: "browser",
                name: "browser",
                status: enabled ? "on" : "off",
                tone: enabled ? "success" : "muted",
                detail: enabled ? "CDP browser actions are allowed" : "browser actions require /browser on",
                note: "snapshot screenshot click type open",
            }],
        footer: "/browser on | /browser sessions | /browser trajectory",
    };
}
export function browserSessionsPanelModel(sessions) {
    return {
        title: "Browser sessions",
        subtitle: `${sessions.length} recent session${sessions.length === 1 ? "" : "s"}`,
        rows: sessions.map((session) => ({
            key: session.id,
            name: session.id,
            status: session.status,
            tone: session.status === "opened" ? "success" : "warning",
            detail: session.url,
            note: session.visible ? "visible" : "headless",
        })),
        footer: "/browser open <url> | /browser trajectory",
    };
}
export function browserTrajectoryPanelModel(records) {
    return {
        title: "Browser trajectory",
        subtitle: `${records.length} action record${records.length === 1 ? "" : "s"}`,
        rows: records.map((record) => ({
            key: record.id,
            name: record.action,
            status: record.status,
            tone: record.status === "succeeded" ? "success" : "error",
            detail: record.url,
            note: [
                record.source,
                record.selector ? `selector=${record.selector}` : "",
                record.path ? `path=${record.path}` : "",
                record.title ? `title=${record.title}` : "",
                typeof record.bytes === "number" ? `bytes=${record.bytes}` : "",
                typeof record.textChars === "number" ? `textChars=${record.textChars}` : "",
                record.message ? `message=${record.message}` : "",
            ].filter(Boolean).join(" "),
        })),
        footer: "/browser trajectory [limit] | /browser screenshot <url> <path>",
    };
}
export function browserOperationPanelModel(input) {
    return {
        title: input.title,
        subtitle: input.subtitle,
        rows: [{
                key: input.name,
                name: input.name,
                status: input.status,
                tone: input.tone ?? (input.status === "succeeded" || input.status === "ok" ? "success" : "brand"),
                detail: input.detail,
                note: input.note ?? "",
            }],
        preview: input.preview,
        footer: input.footer,
    };
}
function BrowserPanelRowView(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] }));
}
