import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:ln_jq_app/common/model/station_model.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<C_ReservationController> {
  const ReservationPage({super.key});

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

  Widget _buildTipsCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            _buildTipItem(Icons.info_outline, '请提前30分钟到达加氢站'),
            const SizedBox(height: 10),
            _buildTipItem(Icons.rule, '请确保车辆证件齐全'),
            const SizedBox(height: 10),
            _buildTipItem(Icons.headset_mic_outlined, '如有疑问请联系客服: 400-021-1773'),
          ],
        ),
      ),
    );
  }

  // 提示信息卡片中的列表项
  Widget _buildTipItem(IconData icon, String text) {
    return Row(
      children: [
        Icon(icon, color: Colors.blue, size: 20),
        const SizedBox(width: 10),
        Expanded(
          child: Text(text, style: const TextStyle(fontSize: 12, color: Colors.black54)),
        ),
      ],
    );
  }

  /// 构建用户信息卡片
  Widget _buildUserInfoCard() {
    return Card(
      elevation: 2, // 轻微的阴影
      margin: EdgeInsets.zero,
      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(
                        "${StorageService.to.name}",
                        style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 6),
                      Text(
                        "${StorageService.to.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();
                    refreshAppui();
                  }
                },
                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),
        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: 20),
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: controller.submitReservation,
                      style: ElevatedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 38),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24),
                        ),
                        backgroundColor: Colors.blue,
                        foregroundColor: Colors.white,
                      ),
                      child: const Text(
                        '提交预约',
                        style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: OutlinedButton(
                      onPressed: controller.getReservationList,
                      style: OutlinedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 38), // 高度与另一个按钮保持一致
                        side: const BorderSide(color: Colors.blue),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24),
                        ),
                      ),
                      child: const Text(
                        '查看预约',
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 13,
                          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: 13)),
          const SizedBox(height: 8),
          InkWell(
            onTap: onTap,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
              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: 14)),
                  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: 13)),
          const SizedBox(height: 8),
          TextFormField(
            controller: controller,
            keyboardType: keyboardType,
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly, // 只允许数字输入
            ],
            enabled: enabled,
            style: const TextStyle(fontSize: 14),
            decoration: InputDecoration(
              isDense: true,
              hintText: hint,
              hintStyle: TextStyle(fontSize: 14),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
              contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
              filled: !enabled,
              fillColor: Colors.grey[100],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStationSelector() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.all(0),
          child: 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: const Text(
                '请选择加氢站',
                style: TextStyle(fontSize: 14, color: Colors.grey),
              ),
              // items 列表现在从 stationOptions (StationModel列表) 构建
              items: controller.stationOptions
                  .map(
                    (station) => DropdownMenuItem<String>(
                      value: station.hydrogenId, // value 是站点的唯一ID
                      child: _buildDropdownItem(station), // child 是自定义的 Widget
                    ),
                  )
                  .toList(),
              value: controller.selectedStationId.value,
              // 当前选中的是站点ID
              onChanged: (value) {
                if (value != null) {
                  controller.selectedStationId.value = value;
                }
              },
              customButton: controller.selectedStationId.value == null
                  ? null // 未选择时，显示默认的 hint
                  : _buildSelectedStationButton(
                      controller.stationOptions.firstWhere(
                        (s) => s.hydrogenId == controller.selectedStationId.value,
                      ),
                    ),
              buttonStyleData: ButtonStyleData(
                height: 40, // 增加高度以容纳两行文字
                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, color: Colors.grey),
                iconSize: 24,
              ),
              dropdownStyleData: DropdownStyleData(
                maxHeight: 300,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
              ),
              menuItemStyleData: const MenuItemStyleData(
                height: 60, // 增加下拉项的高度
              ),
            ),
          ),
        ),
      ],
    );
  }

  /// 构建下拉菜单中的每一项
  Widget _buildDropdownItem(StationModel station) {
    bool isMaintenance = (station.siteStatusName != '营运中');
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Flexible(
                      child: Text(
                        station.name,
                        style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ),
                    Text(
                      ' | ¥${station.price}/kg',
                      style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
                    ),
                    if (isMaintenance) const SizedBox(width: 8),
                    if (isMaintenance)
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                        decoration: BoxDecoration(
                          color: Colors.orange[100],
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Text(
                          station.siteStatusName,
                          style: TextStyle(
                            fontSize: 10,
                            color: Colors.orange,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                  ],
                ),
                const SizedBox(height: 4),
                Text(
                  '${station.address}',
                  style: const TextStyle(fontSize: 12, color: Colors.grey),
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSelectedStationButton(StationModel station) {
    return Container(
      // 选中后样式
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: Colors.grey[400]!),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(child: _buildDropdownItem(station)),
          const Icon(Icons.arrow_drop_down, color: Colors.grey, size: 24),
        ],
      ),
    );
  }
}