import 'package:flutter/material.dart';
import 'package:chatwoot_flutter_sdk/chatwoot_sdk.dart';
import '../controllers/kr_chatwoot_controller.dart';
import 'package:get/get.dart';

class KRChatwootView extends StatefulWidget {
  const KRChatwootView({super.key});

  @override
  State<KRChatwootView> createState() => _KRChatwootViewState();
}

class _KRChatwootViewState extends State<KRChatwootView> {
  // 实例化控制器
  final KRChatwootController _controller = KRChatwootController();

  // 控制加载遮罩状态
  bool _isPageLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 设置背景色为白色，确保顶部 20px 区域不漏出底色
      backgroundColor: Colors.white,
      body: Padding(
        // 在这里设置顶部 20px 的间距
        padding: const EdgeInsets.only(top: 20.0),
        child: Stack(
          children: [
            ChatwootWidget(
              baseUrl: _controller.baseUrl,
              websiteToken: _controller.inboxIdentifier,
              user: _controller.chatUser,
              locale: "zh_CN",
              onAttachFile: _controller.onFilePicker,
              onLoadStarted: () {
                debugPrint("KRChatwoot: 开始加载 SDK");
              },
              closeWidget: () {
                print('返回');
                Get.back();
              },
              onLoadCompleted: () {
                debugPrint("KRChatwoot: SDK 加载完毕");
                if (mounted) {
                  setState(() => _isPageLoading = false);
                }
              },
            ),

            // 加载中的占位图
            if (_isPageLoading)
              Container(
                color: Colors.white,
                child: const Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      CircularProgressIndicator(strokeWidth: 2),
                      const SizedBox(height: 16),
                      Text("正在连接客服...", style: TextStyle(color: Colors.grey)),
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}