import 'package:flutter/material.dart';
import 'package:maibu_satabot_v2/core/localization/app_localizations.dart';

class RouteDirectionPanel extends StatefulWidget {
  // 接收外部传入的初始值
  final bool initialOptimalHeading;
  final double initialDirection;
  // 🔥 核心修改：新增实时回调（值变更时立即触发）
  final ValueChanged<Map<String, dynamic>>? onValueChanged;
  // 取消/关闭面板回调（保留）
  final VoidCallback? onCancel;
  // 多语言支持
  final String? titleText;
  final String? optimalHeadingText;
  final String? routeDirectionText;

  const RouteDirectionPanel({
    super.key,
    this.initialOptimalHeading = true, // 默认开启最优航向
    this.initialDirection = 0.0, // 默认方向0度
    this.onValueChanged, // 实时值变更回调
    this.onCancel,
    this.titleText,
    this.optimalHeadingText,
    this.routeDirectionText,
  });

  @override
  State<RouteDirectionPanel> createState() => _RouteDirectionPanelState();
}

class _RouteDirectionPanelState extends State<RouteDirectionPanel> {
  late bool _optimalHeading;
  late double _direction; // 0-360度范围

  @override
  void initState() {
    super.initState();
    _optimalHeading = widget.initialOptimalHeading;
    _direction = widget.initialDirection.clamp(0, 360); // 限制在0-360度

    // 初始化时立即传递一次初始值（可选，保证外部能拿到初始状态）
    _notifyValueChanged();
  }

  // 🔥 新增：封装值变更通知逻辑
  void _notifyValueChanged() {
    widget.onValueChanged?.call({'optimalHeading': _optimalHeading, 'direction': _direction});
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 8)],
      ),
      padding: const EdgeInsets.all(16),
      constraints: const BoxConstraints(minHeight: 240), // 最小高度保证UI完整
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 顶部标题栏 + 返回按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 取消/返回按钮
                GestureDetector(
                  onTap: () {
                    widget.onCancel?.call(); // 触发取消回调
                  },
                  child: const Icon(Icons.arrow_back_ios, color: Colors.black87, size: 20),
                ),
                Text(
                  widget.titleText ?? '航线方向',
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.black87),
                ),
                const SizedBox(width: 24), // 占位保持标题居中
              ],
            ),
            const SizedBox(height: 10),

            // 最优航向开关（修改：值变更时触发回调）
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(widget.optimalHeadingText ?? '最优航向', style: const TextStyle(fontSize: 16, color: Colors.black87)),
                Switch(
                  value: _optimalHeading,
                  activeColor: const Color(0xFF00C853),
                  onChanged: (bool value) {
                    setState(() {
                      _optimalHeading = value;
                    });
                    // 🔥 实时传递最新值
                    _notifyValueChanged();
                  },
                ),
              ],
            ),
            const SizedBox(height: 10),

            // 航线方向滑块（修改：值变更时触发回调）
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(widget.routeDirectionText ?? '航线方向', style: const TextStyle(fontSize: 16, color: Colors.black87)),
                    Text(
                      '${_direction.toStringAsFixed(0)}°',
                      style: TextStyle(fontSize: 16, color: _optimalHeading ? Colors.grey : Colors.black87, fontWeight: FontWeight.w500),
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                Slider(
                  value: _direction,
                  min: 0,
                  max: 360,
                  divisions: 36,
                  label: '${_direction.toStringAsFixed(0)}°',
                  activeColor: const Color(0xFF00C853),
                  inactiveColor: Colors.grey[300],
                  onChanged: _optimalHeading
                      ? null
                      : (double value) {
                          setState(() {
                            _direction = value;
                          });
                          // 🔥 实时传递最新值
                          _notifyValueChanged();
                        },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}