import 'package:flutter/material.dart';

/// 响应式布局工具类
/// 目标屏幕: 1920x1080
class ResponsiveLayout {
  static const double targetWidth = 1920;
  static const double targetHeight = 1080;

  /// 获取屏幕宽度比例
  static double widthPercent(BuildContext context, double percent) {
    return MediaQuery.of(context).size.width * percent;
  }

  /// 获取屏幕高度比例
  static double heightPercent(BuildContext context, double percent) {
    return MediaQuery.of(context).size.height * percent;
  }

  /// 基于目标屏幕缩放宽度
  static double scaleWidth(BuildContext context, double targetValue) {
    final screenWidth = MediaQuery.of(context).size.width;
    return targetValue * (screenWidth / targetWidth);
  }

  /// 基于目标屏幕缩放高度
  static double scaleHeight(BuildContext context, double targetValue) {
    final screenHeight = MediaQuery.of(context).size.height;
    return targetValue * (screenHeight / targetHeight);
  }

  /// 基于目标屏幕缩放字体
  static double scaleFont(BuildContext context, double targetFontSize) {
    return scaleWidth(context, targetFontSize);
  }

  /// 预设布局尺寸
  static double sidebarWidth(BuildContext context) => widthPercent(context, 0.25);  // 480px on 1920
  static double detailWidth(BuildContext context) => widthPercent(context, 0.21);   // 400px on 1920
  static double navWidth(BuildContext context) => widthPercent(context, 0.15);     // 280px on 1920
  static double cardWidth(BuildContext context) => widthPercent(context, 0.30);    // ~576px
}

/// 响应式间距
class ResponsiveSpacing {
  static double small(BuildContext context) => ResponsiveLayout.scaleWidth(context, 8);
  static double medium(BuildContext context) => ResponsiveLayout.scaleWidth(context, 16);
  static double large(BuildContext context) => ResponsiveLayout.scaleWidth(context, 24);
  static double xlarge(BuildContext context) => ResponsiveLayout.scaleWidth(context, 32);
}