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 { Tabs } from "./design/Tabs.js";
import { truncateCells } from "./design/textLayout.js";
import { toneColor } from "./design/terminalTheme.js";
import { ThemePicker, themePickerModel } from "./ThemePicker.js";
export function ThemePanel(props) {
    const { columns } = useTerminalSize();
    const width = Math.max(58, Math.min(112, columns - 4));
    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Pane, { width: width, title: "theme", tone: "brand", paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: toneColor("brand"), children: props.model.title }), _jsx(Text, { color: "gray", children: truncateCells(props.model.subtitle, Math.max(24, width - 20)) })] }), _jsx(StatusBadge, { label: props.model.badge, tone: props.model.badgeTone })] }), _jsx(Box, { marginTop: 1, children: _jsx(Tabs, { title: "view", selectedId: props.model.rows.length > 1 ? "themes" : "settings", tabs: [
                            { id: "themes", title: "themes", count: props.model.rows.length, tone: "brand" },
                            { id: "settings", title: "settings", tone: "muted" },
                        ], width: width }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: props.model.rows.map((row) => (_jsx(ThemePanelRowView, { row: row, width: width }, row.key))) }), props.model.picker ? (_jsx(ThemePicker, { model: props.model.picker, width: width - 2 })) : null, _jsx(Text, { color: "gray", children: truncateCells(props.model.footer, Math.max(24, width - 4)) })] }) }));
}
export function themeListPanelModel(input) {
    return {
        title: "Themes",
        subtitle: `current=${input.current.theme} source=${input.current.source}`,
        badge: input.current.theme,
        badgeTone: "brand",
        rows: input.themes.map((theme) => themeRow(theme, theme.name === input.current.theme ? "current" : "available")),
        picker: themePickerModel(input),
        footer: "/theme set <name> | /theme current | /theme reset",
    };
}
export function themeCurrentPanelModel(settings, action) {
    return {
        title: action === "set" ? "Theme set" : action === "reset" ? "Theme reset" : action === "path" ? "Theme path" : "Current theme",
        subtitle: `${settings.definition.label} | source=${settings.source}`,
        badge: settings.theme,
        badgeTone: "brand",
        rows: [
            themeRow(settings.definition, action === "path" ? "path" : settings.source),
            {
                key: "path",
                name: "config",
                status: "path",
                tone: "muted",
                swatches: [],
                detail: settings.path,
                note: "Project theme file; DEEPSEEKCODE_THEME overrides it for the current process.",
            },
        ],
        footer: "/theme list | /theme set <name> | /config",
    };
}
function ThemePanelRowView(props) {
    const detailWidth = Math.max(24, props.width - 46);
    const noteWidth = Math.max(24, 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: toneColor("brand"), children: truncateCells(props.row.name.padEnd(18), 18) }), _jsx(Swatches, { swatches: props.row.swatches }), _jsx(Text, { color: "gray", children: " " }), _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 Swatches(props) {
    if (props.swatches.length === 0)
        return _jsx(Text, { color: "gray", children: "      " });
    return (_jsx(Box, { flexDirection: "row", children: props.swatches.map((swatch) => (_jsx(Text, { color: swatch.color, children: ` ${swatch.tone[0] ?? "?"}` }, swatch.tone))) }));
}
function themeRow(theme, status) {
    return {
        key: theme.name,
        name: theme.name,
        status,
        tone: status === "current" || status === "project" || status === "env" || status === "set" ? "success" : "muted",
        swatches: ["brand", "success", "warning", "error"].map((tone) => ({
            tone,
            color: theme.colors[tone],
        })),
        detail: theme.label,
        note: theme.description,
    };
}
