import SwiftUI
import NucleicCore

/// Renders a non-commit shell pipeline — a `rm -rf … && git worktree add … && git switch …`
/// chain — as a structured step list for an approval, instead of a raw monospaced blob. Each
/// recognized `rm`/`git` op shows as a glyph + concise label, and a destructive delete is
/// tinted in the attention colour so a leading `rm -rf` stands out rather than hiding among
/// the git ops. The literal command stays one tap away under "Show command", so the card
/// never hides what's actually being run. See ``ShellCommandSummary``.
struct CommandStepsCard: View {
    @Environment(\.appPalette) private var palette
    let block: ShellCommandSummary.Block
    /// The literal command, revealed under "Show command". Omit to hide the disclosure.
    var rawCommand: String? = nil
    /// The card's accent — `attention` in a pending approval, `accent` in the transcript.
    var tint: Color? = nil

    private var accent: Color { tint ?? palette.accent }

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            ForEach(block.steps) { step in
                HStack(alignment: .firstTextBaseline, spacing: 9) {
                    Image(systemName: step.symbol)
                        .font(.callout)
                        .foregroundStyle(step.destructive ? palette.attention : accent)
                        .frame(width: 16)
                    Text(step.label)
                        .font(.callout.weight(step.destructive ? .semibold : .regular))
                        .foregroundStyle(step.destructive ? AppTheme.primaryText : .secondary)
                        .fixedSize(horizontal: false, vertical: true)
                        .textSelection(.enabled)
                    Spacer(minLength: 0)
                }
            }
            if let rawCommand, !rawCommand.isEmpty {
                CommandDisclosure(command: rawCommand, accent: accent)
            }
        }
        .padding(.horizontal, 12).padding(.vertical, 10)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(accent.opacity(0.06))
        .overlay(RoundedRectangle(cornerRadius: 8).strokeBorder(accent.opacity(0.16), lineWidth: 1))
        .clipShape(RoundedRectangle(cornerRadius: 8))
    }
}
