package com.craigvg.lichun_android.ui.screens.messaging.components

import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.craigvg.lichun_android.R
import com.craigvg.lichun_android.ui.components.images.CharacterAvatar
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography

/**
 * Chat top bar with avatar, name, and online status.
 * Ported from iOS ChatHeaderCard.swift
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ChatHeaderCard(
    characterName: String,
    characterImageUrl: String = "",
    onBack: () -> Unit
) {
    val nameParts = characterName.split(" ")
    TopAppBar(
        title = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                CharacterAvatar(
                    imageUrl = characterImageUrl,
                    firstName = nameParts.firstOrNull() ?: "",
                    lastName = nameParts.getOrNull(1) ?: "",
                    size = 40.dp,
                    showGlow = false
                )
                Spacer(modifier = Modifier.width(AppSpacing.sm))
                Column {
                    Text(
                        text = characterName,
                        style = AppTypography.headline,
                        color = AppColors.primaryText
                    )
                    Text(
                        text = stringResource(R.string.online),
                        style = AppTypography.caption,
                        color = AppColors.success
                    )
                }
            }
        },
        navigationIcon = {
            IconButton(onClick = onBack) {
                Icon(
                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                    contentDescription = "Back",
                    tint = AppColors.primaryText
                )
            }
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = AppColors.surfaceElevated
        )
    )
}