package wang.yaojia.webterm.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import wang.yaojia.webterm.designsystem.DisplayStatus
import wang.yaojia.webterm.designsystem.Spacing
import wang.yaojia.webterm.designsystem.StatusBadge
import wang.yaojia.webterm.designsystem.WebTermCard
import wang.yaojia.webterm.designsystem.WebTermTheme
import wang.yaojia.webterm.session.GateState
import wang.yaojia.webterm.viewmodels.GateDecision
import wang.yaojia.webterm.wire.GateKind

/**
 * # GateBanner (A22) — the tool-gate two-button approve/reject card.
 *
 * The Android analogue of the iOS tool-gate card (public/tabs.ts:334-350): a `WebTermCard` holding
 * a "needs me" status badge, the server-supplied [detail][GateState.detail] rendered as **inert
 * [Text]** (untrusted OSC/tool text — no Markdown / autolink, plan §8), and two actions: **批准**
 * (approve → `Approve(mode=null)`) and **拒绝** (reject).
 *
 * ### Epoch capture (the stale-guard seam)
 * Each button hands back the [epoch][GateState.epoch] of the gate IT rendered, so a tap is bound to
 * the gate the user actually saw. The screen (A21) wires `onDecide = { d, e -> vm.decide(d, e) }`;
 * [GateViewModel.decide] then drops the tap if that epoch is no longer the live gate.
 *
 * This card is for [GateKind.TOOL] gates only; plan gates use [PlanGateSheet] (three-way).
 * Layout / colors are device-QA; the wired decision + epoch capture is the load-bearing contract.
 *
 * @param onDecide invoked with the tapped [GateDecision] and this gate's epoch.
 */
@Composable
public fun GateBanner(
    gate: GateState,
    onDecide: (GateDecision, Int) -> Unit,
    modifier: Modifier = Modifier,
) {
    WebTermCard(modifier = modifier.fillMaxWidth()) {
        Column(verticalArrangement = Arrangement.spacedBy(Spacing.sm8)) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(Spacing.sm8),
            ) {
                StatusBadge(status = DisplayStatus.PendingApproval, showsLabel = true)
                gate.detail?.let { detail ->
                    // INERT: untrusted server string rendered verbatim, single-line, no linkify (§8).
                    Text(
                        text = detail,
                        style = MaterialTheme.typography.bodyMedium,
                        color = MaterialTheme.colorScheme.onSurface,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                    )
                }
            }
            Row(horizontalArrangement = Arrangement.spacedBy(Spacing.sm8)) {
                OutlinedButton(onClick = { onDecide(GateDecision.REJECT, gate.epoch) }) {
                    Text(text = "拒绝")
                }
                Button(onClick = { onDecide(GateDecision.APPROVE, gate.epoch) }) {
                    Text(text = "批准")
                }
            }
        }
    }
}

// ── Preview ─────────────────────────────────────────────────────────────────────

@Preview(name = "GateBanner")
@Composable
private fun GateBannerPreview() {
    WebTermTheme {
        GateBanner(
            gate = GateState(kind = GateKind.TOOL, detail = "Bash(rm -rf build/)", epoch = 3),
            onDecide = { _, _ -> },
        )
    }
}
