import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:ln_jq_app/common/model/vehicle_info.dart';
import 'package:ln_jq_app/pages/qr_code/view.dart';
import 'package:ln_jq_app/storage_service.dart';

import 'controller.dart';

class ReservationPage extends GetView<ReservationController> {
  const ReservationPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ReservationController>(
      init: ReservationController(),
      id: 'reservation',
      builder: (_) {
        return Scaffold(
          backgroundColor: Colors.grey[100],
          body: SingleChildScrollView(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                _buildUserInfoCard(),
                const SizedBox(height: 5),
                _buildCarInfoCard(),
                const SizedBox(height: 5),
                _buildReservationFormCard(context),
              ],
            ),
          ),
        );
      },
    );
  }

  /// 构建用户信息卡片
  Widget _buildUserInfoCard() {
    return Card(
      elevation: 2, // 轻微的阴影
      shadowColor: Colors.black.withOpacity(0.1),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                const CircleAvatar(
                  radius: 20,
                  backgroundColor: Colors.blue,
                  child: Icon(Icons.person, color: Colors.white, size: 34),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        controller.name,
                        style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 6),
                      Text(
                        controller.phone,
                        style: TextStyle(color: Colors.grey, fontSize: 11),
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    color: Colors.blue[50],
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Colors.blue, width: 0.5),
                  ),
                  child: const Row(
                    children: [
                      Icon(Icons.shield_outlined, color: Colors.blue, size: 14),
                      SizedBox(width: 4),
                      Text(
                        '已认证',
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 10,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          const Divider(height: 1, indent: 16, endIndent: 16),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 11.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildStatItem(controller.fillingWeight, '累计加氢'),
                _buildStatItem(controller.fillingTimes, '加氢次数'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 用户信息卡片中的小统计项
  Widget _buildStatItem(String value, String label) {
    return Column(
      children: [
        Text(value, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
        const SizedBox(height: 4),
        Text(label, style: const TextStyle(color: Colors.grey, fontSize: 11)),
      ],
    );
  }

  /// 构建车辆信息卡片
  Widget _buildCarInfoCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(11),
        child: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  _buildInfoRow('车牌号:   ${controller.plateNumber}', '扫码绑定'),
                  const SizedBox(height: 12),
                  _buildInfoRow('剩余氢量:', '${controller.leftHydrogen}Kg'),
                  const SizedBox(height: 12),
                  _buildInfoRow('百公里氢耗:', '${controller.workEfficiency}KG/100KM'),
                ],
              ),
            ),
            const SizedBox(width: 8),
            Icon(Icons.propane_rounded, size: 50, color: Colors.blue.withOpacity(0.5)),
          ],
        ),
      ),
    );
  }

  // 车辆信息卡片中的信息行
  Widget _buildInfoRow(String label, String value) {
    bool isButton = value == '扫码绑定';
    return Row(
      children: [
        Text(label, style: const TextStyle(fontSize: 13)),
        const SizedBox(width: 8),
        isButton
            ? GestureDetector(
                onTap: () async {
                  //判断是否绑定成功
                  var scanResult = await Get.to(() => const QrCodePage());
                  if (scanResult == true) {
                    controller.getUserBindCarInfo();
                  }
                },
                child: Container(
                  margin: EdgeInsetsGeometry.only(left: 10.w),
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blue.shade300, width: 1),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blue.withOpacity(0.05),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min, // Keep the row compact
                    children: [
                      Icon(
                        StorageService.to.hasVehicleInfo ? Icons.repeat : Icons.search,
                        size: 13,
                        color: Colors.blue,
                      ),
                      const SizedBox(width: 3),
                      Text(
                        StorageService.to.hasVehicleInfo ? "换车牌" : value,
                        style: const TextStyle(
                          color: Colors.blue,
                          fontSize: 11,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),
              )
            : Text(
                value,
                style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
              ),
      ],
    );
  }

  /// 构建预约表单卡片
  Widget _buildReservationFormCard(BuildContext context) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        // 【修改】使用 Obx 包裹以自动响应 Rx 变量的变化
        child: Obx(
          () => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildPickerRow(
                label: '日期',
                value: controller.formattedDate,
                icon: Icons.calendar_today_outlined,
                onTap: () => controller.pickDate(context),
              ),
              _buildPickerRow(
                label: '开始时间',
                value: controller.formattedStartTime,
                icon: Icons.access_time_outlined,
                onTap: () => controller.pickTime(context, true),
              ),
              _buildPickerRow(
                label: '结束时间',
                value: controller.formattedEndTime,
                icon: Icons.access_time_outlined,
                onTap: () => controller.pickTime(context, false),
              ),
              _buildTextField(
                label: '预约氢量(kg)',
                controller: controller.amountController,
                hint: '请输入氢量(kg)',
                keyboardType: TextInputType.number,
              ),
              _buildTextField(
                label: '车牌号',
                controller: controller.plateNumberController,
                hint: '请输入车牌号', // 修改提示文案
                enabled: false, // 设置为不可编辑
              ),
              _buildStationSelector(),
              const SizedBox(height: 24),
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: controller.submitReservation,
                      style: ElevatedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 48),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24),
                        ),
                        backgroundColor: Colors.blue, // 明确指定背景色
                        foregroundColor: Colors.white, // 明确指定前景色（文字颜色）
                      ),
                      child: const Text(
                        '提交预约',
                        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: OutlinedButton(
                      onPressed: controller.getReservationList,
                      style: OutlinedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 48), // 高度与另一个按钮保持一致
                        side: const BorderSide(color: Colors.blue), // 设置边框颜色为蓝色
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24),
                        ),
                      ),
                      child: const Text(
                        '查看预约', // 假设第二个按钮是“取消”
                        style: TextStyle(
                          color: Colors.blue, // 设置文字颜色为蓝色
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 表单中的可点击行 (用于日期和时间选择)
  Widget _buildPickerRow({
    required String label,
    required String value,
    required IconData icon,
    required VoidCallback onTap,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
          const SizedBox(height: 8),
          InkWell(
            onTap: onTap,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey[400]!),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(value, style: const TextStyle(fontSize: 16)),
                  Icon(icon, color: Colors.grey, size: 20),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 表单中的文本输入框
  Widget _buildTextField({
    required String label,
    required TextEditingController controller,
    required String hint,
    TextInputType? keyboardType,
    bool enabled = true,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
          const SizedBox(height: 8),
          TextFormField(
            controller: controller,
            keyboardType: keyboardType,
            enabled: enabled, // 使用 enabled 参数
            decoration: InputDecoration(
              hintText: hint,
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
              contentPadding: const EdgeInsets.symmetric(horizontal: 12.0),
              // 【新增】禁用时，使用填充色
              filled: !enabled,
              fillColor: Colors.grey[100],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStationSelector() {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('加氢站', style: TextStyle(color: Colors.grey[600], fontSize: 14)),
              TextButton(
                onPressed: () {
                  controller.getSiteList();
                },
                child: const Text('刷新'),
              ),
            ],
          ),
          Obx(
            () => DropdownButtonHideUnderline(
              child: DropdownButton2<String>(
                isExpanded: true,
                hint: Text(
                  '请选择加氢站',
                  style: TextStyle(fontSize: 14, color: Theme.of(Get.context!).hintColor),
                ),
                items: controller.stationOptions
                    .map(
                      (item) => DropdownMenuItem(
                        value: item,
                        child: _buildDropdownItem(item), // 使用自定义 Widget 构建 Item
                      ),
                    )
                    .toList(),
                value: controller.selectedStation.value,
                onChanged: (value) {
                  if (value != null) {
                    controller.selectedStation.value = value;
                  }
                },
                buttonStyleData: ButtonStyleData(
                  height: 55, // 控制按钮的高度
                  padding: const EdgeInsets.symmetric(horizontal: 12.0), // 控制按钮内部的内边距
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.grey[400]!),
                  ),
                ),
                iconStyleData: const IconStyleData(
                  icon: Icon(Icons.arrow_drop_down),
                  iconSize: 20,
                ),
                dropdownStyleData: DropdownStyleData(
                  maxHeight: 200,
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
                ),
                menuItemStyleData: const MenuItemStyleData(height: 40),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDropdownItem(String item) {
    return Row(
      children: [
        const Icon(Icons.local_gas_station_outlined, size: 18, color: Colors.grey),
        const SizedBox(width: 10),
        Text(item, style: const TextStyle(fontSize: 14)),
      ],
    );
  }
}