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

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Icon
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import eu.gaudian.translator.model.VocabularyStage
import eu.gaudian.translator.ui.theme.semanticColors
import eu.gaudian.translator.view.composable.AppIcons

@Composable
fun StageProgressBar(stage: VocabularyStage, itemCount: Int, totalItems: Int, onClick: (VocabularyStage) -> Unit) {

    val progress = if (totalItems > 0) itemCount.toFloat() / totalItems else 0f
    val animatedProgress by animateFloatAsState(
        targetValue = progress,
        animationSpec = tween(durationMillis = 1000),
        label = "progressAnimation",
    )
    val context = LocalContext.current

    val color = when (stage) {
        VocabularyStage.NEW -> MaterialTheme.semanticColors.stageGradient1
        VocabularyStage.STAGE_1 -> MaterialTheme.semanticColors.stageGradient2
        VocabularyStage.STAGE_2 -> MaterialTheme.semanticColors.stageGradient3
        VocabularyStage.STAGE_3 -> MaterialTheme.semanticColors.stageGradient4
        VocabularyStage.STAGE_4 -> MaterialTheme.semanticColors.stageGradient5
        VocabularyStage.STAGE_5 -> MaterialTheme.semanticColors.stageGradient6
        VocabularyStage.LEARNED -> MaterialTheme.semanticColors.stageGradient6
    }

    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable { onClick(stage) },
            horizontalArrangement = Arrangement.SpaceBetween

        ) {
            Text(
                text = stage.toString(context),
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurface
            )
            Text(
                text = "$itemCount",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
        Spacer(modifier = Modifier.height(4.dp))
        LinearProgressIndicator(
        progress = { animatedProgress },
        modifier = Modifier
            .fillMaxWidth()
            .height(8.dp)
            .clip(CircleShape),
        color = color,
        trackColor = MaterialTheme.colorScheme.surfaceContainerHighest,
        strokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
        )
    }
}

@Preview
@Composable
fun StageProgressBarPreview() {
    StageProgressBar(
        stage = VocabularyStage.NEW, itemCount = 10, totalItems = 100,
        onClick = { }
    )
}


@Composable
fun DetailedStageProgressBar(
    stage: VocabularyStage,
    itemCount: Int,
    totalItems: Int,
    modifier: Modifier = Modifier,
    onStageTapped: (VocabularyStage) -> Unit
) {
    val context = LocalContext.current
    val progress = if (totalItems > 0) itemCount.toFloat() / totalItems else 0f
    val animatedProgress by animateFloatAsState(
        targetValue = progress,
        animationSpec = tween(durationMillis = 1000),
        label = "detailedProgressAnimation"
    )

    val stageColor = when (stage) {
        VocabularyStage.NEW -> MaterialTheme.semanticColors.stageGradient1
        VocabularyStage.STAGE_1 -> MaterialTheme.semanticColors.stageGradient2
        VocabularyStage.STAGE_2 -> MaterialTheme.semanticColors.stageGradient3
        VocabularyStage.STAGE_3 -> MaterialTheme.semanticColors.stageGradient4
        VocabularyStage.STAGE_4 -> MaterialTheme.semanticColors.stageGradient5
        VocabularyStage.STAGE_5 -> MaterialTheme.semanticColors.stageGradient6
        VocabularyStage.LEARNED -> MaterialTheme.semanticColors.stageGradient6
    }

    val stageIcon = when (stage) {
        VocabularyStage.NEW -> AppIcons.StageNew
        VocabularyStage.STAGE_1 -> AppIcons.Stage1
        VocabularyStage.STAGE_2 -> AppIcons.Stage2
        VocabularyStage.STAGE_3 -> AppIcons.Stage3
        VocabularyStage.STAGE_4 -> AppIcons.Stage4
        VocabularyStage.STAGE_5 -> AppIcons.Stage5
        VocabularyStage.LEARNED -> AppIcons.StageLearned
    }

    Column(
        modifier = modifier
            .clip(MaterialTheme.shapes.medium)
            .clickable { onStageTapped(stage) }
            .padding(vertical = 8.dp, horizontal = 4.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Icon(
                imageVector = stageIcon,
                contentDescription = stage.toString(context),
                tint = stageColor
            )
            Text(
                text = stage.toString(context),
                style = MaterialTheme.typography.bodyLarge,
                fontWeight = FontWeight.SemiBold,
                modifier = Modifier.weight(1f)
            )
            Text(
                text = "$itemCount / $totalItems",
                style = MaterialTheme.typography.labelLarge,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }

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

        LinearProgressIndicator(
            progress = { animatedProgress },
            modifier = Modifier
                .fillMaxWidth()
                .height(8.dp)
                .clip(CircleShape),
            color = stageColor,
            trackColor = MaterialTheme.colorScheme.surfaceContainerHighest,
        )
    }
}