import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../design/pencil_theme.dart';

/// bi8Au 玻璃方钮 35×35 / blur 半径约 20。
class PencilGlassSquareButton extends StatelessWidget {
  const PencilGlassSquareButton({
    super.key,
    required this.child,
    required this.onTap,
    this.size = 35,
    this.borderRadius = 8,
  });

  final Widget child;
  final VoidCallback onTap;
  final double size;
  final double borderRadius;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: Material(
          color: PencilTheme.homeGlassFill,
          child: InkWell(
            onTap: onTap,
            child: SizedBox(
              width: size,
              height: size,
              child: Center(child: child),
            ),
          ),
        ),
      ),
    );
  }
}

/// bi8Au 积分胶囊：竖向 padding 由外层控制，横向 padding 约 14。
class PencilGlassCreditsPill extends StatelessWidget {
  const PencilGlassCreditsPill({
    super.key,
    required this.amountText,
    this.onTap,
  });

  final String amountText;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final row = Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Icon(Icons.diamond_rounded,
            size: 18, color: PencilTheme.gemYellow),
        const SizedBox(width: 8),
        Text(
          amountText,
          style: GoogleFonts.inter(
            fontSize: 15,
            fontWeight: FontWeight.w600,
            color: PencilTheme.homeTextPrimary,
            shadows: PencilTheme.homeCreditsTextShadows,
          ),
        ),
      ],
    );
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: onTap != null
            ? Material(
                color: PencilTheme.homeGlassFill,
                child: InkWell(
                  onTap: onTap,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 14),
                    height: 35,
                    alignment: Alignment.centerLeft,
                    child: row,
                  ),
                ),
              )
            : Container(
                padding: const EdgeInsets.symmetric(horizontal: 14),
                color: PencilTheme.homeGlassFill,
                height: 35,
                child: row,
              ),
      ),
    );
  }
}

/// bi8Au Create Now：与 `desgin/funymee_home.pen` [aHMps] 同步（白半透明底、描边、阴影；左黄圆 + 黑加号）。
class PencilCreateNowButton extends StatelessWidget {
  const PencilCreateNowButton({super.key, required this.onPressed});

  final VoidCallback onPressed;

  /// `aHMps` createBtn
  static const double _w = 186;
  static const double _h = 42;

  /// `aHMps` gap；横向 padding 22；竖直 `(42-24)/2` 以垂直居中 24×24 左标。
  static const double _gap = 10;
  static const EdgeInsets _padding =
      EdgeInsets.symmetric(horizontal: 22, vertical: 9);

  /// `aHMps` fill `#FFFFFFA8`（略比 `#FFFFFFB3` 更透）；描边 `#FFFFFFCC` 1.5；阴影 `#00000026` y6 blur20。
  static const Color _fill = Color(0xA8FFFFFF);
  static const Color _stroke = Color(0xCCFFFFFF);
  static const Color _shadow = Color(0x26000000);

  /// `TAocZ` plusCirc — 实心黄 `#FDE047`；`9PFVT` 加号 `#000000`。
  static const Color _plusDisc = Color(0xFFFDE047);

  @override
  Widget build(BuildContext context) {
    // 勿用 [Ink] 包一层 [BoxDecoration] 圆角底：父级 Material 的墨水层是矩形，半透明会在圆角外露出成「方块」背板。
    // 这里用 [Material.shape] + [clipBehavior] 约束底色与水波纹，外圈 [Container] 只负责投影。
    return Container(
      width: _w,
      height: _h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(999),
        boxShadow: const [
          BoxShadow(
            color: _shadow,
            offset: Offset(0, 6),
            blurRadius: 20,
          ),
        ],
      ),
      child: Material(
        color: _fill,
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(999),
          side: const BorderSide(color: _stroke, width: 1.5),
        ),
        child: InkWell(
          onTap: onPressed,
          borderRadius: BorderRadius.circular(999),
          child: Padding(
            padding: _padding,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: _plusDisc,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: const SizedBox(
                    width: 24,
                    height: 24,
                    child: Icon(
                      Icons.add_rounded,
                      size: 12,
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(width: _gap),
                Text(
                  'Create Now',
                  style: GoogleFonts.inter(
                    fontSize: 16,
                    fontWeight: FontWeight.w800,
                    color: PencilTheme.stone900,
                    letterSpacing: 0.4,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// EYsUi / WBRp4 返回钮（无底色、无描边）。
class PencilRoundBackButton extends StatelessWidget {
  const PencilRoundBackButton({super.key, required this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onPressed,
        borderRadius: BorderRadius.circular(14),
        child: const SizedBox(
          width: 44,
          height: 44,
          child: Icon(Icons.chevron_left_rounded,
              size: 26, color: Color(0xFF374151)),
        ),
      ),
    );
  }
}

/// 5J8Po 关闭钮（无底色、无描边）。
class PencilRoundCloseButton extends StatelessWidget {
  const PencilRoundCloseButton({super.key, required this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onPressed,
        borderRadius: BorderRadius.circular(14),
        child: const SizedBox(
          width: 44,
          height: 44,
          child: Icon(Icons.close_rounded, size: 24, color: Color(0xFF374151)),
        ),
      ),
    );
  }
}