import SwiftUI

// 终端顶带（`1b` 的浮起胶囊已按用户裁决落地为**真实 chrome 行**）：按钮、标题、tab 全在
// 终端**外**的 bgDeep 带上，终端 pane 从带下方开始 —— 不再有 86pt 预留带、不再遮内容。
//
// 顶带层级（一眼一个主角）：
//   [✕ ⌄ 独立按钮组] · 弱化标题行（纯文本，逐级降灰） · [tab 组 —— 唯一有容器感的元素]
// tab 组 = tmux window 的段式切换槽（window 映射原生 tab 的惯例）；活动会话切换在侧边栏；
// 状态文字在底部动作条的合并状态行（见 TerminalActionBar.statusLine）。

/// 终端顶带：窗口按钮组 + 弱化标题 + tmux window tab 组。
///
/// 与旧「标题胶囊」的三点不同（用户定稿）：① ✕/⌄ **分离成独立悬浮按钮组**，不再和标题挤在
/// 一个胶囊里 —— 危险操作（关闭）与身份信息（主机名）不该共用一个容器；② 标题**弱化**为
/// 纯文本行（顶带在终端外，无需胶囊底衬托对比度）；③ tab 组是顶带唯一带容器的元素，
/// 视觉重心让给「切 window」这个高频动作。
struct TerminalTopBar: View {
    @ObservedObject var session: TerminalSession
    let onClose: () -> Void
    let onMinimize: () -> Void
    @EnvironmentObject var theme: TXThemeManager
    private var p: TXPalette { theme.palette }

    var body: some View {
        HStack(spacing: TX.Space.m) {
            // 顺序沿用 macOS 的肌肉记忆（关闭在左、最小化在右）。
            HStack(spacing: TX.Space.xs) {
                windowButton(icon: "xmark", tint: TXWindowDot.close,
                             label: "关闭会话", action: onClose)
                // 向下的 chevron：对上「下滑最小化 = 缩回首页卡片」的手势语义。
                windowButton(icon: "chevron.down", tint: TXWindowDot.minimize,
                             label: "最小化到首页", action: onMinimize)
            }
            titleLine
            TmuxWindowTabGroup(session: session)
            Spacer(minLength: 0)
        }
        .frame(height: 40)
    }

    /// 弱化标题行：状态点 + 主机名(text2) + 「window title · cwd」(textWeak) + 格子数(textFaint)。
    /// 主机身份已由侧边栏选中行承担，这里只是就近确认，故整行不超过 text2 的强度。
    private var titleLine: some View {
        HStack(spacing: TX.Space.xs) {
            TXStatusDot(color: RailSidebarStyle.statusColor(session, p), size: 5)
            Text(session.displayName)
                .font(TX.Font.mono(12, .medium))
                .foregroundStyle(p.text2)
                .lineLimit(1)
            if !contextLine.isEmpty {
                Text(contextLine)
                    .font(TX.Font.mono(11))
                    .foregroundStyle(p.textWeak)
                    .lineLimit(1)
            }
            // 终端格子数。侧边栏开合会 resize —— 数字经 GridBox.onGridChange →
            // session.objectWillChange 跟着刷新。
            Text(gridLabel)
                .font(TX.Font.mono(10.5))
                .foregroundStyle(p.textFaint)
        }
    }

    /// 标题的上下文只留 cwd —— 当前 window title 已由 tab 组的选中 chip 承担，写两遍是重复。
    /// 无 tmux（没有 tab 组）时退回连接状态文案。
    private var contextLine: String {
        guard let t = session.tmuxSummary else {
            return session.isLive ? "" : session.phaseText
        }
        return t.cwd.isEmpty ? "" : Self.abbreviate(t.cwd)
    }

    /// `/Users/yz/src/x` → `~/src/x`（终端习惯写法）。
    static func abbreviate(_ path: String) -> String {
        let home = NSHomeDirectory()
        if !home.isEmpty, path.hasPrefix(home) { return "~" + path.dropFirst(home.count) }
        // 远端 home 与本机不同，按常见前缀兜底。
        for prefix in ["/home/", "/Users/"] where path.hasPrefix(prefix) {
            let rest = path.dropFirst(prefix.count)
            if let slash = rest.firstIndex(of: "/") { return "~" + rest[slash...] }
            return "~"
        }
        return path
    }

