package com.tsmobile.app.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.tsmobile.app.data.ConnectionState
import com.tsmobile.app.ui.theme.UiTokens
import com.tsmobile.app.ui.theme.semanticColors

/**
 * 连接状态指示器 — 显示在头部右侧。
 *
 * 对应 docs/UI架构设计.md 2.1 头部右侧连接状态指示
 */
@Composable
fun ConnectionStatusIndicator(
    connectionState: ConnectionState?,
    modifier: Modifier = Modifier,
) {
    val colors = MaterialTheme.colorScheme
    val semanticColors = MaterialTheme.semanticColors
    val (color, text) = when (connectionState) {
        is ConnectionState.Connected -> semanticColors.success to "已连接"
        is ConnectionState.Disconnecting -> semanticColors.warning to "断开中"
        is ConnectionState.WaitingForNetwork -> semanticColors.warning to "等待网络"
        is ConnectionState.Reconnecting -> semanticColors.warning to "重连中"
        is ConnectionState.Disconnected -> colors.error to "已断开"
        null -> colors.outline to "未连接"
    }

    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Box(
            modifier = Modifier
                .size(UiTokens.Spacing.Small)
                .clip(CircleShape)
                .background(color),
        )
        Spacer(Modifier.width(UiTokens.Spacing.ExtraSmall))
        Text(
            text = text,
            style = MaterialTheme.typography.labelSmall,
            color = colors.onSurfaceVariant,
        )
    }
}
