// 触屏手柄布局编辑器：独立全屏页，从「设置 → 自定义按键」进入。
// 背景保持透明，透出下面的实时游戏画布（标题星空 + 刺地带动画），
// 编辑体验与正常玩游戏时完全一致（同样的全屏沉浸、同样的按钮渲染）。
//
// 布局即改即存（每次拖动/缩放都写回存档），返回时无需再点「确定」。
// 位置/大小与真实手柄同一套换算（cx/cy 百分比 + size×k），所见即所得。
import 'package:flutter/material.dart';
import 'package:iwbtc/src/core/save.dart' show Save;
import 'package:iwbtc/src/game/world.dart' show W;
import 'package:iwbtc/src/ui/touch_layout.dart'
    show BUTTONS, TouchBtn, metaSettings;

/// 读取某按键当前布局（cx/cy/size）。
Map<String, double> touchLayoutOf(String key) {
  final t = metaSettings()['touch'] as Map;
  final m = (t[key] as Map?) ?? const <String, dynamic>{};
  return <String, double>{
    'cx': double.tryParse(m['cx'].toString()) ?? 50,
    'cy': double.tryParse(m['cy'].toString()) ?? 50,
    'size': double.tryParse(m['size'].toString()) ?? 60,
  };
}

void writeTouchLayout(String key, Map<String, double> p) {
  (metaSettings()['touch'] as Map)[key] = <String, dynamic>{
    'cx': p['cx'],
    'cy': p['cy'],
    'size': p['size'],
  };
  // 即改即存：布局写回存档，返回/切后台都不会丢。
  Save.flush();
}

class TouchLayoutEditor extends StatefulWidget {
  final VoidCallback onDone; // 仅负责返回设置页（布局已即改即存）
  const TouchLayoutEditor({super.key, required this.onDone});
  @override
  State<TouchLayoutEditor> createState() => _TouchLayoutEditorState();
}

class _TouchLayoutEditorState extends State<TouchLayoutEditor> {
  @override
  Widget build(BuildContext context) {
    // 背景保持透明：透出下面的实时游戏画布（标题星空+刺地），
    // 编辑体验与正常游戏完全一致（全屏沉浸）。
    return Stack(
      children: <Widget>[
        // 按钮编辑层（铺满全屏，与真实手柄同一坐标系）
        Positioned.fill(
          child: LayoutBuilder(
            builder: (BuildContext _, BoxConstraints cons) {
              final double w = cons.maxWidth;
              final double h = cons.maxHeight;
              // 与 _TouchButton 完全一致的缩放系数，保证编辑所见 = 游戏所得
              final double k = (w / W).clamp(0.6, 2.6);
              return Stack(
                children: <Widget>[
                  for (final b in BUTTONS) ...<Widget>[
                    _EditBtn(
                      b: b,
                      k: k,
                      screenW: w,
                      screenH: h,
                      onChanged: () => setState(() {}),
                    ),
                    _ResizeHandle(
                      b: b,
                      k: k,
                      screenW: w,
                      screenH: h,
                      onChanged: () => setState(() {}),
                    ),
                  ],
                ],
              );
            },
          ),
        ),
        // 顶部操作行：恢复默认 / 返回
        Positioned(
          top: 10,
          right: 12,
          child: Row(
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  final t = metaSettings()['touch'] as Map;
                  t.clear();
                  for (final b in BUTTONS) {
                    t[b.key] = <String, dynamic>{
                      'cx': b.cx,
                      'cy': b.cy,
                      'size': b.size,
                    };
                  }
                  Save.flush();
                  setState(() {});
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0x991a1a26),
                  foregroundColor: const Color(0xffffffff),
                  padding: const EdgeInsets.symmetric(
                    horizontal: 12,
                    vertical: 6,
                  ),
                  minimumSize: Size.zero,
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  visualDensity: VisualDensity.compact,
                ),
                child: const Text('恢复默认', style: TextStyle(fontSize: 13)),
              ),
              const SizedBox(width: 8),
              ElevatedButton(
                onPressed: widget.onDone,
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0x995a3a7a),
                  foregroundColor: const Color(0xffffffff),
                  padding: const EdgeInsets.symmetric(
                    horizontal: 14,
                    vertical: 6,
                  ),
                  minimumSize: Size.zero,
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  visualDensity: VisualDensity.compact,
                ),
                child: const Text('返回', style: TextStyle(fontSize: 13)),
              ),
            ],
          ),
        ),
        // 底部提示
        const Positioned(
          left: 0,
          right: 0,
          bottom: 8,
          child: Center(
            child: Text(
              '点选按钮后可拖动位置 · 拖右下角黄点调整大小（改动即时保存）',
              style: TextStyle(color: Color(0x88ffffff), fontSize: 12),
            ),
          ),
        ),
      ],
    );
  }
}

