import 'package:flutter/material.dart';
import 'package:ainoval/utils/web_theme.dart';

/// 浮动卡片配置
class FloatingCardConfig {
  final double? width;
  final double? height;
  final double? minWidth;
  final double? maxWidth;
  final double? minHeight;
  final double? maxHeight;
  final EdgeInsets? margin;
  final EdgeInsets? padding;
  final BorderRadius? borderRadius;
  final Color? backgroundColor;
  final List<BoxShadow>? shadows;
  final Border? border;
  final Duration animationDuration;
  final Curve animationCurve;
  final bool showCloseButton;
  final bool closeOnBackgroundTap;
  final bool enableBackgroundTap;
  final bool showFloatingCloseButton;

  const FloatingCardConfig({
    this.width,
    this.height,
    this.minWidth = 300.0,
    this.maxWidth = 800.0,
    this.minHeight = 200.0,
    this.maxHeight = 600.0,
    this.margin,
    this.padding,
    this.borderRadius,
    this.backgroundColor,
    this.shadows,
    this.border,
    this.animationDuration = const Duration(milliseconds: 300),
    this.animationCurve = Curves.easeOutCubic,
    this.showCloseButton = true,
    this.closeOnBackgroundTap = false,
    this.enableBackgroundTap = true,
    this.showFloatingCloseButton = true,
  });
}

/// 浮动卡片位置配置
class FloatingCardPosition {
  final double? left;
  final double? top;
  final double? right;
  final double? bottom;
  final Alignment? alignment;
  final double? offsetFromSidebar;

  const FloatingCardPosition({
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.alignment,
    this.offsetFromSidebar,
  });

  /// 默认居中位置
  static const center = FloatingCardPosition(alignment: Alignment.center);
  
  /// 从侧边栏偏移的位置
  static FloatingCardPosition fromSidebar({
    required double sidebarWidth,
    double offset = 16.0,
    double top = 80.0,
  }) {
    return FloatingCardPosition(
      left: sidebarWidth + offset,
      top: top,
    );
  }
}

/// 通用浮动卡片管理器
class FloatingCard {
  static OverlayEntry? _overlayEntry;
  static bool _isShowing = false;

  /// 显示浮动卡片
  static void show({
    required BuildContext context,
    required Widget child,
    FloatingCardConfig config = const FloatingCardConfig(),
    FloatingCardPosition position = FloatingCardPosition.center,
    VoidCallback? onClose,
    String? title,
    List<Widget>? actions,
  }) {
    if (_isShowing) {
      hide();
    }

    _overlayEntry = _createOverlayEntry(
      context: context,
      child: child,
      config: config,
      position: position,
      onClose: onClose,
      title: title,
      actions: actions,
    );

    Overlay.of(context).insert(_overlayEntry!);
    _isShowing = true;
  }

  /// 隐藏浮动卡片
  static void hide() {
    if (_overlayEntry != null) {
      _overlayEntry!.remove();
      _overlayEntry = null;
      _isShowing = false;
    }
  }

  /// 检查是否正在显示
  static bool get isShowing => _isShowing;

  /// 创建 Overlay 条目
  static OverlayEntry _createOverlayEntry({
    required BuildContext context,
    required Widget child,
    required FloatingCardConfig config,
    required FloatingCardPosition position,
    VoidCallback? onClose,
    String? title,
    List<Widget>? actions,
  }) {
    return OverlayEntry(
      builder: (context) => Stack(
        children: [
          // 背景遮罩
          if (config.enableBackgroundTap)
            Positioned.fill(
              child: GestureDetector(
                onTap: config.closeOnBackgroundTap ? (onClose ?? hide) : null,
                child: Container(
                  color: config.closeOnBackgroundTap 
                      ? Colors.black.withOpacity(0.3)
                      : Colors.transparent,
                ),
              ),
            )
          else
            Positioned.fill(
              child: IgnorePointer(
                ignoring: true,
                child: Container(color: Colors.transparent),
              ),
            ),
          
          // 浮动卡片
          _FloatingCardWidget(
            child: child,
            config: config,
            position: position,
            onClose: onClose ?? hide,
            title: title,
            actions: actions,
          ),
        ],
      ),
    );
  }
}

/// 浮动卡片组件
class _FloatingCardWidget extends StatefulWidget {
  final Widget child;
  final FloatingCardConfig config;
  final FloatingCardPosition position;
  final VoidCallback onClose;
  final String? title;
  final List<Widget>? actions;

  const _FloatingCardWidget({
    required this.child,
    required this.config,
    required this.position,
    required this.onClose,
    this.title,
    this.actions,
  });

  @override
  State<_FloatingCardWidget> createState() => _FloatingCardWidgetState();
}

