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

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
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.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography

/**
 * Small circular stat badge for dating profile cards
 * Ported from iOS StatBadge.swift
 */
@Composable
fun StatBadge(
    icon: ImageVector,
    label: String,
    value: Int,
    color: Color,
    modifier: Modifier = Modifier
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .clip(RoundedCornerShape(AppSpacing.cornerRadius))
            .shadow(6.dp, RoundedCornerShape(AppSpacing.cornerRadius), ambientColor = color.copy(alpha = 0.1f))
            .background(AppColors.surfaceElevated)
            .background(
                Brush.verticalGradient(
                    colors = listOf(color.copy(alpha = 0.08f), Color.Transparent)
                )
            )
            .padding(vertical = AppSpacing.sm)
    ) {
        Box(
            modifier = Modifier
                .size(32.dp)
                .clip(CircleShape)
                .background(color.copy(alpha = 0.15f)),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = icon,
                contentDescription = label,
                tint = color,
                modifier = Modifier.size(16.dp)
            )
        }

        Spacer(modifier = Modifier.height(AppSpacing.xs))

        Text(
            text = "$value",
            style = AppTypography.headline,
            color = AppColors.primaryText
        )

        Text(
            text = label,
            style = AppTypography.micro,
            color = AppColors.secondaryText
        )
    }
}