import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:vbvs_app/common/color/appColors.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/controller/user_info_controller.dart';

class HelpArticle extends StatelessWidget {
  Map article;
  HelpArticle({super.key, required this.article});

  // get articleController => Get.find<ArticleController>();
  get userInfoController => Get.find<UserInfoController>();

  var isLike = 0.obs;

  // @override
  // Widget build(BuildContext context) {
  //   String top_imgOrVideo = "";
  //   if (article['imgOrVideo'] == 0) {
  //     top_imgOrVideo =
  //         '''<img class="video" src="${getStorageResourceUrl(article['coverUrl'])}" />''';
  //   } else {
  //     top_imgOrVideo =
  //         '''<video controls class="video" src="${getStorageResourceUrl(article['videoUrl'])}" ></video>''';
  //   }
  //   String newText = article['text'];

  //   RegExp("<img\\s*src=\"([^\"]*)\"")
  //       .allMatches(newText)
  //       .toList()
  //       .map((d) => d.group(1))
  //       .toList()
  //       .forEach((d) {
  //     newText = newText.replaceAll("$d", getStorageResourceUrl("$d"));
  //   });

  //   String html = '''
  //     <html>
  //     <meta name="viewport" charset="UTF-8"
  //         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

  //     <head>
  //         <title>Test Page</title>
  //     </head>
  //     <style>

  //         body {
  //             width: 98%;
  //             margin: 0 auto;
  //             overflow-x: hidden;
  //         }

  //         .video {
  //             width: 100%;
  //             height: 270px;
  //             background-color: #9EA4B7;
  //             border-radius: 6px;
  //         }
  //     </style>

  //     <body>
  //         <div style="padding: 15px;width: calc(100% - 36px);">
  //           ${top_imgOrVideo}
  //             <div style="height: 2px;width: 100%;background-color: #D6D6D6;margin: 15px 0 15px 0;"></div>
  //             <div style="line-height: 22px;font-size: 15px;">${article['title']}</div>
  //             <div style="display: flex;align-items: center;font-size: 13;margin-bottom: 24px;margin-top: 10px;">
  //                 <div style="color: #182B7C;">${article['author']}</div>
  //                 <div style="margin-left: 13px; color: #D3D3D3;">${time_08_Formatter(article['created_at'])}</div>
  //             </div>
  //             ${newText}
  //         </div>
  //     </body>

  //     </html>
  //   ''';

  //   print("$html");
  //   // articleController.readAdd(article['id']);
  //   String? uid = userInfoController.model.user?.uid;
  //   print("${userInfoController.model.user}");
  //   // uid = "sss";
  //   // if (uid != null) {
  //   //   articleController.findIsLike(uid, article['id']).then((d) {
  //   //     isLike.value = d;
  //   //   });
  //   // }

  //   return LayoutBuilder(
  //     builder: (context, boxConstraints) => GestureDetector(
  //       onTap: () => FocusScope.of(context).unfocus(),
  //       child: Scaffold(
  //         appBar: AppBar(
  //           backgroundColor: AppColors.bg_color,
  //           automaticallyImplyLeading: false,
  //           iconTheme: IconThemeData(color: Colors.white),
  //           titleSpacing: 0,
  //           leading: returnIconButtom,
  //         ),
  //         body: SafeArea(
  //           top: true,
  //           child: Container(
  //             width: MediaQuery.sizeOf(context).width,
  //             height: MediaQuery.sizeOf(context).height,
  //             decoration: BoxDecoration(
  //               color: Colors.white,
  //               // color: AppColors.bg_color,
  //               // image: DecorationImage(
  //               //   image: AssetImage("assets/images/background.png$test"),
  //               //   fit: BoxFit.cover,
  //               // ),
  //             ),
  //             child: Column(
  //               children: [
  //                 Expanded(
  //                   child: Container(
  //                     // child: WebViewWidget(
  //                     //   controller: WebViewController()
  //                     //     ..setJavaScriptMode(JavaScriptMode.unrestricted)
  //                     //     ..loadHtmlString(html),
  //                     // ),
  //                     child: InAppWebView(
  //                       initialData:
  //                           InAppWebViewInitialData(data: html, encoding: ""),
  //                     ),
  //                   ),
  //                 ),
  //               ],
  //             ),
  //           ),
  //         ),
  //       ),
  //     ),
  //   );
  // }

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF042C46),
      appBar: AppBar(
        backgroundColor: const Color(0xFF042C46),
        title: Text("问题与帮助", style: TextStyle(color: Colors.white)),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        elevation: 0,
      ),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            alignment: Alignment.centerLeft,
            child: Text(
              article['title'],
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
          ),
          Expanded(
            child: InAppWebView(
              initialData: InAppWebViewInitialData(
                data: wrapHtml(article['content']),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 包装成完整 HTML 页面，添加适配样式
  String wrapHtml(String htmlContent) {
    return """
    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body {
          color: #FFFFFF;
          background-color: #042C46;
          font-family: sans-serif;
          padding: 16px;
          font-size: 16px;
        }
        p, li {
          line-height: 1.6;
        }
        ol {
          padding-left: 20px;
        }
        strong {
          color: #6BFDAC;
        }
      </style>
    </head>
    <body>
      $htmlContent
    </body>
    </html>
    """;
  }
}
