package com.tt.honeyDue.ui.screens

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontWeight
import com.tt.honeyDue.testing.AccessibilityIds
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.tt.honeyDue.data.LocalDataManager
import com.tt.honeyDue.ui.components.AddContractorDialog
import com.tt.honeyDue.ui.components.ApiResultHandler
import com.tt.honeyDue.ui.components.HandleErrors
import com.tt.honeyDue.util.DateUtils
import com.tt.honeyDue.viewmodel.ContractorViewModel
import com.tt.honeyDue.network.ApiResult
import com.tt.honeyDue.platform.rememberShareContractor
import com.tt.honeyDue.utils.SubscriptionHelper
import com.tt.honeyDue.ui.subscription.UpgradePromptDialog
import com.tt.honeyDue.ui.theme.*
import honeydue.composeapp.generated.resources.*
import org.jetbrains.compose.resources.stringResource

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContractorDetailScreen(
    contractorId: Int,
    onNavigateBack: () -> Unit,
    viewModel: ContractorViewModel = viewModel { ContractorViewModel() }
) {
    val dataManager = LocalDataManager.current
    val contractorState by viewModel.contractorDetailState.collectAsStateWithLifecycle()
    val deleteState by viewModel.deleteState.collectAsStateWithLifecycle()
    val toggleFavoriteState by viewModel.toggleFavoriteState.collectAsStateWithLifecycle()

    var showEditDialog by remember { mutableStateOf(false) }
    var showDeleteConfirmation by remember { mutableStateOf(false) }
    var showUpgradePrompt by remember { mutableStateOf(false) }
    var upgradeTriggerKey by remember { mutableStateOf<String?>(null) }

    val shareContractor = rememberShareContractor()

    LaunchedEffect(contractorId) {
        viewModel.loadContractorDetail(contractorId)
    }

    // Handle errors for delete contractor
    deleteState.HandleErrors(
        onRetry = { viewModel.deleteContractor(contractorId) },
        errorTitle = stringResource(Res.string.contractors_failed_to_delete)
    )

    // Handle errors for toggle favorite
    toggleFavoriteState.HandleErrors(
        onRetry = { viewModel.toggleFavorite(contractorId) },
        errorTitle = stringResource(Res.string.contractors_failed_to_update_favorite)
    )

    LaunchedEffect(deleteState) {
        if (deleteState is ApiResult.Success) {
            viewModel.resetDeleteState()
            onNavigateBack()
        }
    }

    LaunchedEffect(toggleFavoriteState) {
        if (toggleFavoriteState is ApiResult.Success) {
            viewModel.loadContractorDetail(contractorId)
            viewModel.resetToggleFavoriteState()
        }
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(stringResource(Res.string.contractors_details), fontWeight = FontWeight.Bold) },
                navigationIcon = {
                    IconButton(onClick = onNavigateBack) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, stringResource(Res.string.common_back))
                    }
                },
                actions = {
                    when (val state = contractorState) {
                        is ApiResult.Success -> {
                            IconButton(
                                onClick = {
                                    val shareCheck = SubscriptionHelper.canShareContractor()
                                    if (shareCheck.allowed) {
                                        shareContractor(state.data)
                                    } else {
                                        upgradeTriggerKey = shareCheck.triggerKey
                                        showUpgradePrompt = true
                                    }
                                },
                                modifier = Modifier.testTag(AccessibilityIds.Contractor.shareButton)
                            ) {
                                Icon(Icons.Default.Share, stringResource(Res.string.common_share))
                            }
                            IconButton(onClick = { viewModel.toggleFavorite(contractorId) }) {
                                Icon(
                                    if (state.data.isFavorite) Icons.Default.Star else Icons.Default.StarOutline,
                                    stringResource(Res.string.contractors_toggle_favorite),
                                    tint = if (state.data.isFavorite) MaterialTheme.colorScheme.tertiary else LocalContentColor.current
                                )
                            }
                            IconButton(
                                onClick = { showEditDialog = true },
                                modifier = Modifier.testTag(AccessibilityIds.Contractor.editButton)
                            ) {
                                Icon(Icons.Default.Edit, stringResource(Res.string.common_edit))
                            }
                            IconButton(
                                onClick = { showDeleteConfirmation = true },
                                modifier = Modifier.testTag(AccessibilityIds.Contractor.deleteButton)
                            ) {
                                Icon(Icons.Default.Delete, stringResource(Res.string.common_delete), tint = MaterialTheme.colorScheme.error)
                            }
                        }
                        else -> {}
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.surface
                )
            )
        }
    ) { padding ->
        WarmGradientBackground {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(padding)
                    .testTag(AccessibilityIds.Contractor.detailView)
            ) {
                val uriHandler = LocalUriHandler.current
                val residences = dataManager.residences.value

                ApiResultHandler(
                    state = contractorState,
                    onRetry = { viewModel.loadContractorDetail(contractorId) },
                    errorTitle = stringResource(Res.string.contractors_failed_to_load),
                    loadingContent = {
                        CircularProgressIndicator(color = MaterialTheme.colorScheme.primary)
                    }
                ) { contractor ->
                    LazyColumn(
                        modifier = Modifier.fillMaxSize(),
                        contentPadding = PaddingValues(OrganicSpacing.medium),
                        verticalArrangement = Arrangement.spacedBy(OrganicSpacing.medium)
                    ) {
                        // Header Card
                        item {
                            OrganicCard(modifier = Modifier.fillMaxWidth()) {
                                Column(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(OrganicSpacing.large),
                                    horizontalAlignment = Alignment.CenterHorizontally
                                ) {
                                    // Avatar
                                    OrganicIconContainer(
                                        icon = Icons.Default.Person,
                                        size = 80.dp,
                                        iconSize = 48.dp,
                                        containerColor = MaterialTheme.colorScheme.primaryContainer,
                                        iconTint = MaterialTheme.colorScheme.primary
                                    )

                                    Spacer(modifier = Modifier.height(OrganicSpacing.medium))

                                    Text(
                                        text = contractor.name,
                                        style = MaterialTheme.typography.headlineSmall,
                                        fontWeight = FontWeight.Bold,
                                        color = MaterialTheme.colorScheme.onSurface
                                    )

                                    if (contractor.company != null) {
                                        Text(
                                            text = contractor.company,
                                            style = MaterialTheme.typography.titleMedium,
                                            color = MaterialTheme.colorScheme.onSurfaceVariant
                                        )
                                    }

                                    if (contractor.specialties.isNotEmpty()) {
                                        Spacer(modifier = Modifier.height(OrganicSpacing.medium))
                                        FlowRow(
                                            horizontalArrangement = Arrangement.spacedBy(OrganicSpacing.small, Alignment.CenterHorizontally),
                                            verticalArrangement = Arrangement.spacedBy(OrganicSpacing.small)
                                        ) {
                                            contractor.specialties.forEach { specialty ->
                                                Surface(
                                                    shape = OrganicShapes.large,
                                                    color = MaterialTheme.colorScheme.primaryContainer
                                                ) {
                                                    Row(
                                                        modifier = Modifier.padding(horizontal = OrganicSpacing.medium, vertical = OrganicSpacing.extraSmall),
                                                        verticalAlignment = Alignment.CenterVertically
                                                    ) {
                                                        Icon(
                                                            Icons.Default.Build,
                                                            contentDescription = null, // decorative
                                                            modifier = Modifier.size(16.dp),
                                                            tint = MaterialTheme.colorScheme.primary
                                                        )
                                                        Spacer(modifier = Modifier.width(OrganicSpacing.extraSmall))
                                                        Text(
                                                            text = specialty.name,
                                                            style = MaterialTheme.typography.bodyMedium,
                                                            color = MaterialTheme.colorScheme.primary,
                                                            fontWeight = FontWeight.Medium
                                                        )
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    if (contractor.rating != null && contractor.rating > 0) {
                                        Spacer(modifier = Modifier.height(OrganicSpacing.medium))
                                        Row(verticalAlignment = Alignment.CenterVertically) {
                                            repeat(5) { index ->
                                                Icon(
                                                    if (index < contractor.rating.toInt()) Icons.Default.Star else Icons.Default.StarOutline,
                                                    contentDescription = null, // decorative
                                                    modifier = Modifier.size(20.dp),
                                                    tint = MaterialTheme.colorScheme.tertiary
                                                )
                                            }
                                            Spacer(modifier = Modifier.width(OrganicSpacing.small))
                                            Text(
                                                text = ((contractor.rating * 10).toInt() / 10.0).toString(),
                                                style = MaterialTheme.typography.titleMedium,
                                                fontWeight = FontWeight.Bold,
                                                color = MaterialTheme.colorScheme.onSurface
                                            )
                                        }
                                    }

                                    if (contractor.taskCount > 0) {
                                        Spacer(modifier = Modifier.height(OrganicSpacing.extraSmall))
                                        Text(
                                            text = stringResource(Res.string.contractors_completed_tasks, contractor.taskCount),
                                            style = MaterialTheme.typography.bodySmall,
                                            color = MaterialTheme.colorScheme.onSurfaceVariant
                                        )
                                    }
                                }
                            }
                        }

                        // Quick Actions
                        if (contractor.phone != null || contractor.email != null || contractor.website != null) {
                            item {
                                Row(
                                    modifier = Modifier.fillMaxWidth(),
                                    horizontalArrangement = Arrangement.spacedBy(OrganicSpacing.medium)
                                ) {
                                    contractor.phone?.let { phone ->
                                        QuickActionButton(
                                            icon = Icons.Default.Phone,
                                            label = stringResource(Res.string.contractors_call),
                                            color = MaterialTheme.colorScheme.primary,
                                            modifier = Modifier
                                                .weight(1f)
                                                .testTag(AccessibilityIds.Contractor.callButton),
                                            onClick = {
                                                try {
                                                    uriHandler.openUri("tel:${phone.replace(" ", "")}")
                                                } catch (e: Exception) { /* Handle error */ }
                                            }
                                        )
                                    }

                                    contractor.email?.let { email ->
                                        QuickActionButton(
                                            icon = Icons.Default.Email,
                                            label = stringResource(Res.string.contractors_send_email),
                                            color = MaterialTheme.colorScheme.secondary,
                                            modifier = Modifier
                                                .weight(1f)
                                                .testTag(AccessibilityIds.Contractor.emailButton),
                                            onClick = {
                                                try {
                                                    uriHandler.openUri("mailto:$email")
                                                } catch (e: Exception) { /* Handle error */ }
                                            }
                                        )
                                    }

                                    contractor.website?.let { website ->
                                        QuickActionButton(
                                            icon = Icons.Default.Language,
                                            label = stringResource(Res.string.contractors_website),
                                            color = MaterialTheme.colorScheme.tertiary,
                                            modifier = Modifier.weight(1f),
                                            onClick = {
                                                try {
                                                    val url = if (website.startsWith("http")) website else "https://$website"
                                                    uriHandler.openUri(url)
                                                } catch (e: Exception) { /* Handle error */ }
                                            }
                                        )
                                    }

                                    if (contractor.streetAddress != null || contractor.city != null) {
                                        QuickActionButton(
                                            icon = Icons.Default.Map,
                                            label = stringResource(Res.string.contractors_directions),
                                            color = MaterialTheme.colorScheme.error,
                                            modifier = Modifier.weight(1f),
                                            onClick = {
                                                try {
                                                    val address = listOfNotNull(
                                                        contractor.streetAddress,
                                                        contractor.city,
                                                        contractor.stateProvince,
                                                        contractor.postalCode
                                                    ).joinToString(", ")
                                                    uriHandler.openUri("geo:0,0?q=$address")
                                                } catch (e: Exception) { /* Handle error */ }
                                            }
                                        )
                                    }
                                }
                            }
                        }

                        // Contact Information
                        item {
                            DetailSection(title = stringResource(Res.string.contractors_contact_info)) {
                                contractor.phone?.let { phone ->
                                    ClickableDetailRow(
                                        icon = Icons.Default.Phone,
                                        label = stringResource(Res.string.contractors_phone_label),
                                        value = phone,
                                        iconTint = MaterialTheme.colorScheme.primary,
                                        onClick = {
                                            try {
                                                uriHandler.openUri("tel:${phone.replace(" ", "")}")
                                            } catch (e: Exception) { /* Handle error */ }
                                        }
                                    )
                                }

                                contractor.email?.let { email ->
                                    ClickableDetailRow(
                                        icon = Icons.Default.Email,
                                        label = stringResource(Res.string.contractors_email_label),
                                        value = email,
                                        iconTint = MaterialTheme.colorScheme.secondary,
                                        onClick = {
                                            try {
                                                uriHandler.openUri("mailto:$email")
                                            } catch (e: Exception) { /* Handle error */ }
                                        }
                                    )
                                }

                                contractor.website?.let { website ->
                                    ClickableDetailRow(
                                        icon = Icons.Default.Language,
                                        label = stringResource(Res.string.contractors_website),
                                        value = website,
                                        iconTint = MaterialTheme.colorScheme.tertiary,
                                        onClick = {
                                            try {
                                                val url = if (website.startsWith("http")) website else "https://$website"
                                                uriHandler.openUri(url)
                                            } catch (e: Exception) { /* Handle error */ }
                                        }
                                    )
                                }

                                if (contractor.phone == null && contractor.email == null && contractor.website == null) {
                                    Text(
                                        text = stringResource(Res.string.contractors_no_contact_info),
                                        style = MaterialTheme.typography.bodyMedium,
                                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                                        modifier = Modifier.padding(OrganicSpacing.medium)
                                    )
                                }
                            }
                        }

                        // Address
                        if (contractor.streetAddress != null || contractor.city != null) {
                            item {
                                DetailSection(title = stringResource(Res.string.contractors_address)) {
                                    val fullAddress = buildString {
                                        contractor.streetAddress?.let { append(it) }
                                        if (contractor.city != null || contractor.stateProvince != null || contractor.postalCode != null) {
                                            if (isNotEmpty()) append("\n")
                                            contractor.city?.let { append(it) }
                                            contractor.stateProvince?.let {
                                                if (contractor.city != null) append(", ")
                                                append(it)
                                            }
                                            contractor.postalCode?.let {
                                                append(" ")
                                                append(it)
                                            }
                                        }
                                    }

                                    if (fullAddress.isNotBlank()) {
                                        ClickableDetailRow(
                                            icon = Icons.Default.LocationOn,
                                            label = stringResource(Res.string.contractors_location),
                                            value = fullAddress,
                                            iconTint = MaterialTheme.colorScheme.error,
                                            onClick = {
                                                try {
                                                    val address = listOfNotNull(
                                                        contractor.streetAddress,
                                                        contractor.city,
                                                        contractor.stateProvince,
                                                        contractor.postalCode
                                                    ).joinToString(", ")
                                                    uriHandler.openUri("geo:0,0?q=$address")
                                                } catch (e: Exception) { /* Handle error */ }
                                            }
                                        )
                                    }
                                }
                            }
                        }

                        // Associated Property
                        contractor.residenceId?.let { resId ->
                            val residenceName = residences.find { r -> r.id == resId }?.name
                                ?: "Property #$resId"

                            item {
                                DetailSection(title = stringResource(Res.string.contractors_associated_property)) {
                                    DetailRow(
                                        icon = Icons.Default.Home,
                                        label = stringResource(Res.string.contractors_property),
                                        value = residenceName,
                                        iconTint = MaterialTheme.colorScheme.primary
                                    )
                                }
                            }
                        }

                        // Notes
                        if (!contractor.notes.isNullOrBlank()) {
                            item {
                                DetailSection(title = stringResource(Res.string.contractors_notes)) {
                                    Row(
                                        modifier = Modifier.padding(horizontal = OrganicSpacing.medium, vertical = OrganicSpacing.medium),
                                        horizontalArrangement = Arrangement.spacedBy(OrganicSpacing.medium)
                                    ) {
                                        Icon(
                                            Icons.Default.Notes,
                                            contentDescription = null, // decorative
                                            modifier = Modifier.size(20.dp),
                                            tint = MaterialTheme.colorScheme.tertiary
                                        )
                                        Text(
                                            text = contractor.notes,
                                            style = MaterialTheme.typography.bodyMedium,
                                            color = MaterialTheme.colorScheme.onSurface
                                        )
                                    }
                                }
                            }
                        }

                        // Statistics
                        item {
                            DetailSection(title = stringResource(Res.string.contractors_statistics)) {
                                Row(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(OrganicSpacing.medium),
                                    horizontalArrangement = Arrangement.SpaceEvenly
                                ) {
                                    StatCard(
                                        icon = Icons.Default.CheckCircle,
                                        value = contractor.taskCount.toString(),
                                        label = stringResource(Res.string.contractors_tasks_completed),
                                        color = MaterialTheme.colorScheme.primary
                                    )

                                    if (contractor.rating != null && contractor.rating > 0) {
                                        StatCard(
                                            icon = Icons.Default.Star,
                                            value = ((contractor.rating * 10).toInt() / 10.0).toString(),
                                            label = stringResource(Res.string.contractors_average_rating),
                                            color = MaterialTheme.colorScheme.tertiary
                                        )
                                    }
                                }
                            }
                        }

                        // Metadata
                        item {
                            DetailSection(title = stringResource(Res.string.contractors_info)) {
                                contractor.createdBy?.let { createdBy ->
                                    DetailRow(
                                        icon = Icons.Default.PersonAdd,
                                        label = stringResource(Res.string.contractors_added_by),
                                        value = createdBy.username,
                                        iconTint = MaterialTheme.colorScheme.onSurfaceVariant
                                    )
                                    OrganicDivider(modifier = Modifier.padding(horizontal = OrganicSpacing.medium))
                                }

                                DetailRow(
                                    icon = Icons.Default.CalendarMonth,
                                    label = stringResource(Res.string.contractors_member_since),
                                    value = DateUtils.formatDateMedium(contractor.createdAt),
                                    iconTint = MaterialTheme.colorScheme.onSurfaceVariant
                                )
                            }
                        }
                    }
                }
            }
        }
    }

    if (showEditDialog) {
        AddContractorDialog(
            contractorId = contractorId,
            onDismiss = { showEditDialog = false },
            onContractorSaved = {
                showEditDialog = false
                viewModel.loadContractorDetail(contractorId)
            }
        )
    }

    if (showDeleteConfirmation) {
        AlertDialog(
            onDismissRequest = { showDeleteConfirmation = false },
            icon = { Icon(Icons.Default.Warning, null, tint = MaterialTheme.colorScheme.error) },
            title = { Text(stringResource(Res.string.contractors_delete)) },
            text = { Text(stringResource(Res.string.contractors_delete_warning)) },
            confirmButton = {
                Button(
                    onClick = {
                        viewModel.deleteContractor(contractorId)
                        showDeleteConfirmation = false
                    },
                    colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error)
                ) {
                    Text(stringResource(Res.string.common_delete))
                }
            },
            dismissButton = {
                TextButton(onClick = { showDeleteConfirmation = false }) {
                    Text(stringResource(Res.string.common_cancel))
                }
            },
            containerColor = MaterialTheme.colorScheme.surface,
            shape = OrganicShapes.large
        )
    }

    if (showUpgradePrompt && upgradeTriggerKey != null) {
        UpgradePromptDialog(
            triggerKey = upgradeTriggerKey!!,
            onDismiss = {
                showUpgradePrompt = false
                upgradeTriggerKey = null
            },
            onUpgrade = {
                // TODO: Navigate to subscription purchase screen
                showUpgradePrompt = false
                upgradeTriggerKey = null
            }
        )
    }
}

@Composable
fun DetailSection(
    title: String,
    content: @Composable ColumnScope.() -> Unit
) {
    OrganicCard(modifier = Modifier.fillMaxWidth()) {
        Column(modifier = Modifier.fillMaxWidth()) {
            Text(
                text = title,
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colorScheme.onSurface,
                modifier = Modifier.padding(OrganicSpacing.medium).padding(bottom = 0.dp)
            )
            content()
        }
    }
}

@Composable
fun DetailRow(
    icon: ImageVector,
    label: String,
    value: String,
    iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = OrganicSpacing.medium, vertical = OrganicSpacing.medium),
        verticalAlignment = Alignment.Top
    ) {
        Icon(
            icon,
            contentDescription = null, // decorative
            modifier = Modifier.size(20.dp),
            tint = iconTint
        )
        Spacer(modifier = Modifier.width(OrganicSpacing.medium))
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = label,
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            Text(
                text = value,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurface,
                fontWeight = FontWeight.Medium
            )
        }
    }
}