    private var gridLabel: String {
        // tmux 模式读 controller 的客户端格子（raw 的 screenGrid 随 RawTerminalView 卸载而冻结，
        // 侧边栏开合后会显示旧值）；raw 模式仍读 surface 实报的 screenGrid。
        if let g = session.tmuxController?.clientGrid, g.cols > 0 {
            return "\(g.cols)×\(g.rows)"
        }
        let g = session.screenGrid.value
        return "\(g.cols)×\(g.rows)"
    }

    /// 关闭 / 最小化按钮：28pt 圆角方块 + **常显字形**（触屏没有 hover，纯色点说明不了自己），
    /// 颜色语义保留（红=关闭、琥珀=最小化），底色只上 14% —— 与全 app 的圆角矩形控件同语汇。
    private func windowButton(icon: String, tint: Color, label: String,
                              action: @escaping () -> Void) -> some View {
        Button(action: action) {
            Image(systemName: icon)
                .font(.system(size: 10.5, weight: .bold))
                .foregroundStyle(tint)
                .frame(width: 28, height: 28)
                .background(tint.opacity(0.14), in: RoundedRectangle(cornerRadius: 8))
                .overlay(
                    RoundedRectangle(cornerRadius: 8).strokeBorder(tint.opacity(0.45), lineWidth: 1)
                )
                .frame(width: 30, height: 40)
                .contentShape(Rectangle())
        }
        .buttonStyle(.txPressTight)
        .accessibilityLabel(label)
    }
}

/// tmux window 的 **tab 组**：一条 surfaceDark 圆角槽，window 是槽内的段式 chip。
///
/// 「组」的语义：这些 tab 同属当前 tmux 会话 —— 容器即分组，不再各自悬浮。选中 chip 用
/// accent 底+描边浮起，未选 chip 透明贴槽底；尾部 `+` 新建 window（浏览器 tab 组惯例）。
/// controller 未 attach 但已知 tmux 概览时按占位渲染（接回前 / fixture），原生窗口不显示。
struct TmuxWindowTabGroup: View {
    @ObservedObject var session: TerminalSession

    var body: some View {
        if let tmux = session.tmuxController {
            WindowTabGroupRow(controller: tmux)
        } else if let summary = session.tmuxSummary {
            TabGroupSlot {
                ForEach(0 ..< max(1, summary.windows), id: \.self) { i in
                    WindowTabChipBody(
                        index: "\(i)",
                        title: i == 0 && !summary.currentTitle.isEmpty
                            ? summary.currentTitle : "window \(i)",
                        isSelected: i == 0)
                }
            }
        }
    }
}

/// 真实 tmux 的 tab 组行。独立视图直接订阅 controller（嵌套 ObservableObject 不冒泡）。
private struct WindowTabGroupRow: View {
    @ObservedObject var controller: TmuxController
    @EnvironmentObject var theme: TXThemeManager
    private var p: TXPalette { theme.palette }

    var body: some View {
        TabGroupSlot {
            ForEach(controller.windows) { win in
                WindowTabChip(window: win, isSelected: win.id == controller.activeWindowID) {
                    controller.selectWindow(win.id)
                }
            }
            // 组内 `+`：新建 window 的就近入口（底部动作条的大按钮仍在）。
            Button { controller.newWindow() } label: {
                Image(systemName: "plus")
                    .font(.system(size: 10.5, weight: .medium))
                    .foregroundStyle(p.text4)
                    .frame(width: 28, height: 28)
                    .contentShape(Rectangle())
            }
            .buttonStyle(.txPressTight)
            .accessibilityLabel("新建 window")
        }
    }
}

/// tab 组的槽体：内衬 3pt，chip 挤在同一条容器里 —— 「同组」的视觉本体。条目多时横向滚动。
private struct TabGroupSlot<Content: View>: View {
    @ViewBuilder let content: Content
    @EnvironmentObject var theme: TXThemeManager
    private var p: TXPalette { theme.palette }