class _EditBtn extends StatefulWidget {
  final TouchBtn b;
  final double k; // 真实手柄同款缩放系数
  final double screenW;
  final double screenH;
  final VoidCallback onChanged;
  const _EditBtn({
    required this.b,
    required this.k,
    required this.screenW,
    required this.screenH,
    required this.onChanged,
  });
  @override
  State<_EditBtn> createState() => _EditBtnState();
}

class _EditBtnState extends State<_EditBtn> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    final p = touchLayoutOf(widget.b.key);
    final double sz = p['size']! * widget.k;
    final double left = p['cx']! / 100 * widget.screenW - sz / 2;
    final double top = p['cy']! / 100 * widget.screenH - sz / 2;
    final isJump = widget.b.shape == 'jump';
    return Positioned(
      left: left,
      top: top,
      width: sz,
      height: sz,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => setState(() => _selected = !_selected),
        onPanStart: (_) => setState(() => _selected = true),
        onPanUpdate: (d) {
          final np = touchLayoutOf(widget.b.key);
          np['cx'] = (np['cx']! + d.delta.dx / widget.screenW * 100).clamp(
            3.0,
            97.0,
          );
          np['cy'] = (np['cy']! + d.delta.dy / widget.screenH * 100).clamp(
            4.0,
            96.0,
          );
          writeTouchLayout(widget.b.key, np);
          widget.onChanged();
        },
        child: Container(
          decoration: BoxDecoration(
            color: _selected
                ? const Color(0x88ffffff)
                : const Color(0x444a5a7a),
            shape: isJump ? BoxShape.circle : BoxShape.rectangle,
            borderRadius: isJump ? null : BorderRadius.circular(sz * 0.3),
            border: Border.all(
              color: _selected
                  ? const Color(0xffffd23a)
                  : const Color(0xff7ae0ff),
              width: 2,
            ),
          ),
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  widget.b.label,
                  style: TextStyle(
                    color: const Color(0xffffffff),
                    fontSize: sz * 0.3,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                if (widget.b.label2 != null)
                  Text(
                    widget.b.label2!,
                    style: TextStyle(
                      color: const Color(0xffcfe8ff),
                      fontSize: sz * 0.15,
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// 缩放手柄：选中按钮后显示在其右下角的小黄点，拖动改变按钮大小。
/// 单独一层 Positioned（在按钮之后 = 绘制在上层），不吃按钮本体的手势。
class _ResizeHandle extends StatefulWidget {
  final TouchBtn b;
  final double k;
  final double screenW;
  final double screenH;
  final VoidCallback onChanged;
  const _ResizeHandle({
    required this.b,
    required this.k,
    required this.screenW,
    required this.screenH,
    required this.onChanged,
  });
  @override
  State<_ResizeHandle> createState() => _ResizeHandleState();
}

class _ResizeHandleState extends State<_ResizeHandle> {
  bool _active = false;

  @override
  Widget build(BuildContext context) {
    final p = touchLayoutOf(widget.b.key);
    final double sz = p['size']! * widget.k;
    final double left = p['cx']! / 100 * widget.screenW + sz / 2 - 14;
    final double top = p['cy']! / 100 * widget.screenH + sz / 2 - 14;
    return Positioned(
      left: left,
      top: top,
      width: 26,
      height: 26,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onPanStart: (_) => setState(() => _active = true),
        onPanEnd: (_) => setState(() => _active = false),
        onPanCancel: () => setState(() => _active = false),
        onPanUpdate: (d) {
          final np = touchLayoutOf(widget.b.key);
          // 向右/向下拖 = 变大，换算回虚拟 size 单位
          final double dSize = (d.delta.dx + d.delta.dy) / widget.k;
          np['size'] = (np['size']! + dSize).clamp(30.0, 180.0);
          writeTouchLayout(widget.b.key, np);
          widget.onChanged();
        },
        child: Container(
          decoration: BoxDecoration(
            color: _active ? const Color(0xffffd23a) : const Color(0xccffd23a),
            shape: BoxShape.circle,
            border: Border.all(color: const Color(0xff2a2a3a), width: 1.5),
          ),
          child: const Center(
            child: Icon(Icons.open_in_full, size: 14, color: Colors.black87),
          ),
        ),
      ),
    );
  }
}