// 编辑器工具栏 — 底部单行 6 按钮面板
//
// 精简布局：
// - 单行 6 个工具按钮（贴纸/模板/画笔/照片/文字/更多）
// - 高度 72px + 底部安全区
// - 每个按钮：Column(icon 20px + label 10px)，最小 36x36
//
// 详细选项已移至独立面板：
// - 画笔选项 → BrushPanel（底部抽屉）
// - 撤销/重做 → 顶栏
// - 清除 → 顶栏
//
// 设计规范：触摸目标 ≥ 44px，圆角 22px (pill)

import 'package:flutter/material.dart';

import '../bloc/editor_bloc.dart';

/// 编辑器工具栏 — 精简版
class EditorToolbar extends StatelessWidget {
  final EditorState state;
  final ValueChanged<EditorEvent> onEvent;

  const EditorToolbar({
    super.key,
    required this.state,
    required this.onEvent,
  });

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    return Container(
      height: 72 + MediaQuery.of(context).padding.bottom,
      decoration: BoxDecoration(
        color: colorScheme.surface,
        border: Border(
          top: BorderSide(
            color: colorScheme.outlineVariant.withValues(alpha: 0.3),
          ),
        ),
      ),
      child: Padding(
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            _toolBtn(context, EditorTool.sticker, Icons.emoji_emotions_rounded, '贴纸'),
            _toolBtn(context, EditorTool.template, Icons.dashboard_customize_rounded, '模板'),
            _toolBtn(context, EditorTool.brush, Icons.gesture_rounded, '画笔'),
            _toolBtn(context, EditorTool.photo, Icons.add_photo_alternate_rounded, '照片'),
            _toolBtn(context, EditorTool.text, Icons.text_fields_rounded, '文字'),
            _toolBtn(context, EditorTool.more, Icons.more_horiz_rounded, '更多'),
          ],
        ),
      ),
    );
  }

  /// 工具按钮 — icon + label 垂直排列
  Widget _toolBtn(
    BuildContext context,
    EditorTool tool,
    IconData icon,
    String label,
  ) {
    final isActive = state.activeTool == tool;
    final colorScheme = Theme.of(context).colorScheme;

    return GestureDetector(
      onTap: () => onEvent(isActive ? ToolReactivated(tool) : ToolChanged(tool)),
      behavior: HitTestBehavior.opaque,
      child: Container(
        constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 20,
              color: isActive
                  ? colorScheme.primary
                  : colorScheme.onSurface.withValues(alpha: 0.5),
            ),
            const SizedBox(height: 2),
            Text(
              label,
              style: TextStyle(
                fontSize: 10,
                color: isActive
                    ? colorScheme.primary
                    : colorScheme.onSurface.withValues(alpha: 0.5),
                fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
              ),
            ),
          ],
        ),
      ),
    );
  }
}