import 'package:flutter/material.dart';
import '../../core/theme/app_color_scheme.dart';
import '../../core/theme/app_spacing.dart';

/// 交易按鈕組件 - 買入/賣出按鈕
///
/// 設計規則：
/// - 漸變按鈕: 135度漸變
/// - 圓角: xxl (24px / 1.5rem)
/// - 買入: 翡翠綠漸變
/// - 賣出: 紅色漸變
class TradeButton extends StatelessWidget {
  final bool isBuy;
  final String? coinCode;
  final VoidCallback? onPressed;
  final bool isLoading;
  final bool fullWidth;

  const TradeButton({
    super.key,
    this.isBuy = true,
    this.coinCode,
    this.onPressed,
    this.isLoading = false,
    this.fullWidth = false,
  });

  /// 買入按鈕
  const TradeButton.buy({
    super.key,
    this.coinCode,
    this.onPressed,
    this.isLoading = false,
    this.fullWidth = false,
  }) : isBuy = true;

  /// 賣出按鈕
  const TradeButton.sell({
    super.key,
    this.coinCode,
    this.onPressed,
    this.isLoading = false,
    this.fullWidth = false,
  }) : isBuy = false;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    final gradient = isBuy ? AppColorScheme.buyGradient : AppColorScheme.sellGradient;
    final text = isBuy
        ? '買入${coinCode != null ? ' $coinCode' : ''}'
        : '賣出${coinCode != null ? ' $coinCode' : ''}';

    // 主題感知顏色 - 在漸變背景上使用 onPrimary
    final textColor = colorScheme.onPrimary;

    return Container(
      width: fullWidth ? double.infinity : null,
      height: 48,
      decoration: BoxDecoration(
        gradient: gradient,
        borderRadius: BorderRadius.circular(AppRadius.xxl),
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: isLoading ? null : onPressed,
          borderRadius: BorderRadius.circular(AppRadius.xxl),
          child: Center(
            child: Row(
              mainAxisSize: fullWidth ? MainAxisSize.max : MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if (isLoading)
                  SizedBox.square(
                    dimension: 16,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      color: textColor,
                    ),
                  )
                else
                  Icon(
                    isBuy ? Icons.arrow_downward_rounded : Icons.arrow_upward_rounded,
                    size: 18,
                    color: textColor,
                  ),
                const SizedBox(width: 8),
                Text(
                  text,
                  style: TextStyle(
                    color: textColor,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// 交易按鈕組 - 同時顯示買入和賣出按鈕
class TradeButtonGroup extends StatelessWidget {
  final String? coinCode;
  final VoidCallback? onBuyPressed;
  final VoidCallback? onSellPressed;
  final bool isBuyLoading;
  final bool isSellLoading;

  const TradeButtonGroup({
    super.key,
    this.coinCode,
    this.onBuyPressed,
    this.onSellPressed,
    this.isBuyLoading = false,
    this.isSellLoading = false,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TradeButton.buy(
            coinCode: coinCode,
            onPressed: onBuyPressed,
            isLoading: isBuyLoading,
          ),
        ),
        const SizedBox(width: AppSpacing.sm),
        Expanded(
          child: TradeButton.sell(
            coinCode: coinCode,
            onPressed: onSellPressed,
            isLoading: isSellLoading,
          ),
        ),
      ],
    );
  }
}