package eu.gaudian.translator.view.vocabulary.widgets

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
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.drawWithCache
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import eu.gaudian.translator.R
import eu.gaudian.translator.ui.theme.ThemePreviews
import eu.gaudian.translator.view.composable.AppIcons
import eu.gaudian.translator.view.composable.SecondaryButton
import eu.gaudian.translator.viewmodel.DayStreak

@Composable
fun StreakWidget(
    streak: Int,
    lastSevenDays: List<DayStreak>,
    dueTodayCount: Int,
    wordsCompleted: Int,
    onStatisticsClicked: () -> Unit
) {
    Column(
        modifier = Modifier.padding(vertical = 8.dp, horizontal = 4.dp)
    ) {
        // Section 1: Top Stats (Streak & Due Today)
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically
        ) {
            StatItem(
                emoji = "🔥",
                value = streak.toString(),
                label = stringResource(R.string.text_day_streak),
                iconColor = MaterialTheme.colorScheme.onSurface
            )

            StatItem(
                icon = AppIcons.Vocabulary,
                value = dueTodayCount.toString(),
                label = stringResource(R.string.text_due_today),
                iconColor = MaterialTheme.colorScheme.secondary
            )
        }

        Spacer(modifier = Modifier.height(16.dp))

        // Section 2: Weekly Progress
        Text(
            text = stringResource(R.string.text_last_7_days),
            style = MaterialTheme.typography.titleSmall,
            modifier = Modifier.padding(start = 12.dp, bottom = 12.dp),
        )

        WeeklyProgress(lastSevenDays = lastSevenDays)

        Spacer(modifier = Modifier.height(24.dp))

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            Text(
                text = stringResource(R.string.text_total_learned_words) + ": $wordsCompleted",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurface
            )
        }

        Spacer(modifier = Modifier.height(8.dp))

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            SecondaryButton(
                onClick = onStatisticsClicked,
                icon = AppIcons.ArrowForward,
                text = stringResource(R.string.text_more_stats)
            )
        }
    }
}

@Composable
private fun StatItem(
    icon: ImageVector? = null,
    emoji: String? = null,
    value: String,
    label: String,
    iconColor: Color,
    gradientBrush: Brush? = null
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        when {
            emoji != null -> {
                Text(
                    text = emoji,
                    style = MaterialTheme.typography.titleLarge,
                    modifier = Modifier.size(28.dp)
                )
            }
            gradientBrush != null && icon != null -> {
                Icon(
                    imageVector = icon,
                    contentDescription = label,
                    modifier = Modifier
                        .size(28.dp)
                        .drawWithCache {
                            onDrawWithContent {
                                // Draw the gradient first
                                drawRect(
                                    brush = gradientBrush,
                                    size = size
                                )
                                // Then draw the icon shape using SrcIn to clip the gradient to the icon shape
                                drawContent()
                            }
                        },
                    tint = Color.White // Use white to preserve the gradient colors
                )
            }
            icon != null -> {
                Icon(
                    imageVector = icon,
                    contentDescription = label,
                    modifier = Modifier.size(28.dp),
                    tint = iconColor
                )
            }
        }

        Spacer(modifier = Modifier.height(8.dp))

        Text(
            text = value,
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold
        )

        Text(
            text = label,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurface
        )
    }
}

@Composable
private fun WeeklyProgress(lastSevenDays: List<DayStreak>) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        lastSevenDays.forEach { day ->
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val backgroundColor = if (day.targetMet) {
                    MaterialTheme.colorScheme.primary
                } else {
                    MaterialTheme.colorScheme.surfaceContainerHighest
                }

                val contentColor = if (day.targetMet) {
                    MaterialTheme.colorScheme.onPrimary
                } else {
                    MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                }

                Box(
                    modifier = Modifier
                        .size(38.dp)
                        .clip(CircleShape)
                        .background(backgroundColor),
                    contentAlignment = Alignment.Center
                ) {
                    if (day.targetMet) {
                        Icon(
                            imageVector = AppIcons.Check,
                            contentDescription = stringResource(R.string.cd_target_met),
                            tint = contentColor,
                            modifier = Modifier.size(24.dp)
                        )
                    }
                }

                Text(
                    text = day.day,
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurface
                )
            }
        }
    }
}

@Suppress("HardCodedStringLiteral")
@ThemePreviews
@Composable
private fun StreakWidgetPreview() {
    val lastSevenDays = listOf(
        DayStreak(day = "Mon", targetMet = true),
        DayStreak(day = "Tue", targetMet = false),
        DayStreak(day = "Wed", targetMet = true),
        DayStreak(day = "Thu", targetMet = true),
        DayStreak(day = "Fri", targetMet = false),
        DayStreak(day = "Sat", targetMet = true),
        DayStreak(day = "Sun", targetMet = true)
    )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        StreakWidget(
            streak = 5,
            lastSevenDays = lastSevenDays,
            dueTodayCount = 10,
            wordsCompleted = 120,
            onStatisticsClicked = {}
        )
    }
}