    var body: some View {
        // 槽体（底+描边）挂在**内容层**而不是 ScrollView 上：ScrollView 恒占满剩余宽度，
        // 挂它身上就是一条拖到屏幕边的空槽 —— 槽必须紧贴 chip 才读作「一组」。
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 2) { content }
                .padding(3)
                .background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.capsule))
                .overlay(
                    RoundedRectangle(cornerRadius: TX.Radius.capsule)
                        .strokeBorder(p.border, lineWidth: 1)
                )
        }
        .frame(height: 36)
    }
}

/// 单个 window chip（title/index 是 window 自己的 @Published，须直接订阅才会刷新）。
private struct WindowTabChip: View {
    @ObservedObject var window: TmuxWindow
    let isSelected: Bool
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            WindowTabChipBody(index: "\(window.index)", title: window.title, isSelected: isSelected)
        }
        .buttonStyle(.txPressTight)
        .accessibilityLabel("切换到 window \(window.index)")
    }
}

/// chip 的视觉本体（真实 window 与占位共用）：`编号 标题`，选中浮起、未选贴槽底。
private struct WindowTabChipBody: View {
    let index: String
    let title: String
    let isSelected: Bool
    @EnvironmentObject var theme: TXThemeManager
    private var p: TXPalette { theme.palette }

    var body: some View {
        HStack(spacing: 5) {
            Text(index)
                .font(TX.Font.mono(10.5, .semibold))
                .foregroundStyle(isSelected ? TXAccent.text : p.textFaint)
            Text(title)
                .font(TX.Font.mono(12, isSelected ? .medium : .regular))
                .foregroundStyle(isSelected ? p.text : p.text3)
                .lineLimit(1)
        }
        .padding(.horizontal, TX.Space.s)
        .frame(height: 28)
        .background(isSelected ? TXAccent.selectedBg : .clear,
                    in: RoundedRectangle(cornerRadius: TX.Radius.capsule - 3))
        .overlay(
            RoundedRectangle(cornerRadius: TX.Radius.capsule - 3)
                .strokeBorder(isSelected ? TXAccent.selectedStroke : .clear, lineWidth: 1)
        )
        .contentShape(Rectangle())
        .animation(TX.Motion.quick, value: isSelected)
    }
}

/// 终端区的**非内容态**覆盖层：连接中 / 失败 / 已关闭。
///
/// 真实连接不是瞬间的：解析凭据 → tsnet Up → dial → 认证 → （mosh 引导）→ tmux attach，
/// 期间终端一片空白。这层给出「现在在干什么、失败了能怎么办」，避免用户对着黑屏猜。
/// 已连接（含重连中，屏幕内容还在）时**不显示**，不遮挡终端。
struct TerminalStateOverlay: View {
    @ObservedObject var session: TerminalSession
    let onRetry: () -> Void
    let onBack: () -> Void
    /// 取消正在进行的连接（用户不想再等）。
    let onCancel: () -> Void
    @EnvironmentObject var theme: TXThemeManager
    /// 连接已等待秒数 —— 真实连接可能要走 tsnet Up / mosh 引导，等待要可见、可取消。
    @State private var waited = 0
    private var p: TXPalette { theme.palette }

    /// 失败态：phaseText 由 SessionMachine 给出（`失败：…`）。
    private var failure: String? {
        session.phaseText.hasPrefix("失败") ? String(session.phaseText.dropFirst(3)) : nil
    }

    private var isConnecting: Bool {
        !session.isLive && failure == nil && session.phaseText != "已关闭"
    }

