import 'package:app/global/theme/base/app_theme_ext.dart';
import 'package:app/pages/student/home/viewmodel/s_home_vm.dart';
import 'package:app/router/route_paths.dart';
import 'package:app/utils/permission.dart';
import 'package:app/utils/time.dart';
import 'package:app/widgets/base/button/index.dart';
import 'package:app/widgets/base/empty/index.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:go_router/go_router.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:provider/provider.dart';
import 'package:remixicon/remixicon.dart';
import 'package:skeletonizer/skeletonizer.dart';

import 'banner_info.dart';

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

  @override
  State<STodayCard> createState() => _STodayCardState();
}

class _STodayCardState extends State<STodayCard> {
  ///前往会议室
  void _goToRoom() {
    checkPermission(
      permissions: [Permission.microphone, Permission.camera],
      onGranted: () {
        final vm = context.read<SHomeVm>();
        context.push(RoutePaths.sRoom,extra: vm.roomInfo);
      },
      onDenied: () {
        EasyLoading.showError("请开启权限");
      },
      onPermanentlyDenied: () {
        EasyLoading.showError("请手动开启麦克风和摄像头权限");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final vm = context.watch<SHomeVm>();
    if (!vm.loading && vm.roomInfo == null) {
      return Empty(text: "没有自习室");
    }
    return Skeletonizer(
      enabled: vm.loading,
      child: Container(
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Skeleton.unite(
              child: BannerInfo(),
            ),
            Container(
              width: double.infinity,
              padding: EdgeInsets.symmetric(horizontal: context.pagePadding, vertical: 20),
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Column(
                spacing: 30,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: EdgeInsets.all(context.pagePadding),
                    decoration: BoxDecoration(
                      color: Color(0xffeef2ff),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Row(
                      spacing: 15,
                      children: [
                        Container(
                          width: 60,
                          height: 60,
                          clipBehavior: Clip.hardEdge,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: Colors.white, width: 3),
                          ),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(50),
                            child: Skeleton.replace(
                              replacement: Bone.circle(),
                              child: CachedNetworkImage(
                                imageUrl: vm.roomInfo?.teacherAvatar ?? "",
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(vm.roomInfo?.teacherName ?? ""),
                            Text(
                              vm.roomInfo?.teacherSchoolName ?? "",
                              style: Theme.of(context).textTheme.labelLarge,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Row(
                    spacing: 20,
                    children: [
                      InfoItem(
                        label: "自习时间",
                        value: "${vm.roomInfo?.startTime}-${vm.roomInfo?.endTime}",
                        icon: RemixIcons.time_line,
                        color: Theme.of(context).primaryColor,
                      ),
                      InfoItem(
                        label: "自习时长",
                        value: "${formatSeconds(vm.roomMinutes * 60, 'hh小时mm分钟')} ",
                        icon: RemixIcons.timer_line,
                        color: context.success,
                      ),
                    ],
                  ),
                  Skeleton.unite(
                    child: SizedBox(
                      height: 50,
                      child: Button(
                        text: "进入自习室",
                        onPressed: _goToRoom,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

///信息item
class InfoItem extends StatelessWidget {
  final String label;
  final String value;
  final IconData icon;
  final Color color;

  const InfoItem({
    super.key,
    required this.label,
    required this.value,
    required this.icon,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        padding: EdgeInsets.all(context.pagePadding),
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surfaceContainer,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          spacing: 10,
          children: [
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: color.withValues(alpha: 0.1),
                shape: BoxShape.circle,
              ),
              child: Icon(icon, color: color),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(label, style: Theme.of(context).textTheme.labelMedium),
                Text(value, style: TextStyle(fontSize: 16)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
