import 'dart:math' as math;

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

String _withChinesePunctuation(String value) {
  const replacements = <String, String>{
    ':': '：',
    ',': '，',
    ';': '；',
    '!': '！',
    '?': '？',
    '(': '（',
    ')': '）',
    '[': '【',
    ']': '】',
    '¥': '￥',
  };
  return value.split('').map((char) => replacements[char] ?? char).join();
}

class MallEntryPromoTooltip extends StatefulWidget {
  const MallEntryPromoTooltip({
    super.key,
    required this.visible,
    required this.title,
    required this.body,
    required this.onCardTap,
    required this.child,
  });

  final bool visible;
  final String title;
  final String body;
  final VoidCallback onCardTap;
  final Widget child;

  @override
  State<MallEntryPromoTooltip> createState() => _MallEntryPromoTooltipState();
}

class _MallEntryPromoTooltipState extends State<MallEntryPromoTooltip> {
  static const _cardWidth = 236.0;
  static const _cardHeight = 115.0;
  static const _anchorToCardBottom = 54.0;
  static const _targetCenterToCardRight = 23.0;
  static const _cardRightInset = 22.0;

  final _targetKey = GlobalKey();
  OverlayEntry? _overlayEntry;
  bool _routeIsCurrent = true;

  @override
  void initState() {
    super.initState();
    _scheduleVisibilitySync();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _routeIsCurrent = ModalRoute.of(context)?.isCurrent ?? true;
    _scheduleVisibilitySync();
  }

  @override
  void didUpdateWidget(covariant MallEntryPromoTooltip oldWidget) {
    super.didUpdateWidget(oldWidget);
    _scheduleVisibilitySync();
  }