    var body: some View {
        if let failure {
            state(icon: "exclamationmark.triangle", tint: p.danger, title: "连接失败",
                  detail: failure) {
                HStack(spacing: TX.Space.s) {
                    TXButton(title: "返回首页", action: onBack)
                    TXButton(title: "重试", emphasized: true, action: onRetry)
                }
            }
        } else if session.phaseText == "已关闭" {
            state(icon: "power", tint: p.textWeak, title: "会话已关闭",
                  detail: "服务端连接已断开。") {
                HStack(spacing: TX.Space.s) {
                    TXButton(title: "返回首页", action: onBack)
                    TXButton(title: "重新连接", emphasized: true, action: onRetry)
                }
            }
        } else if isConnecting {
            state(icon: nil, tint: p.text4, title: session.phaseText,
                  detail: session.banner.isEmpty ? connectHint : session.banner) {
                VStack(spacing: TX.Space.xs) {
                    if waited >= 3 {
                        Text("已等待 \(waited)s")
                            .font(TX.Font.mono(11))
                            .foregroundStyle(p.textFaint)
                    }
                    if waited >= 5 {
                        // 等久了才给取消：避免正常的 1–2s 连接闪现一个按钮。
                        TXButton(title: "取消连接", action: onCancel)
                    }
                }
            }
            .task(id: session.phaseText) {
                waited = 0
                while !Task.isCancelled {
                    try? await Task.sleep(nanoseconds: 1_000_000_000)
                    waited += 1
                }
            }
        }
    }

    /// 分阶段提示：让等待有解释（尤其 tsnet 首次 Up 与 mosh 引导都要数秒）。
    private var connectHint: String {
        switch session.link {
        case .relay: "正在经 Tailscale 出口建立连接…"
        case .connecting, .direct: session.moshEngaged ? "正在引导 mosh…" : "正在建立 SSH 连接…"
        case .reconnecting(let n): "第 \(n) 次重连中…"
        case .offline: "等待连接…"
        }
    }

    private func state<Actions: View>(icon: String?, tint: Color, title: String, detail: String,
                                      @ViewBuilder actions: () -> Actions) -> some View {
        VStack(spacing: TX.Space.s) {
            if let icon {
                Image(systemName: icon)
                    .font(.system(size: 26, weight: .light))
                    .foregroundStyle(tint)
            } else {
                ProgressView().controlSize(.regular).tint(TXAccent.base)
            }
            Text(title)
                .font(TX.Font.mono(13, .medium))
                .foregroundStyle(p.text)
            Text(detail)
                .font(TX.Font.mono(11.5))
                .foregroundStyle(p.textWeak)
                .multilineTextAlignment(.center)
                .lineLimit(3)
                .frame(maxWidth: 420)
            actions()
                .padding(.top, TX.Space.xs)
        }
        .padding(TX.Space.l)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        // 连上后这一层要淡出去，别"啪"地掀掉（动画由 paneArea 按 phaseText 驱动）。
        .transition(.opacity)
    }
}

/// 无 tmux 主机的行内横幅（设计稿 `2c`）：说明窗口由 App 维持、mosh 兜底，但**关掉 App 不会在
/// 服务端继续跑**；右侧给「安装并启用 tmux」次要按钮。**不弹窗、不强推**，可关闭。
struct NoTmuxBanner: View {
    let onInstall: () -> Void
    let onDismiss: () -> Void
    @EnvironmentObject var theme: TXThemeManager
    private var p: TXPalette { theme.palette }

    var body: some View {
        HStack(spacing: TX.Space.s) {
            Image(systemName: "info.circle")
                .font(.system(size: 12))
                .foregroundStyle(p.warning)
            Text("未检测到 tmux · 当前是客户端窗口：mosh 能兜断线，但**关掉 App 后服务端不会继续跑**")
                .font(TX.Font.mono(11.5))
                .foregroundStyle(p.text3)
                .lineLimit(1)
            Spacer(minLength: TX.Space.s)
            TXButton(title: "安装并启用 tmux", action: onInstall)
            Button(action: onDismiss) {
                Image(systemName: "xmark")
                    .font(.system(size: 11, weight: .medium))
                    .foregroundStyle(p.textWeak)
                    .frame(width: 28, height: 28)
                    .contentShape(Rectangle())
            }
            .buttonStyle(.txPressTight)
        }
        .padding(.horizontal, TX.Space.s)
        .frame(height: 40)
        .background(p.surfaceDark.opacity(0.92))
        .overlay(alignment: .bottom) { Rectangle().fill(p.divider).frame(height: 1) }
    }
}

