package com.example.ui.screens

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
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.vector.ImageVector
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.data.model.AppLanguage
import com.example.ui.theme.*
import kotlinx.coroutines.launch

data class OnboardingPageData(
    val icon: ImageVector,
    val iconBgColor: Color,
    val titleEn: String,
    val titleBn: String,
    val descriptionEn: String,
    val descriptionBn: String,
    val highlightTagEn: String,
    val highlightTagBn: String
)

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun OnboardingScreen(
    lang: AppLanguage,
    onFinish: () -> Unit,
    modifier: Modifier = Modifier
) {
    val pages = listOf(
        OnboardingPageData(
            icon = Icons.Default.VerifiedUser,
            iconBgColor = BrandNavyPrimary,
            titleEn = "Verify Companies & Entities in BD",
            titleBn = "প্রতিষ্ঠান ও পেজ যাচাই করুন",
            descriptionEn = "Check RJSC registration, Trade License numbers, and official bKash/Nagad merchant legitimacy before sending money or signing contracts.",
            descriptionBn = "টাকা পাঠানো বা চুক্তির আগে যৌথ মূলধনী কোম্পানি (RJSC), ট্রেড লাইসেন্স ও বিকাশ মার্চেন্ট অ্যাকাউন্টের বৈধতা যাচাই করে নিন।",
            highlightTagEn = "Official RJSC & Trade License Records",
            highlightTagBn = "অফিসিয়াল রেজিস্টার্ড ডেটাবেজ"
        ),
        OnboardingPageData(
            icon = Icons.Default.ReportProblem,
            iconBgColor = StatusWarningRed,
            titleEn = "Report Fraud with Concrete Proof",
            titleBn = "প্রমাণসহ প্রতারণার অভিযোগ দিন",
            descriptionEn = "Easily upload bKash/Nagad SMS receipts, Messenger screenshots, forged visa papers, or fake job letters to protect fellow citizens.",
            descriptionBn = "ভুয়া অফার, ফেসবুক পেজ বা ভুয়া ভিসা এজেন্সির বিরুদ্ধে স্ক্রিনশট ও মানি রিসিট দিয়ে সহজে কমপ্লেইন ফাইল করুন।",
            highlightTagEn = "Protect Bangladeshi Consumers",
            highlightTagBn = "জনগণের সচেতনতায় যৌথ সুরক্ষা"
        ),
        OnboardingPageData(
            icon = Icons.Default.TrackChanges,
            iconBgColor = BrandBlueAccent,
            titleEn = "Live Case Tracking & Public Advisories",
            titleBn = "লাইভ ট্র্যাকিং ও পাবলিক সতর্কবার্তা",
            descriptionEn = "Track your submitted report through admin verification, cyber police legal escalations, and browse verified scam alerts nationwide.",
            descriptionBn = "আপনার কমপ্লেইনের বর্তমান অবস্থান ট্র্যাক করুন এবং সারা দেশের জরুরি সাইবার সতর্কতা সম্পর্কে তাৎক্ষণিক জানুন।",
            highlightTagEn = "Direct CID & DB Cyber Alignment",
            highlightTagBn = "আইনশৃঙ্খলা বাহিনীর সাথে সমন্বয়"
        )
    )

    val pagerState = rememberPagerState(pageCount = { pages.size })
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        containerColor = MaterialTheme.colorScheme.background,
        modifier = modifier.fillMaxSize()
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .statusBarsPadding()
                .navigationBarsPadding()
                .padding(24.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            // Top Skip Row
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End
            ) {
                TextButton(
                    onClick = onFinish,
                    modifier = Modifier.testTag("btn_onboarding_skip")
                ) {
                    Text(
                        text = if (lang == AppLanguage.BN) "স্কিপ (Skip)" else "Skip",
                        style = MaterialTheme.typography.labelLarge.copy(
                            fontWeight = FontWeight.Bold,
                            color = BrandNavyPrimary
                        )
                    )
                }
            }

            // Pager Body
            HorizontalPager(
                state = pagerState,
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
            ) { pageIndex ->
                val page = pages[pageIndex]
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 8.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    // Big Rounded Hero Icon Card
                    Box(
                        modifier = Modifier
                            .size(130.dp)
                            .clip(RoundedCornerShape(32.dp))
                            .background(page.iconBgColor.copy(alpha = 0.12f))
                            .border(2.dp, page.iconBgColor.copy(alpha = 0.3f), RoundedCornerShape(32.dp)),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            imageVector = page.icon,
                            contentDescription = null,
                            tint = page.iconBgColor,
                            modifier = Modifier.size(68.dp)
                        )
                    }

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

                    Surface(
                        color = page.iconBgColor.copy(alpha = 0.1f),
                        shape = RoundedCornerShape(12.dp)
                    ) {
                        Text(
                            text = if (lang == AppLanguage.BN) page.highlightTagBn else page.highlightTagEn,
                            style = MaterialTheme.typography.labelMedium.copy(
                                color = page.iconBgColor,
                                fontWeight = FontWeight.Bold
                            ),
                            modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp)
                        )
                    }

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

                    Text(
                        text = if (lang == AppLanguage.BN) page.titleBn else page.titleEn,
                        style = MaterialTheme.typography.headlineSmall.copy(
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colorScheme.onBackground
                        ),
                        textAlign = TextAlign.Center
                    )

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

                    Text(
                        text = if (lang == AppLanguage.BN) page.descriptionBn else page.descriptionEn,
                        style = MaterialTheme.typography.bodyMedium.copy(
                            color = LightTextSecondary,
                            lineHeight = 22.sp
                        ),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(horizontal = 12.dp)
                    )
                }
            }

            // Bottom Navigation Indicators and Buttons
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                // Dot Indicators
                Row(
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(bottom = 24.dp)
                ) {
                    repeat(pages.size) { index ->
                        val isSelected = pagerState.currentPage == index
                        Box(
                            modifier = Modifier
                                .padding(horizontal = 4.dp)
                                .height(8.dp)
                                .width(if (isSelected) 24.dp else 8.dp)
                                .clip(CircleShape)
                                .background(if (isSelected) BrandNavyPrimary else Color(0xFFCBD5E1))
                        )
                    }
                }

                // Next or Finish Button
                Button(
                    onClick = {
                        if (pagerState.currentPage < pages.size - 1) {
                            coroutineScope.launch {
                                pagerState.animateScrollToPage(pagerState.currentPage + 1)
                            }
                        } else {
                            onFinish()
                        }
                    },
                    shape = RoundedCornerShape(12.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = BrandNavyPrimary,
                        contentColor = Color.White
                    ),
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(52.dp)
                        .testTag("btn_onboarding_next")
                ) {
                    Text(
                        text = if (pagerState.currentPage == pages.size - 1) {
                            if (lang == AppLanguage.BN) "অ্যাপে প্রবেশ করুন" else "Enter Satark BD"
                        } else {
                            if (lang == AppLanguage.BN) "পরবর্তী (Next)" else "Next"
                        },
                        style = MaterialTheme.typography.titleMedium.copy(
                            fontWeight = FontWeight.Bold
                        )
                    )
                }
            }
        }
    }
}