import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:problem_check_system/modules/problem/models/problem.dart';
import 'package:problem_check_system/modules/problem/view_model/image_controller.dart';
import 'package:problem_check_system/modules/problem/view_model/problem_new_controller.dart';

class ProblemNewPage extends StatelessWidget {
  ProblemNewPage({super.key});

  final ImageController imageController = Get.put(ImageController());
  final ProblemNewController problemNewController = Get.put(
    ProblemNewController(),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0xFF418CFC), Color(0xFF3DBFFC)], // 渐变颜色
              begin: Alignment.centerLeft, // 从左开始
              end: Alignment.centerRight, // 到右结束
            ),
          ),
        ),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_rounded), // 返回箭头图标
          color: Colors.white,
          onPressed: () {
            Navigator.pop(context); // 返回上一页逻辑
          },
        ),
        title: const Text('新增问题', style: TextStyle(color: Colors.white)),
        centerTitle: true,
        backgroundColor: Colors.transparent, // 设置背景透明以显示渐变
      ),
      body: Column(
        children: [
          Expanded(
            child: Column(
              children: [
                Card(
                  margin: EdgeInsets.all(17.w),
                  child: Column(
                    children: [
                      ListTile(
                        title: const Text(
                          '问题描述', // 标题
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        subtitle: TextField(
                          maxLines: null,
                          decoration: const InputDecoration(
                            hintText: '请输入问题描述',
                            border: InputBorder.none,
                          ),
                          onChanged: (value) {
                            // 输入值发生变化时的逻辑
                          },
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight, // 设置为右对齐
                        child: Container(
                          margin: const EdgeInsets.all(10),
                          child: ElevatedButton(
                            onPressed: () {
                              print("按钮被点击");
                            },
                            child: const Icon(Icons.keyboard_voice),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Card(
                  margin: EdgeInsets.all(17.w),
                  child: Column(
                    children: [
                      ListTile(
                        title: const Text(
                          '所在位置', // 标题
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        subtitle: TextField(
                          maxLines: null,
                          decoration: const InputDecoration(
                            hintText: '请输入问题所在位置',
                            border: InputBorder.none,
                          ),
                          onChanged: (value) {
                            // 输入值发生变化时的逻辑
                          },
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight, // 设置为右对齐
                        child: Container(
                          margin: const EdgeInsets.all(10),
                          child: ElevatedButton(
                            onPressed: () {
                              print("按钮被点击");
                            },
                            child: const Icon(Icons.keyboard_voice),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Card(
                  margin: EdgeInsets.all(17.w),
                  child: Column(
                    children: [
                      ListTile(
                        title: const Text(
                          '问题图片', // 标题
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        subtitle: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            // 展示图片区域
                            Obx(() {
                              final file = imageController.selectedImage.value;
                              if (file == null) {
                                return const Text('尚未选取图片');
                              }
                              return Image.file(
                                file,
                                width: 100,
                                height: 100,
                                fit: BoxFit.cover,
                              );
                            }),
                            const SizedBox(width: 20),
                            Container(
                              color: Color(0xffF7F7F7),
                              width: 100,
                              height: 100,
                              child: IconButton(
                                icon: const Icon(Icons.image),
                                iconSize: 40, // 图标大小
                                onPressed: imageController.pickAndCopyImage,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // 底部按钮
          Container(
            width: 375.w,
            height: 81.h,
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: BorderRadius.circular(12),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    onPressed: () {
                      // 取消按钮逻辑
                      Get.back();
                    },
                    child: const Text(
                      '取消',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Color(0xFF418CFC),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    onPressed: () async {
                      // 确定按钮逻辑
                      final problem1 = Problem(
                        description: '墙面裂缝需要修复',
                        location: 'A栋101房间',
                        imageUrl: 'https://example.com/images/wall_crack.jpg',
                      );
                      await problemNewController.saveJson(
                        problem1.toJson(),
                        problem1.id,
                      );
                      Get.back();
                      Get.snackbar(
                        '保存成功',
                        '${problem1.id}.json 已创建',
                        snackPosition: SnackPosition.TOP,
                        snackStyle: SnackStyle.FLOATING,
                        backgroundColor: Colors.black87,
                        colorText: Colors.white,
                      );
                    },
                    child: const Text(
                      '确定',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}