package com.tt.honeyDue.ui.screens.onboarding

import androidx.compose.animation.core.*
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.automirrored.filled.ArrowForward
import androidx.compose.material3.*
import androidx.compose.runtime.*
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.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.tt.honeyDue.ui.theme.*
import honeydue.composeapp.generated.resources.*
import kotlinx.coroutines.delay
import org.jetbrains.compose.resources.stringResource

data class FeatureItem(
    val icon: ImageVector,
    val title: String,
    val description: String,
    val gradientColors: List<Color>
)

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun OnboardingValuePropsContent(
    onContinue: () -> Unit
) {
    val features = listOf(
        FeatureItem(
            icon = Icons.Default.Task,
            title = stringResource(Res.string.onboarding_feature_tasks_title),
            description = stringResource(Res.string.onboarding_feature_tasks_desc),
            gradientColors = listOf(
                MaterialTheme.colorScheme.primary,
                MaterialTheme.colorScheme.primary.copy(alpha = 0.7f)
            )
        ),
        FeatureItem(
            icon = Icons.Default.Description,
            title = stringResource(Res.string.onboarding_feature_docs_title),
            description = stringResource(Res.string.onboarding_feature_docs_desc),
            gradientColors = listOf(
                MaterialTheme.colorScheme.secondary,
                MaterialTheme.colorScheme.secondary.copy(alpha = 0.7f)
            )
        ),
        FeatureItem(
            icon = Icons.Default.Engineering,
            title = stringResource(Res.string.onboarding_feature_contractors_title),
            description = stringResource(Res.string.onboarding_feature_contractors_desc),
            gradientColors = listOf(
                MaterialTheme.colorScheme.tertiary,
                MaterialTheme.colorScheme.tertiary.copy(alpha = 0.7f)
            )
        ),
        FeatureItem(
            icon = Icons.Default.FamilyRestroom,
            title = stringResource(Res.string.onboarding_feature_family_title),
            description = stringResource(Res.string.onboarding_feature_family_desc),
            gradientColors = listOf(
                MaterialTheme.colorScheme.primary,
                MaterialTheme.colorScheme.tertiary
            )
        ),
        FeatureItem(
            icon = Icons.Default.Notifications,
            title = stringResource(Res.string.onboarding_feature_notifications_title),
            description = stringResource(Res.string.onboarding_feature_notifications_desc),
            gradientColors = listOf(
                Color(0xFFFF9500),
                Color(0xFFFF6961)
            )
        ),
        FeatureItem(
            icon = Icons.Default.Widgets,
            title = stringResource(Res.string.onboarding_feature_widgets_title),
            description = stringResource(Res.string.onboarding_feature_widgets_desc),
            gradientColors = listOf(
                Color(0xFF34C759),
                Color(0xFF30D158)
            )
        )
    )

    val pagerState = rememberPagerState(pageCount = { features.size })
    var autoAdvance by remember { mutableStateOf(true) }

    // Auto-advance pages
    LaunchedEffect(autoAdvance, pagerState.currentPage) {
        if (autoAdvance) {
            delay(3000)
            if (pagerState.currentPage < features.size - 1) {
                pagerState.animateScrollToPage(pagerState.currentPage + 1)
            } else {
                autoAdvance = false
            }
        }
    }

    WarmGradientBackground(
        modifier = Modifier.fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = OrganicSpacing.xl),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(modifier = Modifier.weight(0.5f))

            // Feature carousel
            HorizontalPager(
                state = pagerState,
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(2f)
            ) { page ->
                FeatureCard(feature = features[page])
            }

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

            // Page indicators
            Row(
                horizontalArrangement = Arrangement.spacedBy(OrganicSpacing.sm),
                verticalAlignment = Alignment.CenterVertically
            ) {
                repeat(features.size) { index ->
                    Box(
                        modifier = Modifier
                            .size(if (index == pagerState.currentPage) 10.dp else 8.dp)
                            .clip(CircleShape)
                            .background(
                                if (index == pagerState.currentPage) {
                                    MaterialTheme.colorScheme.primary
                                } else {
                                    MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.3f)
                                }
                            )
                    )
                }
            }

            Spacer(modifier = Modifier.weight(1f))

            // Continue button
            OrganicPrimaryButton(
                text = stringResource(Res.string.onboarding_continue),
                onClick = onContinue,
                modifier = Modifier.fillMaxWidth(),
                icon = Icons.AutoMirrored.Filled.ArrowForward
            )

            Spacer(modifier = Modifier.height(OrganicSpacing.xl * 2))
        }
    }
}

@Composable
private fun FeatureCard(feature: FeatureItem) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = OrganicSpacing.md),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // Icon with gradient background using OrganicIconContainer
        OrganicIconContainer(
            icon = feature.icon,
            size = 120.dp,
            iconSize = 60.dp,
            gradientColors = feature.gradientColors,
            contentDescription = null // decorative
        )

        Spacer(modifier = Modifier.height(OrganicSpacing.xl * 2))

        // Title
        Text(
            text = feature.title,
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.onBackground,
            textAlign = TextAlign.Center
        )

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

        // Description
        Text(
            text = feature.description,
            style = MaterialTheme.typography.bodyLarge,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            textAlign = TextAlign.Center,
            lineHeight = MaterialTheme.typography.bodyLarge.lineHeight * 1.3
        )
    }
}
