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

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.Chat
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import coil3.compose.AsyncImage
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.screens.dating.components.CompatibilityExplanationView
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography
import com.craigvg.lichun_android.viewmodel.GameStateViewModel
import com.craigvg.lichun_android.viewmodel.PlayerViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle

/**
 * Relationship detail screen showing full relationship info
 * Ported from iOS RelationshipDetailView.swift
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RelationshipDetailScreen(
    personId: String,
    playerViewModel: PlayerViewModel = hiltViewModel(),
    gameStateViewModel: GameStateViewModel = hiltViewModel(),
    onBack: () -> Unit = {},
    onStartChat: (String) -> Unit = {},
    onGoOnDate: (String) -> Unit = {}
) {
    val relationships by playerViewModel.relationships.collectAsStateWithLifecycle()
    val person = relationships.find { it.id == personId }
    val currentPerson by playerViewModel.person.collectAsStateWithLifecycle()
    var showCompatibilityExplanation by remember { mutableStateOf(false) }
    var showBreakupConfirmation by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Relationship", style = AppTypography.headline) },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Back",
                            tint = AppColors.primaryText
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = AppColors.surfaceElevated
                )
            )
        },
        containerColor = AppColors.background
    ) { paddingValues ->
        if (person == null) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator(color = AppColors.primary)
            }
        } else {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues)
                    .verticalScroll(rememberScrollState())
            ) {
                // Hero section
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(300.dp)
                ) {
                    AsyncImage(
                        model = person.image,
                        contentDescription = person.firstname,
                        modifier = Modifier
                            .fillMaxSize()
                            .sharedElementKey(datingProfileSharedKey(person.id)),
                        contentScale = ContentScale.Crop
                    )

                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(
                                Brush.verticalGradient(
                                    colors = listOf(
                                        AppColors.background.copy(alpha = 0f),
                                        AppColors.background
                                    ),
                                    startY = 150f
                                )
                            )
                    )

                    Column(
                        modifier = Modifier
                            .align(Alignment.BottomCenter)
                            .padding(AppSpacing.md),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(
                            text = "${person.firstname} ${person.lastname}",
                            style = AppTypography.title,
                            color = AppColors.primaryText
                        )
                        Text(
                            text = person.status,
                            style = AppTypography.body,
                            color = AppColors.primary
                        )
                    }
                }

                // Quick actions
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = AppSpacing.lg, vertical = AppSpacing.md),
                    horizontalArrangement = Arrangement.SpaceEvenly
                ) {
                    QuickActionButton(
                        icon = Icons.AutoMirrored.Filled.Chat,
                        label = "Message",
                        onClick = { onStartChat(person.id) }
                    )
                    QuickActionButton(
                        icon = Icons.Default.Phone,
                        label = "Call",
                        onClick = { playerViewModel.callCharacter(person.id) }
                    )
                    QuickActionButton(
                        icon = Icons.Default.CardGiftcard,
                        label = "Gift",
                        onClick = { playerViewModel.giftCharacter(person.id) }
                    )
                    QuickActionButton(
                        icon = Icons.Default.DateRange,
                        label = "Date",
                        onClick = { onGoOnDate(person.id) }
                    )
                }

                Divider(color = AppColors.surfaceSubtle)

                // Stats
                Column(
                    modifier = Modifier.padding(AppSpacing.md)
                ) {
                    Text(
                        text = "Relationship Stats",
                        style = AppTypography.headline,
                        color = AppColors.primaryText
                    )

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

                    RelationshipStatRow(
                        label = "Affinity",
                        value = person.affinity,
                        color = AppColors.primary
                    )
                    Spacer(modifier = Modifier.height(AppSpacing.sm))
                    // Display mood as text since it's a string (e.g., "Happy", "Neutral")
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        Text(
                            text = "Mood",
                            style = AppTypography.body,
                            color = AppColors.secondaryText
                        )
                        Text(
                            text = person.mood.ifEmpty { "Neutral" },
                            style = AppTypography.bodyBold,
                            color = AppColors.happiness
                        )
                    }

                    val score = person.compatibilityScore
                    if (score > 0) {
                        Spacer(modifier = Modifier.height(AppSpacing.md))
                        Card(
                            modifier = Modifier
                                .fillMaxWidth()
                                .clickable { showCompatibilityExplanation = true },
                            shape = RoundedCornerShape(AppSpacing.cornerRadius),
                            colors = CardDefaults.cardColors(
                                containerColor = AppColors.primary.copy(alpha = 0.1f)
                            )
                        ) {
                            Row(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(AppSpacing.md),
                                verticalAlignment = Alignment.CenterVertically
                            ) {
                                Icon(
                                    imageVector = Icons.Default.Favorite,
                                    contentDescription = null,
                                    tint = AppColors.primary,
                                    modifier = Modifier.size(24.dp)
                                )
                                Spacer(modifier = Modifier.width(AppSpacing.sm))
                                Column(modifier = Modifier.weight(1f)) {
                                    Text(
                                        text = "Compatibility Score",
                                        style = AppTypography.caption,
                                        color = AppColors.secondaryText
                                    )
                                    Text(
                                        text = "$score%",
                                        style = AppTypography.headline,
                                        color = AppColors.primary
                                    )
                                }
                                Icon(
                                    imageVector = Icons.Default.Info,
                                    contentDescription = "Why this score?",
                                    tint = AppColors.secondaryText,
                                    modifier = Modifier.size(20.dp)
                                )
                            }
                        }
                    }
                }

                Divider(color = AppColors.surfaceSubtle)

                // About
                Column(
                    modifier = Modifier.padding(AppSpacing.md)
                ) {
                    Text(
                        text = "About",
                        style = AppTypography.headline,
                        color = AppColors.primaryText
                    )
                    Spacer(modifier = Modifier.height(AppSpacing.sm))
                    Text(
                        text = person.bio,
                        style = AppTypography.body,
                        color = AppColors.secondaryText
                    )
                }

                // Interests
                if (person.interests.isNotEmpty()) {
                    Column(
                        modifier = Modifier.padding(AppSpacing.md)
                    ) {
                        Text(
                            text = "Interests",
                            style = AppTypography.headline,
                            color = AppColors.primaryText
                        )
                        Spacer(modifier = Modifier.height(AppSpacing.sm))
                        FlowRow(
                            horizontalArrangement = Arrangement.spacedBy(AppSpacing.xs),
                            verticalArrangement = Arrangement.spacedBy(AppSpacing.xs)
                        ) {
                            person.interests.forEach { interest ->
                                Box(
                                    modifier = Modifier
                                        .clip(RoundedCornerShape(AppSpacing.pillCornerRadius))
                                        .background(AppColors.secondary.copy(alpha = 0.2f))
                                        .padding(horizontal = 12.dp, vertical = 6.dp)
                                ) {
                                    Text(
                                        text = interest,
                                        style = AppTypography.caption,
                                        color = AppColors.secondary
                                    )
                                }
                            }
                        }
                    }
                }

                // Break Up / Divorce section
                val isRomantic = person.relationship.lowercase().let {
                    it.contains("partner") || it.contains("boyfriend") ||
                    it.contains("girlfriend") || it.contains("spouse") ||
                    it.contains("husband") || it.contains("wife") ||
                    it.contains("married") || it.contains("dating")
                }
                if (isRomantic) {
                    val isMarried = person.relationship.lowercase().let {
                        it.contains("spouse") || it.contains("husband") ||
                        it.contains("wife") || it.contains("married")
                    }
                    val actionLabel = if (isMarried) "Divorce" else "Break Up"

                    Spacer(modifier = Modifier.height(AppSpacing.lg))
                    Divider(color = AppColors.surfaceSubtle)
                    Spacer(modifier = Modifier.height(AppSpacing.md))

                    OutlinedButton(
                        onClick = { showBreakupConfirmation = true },
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = AppSpacing.md),
                        shape = RoundedCornerShape(AppSpacing.cornerRadius),
                        colors = ButtonDefaults.outlinedButtonColors(
                            contentColor = AppColors.error
                        ),
                        border = androidx.compose.foundation.BorderStroke(1.dp, AppColors.error.copy(alpha = 0.3f))
                    ) {
                        Icon(
                            imageVector = Icons.Default.HeartBroken,
                            contentDescription = null,
                            tint = AppColors.error,
                            modifier = Modifier.size(18.dp)
                        )
                        Spacer(modifier = Modifier.width(AppSpacing.xs))
                        Text(
                            text = actionLabel,
                            style = AppTypography.bodyBold,
                            color = AppColors.error
                        )
                    }
                }

                Spacer(modifier = Modifier.height(AppSpacing.xl))
            }
        }

        // Break up confirmation dialog
        if (showBreakupConfirmation && person != null) {
            val isMarried = person.relationship.lowercase().let {
                it.contains("spouse") || it.contains("husband") ||
                it.contains("wife") || it.contains("married")
            }
            AlertDialog(
                onDismissRequest = { showBreakupConfirmation = false },
                title = { Text("End Relationship", style = AppTypography.headline) },
                text = {
                    Text(
                        "Are you sure you want to end this relationship with ${person.firstname}? This decision is permanent and cannot be undone.",
                        style = AppTypography.body,
                        color = AppColors.secondaryText
                    )
                },
                confirmButton = {
                    TextButton(
                        onClick = {
                            showBreakupConfirmation = false
                            gameStateViewModel.breakUp(person.id)
                            onBack()
                        }
                    ) {
                        Text(
                            "End Relationship",
                            color = AppColors.error,
                            style = AppTypography.bodyBold
                        )
                    }
                },
                dismissButton = {
                    TextButton(onClick = { showBreakupConfirmation = false }) {
                        Text("Cancel", color = AppColors.secondaryText)
                    }
                },
                containerColor = AppColors.surfaceElevated
            )
        }

        // Compatibility explanation bottom sheet
        if (showCompatibilityExplanation && person != null) {
            ModalBottomSheet(
                onDismissRequest = { showCompatibilityExplanation = false },
                containerColor = AppColors.background,
                shape = RoundedCornerShape(topStart = AppSpacing.sheetCornerRadius, topEnd = AppSpacing.sheetCornerRadius)
            ) {
                CompatibilityExplanationView(
                    person = person,
                    currentPerson = currentPerson,
                    onDismiss = { showCompatibilityExplanation = false }
                )
            }
        }
    }
}

@Composable
fun QuickActionButton(
    icon: ImageVector,
    label: String,
    onClick: () -> Unit
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        FilledTonalIconButton(
            onClick = onClick,
            modifier = Modifier.size(56.dp),
            colors = IconButtonDefaults.filledTonalIconButtonColors(
                containerColor = AppColors.primary.copy(alpha = 0.1f)
            )
        ) {
            Icon(
                imageVector = icon,
                contentDescription = label,
                tint = AppColors.primary
            )
        }
        Spacer(modifier = Modifier.height(4.dp))
        Text(
            text = label,
            style = AppTypography.caption,
            color = AppColors.secondaryText
        )
    }
}

@Composable
fun RelationshipStatRow(
    label: String,
    value: Int,
    color: androidx.compose.ui.graphics.Color
) {
    Column {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = label,
                style = AppTypography.body,
                color = AppColors.primaryText
            )
            Text(
                text = "$value%",
                style = AppTypography.bodyBold,
                color = color
            )
        }
        Spacer(modifier = Modifier.height(4.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(8.dp)
                .clip(RoundedCornerShape(4.dp))
                .background(color.copy(alpha = 0.2f))
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth(value / 100f)
                    .fillMaxHeight()
                    .clip(RoundedCornerShape(4.dp))
                    .background(color)
            )
        }
    }
}

@Composable
fun FlowRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    content: @Composable () -> Unit
) {
    // Simple flow row implementation using Row with wrapping
    Row(
        modifier = modifier,
        horizontalArrangement = horizontalArrangement
    ) {
        content()
    }
}