import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../core/theme/app_colors.dart';

/// Pencil Component/NavBar — 对齐 Pencil 设计的导航栏
///
/// 白色背景、居中深色标题、左侧返回按钮(绝对定位)、右侧可选操作按钮(绝对定位)
/// 高度 56，padding [0, 16]，自动设置白色状态栏
class PencilNavBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final VoidCallback? onBack;
  final Widget? rightWidget;
  final bool showBack;
  final bool showRight;

  const PencilNavBar({
    super.key,
    required this.title,
    this.onBack,
    this.rightWidget,
    this.showBack = true,
    this.showRight = false,
  });

  @override
  Widget build(BuildContext context) {
    // 设置状态栏样式
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: AppColors.bgCard,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness: Brightness.light,
    ));

    return Container(
      height: 56,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: const BoxDecoration(
        color: AppColors.bgCard,
      ),
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 标题 — 居中
          Text(
            title,
            style: const TextStyle(
              fontSize: AppFontSizes.title,
              fontWeight: FontWeight.w600,
              color: AppColors.textPrimary,
            ),
            textAlign: TextAlign.center,
          ),
          // 左侧返回按钮 — 绝对定位
          if (showBack)
            Positioned(
              left: 0,
              top: 0,
              bottom: 0,
              child: SizedBox(
                width: 56,
                height: 56,
                child: GestureDetector(
                  onTap: onBack ?? () => Navigator.of(context).maybePop(),
                  behavior: HitTestBehavior.opaque,
                  child: const Center(
                    child: Icon(
                      Icons.chevron_left,
                      size: 22,
                      color: AppColors.textPrimary,
                    ),
                  ),
                ),
              ),
            ),
          // 右侧操作按钮 — 绝对定位
          if (showRight && rightWidget != null)
            Positioned(
              right: 0,
              top: 0,
              bottom: 0,
              child: SizedBox(
                width: 56,
                height: 56,
                child: Center(child: rightWidget!),
              ),
            ),
        ],
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(56);
}