import Foundation
import SwiftUI
import NucleicCore

/// Renders a `mcp__nucleic__mac_vm_request_operator` approval — the agent, while driving the
/// session's macOS VM, asking the *user* to take the wheel for a step only a human can clear (a
/// CAPTCHA, a login / 2FA prompt, an interactive OS dialog) — as a structured card instead of the
/// raw `{"instructions": …}` JSON the generic detail box would show.
///
/// Modeled on ``HostExecCard``: the header names what's being asked, the agent's `instructions`
/// are shown as the concrete task the user will carry out in the VM, and the agent's `reason` sits
/// beneath framed as an *unverified claim* (the header + instructions are what the user judges it
/// against). Accepting opens the interactive VM viewer with these same instructions in a popup.
struct MacVMOperatorRequestCard: View {
    @Environment(\.appPalette) private var palette
    /// What the agent needs the user to do in the VM, verbatim.
    let instructions: String
    /// The agent's stated justification for why a human is required, when present. A claim, not a
    /// verified fact — shown so the user can judge whether the hand-off is warranted.
    var reason: String? = nil
    /// The card's accent — `attention` in a pending approval.
    var tint: Color? = nil

    /// An operator hand-off always carries the attention accent: it interrupts the user for help.
    private var accent: Color { tint ?? palette.attention }

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            header
            instructionsBlock
            if let reason, !reason.isEmpty {
                reasonBlock(reason)
            }
        }
        .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))
    }

    /// Names what's being asked: a person-at-desktop glyph, a plain-language line, and a badge that
    /// this hands control of the guest to the user.
    private var header: some View {
        HStack(alignment: .firstTextBaseline, spacing: 9) {
            Image(systemName: "person.crop.circle.badge.questionmark")
                .font(.callout).foregroundStyle(accent).frame(width: 16)
            VStack(alignment: .leading, spacing: 4) {
                Text("The agent needs your help in its macOS VM")
                    .font(.callout.weight(.semibold))
                    .foregroundStyle(AppTheme.primaryText)
                    .fixedSize(horizontal: false, vertical: true)
                Text("You'll operate the VM by hand — e.g. a CAPTCHA or a login the agent can't do itself")
                    .font(.caption).foregroundStyle(.secondary)
                    .fixedSize(horizontal: false, vertical: true)
            }
            Spacer(minLength: 0)
        }
    }

    /// The concrete task, in a bounded block — the ground truth of what the user is being asked to do.
    private var instructionsBlock: some View {
        VStack(alignment: .leading, spacing: 5) {
            Text("What to do")
                .font(.caption2.weight(.semibold)).foregroundStyle(.secondary)
            Text(instructions)
                .font(.callout)
                .foregroundStyle(AppTheme.primaryText)
                .textSelection(.enabled)
                .fixedSize(horizontal: false, vertical: true)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(10)
                .background(accent.opacity(0.05), in: .rect(cornerRadius: 6))
                .overlay(RoundedRectangle(cornerRadius: 6).strokeBorder(accent.opacity(0.12), lineWidth: 1))
        }
    }

    /// The agent's stated reason a human is needed, framed as an unverified claim.
    private func reasonBlock(_ reason: String) -> some View {
        VStack(alignment: .leading, spacing: 5) {
            Text("Agent's reason")
                .font(.caption2.weight(.semibold)).foregroundStyle(.secondary)
            Text(reason)
                .font(.callout)
                .foregroundStyle(AppTheme.primaryText)
                .textSelection(.enabled)
                .fixedSize(horizontal: false, vertical: true)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(8)
                .background(accent.opacity(0.04), in: .rect(cornerRadius: 6))
                .overlay(RoundedRectangle(cornerRadius: 6).strokeBorder(accent.opacity(0.12), lineWidth: 1))
        }
    }
}
