import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:io' show Platform;
import '../controllers/kr_splash_controller.dart';
import 'package:kaer_with_panels/app/widgets/kr_local_image.dart';
import 'package:kaer_with_panels/app/widgets/kr_app_text_style.dart';
import '../../../widgets/kr_simple_loading.dart';
import 'package:kaer_with_panels/app/localization/app_translations.dart';

class KRSplashView extends GetView<KRSplashController> {
  const KRSplashView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final bool isMobile = Platform.isIOS || Platform.isAndroid;

    return Scaffold(
      backgroundColor: theme.scaffoldBackgroundColor,
      body: Container(
        decoration: isMobile ? BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color.fromRGBO(23, 151, 255, 0.15), // 渐变开始颜色
              Color.fromRGBO(23, 151, 255, 0.05), // 中间过渡颜色
            ],
            stops: [0.0, 0.28], // 调整渐变结束位置
          ),
        ) : null,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 图片区域
              KrLocalImage(
                imageName: "splash_illustration",
                width: 218.w,
                height: 194.w,
                fit: BoxFit.contain,
              ),
              SizedBox(height: 48.h),
              // 标题
              Text(
                AppTranslations.kr_splash.appName,
                style: KrAppTextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  color: theme.textTheme.bodyMedium?.color,
                ),
              ),
              SizedBox(height: 16.h),
              // 副标题
              Text(
                AppTranslations.kr_splash.slogan,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.sp,
                  color: theme.textTheme.bodySmall?.color,
                  height: 1.5,
                ),
              ),
              SizedBox(height: 24.h),
              // 加载指示器或错误信息
              Obx(() {
                if (controller.kr_hasError.value) {
                  return Column(
                    children: [
                      Text(
                        controller.kr_errorMessage.value,
                        style: KrAppTextStyle(
                          fontSize: 14,
                          color: theme.textTheme.bodySmall?.color,
                        ),
                      ),
                      SizedBox(height: 16.h),
                      ElevatedButton(
                        onPressed: controller.kr_retry,
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.blue,
                          foregroundColor: Colors.white,
                          padding: EdgeInsets.symmetric(
                            horizontal: 32.w,
                            vertical: 12.h,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(24.r),
                          ),
                        ),
                        child: Text(AppTranslations.kr_splash.kr_retry),
                      ),
                    ],
                  );
                }
                
                if (controller.kr_isLoading.value) {
                  return Column(
                    children: [
                      KRSimpleLoading(
                        color: Colors.blue,
                        size: 24.0,
                      ),
                      SizedBox(height: 16.h),
                      Text(
                        AppTranslations.kr_splash.initializing,
                        style: KrAppTextStyle(
                          fontSize: 14,
                          color: theme.textTheme.bodySmall?.color,
                        ),
                      ),
                    ],
                  );
                }
                
                return const SizedBox.shrink();
              }),
            ],
          ),
        ),
      ),
    );
  }
}