import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';

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

  @override
  State<RecordFormPage> createState() => _RecordFormPage();
}

class _RecordFormPage extends State<RecordFormPage> {
  final _formKey = GlobalKey<FormBuilderState>();

  final ImagePicker _picker = ImagePicker();
  XFile? _selectedImage;

  // 选择图片的方法
  Future<void> _pickImage(ImageSource source) async {
    try {
      final XFile? image = await _picker.pickImage(source: source);
      if (image != null) {
        setState(() {
          _selectedImage = image;
          // 更新表单字段的值
          _formKey.currentState?.fields['image']?.didChange(image.path);
        });
      }
    } catch (e) {
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(SnackBar(content: Text('选择图片失败: $e')));
    }
  }

  void confirmClick(BuildContext context) {
    if (_formKey.currentState?.saveAndValidate() ?? false) {
      showSuccessToast("新增记录成功");
    } else {
      showErrorToast("请先提交信息");
    }
  }

  // 显示图片操作弹窗（查看/删除）
  Future<void> _showImageActionDialog(BuildContext context) async {
    await showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('图片操作'),
        actions: [
          // 查看图片
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              _previewImage(context);
            },
            child: const Text('查看'),
          ),
          // 删除图片
          TextButton(
            onPressed: () {
              setState(() {
                _selectedImage = null; // 清空选中的图片
              });
              Navigator.pop(context);
            },
            child: const Text(
              '删除',
              style: TextStyle(color: Colors.red),
            ),
          ),
        ],
      ),
    );
  }

// 显示选择图片来源的弹窗（相册/相机）
  Future<void> _showImageSourceDialog(BuildContext context) async {
    await showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('选择图片来源'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              _pickImage(ImageSource.gallery);
            },
            child: const Text('相册'),
          ),
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              _pickImage(ImageSource.camera);
            },
            child: const Text('相机'),
          ),
        ],
      ),
    );
  }

// 预览图片（全屏查看）
  void _previewImage(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          backgroundColor: Colors.black,
          body: Center(
            child: Image.file(
              File(_selectedImage!.path),
              fit: BoxFit.contain,
            ),
          ),
          floatingActionButton: IconButton(
            icon: const Icon(Icons.close, color: Colors.white),
            onPressed: () => Navigator.pop(context),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('新增记录'), backgroundColor: Colors.white),
      backgroundColor: Color(0xFFF5F5F5),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              FormBuilder(
                key: _formKey,
                initialValue: {'date': DateTime.now(), 'accept_terms': false},
                skipDisabled: true,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    formLabelText(labelText: '菜谱名称', isRequired: true),
                    const SizedBox(height: 5),
                    FormBuilderTextField(
                      name: 'name',
                      decoration: formInputDecoration(hintText: '请输入或选择菜谱名称'),
                      // onChanged: (val) => print(val),
                      validator: FormBuilderValidators.compose([
                        FormBuilderValidators.required(),
                        FormBuilderValidators.minLength(3),
                        FormBuilderValidators.maxLength(70),
                      ]),
                      keyboardType: TextInputType.name,
                    ),
                    const SizedBox(height: 10),
                    formLabelText(labelText: '完成时间', isRequired: true),
                    const SizedBox(height: 5),
                    FormBuilderDateTimePicker(
                      name: 'date',
                      decoration: formInputDecoration(
                        hintText: '请选择日期',
                        prefixIcon: Icons.date_range,
                      ),
                      inputType: InputType.date,
                      firstDate: DateTime(1900),
                      lastDate: DateTime(2100),
                      format: DateFormat('yyyy-MM-dd'),
                      // enabled: _formKey.currentState?.fields['date']?.enabled ?? true,
                    ),
                    const SizedBox(height: 10),
                    formLabelText(labelText: '美食图片'),
                    const SizedBox(height: 5),

                    // 图片选择区域（核心优化部分）
                    GestureDetector(
                      onTap: () {
                        // 已选择图片时，显示操作弹窗；未选择时直接打开选择器
                        if (_selectedImage != null) {
                          _showImageActionDialog(context);
                        } else {
                          _showImageSourceDialog(context); // 弹出选择相册/相机的对话框
                        }
                      },
                      child: Container(
                        height: 200,
                        width: 200,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(
                            color: Colors.grey[300]!,
                            width: 1,
                            style: BorderStyle.solid,
                          ),
                          // 有图片时显示图片，无图片时显示背景色
                          color:
                              _selectedImage == null ? Colors.grey[50] : null,
                          image:
                              _selectedImage != null
                                  ? DecorationImage(
                                    image: FileImage(
                                      File(_selectedImage!.path),
                                    ),
                                    fit: BoxFit.contain,
                                  )
                                  : null,
                        ),
                        // 初始状态显示+号；有图片时隐藏
                        child:
                            _selectedImage == null
                                ? Center(
                                  child: Icon(
                                    Icons.add,
                                    color: Colors.grey[400],
                                    size: 48, // 大号+号，视觉更清晰
                                  ),
                                )
                                : null,
                      ),
                    ),

                    // 隐藏的表单字段（保留原功能）
                    FormBuilderTextField(
                      name: 'image',
                      initialValue: _selectedImage?.path ?? '',
                      enabled: false,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return '请选择一张图片';
                        }
                        return null;
                      },
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              Row(
                children: <Widget>[
                  Expanded(
                    child: ElevatedButton(
                      style: primaryButtonStyle(),
                      onPressed: () => confirmClick(context),
                      child: buttonText(text: '确认'),
                    ),
                  ),
                  const SizedBox(width: 20),
                  Expanded(
                    child: ElevatedButton(
                      style: cancelButtonStyle(),
                      onPressed: () => Navigator.pop(context),
                      child: buttonText(text: '取消'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}