/// 「安装并启用 tmux」的引导（点横幅按钮后）：给出各发行版命令，用户可一键塞进终端执行。
struct TmuxInstallSheet: View {
    let onRun: (String) -> Void
    let onCancel: () -> Void
    @EnvironmentObject var theme: TXThemeManager
    private var p: TXPalette { theme.palette }

    /// 常见包管理器。跨发行版探测一条命令搞定：有哪个用哪个。
    private let combined = "command -v apt-get >/dev/null && sudo apt-get install -y tmux || " +
        "command -v dnf >/dev/null && sudo dnf install -y tmux || " +
        "command -v pacman >/dev/null && sudo pacman -S --noconfirm tmux || " +
        "command -v apk >/dev/null && sudo apk add tmux || " +
        "command -v brew >/dev/null && brew install tmux"

    var body: some View {
        TXModalScrim(onDismiss: onCancel) {
            VStack(alignment: .leading, spacing: TX.Space.s) {
                Text("安装 tmux")
                    .font(TX.Font.mono(15, .medium))
                    .foregroundStyle(p.text)
                Text("tmux 让会话留在服务端：关掉 App、换网络、睡一觉回来都能原样接回。\n下面这条会按服务器的包管理器自动选择（需要 sudo 权限）。")
                    .font(TX.Font.mono(12))
                    .foregroundStyle(p.text3)
                    .lineSpacing(4)
                Text(combined)
                    .font(TX.Font.mono(10.5))
                    .foregroundStyle(p.text4)
                    .padding(TX.Space.s)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(p.bgDeep, in: RoundedRectangle(cornerRadius: 8))
                HStack(spacing: TX.Space.s) {
                    Spacer()
                    TXButton(title: "取消", action: onCancel)
                    TXButton(title: "在终端执行", emphasized: true) { onRun(combined) }
                }
                .padding(.top, TX.Space.xs)
            }
            .padding(TX.Space.l)
            .frame(width: 520)
            .background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.dialog))
            .overlay(
                RoundedRectangle(cornerRadius: TX.Radius.dialog)
                    .strokeBorder(p.borderStrong, lineWidth: 1)
            )
            .txShadow(TX.Elevation.dialog)
        }
    }
}

/// 舞台底部动作条 + **左下状态行**。
///
/// 左下是合并后的**唯一**状态出口（原右上状态胶囊的三格分层徽标 + 原左下上下文文字，
/// 二者信息重复，用户裁决合并到这里）：`[dot 链路] | 传输 | 会话概览`。
/// **只染出问题的那层**：网络层不可达 → 第一格转琥珀/红；重连中 → 第二格转琥珀；
/// tmux 缺失 → 第三格写「无 tmux · 客户端窗口」而非报错。主机名不再重复出现
/// （标题胶囊与当前 tab 已有）。
///
/// **不是快捷键清单，而是真按钮**：iPad 大概率没接键盘，把「新 window / 回首页」
/// 只写成 `⌘T` 之类的文字提示等于这些功能对触控用户不存在。硬件键盘接上后这几个动作
/// 仍然可以走快捷键（UI-5），按钮照旧留着 —— 常驻可点是底线。
///
/// 高度 = 内容带 34pt + home indicator 安全区，内容在其中**居中** —— 与侧边栏脚、轨道齿轮
/// 同一条中心线。（此前只有 34pt 且被安全区顶起，屏幕底下留一条 24pt 的空带，看着像"没铺到底"。）
struct TerminalActionBar: View {
    @ObservedObject var session: TerminalSession
    let actions: [Action]
    let safeBottom: CGFloat
    @EnvironmentObject var theme: TXThemeManager
    @Environment(\.horizontalSizeClass) private var hSize
    private var p: TXPalette { theme.palette }

    struct Action: Identifiable {
        let id: String
        let icon: String
        let title: String
        /// 不可用时灰显但仍在（如原生窗口不能新建 window）——不隐藏，免得布局跳。
        var enabled: Bool = true
        let run: () -> Void
    }

