import android.view.animation.OvershootInterpolator
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
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.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import com.example.lectionsupabase.R
import kotlinx.coroutines.delay

@Composable
fun slide2(navController: NavHostController) {
    val scale = remember { androidx.compose.animation.core.Animatable(0f) }
    val montserratSemiBold = FontFamily(Font(R.font.mon_semibold))
    val montserratExtraBold = FontFamily(Font(R.font.mon_extrabold))
    val montserratRegular = FontFamily(Font(R.font.mon_regular))
    val montserratMedium = FontFamily(Font(R.font.mon_medium))
    val montserratLigth = FontFamily(Font(R.font.mon_light))

    LaunchedEffect(key1 = true) {
        // Здесь можно добавить анимацию или другие действия, если нужно
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top // Изменено на Top для уменьшения отступов
    ) {
        Spacer(modifier = Modifier.height(10.dp))
        // Текст "Пропустить" в левом верхнем углу
        Text(
            text = "Пропустить",
            fontFamily = montserratSemiBold,
            fontSize = 20.sp,
            color = Color(0xFF6FC5F2),
            modifier = Modifier
                .align(Alignment.Start)
                .padding(top = 25.dp) // Уменьшен отступ сверху
        )
        Spacer(modifier = Modifier.height(60.dp))
        // Заголовок "Интересные места"
        Text(
            text = "Обновление ленты",
            fontFamily = montserratExtraBold,
            fontSize = 25.sp,
            color = Color(0xFF4FB7F0),
            modifier = Modifier.align(Alignment.CenterHorizontally)
                .padding(vertical = 15.dp) // Уменьшен вертикальный отступ
        )

        // Подзаголовок "Узнавайте о интересных местах в вашем городе"
        Text(
            text = "Проверяйте ленту и следите за \n обновлением подборки",
            fontFamily = montserratRegular,
            fontSize = 14.sp,
            color = Color(0xFFA2A2A2),
            modifier = Modifier.align(Alignment.CenterHorizontally)
                .padding(vertical = 10.dp),
            textAlign = TextAlign.Center
        )
        Spacer(modifier = Modifier.height(5.dp))
        // Картинка pic1 по центру
        Image(
            bitmap = ImageBitmap.imageResource(R.drawable.pic2),
            contentDescription = "первый скрин",
            modifier = Modifier
                .size(width = 400.dp, height = 400.dp)
                .align(Alignment.CenterHorizontally)
                .padding(vertical = 15.dp) // Уменьшен вертикальный отступ
        )
        Spacer(modifier = Modifier.height(3.dp))
        // Картинка group1 ниже
        Image(
            bitmap = ImageBitmap.imageResource(R.drawable.group2),
            contentDescription = "точка",
            modifier = Modifier
                .size(70.dp)
                .align(Alignment.CenterHorizontally)
                .padding(vertical = 5.dp) // Уменьшен вертикальный отступ
        )
        Spacer(modifier = Modifier.height(30.dp))
        // Кнопка "Далее" внизу
        Button(
            onClick = { navController.navigate("slide3") },
            modifier = Modifier
                .width(300.dp)
                .height(44.dp),
            shape = RoundedCornerShape(5.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color(0xFFA3D6F1),
                contentColor = Color.White
            )
        ) {
            Text("Далее", fontSize = 17.sp, fontFamily = montserratSemiBold)
        }
    }
}