import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';

import '../../../core/theme/app_colors.dart';
import '../controllers/meeting_edit_controller.dart';

class MeetingEditView extends GetView<MeetingEditController> {
  const MeetingEditView({super.key});

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Colors.grey[50],
      appBar: _buildAppBar(isDarkMode),
      body: Obx(() => !controller.isLoading.value
          ? _buildBody(isDarkMode)
          : const SizedBox()),
    );
  }

  // 构建应用栏
  PreferredSizeWidget _buildAppBar(bool isDarkMode) {
    return AppBar(
      backgroundColor: isDarkMode ? Colors.black : Colors.white,
      elevation: 0.5,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: isDarkMode ? Colors.white : Colors.black,
          size: 20.sp,
        ),
        onPressed: () => Get.back(),
      ),
      actions: [
        GestureDetector(
          onTap: () {},
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 12.w,
              vertical: 6.w,
            ),
            child: Text(
              '保存',
              style: TextStyle(
                color: isDarkMode ? AppColors.primary : Colors.blue,
                fontSize: 18.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ],
    );
  }

  // 构建主体内容
  Widget _buildBody(bool isDarkMode) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 10.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 48.w,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: isDarkMode ? Colors.white.withOpacity(0.05) : Colors.white,
              borderRadius: BorderRadius.circular(12.w),
              boxShadow: [
                BoxShadow(
                  color: isDarkMode
                      ? Colors.black.withOpacity(0.2)
                      : Colors.black.withOpacity(0.05),
                  blurRadius: 10,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: TextField(
              controller: controller.titleController,
              style: TextStyle(
                color: isDarkMode ? Colors.white : Colors.black87,
                fontSize: 16.sp,
              ),
              decoration: InputDecoration(
                hintText: '最多50个字符',
                hintStyle: TextStyle(
                  color: isDarkMode ? Colors.white70 : Colors.black54,
                  fontSize: 16.sp,
                ),
                fillColor: Colors.transparent,
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(
                  horizontal: 10.w,
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.w),
            child: Text(
              DateUtil.formatDateMs(
                controller.meetingData.value.creationtime,
                format: DateFormats.y_mo_d_h_m,
              ),
              style: TextStyle(
                color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                fontSize: 14.sp,
              ),
            ),
          ),
          _audioWave(isDarkMode),
          _recordContent(isDarkMode),
        ],
      ),
    );
  }

  // 音波
  Widget _audioWave(bool isDarkMode) {
    return Container(
      padding: EdgeInsets.only(bottom: 10.w),
      margin: EdgeInsets.symmetric(vertical: 5.w),
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.white.withOpacity(0.05) : Colors.white,
        borderRadius: BorderRadius.circular(12.w),
        boxShadow: [
          BoxShadow(
            color: isDarkMode
                ? Colors.black.withOpacity(0.2)
                : Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          SizedBox(
            height: 70.w,
            child: Row(
              children: [
                Expanded(
                  child: Lottie.asset(
                    'assets/lottie/audio_wave.json',
                    controller: controller.lottieController,
                    fit: BoxFit.fill,
                    onLoaded: (composition) {
                      controller.lottieController.duration =
                          composition.duration;
                    },
                  ),
                ),
                Expanded(
                  child: Lottie.asset(
                    'assets/lottie/audio_wave.json',
                    controller: controller.lottieController,
                    fit: BoxFit.fill,
                  ),
                ),
                Expanded(
                  child: Lottie.asset(
                    'assets/lottie/audio_wave.json',
                    controller: controller.lottieController,
                    fit: BoxFit.fill,
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                '00:00:00',
                style: TextStyle(
                  color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                  fontSize: 12.sp,
                ),
              ),
              GestureDetector(
                onTap: controller.start,
                child: Container(
                  width: 30.w,
                  height: 30.w,
                  decoration: BoxDecoration(
                    color: isDarkMode ? AppColors.primary : Colors.blue,
                    borderRadius: BorderRadius.circular(
                      12.w,
                    ),
                  ),
                  child: Icon(
                    controller.isPlay.value ? Icons.pause : Icons.play_arrow,
                    color: Colors.white,
                    size: 25.w,
                  ),
                ),
              ),
              Text(
                '00:00:00',
                style: TextStyle(
                  color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                  fontSize: 12.sp,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 记录内容
  Widget _recordContent(bool isDarkMode) {
    return Expanded(
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.all(10.w),
        margin: EdgeInsets.symmetric(vertical: 5.w),
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.white.withOpacity(0.05) : Colors.white,
          borderRadius: BorderRadius.circular(12.w),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withOpacity(0.2)
                  : Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: TextField(
          controller: controller.contentController,
          style: TextStyle(
            color: isDarkMode ? Colors.white : Colors.black87,
            fontSize: 16.sp,
          ),
          maxLines: 50,
          decoration: InputDecoration(
            hintText: '编辑记录内容',
            hintStyle: TextStyle(
              color: isDarkMode ? Colors.white70 : Colors.black54,
              fontSize: 16.sp,
            ),
            fillColor: Colors.transparent,
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            contentPadding: EdgeInsets.symmetric(
              horizontal: 10.w,
            ),
          ),
        ),
      ),
    );
  }
}