import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Match, Option as O, pipe } from "effect";
import { Box, Text } from "ink";
import { memo } from "react";
import { createInactiveBar, createSuccessBar, HealthBar } from "./HealthBar.js";
import { StatusBadge } from "./StatusBadge.js";
// ============================================================================
// Constants
// ============================================================================
/** Home directory replacement character */
const HOME_REPLACEMENT = "~";
/** Paused status text */
const PAUSED_LABEL = "PAUSED";
/** Fixed width for health bar column to ensure alignment */
const HEALTH_BAR_WIDTH = 20;
/** Inline action labels */
const ACTION_SYNC = "[S] Sync";
const ACTION_PAUSE = "[P] Pause";
const ACTION_RESUME = "[P] Resume";
const ACTION_REMOVE = "[R] Remove";
// ============================================================================
// Helpers
// ============================================================================
/**
 * Get health bar slots based on flow state.
 * TODO: Replace with actual sync history when available
 */
const getHealthSlots = (state) => pipe(Match.value(state), Match.when("idle", () => createSuccessBar()), Match.when("syncing", () => createSuccessBar()), Match.when("error", () => createSuccessBar()), // TODO: Add error bar style
Match.when("paused", () => createInactiveBar()), Match.exhaustive);
/**
 * Shorten a path for display by replacing home directory with ~.
 * Uses Option pattern for safe environment variable access.
 */
const shortenPath = (path) => pipe(O.fromNullable(process.env.HOME), O.filter((home) => path.startsWith(home)), O.match({
    onNone: () => path,
    onSome: (home) => path.replace(home, HOME_REPLACEMENT)
}));
// ============================================================================
// Component
// ============================================================================
/**
 * A single row in the flow list.
 * Actions line appears only when selected.
 */
export const FlowRow = memo(({ flow, isSelected }) => {
    const healthSlots = getHealthSlots(flow.state);
    const isPaused = flow.state === "paused";
    const pauseResumeAction = isPaused ? ACTION_RESUME : ACTION_PAUSE;
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Box, { width: 2, children: isSelected && _jsx(Text, { color: "cyan", children: "\u25B8" }) }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, gap: 1, children: [isSelected ?
                                _jsx(Text, { bold: true, color: "cyan", children: flow.name }) :
                                _jsx(Text, { children: flow.name }), _jsx(StatusBadge, { state: flow.state }), isPaused && _jsx(Text, { color: "gray", children: PAUSED_LABEL })] }), _jsx(Box, { width: HEALTH_BAR_WIDTH, justifyContent: "flex-end", children: _jsx(HealthBar, { slots: healthSlots, timeLabel: flow.lastSyncRelative }) })] }), _jsxs(Box, { children: [_jsx(Box, { width: 2 }), _jsx(Text, { dimColor: true, children: shortenPath(flow.path) })] }), _jsxs(Box, { children: [_jsx(Box, { width: 2 }), isSelected ?
                        (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: "cyan", children: ACTION_SYNC }), _jsx(Text, { color: "cyan", children: pauseResumeAction }), _jsx(Text, { color: "cyan", children: ACTION_REMOVE })] })) :
                        // eslint-disable-next-line @effect/dprint
                        _jsx(Text, { children: " " })] })] }));
});
FlowRow.displayName = "FlowRow";
//# sourceMappingURL=FlowRow.js.map