  void _scheduleVisibilitySync() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;
      if (widget.visible && _routeIsCurrent) {
        _showOverlay();
      } else {
        _removeOverlay();
      }
    });
  }

  void _showOverlay() {
    final current = _overlayEntry;
    if (current != null) {
      current.markNeedsBuild();
      return;
    }
    final entry = OverlayEntry(builder: _buildOverlay);
    _overlayEntry = entry;
    Overlay.of(context, rootOverlay: true).insert(entry);
  }

  void _removeOverlay() {
    final entry = _overlayEntry;
    if (entry == null) return;
    _overlayEntry = null;
    entry
      ..remove()
      ..dispose();
  }

  @override
  void dispose() {
    _removeOverlay();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return KeyedSubtree(key: _targetKey, child: widget.child);
  }

  Widget _buildOverlay(BuildContext overlayContext) {
    final targetContext = _targetKey.currentContext;
    final targetBox = targetContext?.findRenderObject();
    if (targetContext == null ||
        targetBox is! RenderBox ||
        !targetBox.attached) {
      return const SizedBox.shrink();
    }
    final overlayBox = Overlay.of(
      targetContext,
      rootOverlay: true,
    ).context.findRenderObject();
    if (overlayBox is! RenderBox || !overlayBox.attached) {
      return const SizedBox.shrink();
    }

    final targetCenter = targetBox.localToGlobal(
      targetBox.size.center(Offset.zero),
      ancestor: overlayBox,
    );
    final title = _withChinesePunctuation(widget.title.trim());
    final body = _withChinesePunctuation(widget.body.trim());
    return Positioned.fill(
      child: LayoutBuilder(
        key: const ValueKey('mall-entry-promo-pass-through-layer'),
        builder: (context, constraints) {
          final overlaySize = Size(constraints.maxWidth, constraints.maxHeight);
          final cardWidth = math.min(
            _cardWidth,
            math.max(0.0, overlaySize.width - 40),
          );
          final desiredCardLeft =
              targetCenter.dx + _targetCenterToCardRight - cardWidth;
          final maximumCardLeft = math.max(
            20.0,
            overlaySize.width - cardWidth - _cardRightInset,
          );
          final cardLeft = desiredCardLeft
              .clamp(20.0, maximumCardLeft)
              .toDouble();
          final desiredCardTop =
              targetCenter.dy - _anchorToCardBottom - _cardHeight;
          final minimumTop = MediaQuery.paddingOf(context).top + 16;
          final maximumTop = math.max(
            minimumTop,
            overlaySize.height - _cardHeight - 20,
          );
          final cardTop = desiredCardTop
              .clamp(minimumTop, maximumTop)
              .toDouble();
          final cardBottom = cardTop + _cardHeight;
          final pointerLeft = (targetCenter.dx - 9)
              .clamp(0.0, overlaySize.width - 18)
              .toDouble();

          return Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(
                left: cardLeft,
                top: cardTop,
                width: cardWidth,
                height: _cardHeight,
                child: Semantics(
                  button: true,
                  label: '进入商城',
                  child: GestureDetector(
                    key: const ValueKey('mall-entry-promo-card-action'),
                    behavior: HitTestBehavior.opaque,
                    onTap: widget.onCardTap,
                    child: DecoratedBox(
                      key: const ValueKey('mall-entry-promo-card'),
                      decoration: BoxDecoration(
                        color: const Color(0xE6FFFFFF),
                        borderRadius: BorderRadius.circular(16),
                        boxShadow: const [
                          BoxShadow(
                            color: Color(0x33000000),
                            offset: Offset(0, 8),
                            blurRadius: 20,
                          ),
                        ],
                      ),
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            SvgPicture.asset(
                              'assets/navigation/mall_entry_promo_gift.svg',
                              key: const ValueKey('mall-entry-promo-gift'),
                              width: 45,
                              height: 40,
                              fit: BoxFit.fill,
                            ),
                            const SizedBox(height: 4),
                            if (title.isNotEmpty)
                              SizedBox(
                                width: double.infinity,
                                height: 22,
                                child: FittedBox(
                                  fit: BoxFit.scaleDown,
                                  child: Text(
                                    title,
                                    maxLines: 1,
                                    style: const TextStyle(
                                      color: Colors.black,
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600,
                                      height: 1.375,
                                    ),
                                  ),
                                ),
                              ),
                            if (title.isNotEmpty && body.isNotEmpty)
                              const SizedBox(height: 4),
                            if (body.isNotEmpty)
                              Text(
                                body,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.center,
                                style: const TextStyle(
                                  color: Color(0x99000000),
                                  fontSize: 12,
                                  fontWeight: FontWeight.w400,
                                  height: 17 / 12,
                                ),
                              ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Positioned(
                left: pointerLeft,
                top: cardBottom - 1,
                width: 18,
                height: 16,
                child: IgnorePointer(
                  child: SvgPicture.asset(
                    'assets/navigation/mall_entry_promo_pointer.svg',
                    key: const ValueKey('mall-entry-promo-pointer'),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

class MallEntryPromoBadge extends StatelessWidget {
  const MallEntryPromoBadge({
    super.key,
    required this.visible,
    required this.label,
    required this.child,
    this.top = -4,
    this.right = -20,
  });

  final bool visible;
  final String label;
  final Widget child;
  final double top;
  final double right;

  static const _singleCharacterWidth = 30.0;
  static const _badgeHeight = 18.0;

  @override
  Widget build(BuildContext context) {
    final text = label.trim();
    if (!visible || text.isEmpty) return child;
    final isSingleCharacter = text.runes.length == 1;
    return Stack(
      clipBehavior: Clip.none,
      children: [
        child,
        Positioned(
          top: top,
          right: isSingleCharacter ? right : right + 8,
          child: IgnorePointer(
            child: Badge(
              key: const ValueKey('mall-entry-promo-badge'),
              backgroundColor: const Color(0xFFE7473C),
              textColor: Colors.white,
              largeSize: isSingleCharacter ? _badgeHeight : null,
              textStyle: const TextStyle(
                fontSize: 9,
                fontWeight: FontWeight.w600,
                height: 1,
              ),
              padding: isSingleCharacter
                  ? EdgeInsets.zero
                  : const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
              label: isSingleCharacter
                  ? SizedBox(
                      key: const ValueKey('mall-entry-promo-badge-label'),
                      width: _singleCharacterWidth,
                      height: _badgeHeight,
                      child: Center(
                        child: Text(
                          text,
                          maxLines: 1,
                          textAlign: TextAlign.center,
                          strutStyle: const StrutStyle(
                            height: 1,
                            leading: 0,
                            forceStrutHeight: true,
                          ),
                        ),
                      ),
                    )
                  : Text(
                      text,
                      key: const ValueKey('mall-entry-promo-badge-label'),
                      maxLines: 1,
                    ),
            ),
          ),
        ),
      ],
    );
  }
}