class _FloatingCardWidgetState extends State<_FloatingCardWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _slideAnimation;
  late Animation<double> _fadeAnimation;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    
    _animationController = AnimationController(
      duration: widget.config.animationDuration,
      vsync: this,
    );

    _slideAnimation = Tween<double>(
      begin: 400.0,  // 改为和原来相同的滑入距离
      end: 0.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: widget.config.animationCurve,
    ));

    _fadeAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeOut,
    ));

    _scaleAnimation = Tween<double>(
      begin: 0.8,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeOutBack,  // 保持和原来相同的动画曲线
    ));

    _animationController.forward();
  }

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

  void _handleClose() {
    _animationController.reverse().then((_) {
      widget.onClose();
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) => _buildPositionedCard(),
    );
  }

  Widget _buildPositionedCard() {
    final screenSize = MediaQuery.of(context).size;
    
    // 计算位置
    double? left = widget.position.left;
    double? top = widget.position.top;
    double? right = widget.position.right;
    double? bottom = widget.position.bottom;
    
    if (widget.position.alignment != null) {
      final alignment = widget.position.alignment!;
      final cardWidth = _calculateCardWidth(screenSize);
      final cardHeight = _calculateCardHeight(screenSize);
      
      switch (alignment) {
        case Alignment.center:
          left = (screenSize.width - cardWidth) / 2;
          top = (screenSize.height - cardHeight) / 2;
          break;
        case Alignment.topCenter:
          left = (screenSize.width - cardWidth) / 2;
          top = 50;
          break;
        case Alignment.bottomCenter:
          left = (screenSize.width - cardWidth) / 2;
          bottom = 50;
          break;
        // 可以添加更多对齐方式
      }
    }

    return Stack(
      children: [
        // 主卡片
        Positioned(
          left: left,
          top: top,
          right: right,
          bottom: bottom,
          child: Transform.translate(
            offset: Offset(_slideAnimation.value, 0),
            child: Transform.scale(
              scale: _scaleAnimation.value,
              child: Opacity(
                opacity: _fadeAnimation.value,
                child: _buildCard(context),
              ),
            ),
          ),
        ),
        
        // 浮动关闭按钮
        if (widget.config.showFloatingCloseButton)
          Positioned(
            left: (left ?? 0) - 12,
            top: (top ?? 0) - 12,
            child: Transform.translate(
              offset: Offset(_slideAnimation.value, 0),
              child: Transform.scale(
                scale: _scaleAnimation.value,
                child: Opacity(
                  opacity: _fadeAnimation.value,
                  child: _buildFloatingCloseButton(),
                ),
              ),
            ),
          ),
      ],
    );
  }

  double _calculateCardWidth(Size screenSize) {
    if (widget.config.width != null) return widget.config.width!;
    
    double width = screenSize.width * 0.4; // 默认40%屏幕宽度
    
    if (widget.config.minWidth != null) {
      width = width.clamp(widget.config.minWidth!, double.infinity);
    }
    if (widget.config.maxWidth != null) {
      width = width.clamp(0, widget.config.maxWidth!);
    }
    
    return width;
  }

  double _calculateCardHeight(Size screenSize) {
    if (widget.config.height != null) return widget.config.height!;
    
    double height = screenSize.height * 0.6; // 默认60%屏幕高度
    
    if (widget.config.minHeight != null) {
      height = height.clamp(widget.config.minHeight!, double.infinity);
    }
    if (widget.config.maxHeight != null) {
      height = height.clamp(0, widget.config.maxHeight!);
    }
    
    return height;
  }

  Widget _buildCard(BuildContext context) {
    final isDark = WebTheme.isDarkMode(context);
    final screenSize = MediaQuery.of(context).size;
    
    final cardWidth = _calculateCardWidth(screenSize);
    final cardHeight = _calculateCardHeight(screenSize);

    return Material(
      color: Colors.transparent,
      child: GestureDetector(
        onTap: () {}, // 阻止点击穿透
        child: Container(
          width: cardWidth,
          height: cardHeight,
          margin: widget.config.margin,
          padding: widget.config.padding,
          decoration: BoxDecoration(
            color: widget.config.backgroundColor ?? 
                (isDark ? WebTheme.darkGrey100 : WebTheme.getBackgroundColor(context)),
            borderRadius: widget.config.borderRadius ?? 
                BorderRadius.circular(12),
            border: widget.config.border ?? 
                Border.all(
                  color: isDark 
                      ? WebTheme.darkGrey800
                      : WebTheme.getShadowColor(context, opacity: 0.05),
                  width: 1,
                ),
            boxShadow: widget.config.shadows ?? [
              BoxShadow(
                color: WebTheme.getShadowColor(context, opacity: 0.2),
                offset: const Offset(0, 8),
                blurRadius: 32,
                spreadRadius: 0,
              ),
            ],
          ),
          child: Column(
            children: [
              // 头部（如果有标题或动作）
              if (widget.title != null || 
                  widget.actions != null || 
                  (widget.config.showCloseButton && !widget.config.showFloatingCloseButton))
                _buildHeader(isDark),
              
              // 内容区域
              Expanded(child: widget.child),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader(bool isDark) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: isDark ? WebTheme.darkGrey800 : WebTheme.getBorderColor(context),
            width: 1,
          ),
        ),
      ),
      child: Row(
        children: [
          // 标题
          if (widget.title != null)
            Expanded(
              child: Text(
                widget.title!,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: isDark ? WebTheme.grey100 : WebTheme.grey900,
                ),
              ),
            ),
          
          // 自定义操作按钮
          if (widget.actions != null) ...[
            ...widget.actions!,
            const SizedBox(width: 8),
          ],
          
          // 关闭按钮（仅在不显示浮动关闭按钮时显示）
          if (widget.config.showCloseButton && !widget.config.showFloatingCloseButton)
            IconButton(
              onPressed: _handleClose,
              icon: Icon(
                Icons.close,
                size: 20,
                color: isDark ? WebTheme.grey400 : WebTheme.grey600,
              ),
              style: IconButton.styleFrom(
                padding: EdgeInsets.zero,
                minimumSize: const Size(32, 32),
                backgroundColor: Colors.transparent,
              ),
            ),
        ],
      ),
    );
  }

  /// 构建浮动关闭按钮
  Widget _buildFloatingCloseButton() {
    return Material(
      elevation: 8,
      shape: const CircleBorder(),
      color: Colors.black87,
      child: InkWell(
        onTap: _handleClose,
        customBorder: const CircleBorder(),
        child: Container(
          width: 24,
          height: 24,
          decoration: const BoxDecoration(
            color: Colors.black87,
            shape: BoxShape.circle,
          ),
          child: const Icon(
            Icons.close,
            color: Colors.white,
            size: 16,
          ),
        ),
      ),
    );
  }
}