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

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChevronRight
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Message
import androidx.compose.material3.*
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.craigvg.lichun_android.domain.models.Person
import com.craigvg.lichun_android.ui.navigation.datingProfileSharedKey
import com.craigvg.lichun_android.ui.navigation.sharedElementKey
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography

/**
 * Relationship overview card with avatar, affinity bar, and quick actions
 */
@Composable
fun RelationshipSnapshotCard(
    person: Person,
    onViewDetail: () -> Unit = {},
    onMessage: () -> Unit = {},
    onGoOnDate: () -> Unit = {}
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onViewDetail() },
        shape = RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppSpacing.md),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Avatar
            com.craigvg.lichun_android.ui.components.images.CharacterAvatar(
                imageUrl = person.image,
                firstName = person.firstname,
                lastName = person.lastname,
                size = AppSpacing.avatarMedium,
                showGlow = false,
                modifier = Modifier.sharedElementKey(datingProfileSharedKey(person.id))
            )

            Spacer(modifier = Modifier.width(AppSpacing.sm))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = person.fullName,
                    style = AppTypography.bodyBold,
                    color = AppColors.primaryText
                )
                Text(
                    text = person.relationship.ifEmpty { "Friend" },
                    style = AppTypography.caption,
                    color = AppColors.secondaryText
                )
                // Affinity bar
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(top = 4.dp)
                ) {
                    Icon(
                        imageVector = Icons.Default.Favorite,
                        contentDescription = null,
                        tint = AppColors.primary,
                        modifier = Modifier.size(14.dp)
                    )
                    Spacer(modifier = Modifier.width(4.dp))
                    Box(
                        modifier = Modifier
                            .width(80.dp)
                            .height(6.dp)
                            .clip(RoundedCornerShape(3.dp))
                            .background(AppColors.primary.copy(alpha = 0.2f))
                    ) {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth((person.affinity / 100f).coerceIn(0f, 1f))
                                .fillMaxHeight()
                                .clip(RoundedCornerShape(3.dp))
                                .background(AppColors.primary)
                        )
                    }
                    Spacer(modifier = Modifier.width(4.dp))
                    Text(
                        text = "${person.affinity}%",
                        style = AppTypography.micro,
                        color = AppColors.primary
                    )
                }
            }

            // Quick actions
            Row {
                IconButton(onClick = onGoOnDate) {
                    Icon(
                        imageVector = Icons.Default.DateRange,
                        contentDescription = "Date",
                        tint = AppColors.primary
                    )
                }
                IconButton(onClick = onMessage) {
                    Icon(
                        imageVector = Icons.Default.Message,
                        contentDescription = "Message",
                        tint = AppColors.secondary
                    )
                }
                IconButton(onClick = onViewDetail) {
                    Icon(
                        imageVector = Icons.Default.ChevronRight,
                        contentDescription = "View",
                        tint = AppColors.secondaryText
                    )
                }
            }
        }
    }
}