package com.jishisongfu.duobibi.ui.onboarding

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
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.material.icons.Icons
import androidx.compose.material.icons.filled.Balance
import androidx.compose.material.icons.filled.Lightbulb
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.NotificationsActive
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
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.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 androidx.compose.ui.unit.sp
import com.jishisongfu.duobibi.ui.PlatformAvatar
import com.jishisongfu.duobibi.ui.theme.DbbColors

private val ONBOARDING_PLATFORMS = listOf("淘宝", "京东", "拼多多", "抖音", "美团", "饿了么")

@Composable
fun OnboardingScreen(onFinish: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(DbbColors.Bg)
            .padding(horizontal = 22.dp, vertical = 18.dp),
    ) {
        // 顶部 brand: logo + 名称 + 副标题
        Row(verticalAlignment = Alignment.CenterVertically) {
            Box(
                modifier = Modifier
                    .size(56.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .background(DbbColors.Teal),
                contentAlignment = Alignment.Center,
            ) {
                Icon(
                    Icons.Filled.Balance,
                    contentDescription = null,
                    tint = Color.White,
                    modifier = Modifier.size(32.dp),
                )
            }
            Spacer(Modifier.width(12.dp))
            Column {
                Text("多比比", fontWeight = FontWeight.ExtraBold, fontSize = 24.sp, color = DbbColors.Ink)
                Text("一个商品,全网到手价同台比一比", color = DbbColors.InkSec, fontSize = 13.sp)
            }
        }
        Spacer(Modifier.height(14.dp))

        // 平台头像行
        Row(verticalAlignment = Alignment.CenterVertically) {
            ONBOARDING_PLATFORMS.forEach {
                PlatformAvatar(it, small = true)
                Spacer(Modifier.width(4.dp))
            }
            Spacer(Modifier.width(2.dp))
            Text("已覆盖 7 大购物 / 外卖平台", color = DbbColors.InkTer, fontSize = 11.sp)
        }
        Spacer(Modifier.height(20.dp))

        // 核心功能 section
        Text(
            "核心功能",
            color = DbbColors.InkSec,
            fontSize = 12.sp,
            fontWeight = FontWeight.Medium,
            modifier = Modifier.padding(start = 2.dp, bottom = 6.dp),
        )

        // 4 功能卡:底色统一 Teal 浅,图标统一 Teal 深 —— 屏幕只剩一个主色相,
        // 与新设计语言"3 色为主"对齐(原来 4 张卡 4 种背景色噪点太多)。
        FeatureCard(
            Icons.Filled.Balance, DbbColors.TealBg, DbbColors.TealDark,
            "比价擂台", "淘宝 / 京东 / 拼多多 / 抖音 到手价同台 PK,自动标出全网最低",
        )
        Spacer(Modifier.height(10.dp))
        FeatureCard(
            Icons.Filled.NotificationsActive, DbbColors.TealBg, DbbColors.TealDark,
            "降价雷达", "想买的设心理价、已买的盯价保期,降价第一时间提醒",
        )
        Spacer(Modifier.height(10.dp))
        FeatureCard(
            Icons.Filled.Lightbulb, DbbColors.TealBg, DbbColors.TealDark,
            "值不值得买", "报上价格,AI 给 0-100 评分,告诉你该买还是再等",
        )
        Spacer(Modifier.height(10.dp))
        FeatureCard(
            Icons.Filled.Lock, DbbColors.TealBg, DbbColors.TealDark,
            "数据在本机", "价格记录默认只存手机本地,比价时才临时联网识别",
        )

        Spacer(Modifier.weight(1f))

        // 开始使用 + 隐私小字
        Button(
            onClick = onFinish,
            modifier = Modifier.fillMaxWidth().height(48.dp),
            shape = RoundedCornerShape(14.dp),
            colors = ButtonDefaults.buttonColors(containerColor = DbbColors.Teal),
        ) {
            Text(
                "开始使用",
                fontWeight = FontWeight.SemiBold,
                fontSize = 16.sp,
                color = Color.White,
            )
        }
        Spacer(Modifier.height(8.dp))
        Text(
            "登录后可多端同步 · 隐私政策已更新",
            color = DbbColors.InkTer,
            fontSize = 11.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth(),
        )
    }
}

@Composable
private fun FeatureCard(
    icon: ImageVector,
    iconBg: Color,
    iconTint: Color,
    title: String,
    body: String,
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        colors = CardDefaults.cardColors(containerColor = DbbColors.Card),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
        shape = RoundedCornerShape(16.dp),
    ) {
        Row(
            modifier = Modifier.padding(14.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Box(
                modifier = Modifier
                    .size(46.dp)
                    .clip(RoundedCornerShape(13.dp))
                    .background(iconBg),
                contentAlignment = Alignment.Center,
            ) {
                Icon(icon, contentDescription = null, tint = iconTint, modifier = Modifier.size(26.dp))
            }
            Spacer(Modifier.width(13.dp))
            Column(modifier = Modifier.weight(1f)) {
                Text(title, color = DbbColors.Ink, fontWeight = FontWeight.Bold, fontSize = 15.sp)
                Spacer(Modifier.height(2.dp))
                Text(body, color = DbbColors.InkSec, fontSize = 12.sp)
            }
        }
    }
}
