import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dmzj/app/app_color.dart';
import 'package:flutter_dmzj/app/app_style.dart';
import 'package:flutter_dmzj/app/utils.dart';
import 'package:flutter_dmzj/modules/comic/detail/comic_detail_controller.dart';
import 'package:flutter_dmzj/widgets/net_image.dart';
import 'package:flutter_dmzj/widgets/status/app_error_widget.dart';
import 'package:flutter_dmzj/widgets/status/app_loadding_widget.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:remixicon/remixicon.dart';

class ComicDetailPage extends StatelessWidget {
  final int id;
  final ComicDetailControler controller;
  ComicDetailPage(this.id, {super.key})
      : controller = Get.put(
          ComicDetailControler(id),
          tag: DateTime.now().millisecondsSinceEpoch.toString(),
        );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Obx(
          () => Text(
            controller.detail.value.title.isEmpty
                ? "漫画详情"
                : controller.detail.value.title,
          ),
        ),
        actions: [
          Obx(
            () => IconButton(
              onPressed: controller.favorited.value
                  ? controller.cancelFavorite
                  : controller.favorite,
              icon: Icon(controller.favorited.value
                  ? Remix.star_fill
                  : Remix.star_line),
            ),
          ),
          IconButton(
            onPressed: controller.share,
            icon: const Icon(Icons.share),
          ),
        ],
      ),
      body: Stack(
        children: [
          Obx(
            () => Offstage(
              offstage: controller.detail.value.id == 0,
              child: EasyRefresh(
                header: const MaterialHeader(),
                onRefresh: controller.refreshDetail,
                child: ListView(
                  padding: AppStyle.edgeInsetsA12,
                  children: [
                    _buildHeader(),
                    Obx(
                      () => Offstage(
                        offstage: controller.history.value == null,
                        child: Column(
                          children: [
                            ListTile(
                              contentPadding: EdgeInsets.zero,
                              title: Text(
                                "上次看到：${controller.history.value?.chapterName ?? ""}  第${controller.history.value?.page}页",
                                style: Get.textTheme.titleSmall,
                              ),
                              trailing: const Icon(Icons.chevron_right),
                              onTap: () {
                                controller.read();
                              },
                            ),
                            Divider(
                              color: Colors.grey.withOpacity(.2),
                              height: 1.0,
                            ),
                          ],
                        ),
                      ),
                    ),
                    _buildChapter(),
                  ],
                ),
              ),
            ),
          ),
          Obx(
            () => Offstage(
              offstage: !controller.pageLoadding.value,
              child: const AppLoaddingWidget(),
            ),
          ),
          Obx(
            () => Offstage(
              offstage: !controller.pageError.value,
              child: AppErrorWidget(
                errorMsg: controller.errorMsg.value,
                onRefresh: () => controller.loadDetail(),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        elevation: 2,
        onPressed: controller.read,
        child: const Icon(Icons.play_circle_outline_rounded),
      ),
      bottomNavigationBar: BottomAppBar(
        child: SizedBox(
          height: 48,
          child: Row(
            children: [
              Expanded(
                child: Obx(
                  () => TextButton.icon(
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 14),
                    ),
                    onPressed: controller.subscribe,
                    icon: Icon(
                      controller.subscribeStatus.value
                          ? Remix.heart_fill
                          : Remix.heart_line,
                      size: 20,
                    ),
                    label: Text(controller.subscribeStatus.value ? "取消" : "订阅"),
                  ),
                ),
              ),
              Expanded(
                child: TextButton.icon(
                  style: TextButton.styleFrom(
                    textStyle: const TextStyle(fontSize: 14),
                  ),
                  onPressed: controller.comment,
                  icon: const Icon(
                    Remix.chat_2_line,
                    size: 20,
                  ),
                  label: const Text("评论"),
                ),
              ),
              Expanded(
                child: TextButton.icon(
                  style: TextButton.styleFrom(
                    textStyle: const TextStyle(fontSize: 14),
                  ),
                  onPressed: controller.download,
                  icon: const Icon(
                    Remix.download_line,
                    size: 20,
                  ),
                  label: const Text("下载"),
                ),
              ),
              // Expanded(
              //   child: TextButton.icon(
              //     style: TextButton.styleFrom(
              //       textStyle: const TextStyle(fontSize: 14),
              //     ),
              //     onPressed: controller.related,
              //     icon: const Icon(
              //       Remix.links_line,
              //       size: 20,
              //     ),
              //     label: const Text("相关"),
              //   ),
              // ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //信息
        Stack(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                NetImage(
                  controller.detail.value.cover,
                  width: 120,
                  height: 160,
                  borderRadius: 4,
                ),
                AppStyle.hGap12,
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        controller.detail.value.title,
                        style: Get.textTheme.titleMedium,
                      ),
                      AppStyle.vGap8,
                      _buildInfoItems(
                        iconData: Remix.user_smile_line,
                        children: controller.detail.value.authors
                            .map(
                              (e) => GestureDetector(
                                onTap: () => controller.toAuthorDetail(e),
                                child: Text(
                                  e.tagName,
                                  style: TextStyle(
                                    fontSize: 14,
                                    height: 1.2,
                                    decoration: TextDecoration.underline,
                                    color: Get.isDarkMode
                                        ? Colors.white
                                        : AppColor.black333,
                                  ),
                                ),
                              ),
                            )
                            .toList(),
                      ),

                      // _buildInfo(
                      //   title: controller.detail.value.types
                      //       .map((e) => e.tagName)
                      //       .join("/"),
                      //   iconData: Remix.hashtag,
                      // ),
                      _buildInfoItems(
                        iconData: Remix.hashtag,
                        children: controller.detail.value.types
                            .map(
                              (e) => GestureDetector(
                                onTap: () => controller.toCategoryDetail(e),
                                child: Text(
                                  e.tagName,
                                  style: TextStyle(
                                    fontSize: 14,
                                    height: 1.2,
                                    decoration: TextDecoration.underline,
                                    color: Get.isDarkMode
                                        ? Colors.white
                                        : AppColor.black333,
                                  ),
                                ),
                              ),
                            )
                            .toList(),
                      ),
                      // _buildInfo(
                      //   title: "人气 ${controller.detail.value.hitNum}",
                      //   iconData: Remix.fire_line,
                      // ),
                      // _buildInfo(
                      //   title: "订阅 ${controller.detail.value.subscribeNum}",
                      //   iconData: Remix.heart_line,
                      // ),
                      _buildInfo(
                        title:
                            "${Utils.formatTimestampToDate(controller.detail.value.lastUpdatetime)} ${controller.detail.value.status.map((e) => e.tagName).join("/")}",
                        iconData: Icons.schedule,
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Obx(
              () => Positioned(
                right: 0,
                top: 0,
                child: Offstage(
                  offstage: !controller.detail.value.isVip,
                  child: Image.asset(
                    "assets/images/vip_comic.png",
                    width: 36,
                    height: 36,
                  ),
                ),
              ),
            ),
          ],
        ),
        AppStyle.vGap12,
        GestureDetector(
          onTap: () {
            controller.expandDescription.value =
                !controller.expandDescription.value;
          },
          child: Text(
            controller.detail.value.description,
            style: const TextStyle(
              color: Colors.grey,
              fontSize: 14,
            ),
            maxLines: controller.expandDescription.value ? 999 : 2,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        AppStyle.vGap12,
        Divider(
          color: Colors.grey.withOpacity(.2),
          height: 1.0,
        ),
      ],
    );
  }

  Widget _buildChapter() {
    return Column(
      children: controller.detail.value.volumes.isEmpty
          ? [
              const Padding(
                padding: AppStyle.edgeInsetsA24,
                child: Text(
                  "(～￣▽￣)～\n没有可阅读的章节\n漫画可能已下架或您没有阅读的权限",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.grey, fontSize: 14),
                ),
              )
            ]
          : controller.detail.value.volumes
              .map(
                (item) => Obx(
                  () => Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Padding(
                        padding: AppStyle.edgeInsetsV8,
                        child: Row(
                          children: [
                            Expanded(
                              child: Text(
                                "${item.title}(共${item.chapters.length}话)",
                                style: Get.textTheme.titleSmall,
                              ),
                            ),
                            item.sortType.value == 1
                                ? TextButton.icon(
                                    style: TextButton.styleFrom(
                                      textStyle: const TextStyle(fontSize: 14),
                                      tapTargetSize:
                                          MaterialTapTargetSize.shrinkWrap,
                                    ),
                                    onPressed: () {
                                      item.sortType.value = 0;
                                      item.sort();
                                    },
                                    icon: const Icon(
                                      Remix.sort_asc,
                                      size: 20,
                                    ),
                                    label: const Text("升序"),
                                  )
                                : TextButton.icon(
                                    style: TextButton.styleFrom(
                                      textStyle: const TextStyle(fontSize: 14),
                                      tapTargetSize:
                                          MaterialTapTargetSize.shrinkWrap,
                                    ),
                                    onPressed: () {
                                      item.sortType.value = 1;
                                      item.sort();
                                    },
                                    icon: const Icon(
                                      Remix.sort_desc,
                                      size: 20,
                                    ),
                                    label: const Text("倒序"),
                                  ),
                          ],
                        ),
                      ),
                      LayoutBuilder(builder: (ctx, constraints) {
                        var count = constraints.maxWidth ~/ 160;
                        if (count < 3) count = 3;

                        return Obx(
                          () => MasonryGridView.count(
                            shrinkWrap: true,
                            padding: EdgeInsets.zero,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount:
                                (item.showMoreButton && !item.showAll.value)
                                    ? 15
                                    : item.chapters.length,
                            itemBuilder: (_, i) {
                              if (item.showMoreButton &&
                                  !item.showAll.value &&
                                  i == 14) {
                                return Tooltip(
                                  message: "展开全部章节",
                                  child: OutlinedButton(
                                    style: OutlinedButton.styleFrom(
                                      foregroundColor: Colors.grey,
                                      textStyle: const TextStyle(fontSize: 14),
                                      tapTargetSize:
                                          MaterialTapTargetSize.shrinkWrap,
                                      minimumSize: const Size.fromHeight(40),
                                    ),
                                    onPressed: () {
                                      item.showAll.value = true;
                                    },
                                    child: const Icon(Icons.arrow_drop_down),
                                  ),
                                );
                              }
                              return Tooltip(
                                message: item.chapters[i].chapterTitle,
                                child: Obx(
                                  () => Stack(
                                    children: [
                                      OutlinedButton(
                                        style: OutlinedButton.styleFrom(
                                          foregroundColor: item
                                                      .chapters[i].chapterId ==
                                                  controller
                                                      .history.value?.chapterId
                                              ? Theme.of(ctx).colorScheme.primary
                                              : Get.textTheme.bodyMedium!.color,
                                          textStyle:
                                              const TextStyle(fontSize: 14),
                                          tapTargetSize:
                                              MaterialTapTargetSize.shrinkWrap,
                                          minimumSize:
                                              const Size.fromHeight(40),
                                        ),
                                        onPressed: () {
                                          controller.readChapter(
                                              item, item.chapters[i]);
                                        },
                                        child: Text(
                                          item.chapters[i].chapterTitle,
                                          textAlign: TextAlign.center,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                      Positioned(
                                        left: -2,
                                        top: 0,
                                        child: Offstage(
                                          offstage: !item.chapters[i].isVip,
                                          child: Image.asset(
                                            "assets/images/vip_chapter.png",
                                            height: 16,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            crossAxisCount: count,
                            crossAxisSpacing: 8,
                            mainAxisSpacing: 8,
                          ),
                        );
                      })
                    ],
                  ),
                ),
              )
              .toList(),
    );
  }

  Widget _buildInfo({
    required String title,
    IconData iconData = Icons.tag,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            iconData,
            color: Colors.grey,
            size: 16,
          ),
          AppStyle.hGap8,
          Expanded(
            child: Text(
              title,
              style: TextStyle(
                fontSize: 14,
                color: Get.isDarkMode ? Colors.white : AppColor.black333,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildInfoItems({
    required List<Widget> children,
    IconData iconData = Icons.tag,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            iconData,
            color: Colors.grey,
            size: 16,
          ),
          AppStyle.hGap8,
          Expanded(
            child: Wrap(
              spacing: 8,
              children: children,
            ),
          ),
        ],
      ),
    );
  }
}