import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_spacing.dart';
import '../../core/theme/app_typography.dart';
import 'credits_badge.dart';

/// Top navigation bar - matches Pencil topNav
class TopNavBar extends StatelessWidget implements PreferredSizeWidget {
  const TopNavBar({
    super.key,
    required this.title,
    this.credits,
    this.showBackButton = false,
    this.onBack,
    this.onCreditsTap,
    this.backgroundColor = AppColors.surface,
    this.foregroundColor,
  });

  final String title;
  final String? credits;
  final bool showBackButton;
  final VoidCallback? onBack;
  final VoidCallback? onCreditsTap;
  /// 例如全屏背景页上叠半透明导航栏时用 [Colors.transparent]
  final Color backgroundColor;
  /// 标题与返回键颜色；默认 [AppColors.textPrimary]
  final Color? foregroundColor;

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

  @override
  Widget build(BuildContext context) {
    final fg = foregroundColor ?? AppColors.textPrimary;
    final titleStyle = foregroundColor != null
        ? AppTypography.navTitle.copyWith(color: foregroundColor)
        : AppTypography.navTitle;

    return Container(
      height: 56,
      padding: const EdgeInsets.symmetric(horizontal: AppSpacing.screenPadding),
      decoration: BoxDecoration(
        color: backgroundColor,
        boxShadow: backgroundColor.a < 0.02
            ? null
            : const [
                BoxShadow(
                  color: AppColors.shadowLight,
                  blurRadius: 8,
                  offset: Offset(0, 2),
                ),
              ],
      ),
      child: Row(
        children: [
          if (showBackButton)
            GestureDetector(
              onTap: onBack ?? () => Navigator.of(context).pop(),
              behavior: HitTestBehavior.opaque,
              child: SizedBox(
                width: 40,
                height: 40,
                child: Center(
                  child: Icon(
                    LucideIcons.arrow_left,
                    size: 24,
                    color: fg,
                  ),
                ),
              ),
            ),
          Expanded(
            child: showBackButton
                ? Center(
                    child: Text(
                      title,
                      style: titleStyle,
                    ),
                  )
                : Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      title,
                      style: titleStyle,
                    ),
                  ),
          ),
          if (credits != null)
            CreditsBadge(
              credits: credits!,
              onTap: onCreditsTap,
              foregroundColor: foregroundColor,
              capsuleColor:
                  foregroundColor?.withValues(alpha: 0.22),
            )
          else
            const SizedBox(width: 40),
        ],
      ),
    );
  }
}