    /// 窄屏只留前两个：多了在 iPhone 上放不下，会折行把 34pt 的带撑破。
    private var shown: [Action] { hSize == .compact ? Array(actions.prefix(2)) : actions }

    var body: some View {
        HStack(spacing: TX.Space.s) {
            statusLine
            Spacer(minLength: TX.Space.s)
            ForEach(shown) { action in
                Button(action: action.run) {
                    HStack(spacing: 5) {
                        Image(systemName: action.icon)
                            .font(.system(size: 10.5, weight: .medium))
                        Text(action.title)
                            .font(TX.Font.mono(11.5, .medium))
                    }
                    .foregroundStyle(action.enabled ? p.text2 : p.textFaint)
                    .padding(.horizontal, TX.Space.xs)
                    .frame(height: 26)
                    .background(action.enabled ? p.surface : .clear,
                                in: RoundedRectangle(cornerRadius: TX.Radius.badge))
                    .overlay(
                        RoundedRectangle(cornerRadius: TX.Radius.badge)
                            .strokeBorder(action.enabled ? p.border : p.divider, lineWidth: 1)
                    )
                    // 动作条永远**单行**：宁可少放一个也不许折行（折行会溢出底部带）。
                    .lineLimit(1)
                    .fixedSize()
                }
                .buttonStyle(.txPress)
                .disabled(!action.enabled)
            }
        }
        .padding(.horizontal, TX.Space.m)
        .frame(height: TX.Layout.footBand(safeBottom))
        .animation(TX.Motion.standard, value: contextText)
    }

    // MARK: - 状态行（原右上状态胶囊与旧左下文字的合并体）

    private var statusLine: some View {
        HStack(spacing: 0) {
            cell(egressText, color: egressColor, dot: true)
            separator
            cell(transportText, color: transportColor, dot: false)
            separator
            cell(contextText, color: p.text3, dot: false)
        }
    }

    private var separator: some View {
        Rectangle().fill(p.border).frame(width: 1, height: 12)
            .padding(.horizontal, TX.Space.xs)
    }

    private func cell(_ text: String, color: Color, dot: Bool) -> some View {
        HStack(spacing: 5) {
            if dot { TXStatusDot(color: color, size: 6) }
            Text(text)
                .font(TX.Font.mono(11.5, .medium))
                .foregroundStyle(color)
                .lineLimit(1)
        }
    }

    // 第一格：网络可达性（tsnet 出口 / 直连）
    private var egressText: String {
        switch session.link {
        case .relay: "tsnet"
        case .direct: "direct"
        case .connecting: "连接中"
        case .reconnecting: "tsnet"
        case .offline: "离线"
        }
    }

    private var egressColor: Color {
        switch session.link {
        case .direct, .relay: p.online
        case .connecting: p.text4
        case .reconnecting: p.reconnecting
        case .offline: p.offline
        }
    }

    // 第二格：传输层（mosh / SSH）
    private var transportText: String {
        if case .reconnecting(let n) = session.link {
            return "\(session.moshEngaged ? "mosh" : "ssh") 重连 \(n)"
        }
        return session.moshEngaged ? "mosh" : "ssh"
    }

    private var transportColor: Color {
        if case .reconnecting = session.link { return p.reconnecting }
        // 设计：这一格的文字是中性色，只有 RTT 数字才染绿/琥珀（首版无 RTT → 全中性）。
        return p.text3
    }

    // 第三格：会话复用层概览（旧左下「会话状态一句话」并入这里，windows 数保留）。
    private var contextText: String {
        if let t = session.tmuxSummary {
            let name = t.name.isEmpty ? "tmux" : "tmux \(t.name)"
            return "\(name) · \(t.windows) window\(t.windows == 1 ? "" : "s")"
        }
        // 还在探测 / 等用户选会话时别谎报「无 tmux」——那是探测确定不可用后才成立的结论。
        if session.pendingSessionChoice != nil { return "选择 tmux 会话…" }
        if session.tmuxSkipped { return "原生窗口 · 不经 tmux" }
        if session.tmuxUnavailable { return "无 tmux · 客户端窗口" }
        return session.isLive ? "检测 tmux…" : session.phaseText
    }
}