unionflow-server-api/unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/test_rectangular_buttons.dart

/// Test rapide pour vérifier les boutons rectangulaires compacts
/// Démontre les nouvelles dimensions et le format rectangulaire
library test_rectangular_buttons;

import 'package:flutter/material.dart';
import '../../../../core/design_system/tokens/color_tokens.dart';
import '../../../../core/design_system/tokens/spacing_tokens.dart';
import '../../../../core/design_system/tokens/typography_tokens.dart';
import 'dashboard_quick_action_button.dart';
import 'dashboard_quick_actions_grid.dart';

/// Page de test pour les boutons rectangulaires
class TestRectangularButtonsPage extends StatelessWidget {
  const TestRectangularButtonsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Boutons Rectangulaires - Test'),
        backgroundColor: ColorTokens.primary,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(SpacingTokens.md),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSectionTitle('🔲 Boutons Rectangulaires Compacts'),
            const SizedBox(height: SpacingTokens.md),
            _buildIndividualButtons(),
            
            const SizedBox(height: SpacingTokens.xl),
            _buildSectionTitle('📊 Grilles avec Format Rectangulaire'),
            const SizedBox(height: SpacingTokens.md),
            _buildGridLayouts(),
            
            const SizedBox(height: SpacingTokens.xl),
            _buildSectionTitle('📏 Comparaison des Dimensions'),
            const SizedBox(height: SpacingTokens.md),
            _buildDimensionComparison(),
          ],
        ),
      ),
    );
  }

  /// Construit un titre de section
  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: TypographyTokens.headlineMedium.copyWith(
        fontWeight: FontWeight.w700,
        color: ColorTokens.primary,
      ),
    );
  }

  /// Test des boutons individuels
  Widget _buildIndividualButtons() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Boutons Individuels - Largeur Réduite de Moitié',
          style: TypographyTokens.titleMedium.copyWith(
            fontWeight: FontWeight.w600,
          ),
        ),
        const SizedBox(height: SpacingTokens.md),
        
        // Ligne de boutons rectangulaires
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              width: 100, // Largeur réduite
              height: 70,  // Hauteur rectangulaire
              child: DashboardQuickActionButton(
                action: DashboardQuickAction.primary(
                  icon: Icons.add,
                  title: 'Ajouter',
                  subtitle: 'Nouveau',
                  onTap: () => _showMessage('Bouton Ajouter'),
                ),
              ),
            ),
            SizedBox(
              width: 100,
              height: 70,
              child: DashboardQuickActionButton(
                action: DashboardQuickAction.success(
                  icon: Icons.check,
                  title: 'Valider',
                  subtitle: 'OK',
                  onTap: () => _showMessage('Bouton Valider'),
                ),
              ),
            ),
            SizedBox(
              width: 100,
              height: 70,
              child: DashboardQuickActionButton(
                action: DashboardQuickAction.warning(
                  icon: Icons.warning,
                  title: 'Alerte',
                  subtitle: 'Urgent',
                  onTap: () => _showMessage('Bouton Alerte'),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  /// Test des grilles avec différents layouts
  Widget _buildGridLayouts() {
    return const Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Grille compacte 2x2
        DashboardQuickActionsGrid.compact(
          title: 'Grille Compacte 2x2 - Format Rectangulaire',
        ),
        
        SizedBox(height: SpacingTokens.xl),
        
        // Grille étendue 3x2
        DashboardQuickActionsGrid.expanded(
          title: 'Grille Étendue 3x2 - Boutons Plus Petits',
          subtitle: 'Ratio d\'aspect 1.5 au lieu de 2.0',
        ),
        
        SizedBox(height: SpacingTokens.xl),
        
        // Carrousel horizontal
        DashboardQuickActionsGrid.carousel(
          title: 'Carrousel - Hauteur Réduite (90px)',
        ),
      ],
    );
  }

  /// Comparaison visuelle des dimensions
  Widget _buildDimensionComparison() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Comparaison Avant/Après',
          style: TypographyTokens.titleMedium.copyWith(
            fontWeight: FontWeight.w600,
          ),
        ),
        const SizedBox(height: SpacingTokens.md),
        
        // Simulation ancien format (plus large)
        Container(
          padding: const EdgeInsets.all(SpacingTokens.sm),
          decoration: BoxDecoration(
            color: ColorTokens.error.withOpacity(0.1),
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: ColorTokens.error.withOpacity(0.3)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '❌ AVANT - Trop Large (140x100)',
                style: TypographyTokens.labelMedium.copyWith(
                  color: ColorTokens.error,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: SpacingTokens.sm),
              Container(
                width: 140,
                height: 100,
                decoration: BoxDecoration(
                  color: ColorTokens.primary.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: ColorTokens.primary.withOpacity(0.3)),
                ),
                child: const Center(
                  child: Text('Ancien Format\n140x100'),
                ),
              ),
            ],
          ),
        ),
        
        const SizedBox(height: SpacingTokens.md),
        
        // Nouveau format (rectangulaire compact)
        Container(
          padding: const EdgeInsets.all(SpacingTokens.sm),
          decoration: BoxDecoration(
            color: ColorTokens.success.withOpacity(0.1),
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: ColorTokens.success.withOpacity(0.3)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '✅ APRÈS - Rectangulaire Compact (100x70)',
                style: TypographyTokens.labelMedium.copyWith(
                  color: ColorTokens.success,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: SpacingTokens.sm),
              SizedBox(
                width: 100,
                height: 70,
                child: DashboardQuickActionButton(
                  action: DashboardQuickAction.success(
                    icon: Icons.thumb_up,
                    title: 'Nouveau',
                    subtitle: '100x70',
                    onTap: () => _showMessage('Nouveau Format!'),
                  ),
                ),
              ),
            ],
          ),
        ),
        
        const SizedBox(height: SpacingTokens.md),
        
        // Résumé des améliorations
        Container(
          padding: const EdgeInsets.all(SpacingTokens.md),
          decoration: BoxDecoration(
            color: ColorTokens.primary.withOpacity(0.1),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '📊 Améliorations Apportées',
                style: TypographyTokens.titleSmall.copyWith(
                  fontWeight: FontWeight.w600,
                  color: ColorTokens.primary,
                ),
              ),
              const SizedBox(height: SpacingTokens.sm),
              const Text('• Largeur réduite de 50% (140px → 100px)'),
              const Text('• Hauteur optimisée (100px → 70px)'),
              const Text('• Format rectangulaire plus compact'),
              const Text('• Bordures moins arrondies (12px → 6px)'),
              const Text('• Espacement réduit entre éléments'),
              const Text('• Ratio d\'aspect optimisé (2.2 → 1.6)'),
            ],
          ),
        ),
      ],
    );
  }

  /// Affiche un message de test
  void _showMessage(String message) {
    // Note: Cette méthode nécessiterait un BuildContext pour afficher un SnackBar
    // Dans un vrai contexte, on utiliserait ScaffoldMessenger
    debugPrint('Test: $message');
  }
}