@Composable
fun ClickableDetailRow(
    icon: ImageVector,
    label: String,
    value: String,
    iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(horizontal = OrganicSpacing.medium, vertical = OrganicSpacing.medium),
        verticalAlignment = Alignment.Top
    ) {
        Icon(
            icon,
            contentDescription = label,
            modifier = Modifier.size(20.dp),
            tint = iconTint
        )
        Spacer(modifier = Modifier.width(OrganicSpacing.medium))
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = label,
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            Text(
                text = value,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.primary,
                fontWeight = FontWeight.Medium
            )
        }
        Icon(
            Icons.Default.OpenInNew,
            contentDescription = "Open",
            modifier = Modifier.size(16.dp),
            tint = MaterialTheme.colorScheme.onSurfaceVariant
        )
    }
}

@Composable
fun QuickActionButton(
    icon: ImageVector,
    label: String,
    color: Color,
    modifier: Modifier = Modifier,
    onClick: () -> Unit
) {
    OrganicCard(
        modifier = modifier.clickable(onClick = onClick)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = OrganicSpacing.medium),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            OrganicIconContainer(
                icon = icon,
                size = 44.dp,
                iconSize = 22.dp,
                containerColor = color.copy(alpha = 0.1f),
                iconTint = color
            )
            Spacer(modifier = Modifier.height(OrganicSpacing.small))
            Text(
                text = label,
                style = MaterialTheme.typography.labelMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                fontWeight = FontWeight.Medium
            )
        }
    }
}

@Composable
fun StatCard(
    icon: ImageVector,
    value: String,
    label: String,
    color: Color
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OrganicIconContainer(
            icon = icon,
            size = 44.dp,
            iconSize = 22.dp,
            containerColor = color.copy(alpha = 0.1f),
            iconTint = color
        )
        Spacer(modifier = Modifier.height(OrganicSpacing.small))
        Text(
            text = value,
            style = MaterialTheme.typography.titleLarge,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.onSurface
        )
        Text(
            text = label,
            style = MaterialTheme.typography.labelSmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            textAlign = TextAlign.Center
        )
    }
}
