هل يمكنني جعل كل الحقول الذي يقوم بادخالها المستخدم فارغة في الكود مثل مده الصلاحية 
والكمية وعدد الساعات
والبادئة
وعدد خانات اسم المستخدم 
وعدد خانات كلمة السر وعدد الكروت المراد انشائها 
للعلم الكود
import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:open_file/open_file.dart';
import 'package:router_os_client/router_os_client.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:path_provider/path_provider.dart';

class AddHotspotCardsPage extends StatefulWidget {
  final RouterOSClient client;
  const AddHotspotCardsPage({super.key, required this.client});

  @override
  State<AddHotspotCardsPage> createState() => _AddHotspotCardsPageState();
}

class _AddHotspotCardsPageState extends State<AddHotspotCardsPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final _singleUserFormKey = GlobalKey<FormState>();
  final _multiUserFormKey = GlobalKey<FormState>();
  int _numberOfCards = 45;
  int _digitsCount = 7;
  double _usernameFontSize = 12.0;
  double _passwordFontSize = 12.0;
  String _profile = 'default';
  List<String> _availableProfiles = [];
  String _usernamePrefix = '';
  String _username = '';
  String _password = '';
  int _validityDays = 30;
  int _limitBytes = 250;
  int _limitHours = 0;
  bool _isLoading = false;
  double _progress = 0.0;
  String _progressMessage = '';
  File? _backgroundImage;
  Offset _usernamePosition = Offset(0.3, 0.7);
  Offset _passwordPosition = Offset(0.3, 0.8);
  bool _isDraggingUsername = false;
  bool _isDraggingPassword = false;
  Uint8List? _imageBytes;
  String _generationType = 'username_only';
  final List<Map<String, String>> _generatedCards = [];
  bool _showCounter = false;
  String _dataUnit = 'MB';
  int _successfulCards = 0;
  int _failedCards = 0;
  int _rowsPerPage = 15;
  int _columnsPerPage = 3;
  int _usernameDigitsCount = 7;
  int _passwordDigitsCount = 8;
  double _actualImageWidth = 0.0;
  double _actualImageHeight = 0.0;
  double _previewCardWidth = 400;
  double _previewCardHeight = 250;
  Color _primaryColor = const Color(0xFF3B82F6);
  Color _backgroundColor = const Color(0xFF0A192F);
  Color _cardColor = const Color(0xFF172A46);
  Color _textColor = Colors.white;

  int _calculateLimitBytes(int value, String unit) {
    switch (unit) {
      case 'MB':
        return value * 1024 * 1024;
      case 'GB':
        return value * 1024 * 1024 * 1024;
      default:
        return value;
    }
  }

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _fetchHotspotProfiles();
  }

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

  Future<void> _fetchHotspotProfiles() async {
    setState(() {
      _isLoading = true;
      _progressMessage = 'جلب قائمة البروفايلات...';
    });
    try {
      final response = await widget.client.talk([
        '/ip/hotspot/user/profile/print',
      ]);
      final profiles =
          response
              .where((item) => item.containsKey('name'))
              .map((item) => item['name'] as String)
              .toList();
      if (profiles.isNotEmpty) {
        setState(() {
          _availableProfiles = profiles;
          _profile = profiles.first;
        });
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('خطأ في جلب البروفايلات: $e'),
            backgroundColor: Colors.red,
          ),
        );
      }
    } finally {
      if (mounted) {
        setState(() {
          _isLoading = false;
        });
      }
    }
  }

  Future<void> _generateHotspotCards() async {
    // أضف هذا في بداية دالة _generateHotspotCards
    if (_backgroundImage == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('الرجاء اختيار صورة خلفية أولاً'),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }

    final formKey =
        _tabController.index == 0 ? _singleUserFormKey : _multiUserFormKey;
    if (!formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('الرجاء ملء جميع الحقول المطلوبة'),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }
    int calculatedLimitBytes =
        _limitBytes > 0 ? _calculateLimitBytes(_limitBytes, _dataUnit) : 0;
    int totalMinutes = _limitHours * 60;
    setState(() {
      _isLoading = true;
      _progress = 0.0;
      _progressMessage = 'بدء إنشاء الكروت...';
      _generatedCards.clear();
      _showCounter = true;
      _successfulCards = 0;
      _failedCards = 0;
    });

    final uniqueUsernames = <String>{};

    for (int i = 0; i < _numberOfCards; i++) {
      late String username;
      late String password;

      // الدوال الجديدة المستقلة
      String _generateUsernameOnly(int index, Set<String> uniqueUsernames) {
        final random = Random();
        String generatedUsername;
        do {
          final number = random.nextInt(pow(10, _usernameDigitsCount).toInt());
          generatedUsername =
              '$_usernamePrefix${number.toString().padLeft(_usernameDigitsCount, '0')}';
        } while (uniqueUsernames.contains(generatedUsername));

        uniqueUsernames.add(generatedUsername);
        return generatedUsername;
      }

      Map<String, String> _generateSimilarCredentials(
        int index,
        Set<String> uniqueUsernames,
      ) {
        final random = Random();
        String generatedUsername;
        do {
          final number = random.nextInt(pow(10, _usernameDigitsCount).toInt());
          generatedUsername =
              '$_usernamePrefix${number.toString().padLeft(_usernameDigitsCount, '0')}';
        } while (uniqueUsernames.contains(generatedUsername));

        uniqueUsernames.add(generatedUsername);
        return {'username': generatedUsername, 'password': generatedUsername};
      }

      Map<String, String> _generateUniqueCredentials(
        int index,
        Set<String> uniqueUsernames,
      ) {
        final random = Random.secure();
        String username;
        String password;

        do {
          final number = random.nextInt(pow(10, _usernameDigitsCount).toInt());
          username =
              '${_usernamePrefix}${number.toString().padLeft(_usernameDigitsCount, '0')}';
          password = _generateRandomPassword();
        } while (uniqueUsernames.contains(username));

        uniqueUsernames.add(username);
        return {'username': username, 'password': password};
      }

      // الكود المعدل في دالة _generateHotspotCards()
      if (_tabController.index == 0) {
        // حالة المستخدم الواحد
        username = _username;
        password = _password;
      } else {
        // حالة مجموعة المستخدمين
        switch (_generationType) {
          case 'username_only':
            username = _generateUsernameOnly(i, uniqueUsernames);
            password = '';
            break;
          case 'similar_username':
            final credentials = _generateSimilarCredentials(i, uniqueUsernames);
            username = credentials['username']!;
            password = credentials['password']!;

            break;
          case 'unique_credentials':
            final credentials = _generateUniqueCredentials(i, uniqueUsernames);
            username = credentials['username']!;
            password = credentials['password']!;
            break;
          default:
            username = '${_usernamePrefix}${i + 1}';
            password = _generateRandomPassword();
        }
      }

      try {
        final now = DateTime.now();
        final expiryDate = now.add(Duration(days: _validityDays));
        final formattedNow =
            '${now.year}-${now.month.toString().padLeft(2, '0')}-${now.day.toString().padLeft(2, '0')}';
        final expiryDateStr =
            '${expiryDate.year}-${expiryDate.month.toString().padLeft(2, '0')}-${expiryDate.day.toString().padLeft(2, '0')}';

        final totalMinutes = (_validityDays * 24 * 60) + (_limitHours * 60);

        await widget.client.talk([
          '/ip/hotspot/user/add',
          '=name=$username',
          if (password.isNotEmpty) '=password=$password',
          '=profile=$_profile',
          if (_validityDays > 0 || _limitHours > 0)
            '=comment=Added on $formattedNow, Valid until $expiryDateStr',
          if (calculatedLimitBytes > 0)
            '=limit-bytes-total=$calculatedLimitBytes',
          if (_validityDays > 0 || _limitHours > 0)
            '=limit-uptime=${totalMinutes}m',
        ]);

        setState(() {
          _successfulCards++;
        });
        _generatedCards.add({'username': username, 'password': password});
      } catch (e) {
        setState(() {
          _failedCards++;
        });
      }

      setState(() {
        _progress = (i + 1) / _numberOfCards;
        _progressMessage = 'جاري إضافة الكروت... ${i + 1}/$_numberOfCards';
      });
    }

    await Future.delayed(const Duration(milliseconds: 500));
    setState(() {
      _showCounter = false;
    });

    if (mounted) {
      final message =
          _successfulCards > 0
              ? 'تم إنشاء $_successfulCards كرت بنجاح${_failedCards > 0 ? ' (فشل $_failedCards)' : ''}'
              : 'فشل في إنشاء جميع الكروت';
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(message),
          backgroundColor: _successfulCards > 0 ? Colors.green : Colors.red,
          duration: const Duration(seconds: 5),
        ),
      );
    }

    setState(() {
      _isLoading = false;
      _progress = 0.0;
    });
    await _generateAndSavePdf();
  }

  String _generateRandomPassword() {
    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
    final random = Random.secure(); // استخدام Random.secure() بدلاً من Random()
    return String.fromCharCodes(
      Iterable.generate(
        _passwordDigitsCount,
        (_) => chars.codeUnitAt(random.nextInt(chars.length)),
      ),
    );
  }

  Future<void> _pickBackgroundImage() async {
    final result = await FilePicker.platform.pickFiles(
      type: FileType.image,
      allowMultiple: false,
    );
    if (result != null && result.files.isNotEmpty) {
      final file = File(result.files.single.path!);
      final bytes = await file.readAsBytes();

      final image = FileImage(file);
      final completer = Completer<ImageInfo>();
      image
          .resolve(ImageConfiguration())
          .addListener(
            ImageStreamListener((info, _) {
              if (!completer.isCompleted) {
                completer.complete(info);
              }
            }),
          );

      final imageInfo = await completer.future;
      final imageWidth = imageInfo.image.width.toDouble();
      final imageHeight = imageInfo.image.height.toDouble();

      setState(() {
        _backgroundImage = file;
        _imageBytes = bytes;
        _actualImageWidth = imageWidth;
        _actualImageHeight = imageHeight;
        // ضبط المواضع الافتراضية في المنتصف
        _usernamePosition = Offset(0.5, 0.4);
        _passwordPosition = Offset(0.5, 0.6);
      });
    }
  }

  Future<void> _generateAndSavePdf() async {
    if (_imageBytes == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('الرجاء اختيار صورة خلفية أولاً'),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }

    setState(() {
      _isLoading = true;
      _progressMessage = 'جاري إنشاء ملف PDF...';
    });

    try {
      final pdf = pw.Document(compress: true);
      final image = pw.MemoryImage(_imageBytes!);
      const pageFormat = PdfPageFormat.a4;
      const horizontalMargin = 5.0;
      const verticalMargin = 5.0;
      const spacingBetweenCards = 3.0;
      const spacingBetweenRows = 3.0;
      const offsetX = 3.0; // تحريك لليمين
      const offsetY = -5.0; // تحريك للأعلى

      final availableWidth = pageFormat.width - (horizontalMargin * 2);
      final availableHeight = pageFormat.height - (verticalMargin * 2);

      final cardWidth =
          (availableWidth - ((_columnsPerPage - 1) * spacingBetweenCards)) /
          _columnsPerPage;
      final cardHeight =
          (availableHeight - ((_rowsPerPage - 1) * spacingBetweenRows)) /
          _rowsPerPage;

      final cardsPerPage = _rowsPerPage * _columnsPerPage;
      final totalPages = (_generatedCards.length / cardsPerPage).ceil();

      for (int pageNum = 0; pageNum < totalPages; pageNum++) {
        final startIndex = pageNum * cardsPerPage;
        final endIndex = min(startIndex + cardsPerPage, _generatedCards.length);
        final rows = <pw.Widget>[];

        for (int row = 0; row < _rowsPerPage; row++) {
          final cardIndex = startIndex + (row * _columnsPerPage);
          if (cardIndex >= endIndex) break;
          final rowCards = <pw.Widget>[];

          for (int col = 0; col < _columnsPerPage; col++) {
            final index = cardIndex + col;
            if (index >= endIndex) break;
            final card = _generatedCards[index];

            // المواقع المحسوبة باستخدام نسب المعاينة
            final usernameX = _usernamePosition.dx * cardWidth;
            final usernameY = _usernamePosition.dy * cardHeight;
            final passwordX = _passwordPosition.dx * cardWidth;
            final passwordY = _passwordPosition.dy * cardHeight;

            rowCards.add(
              pw.Container(
                width: cardWidth,
                height: cardHeight,
                margin: pw.EdgeInsets.only(
                  right: col < _columnsPerPage - 1 ? spacingBetweenCards : 0,
                  bottom: row < _rowsPerPage - 1 ? spacingBetweenRows : 0,
                ),
                decoration: pw.BoxDecoration(
                  border: pw.Border.all(color: PdfColors.black, width: 0.5),
                  image: pw.DecorationImage(image: image, fit: pw.BoxFit.fill),
                ),
                child: pw.Stack(
                  children: [
                    pw.Positioned(
                      left: (_usernamePosition.dx * cardWidth) + offsetX,
                      top: (_usernamePosition.dy * cardHeight) + offsetY,
                      child: pw.Text(
                        card['username']!,
                        style: pw.TextStyle(
                          color: PdfColors.black,
                          fontSize: _usernameFontSize,
                          fontWeight: pw.FontWeight.bold,
                        ),
                      ),
                    ),
                    if (card['password']!.isNotEmpty)
                      if (card['password']!.isNotEmpty &&
                          card['password'] != card['username'])
                        pw.Positioned(
                          left: passwordX,
                          top: passwordY,
                          child: pw.Text(
                            card['password']!,
                            style: pw.TextStyle(
                              color: PdfColors.black,
                              fontSize: _passwordFontSize,
                              fontWeight: pw.FontWeight.bold,
                            ),
                          ),
                        ),
                  ],
                ),
              ),
            );
          }

          rows.add(pw.Row(children: rowCards));
        }

        pdf.addPage(
          pw.Page(
            margin: pw.EdgeInsets.symmetric(
              horizontal: horizontalMargin,
              vertical: verticalMargin,
            ),
            pageFormat: pageFormat,
            build:
                (pw.Context context) => pw.Column(
                  children: rows,
                  mainAxisAlignment: pw.MainAxisAlignment.start,
                ),
          ),
        );
      }

      // اختيار مسار الحفظ يدوياً
      final result = await FilePicker.platform.getDirectoryPath();
      if (result == null) {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('لم يتم اختيار مسار للحفظ')),
          );
        }
        return;
      }

      // إنشاء اسم الملف مع التاريخ والوقت
      final now = DateTime.now();
      final formattedTime =
          '${now.year}-${now.month.toString().padLeft(2, "0")}-${now.day.toString().padLeft(2, "0")}_${now.hour.toString().padLeft(2, "0")}-${now.minute.toString().padLeft(2, "0")}-${now.second.toString().padLeft(2, "0")}';
      final fileName = 'كروت_الهوتسبوت_$formattedTime.pdf';
      final filePath = '$result/$fileName';

      // حفظ الملف
      final file = File(filePath);
      final pdfBytes = await pdf.save();
      await file.writeAsBytes(pdfBytes.toList());
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('تم حفظ ملف PDF بنجاح في: $filePath'),
            backgroundColor: Colors.green,
          ),
        );
        OpenFile.open(filePath);
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('خطأ في حفظ ملف PDF: $e'),
            backgroundColor: Colors.red,
          ),
        );
        debugPrint('Error: $e');
      }
    } finally {
      if (mounted) {
        setState(() => _isLoading = false);
      }
    }
  }

  Future<String?> _pickSavePath() async {
    final result = await FilePicker.platform.getDirectoryPath();
    if (result == null) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('لم يتم اختيار مسار للحفظ')),
        );
      }
      return null;
    }

    final now = DateTime.now();
    final formattedTime =
        '${now.year}-${now.month.toString().padLeft(2, "0")}-${now.day.toString().padLeft(2, "0")}_${now.hour.toString().padLeft(2, "0")}-${now.minute.toString().padLeft(2, "0")}-${now.second.toString().padLeft(2, "0")}';
    final fileName = 'كروت_الهوتسبوت_$formattedTime.pdf';
    return '$result/$fileName';
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 800) {
            return _buildDesktopLayout(context);
          } else {
            return _buildMobileLayout(context);
          }
        },
      ),
    );
  }

  Widget _buildDesktopLayout(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      body: Row(
        children: [
          Container(
            width: 280,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.05),
              border: Border(
                right: BorderSide(color: Colors.white.withOpacity(0.1)),
              ),
            ),
            child: Column(
              children: [
                const SizedBox(height: 40),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Row(
                    children: [
                      Icon(Icons.credit_card, color: _primaryColor, size: 28),
                      const SizedBox(width: 10),
                      Text(
                        'إنشاء كروت هوتسبوت',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 30),
                _buildDesktopNavigation(),
              ],
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    _backgroundColor.withOpacity(0.9),
                    _backgroundColor.withOpacity(0.7),
                  ],
                ),
              ),
              child: Column(
                children: [
                  Container(
                    height: 60,
                    color: Colors.white.withOpacity(0.05),
                    child: TabBar(
                      controller: _tabController,
                      indicatorColor: _primaryColor,
                      indicatorWeight: 3,
                      labelColor: _primaryColor,
                      unselectedLabelColor: Colors.white.withOpacity(0.5),
                      tabs: const [
                        Tab(icon: Icon(Icons.person_add), text: 'مستخدم واحد'),
                        Tab(
                          icon: Icon(Icons.group_add),
                          text: 'مجموعة مستخدمين',
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Stack(
                      children: [
                        TabBarView(
                          controller: _tabController,
                          children: [
                            _buildSingleCardTab(),
                            _buildMultipleCardsTab(),
                          ],
                        ),
                        if (_isLoading) _buildLoadingOverlay(),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDesktopNavigation() {
    return Column(
      children: [
        _buildNavItem(
          icon: Icons.person_add,
          title: 'مستخدم واحد',
          isActive: _tabController.index == 0,
          onTap: () => setState(() => _tabController.index = 0),
        ),
        _buildNavItem(
          icon: Icons.group_add,
          title: 'مجموعة مستخدمين',
          isActive: _tabController.index == 1,
          onTap: () => setState(() => _tabController.index = 1),
        ),
        const SizedBox(height: 20),
        const Divider(color: Colors.white24, height: 1),
        const SizedBox(height: 20),
        _buildNavItem(
          icon: Icons.settings,
          title: 'الإعدادات',
          isActive: false,
          onTap: () {},
        ),
        _buildNavItem(
          icon: Icons.help_outline,
          title: 'المساعدة',
          isActive: false,
          onTap: () {},
        ),
      ],
    );
  }

  Widget _buildNavItem({
    required IconData icon,
    required String title,
    required bool isActive,
    required VoidCallback onTap,
  }) {
    return InkWell(
      onTap: onTap,
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: isActive ? _primaryColor.withOpacity(0.2) : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
          border:
              isActive
                  ? Border.all(color: _primaryColor.withOpacity(0.5), width: 1)
                  : null,
        ),
        child: Row(
          children: [
            Icon(
              icon,
              color: isActive ? _primaryColor : Colors.white.withOpacity(0.7),
              size: 24,
            ),
            const SizedBox(width: 12),
            Text(
              title,
              style: TextStyle(
                color: isActive ? Colors.white : Colors.white.withOpacity(0.7),
                fontSize: 16,
                fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
              ),
            ),
            if (isActive) const Spacer(),
            if (isActive)
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  color: _primaryColor,
                  shape: BoxShape.circle,
                ),
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildMobileLayout(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      appBar: AppBar(
        title: Text(
          'إنشاء كروت هوتسبوت',
          style: TextStyle(color: _textColor, fontSize: 20),
        ),
        centerTitle: true,
        backgroundColor: _backgroundColor,
        elevation: 0,
        iconTheme: IconThemeData(color: _textColor),
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: _primaryColor,
          indicatorWeight: 3,
          labelColor: _primaryColor,
          unselectedLabelColor: Colors.white.withOpacity(0.5),
          tabs: const [
            Tab(icon: Icon(Icons.person_add), text: 'مستخدم واحد'),
            Tab(icon: Icon(Icons.group_add), text: 'مجموعة مستخدمين'),
          ],
        ),
      ),
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  _backgroundColor.withOpacity(0.9),
                  _backgroundColor.withOpacity(0.7),
                ],
              ),
            ),
            child: TabBarView(
              controller: _tabController,
              children: [_buildSingleCardTab(), _buildMultipleCardsTab()],
            ),
          ),
          if (_isLoading) _buildLoadingOverlay(),
        ],
      ),
    );
  }

  Widget _buildSingleCardTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Form(
        key: _singleUserFormKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSettingsCard('إعدادات الكرت', _buildSingleFormFields()),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed:
                  _isLoading
                      ? null
                      : () {
                        _numberOfCards = 1;
                        _generateHotspotCards();
                      },
              style: ElevatedButton.styleFrom(
                backgroundColor: _primaryColor,
                foregroundColor: _textColor,
                padding: const EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                minimumSize: const Size(double.infinity, 50),
                elevation: 3,
                shadowColor: _primaryColor.withOpacity(0.3),
              ),
              child: const Text('إنشاء الكرت'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildMultipleCardsTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Form(
        key: _multiUserFormKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSettingsCard(
              'إعدادات مجموعة الكروت',
              Column(
                children: [
                  _buildCommonFormFields(),
                  const SizedBox(height: 16),
                  Row(
                    children: [
                      Expanded(
                        child: DropdownButtonFormField<int>(
                          value: _rowsPerPage,
                          items:
                              List.generate(20, (index) => index + 1)
                                  .map(
                                    (value) => DropdownMenuItem<int>(
                                      value: value,
                                      child: Text(
                                        '$value صفوف',
                                        style: TextStyle(color: _textColor),
                                      ),
                                    ),
                                  )
                                  .toList(),
                          onChanged:
                              (value) => setState(() => _rowsPerPage = value!),
                          decoration: _buildInputDecoration(
                            'عدد الصفوف في الصفحة',
                          ),
                          dropdownColor: _cardColor,
                          style: TextStyle(color: _textColor),
                        ),
                      ),
                      const SizedBox(width: 16),
                      Expanded(
                        child: DropdownButtonFormField<int>(
                          value: _columnsPerPage,
                          items:
                              [3, 4]
                                  .map(
                                    (value) => DropdownMenuItem<int>(
                                      value: value,
                                      child: Text(
                                        '$value أعمدة',
                                        style: TextStyle(color: _textColor),
                                      ),
                                    ),
                                  )
                                  .toList(),
                          onChanged:
                              (value) =>
                                  setState(() => _columnsPerPage = value!),
                          decoration: _buildInputDecoration(
                            'عدد الأعمدة في الصفحة',
                          ),
                          dropdownColor: _cardColor,
                          style: TextStyle(color: _textColor),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed:
                  _isLoading ||
                          (_tabController.index == 0 &&
                              !_singleUserFormKey.currentState!.validate()) ||
                          (_tabController.index == 1 &&
                              !_multiUserFormKey.currentState!.validate()) ||
                          _backgroundImage == null
                      ? null
                      : _generateHotspotCards,
              style: ElevatedButton.styleFrom(
                backgroundColor:
                    _isLoading ||
                            (_tabController.index == 0 &&
                                !_singleUserFormKey.currentState!.validate()) ||
                            (_tabController.index == 1 &&
                                !_multiUserFormKey.currentState!.validate()) ||
                            _backgroundImage == null
                        ? _primaryColor.withOpacity(0.5)
                        : _primaryColor,
                foregroundColor: _textColor,
                padding: const EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                minimumSize: const Size(double.infinity, 50),
                elevation: 3,
                shadowColor: _primaryColor.withOpacity(0.3),
              ),
              child: const Text('إنشاء الكروت'),
            ),
            const SizedBox(height: 24),
            _buildDesignCard(context),
          ],
        ),
      ),
    );
  }

  InputDecoration _buildInputDecoration(String labelText, {String? hintText}) {
    return InputDecoration(
      labelText: labelText,
      hintText: hintText ?? '',
      labelStyle: TextStyle(color: _textColor.withOpacity(0.8)),
      hintStyle: TextStyle(color: _textColor.withOpacity(0.5)),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: _textColor.withOpacity(0.2)),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: _textColor.withOpacity(0.2)),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: _primaryColor),
      ),
      filled: true,
      fillColor: _textColor.withOpacity(0.05),
    );
  }

  Widget _buildSingleFormFields() {
    return Column(
      children: [
        TextFormField(
          initialValue: _username,
          decoration: _buildInputDecoration('اسم المستخدم'),
          style: TextStyle(color: _textColor),
          validator: (value) {
            if (value == null || value.isEmpty) return 'يجب إدخال اسم المستخدم';
            return null;
          },
          onChanged: (value) => setState(() => _username = value),
        ),
        const SizedBox(height: 16),
        TextFormField(
          initialValue: _password,
          obscureText: true,
          decoration: _buildInputDecoration('كلمة المرور'),
          style: TextStyle(color: _textColor),
          validator: (value) {
            if (value == null || value.isEmpty) return 'يجب إدخال كلمة المرور';
            return null;
          },
          onChanged: (value) => setState(() => _password = value),
        ),
        const SizedBox(height: 16),
        DropdownButtonFormField<String>(
          value: _profile,
          items:
              _availableProfiles
                  .map(
                    (profile) => DropdownMenuItem(
                      value: profile,
                      child: Text(profile, style: TextStyle(color: _textColor)),
                    ),
                  )
                  .toList(),
          onChanged: (value) => setState(() => _profile = value!),
          decoration: _buildInputDecoration('بروفايل الهوتسبوت'),
          dropdownColor: _cardColor,
          style: TextStyle(color: _textColor),
        ),
        const SizedBox(height: 16),
        TextFormField(
          initialValue: _validityDays.toString(),
          keyboardType: TextInputType.number,
          decoration: _buildInputDecoration('مدة الصلاحية (أيام)'),
          style: TextStyle(color: _textColor),
          validator: (value) {
            if (value == null || value.isEmpty || int.tryParse(value) == null)
              return 'يجب إدخال عدد صحيح';
            return null;
          },
          onChanged:
              (value) =>
                  setState(() => _validityDays = int.tryParse(value) ?? 30),
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Expanded(
              child: TextFormField(
                initialValue: _limitBytes.toString(),
                keyboardType: TextInputType.number,
                decoration: _buildInputDecoration(
                  'الكمية',
                  hintText: 'مثال: 20',
                ),
                style: TextStyle(color: _textColor),
                onChanged:
                    (value) =>
                        setState(() => _limitBytes = int.tryParse(value) ?? 0),
              ),
            ),
            const SizedBox(width: 8),
            DropdownButton<String>(
              value: _dataUnit,
              items: const [
                DropdownMenuItem(value: 'MB', child: Text('ميغابايت')),
                DropdownMenuItem(value: 'GB', child: Text('جيجابايت')),
              ],
              onChanged: (value) => setState(() => _dataUnit = value!),
              dropdownColor: _cardColor,
              style: TextStyle(color: _textColor),
            ),
          ],
        ),
        const SizedBox(height: 16),
        TextFormField(
          initialValue: _limitHours.toString(),
          keyboardType: TextInputType.number,
          decoration: _buildInputDecoration('عدد الساعات'),
          style: TextStyle(color: _textColor),
          onChanged:
              (value) => setState(() => _limitHours = int.tryParse(value) ?? 0),
        ),
      ],
    );
  }

  Widget _buildCommonFormFields() {
    return Column(
      children: [
        TextFormField(
          initialValue: _numberOfCards.toString(),
          keyboardType: TextInputType.number,
          decoration: _buildInputDecoration('عدد الكروت المراد إنشاؤها'),
          style: TextStyle(color: _textColor),
          validator: (value) {
            if (value == null ||
                value.isEmpty ||
                int.tryParse(value) == null ||
                int.parse(value) <= 0) {
              return 'يجب إدخال عدد صحيح موجب';
            }
            return null;
          },
          onChanged:
              (value) =>
                  setState(() => _numberOfCards = int.tryParse(value) ?? 1),
        ),
        const SizedBox(height: 16),
        DropdownButtonFormField<String>(
          value: _generationType,
          items: const [
            DropdownMenuItem(
              value: 'username_only',
              child: Text('اسم مستخدم فقط'),
            ),
            DropdownMenuItem(
              value: 'similar_username',
              child: Text('اسم مستخدم وكلمة سر متشابهين'),
            ),
            DropdownMenuItem(
              value: 'unique_credentials',
              child: Text('اسم مستخدم وكلمة سر مختلفين'),
            ),
          ],
          onChanged: (value) => setState(() => _generationType = value!),
          decoration: _buildInputDecoration('نوع التوليد'),
          dropdownColor: _cardColor,
          style: TextStyle(color: _textColor),
        ),
        const SizedBox(height: 16),
        // عناصر التحكم في حجم الخط
        Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'حجم خط رمز الدخول',
                    style: TextStyle(color: _textColor, fontSize: 16),
                  ),
                  Slider(
                    value: _usernameFontSize,
                    min: 8,
                    max: 24,
                    divisions: 16,
                    label: _usernameFontSize.toStringAsFixed(1),
                    onChanged:
                        (value) => setState(() => _usernameFontSize = value),
                    activeColor: _primaryColor,
                    inactiveColor: _textColor.withOpacity(0.3),
                  ),
                ],
              ),
            ),
            if (_generationType != 'username_only') ...[
              SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'حجم خط كلمة السر',
                      style: TextStyle(color: _textColor, fontSize: 16),
                    ),
                    Slider(
                      value: _passwordFontSize,
                      min: 8,
                      max: 24,
                      divisions: 16,
                      label: _passwordFontSize.toStringAsFixed(1),
                      onChanged:
                          (value) => setState(() => _passwordFontSize = value),
                      activeColor: _primaryColor,
                      inactiveColor: _textColor.withOpacity(0.3),
                    ),
                  ],
                ),
              ),
            ],
          ],
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Expanded(
              child: TextFormField(
                initialValue: _usernameDigitsCount.toString(),
                keyboardType: TextInputType.number,
                decoration: _buildInputDecoration('عدد خانات اسم المستخدم'),
                style: TextStyle(color: _textColor),
                validator: (value) {
                  if (value == null ||
                      value.isEmpty ||
                      int.tryParse(value) == null ||
                      int.parse(value) <= 0) {
                    return 'يجب إدخال عدد صحيح موجب';
                  }
                  return null;
                },
                onChanged:
                    (value) => setState(
                      () => _usernameDigitsCount = int.tryParse(value) ?? 7,
                    ),
              ),
            ),
            if (_generationType == 'unique_credentials') SizedBox(width: 16),
            if (_generationType == 'unique_credentials')
              Expanded(
                child: TextFormField(
                  initialValue: _passwordDigitsCount.toString(),
                  keyboardType: TextInputType.number,
                  decoration: _buildInputDecoration('عدد خانات كلمة المرور'),
                  style: TextStyle(color: _textColor),
                  validator: (value) {
                    if (value == null ||
                        value.isEmpty ||
                        int.tryParse(value) == null ||
                        int.parse(value) <= 0) {
                      return 'يجب إدخال عدد صحيح موجب';
                    }
                    return null;
                  },
                  onChanged:
                      (value) => setState(
                        () => _passwordDigitsCount = int.tryParse(value) ?? 8,
                      ),
                ),
              ),
          ],
        ),
        const SizedBox(height: 16),
        DropdownButtonFormField<String>(
          value: _profile,
          items:
              _availableProfiles
                  .map(
                    (profile) => DropdownMenuItem(
                      value: profile,
                      child: Text(profile, style: TextStyle(color: _textColor)),
                    ),
                  )
                  .toList(),
          onChanged: (value) => setState(() => _profile = value!),
          decoration: _buildInputDecoration('بروفايل الهوتسبوت'),
          dropdownColor: _cardColor,
          style: TextStyle(color: _textColor),
        ),
        const SizedBox(height: 16),
        TextFormField(
          initialValue: _usernamePrefix,
          maxLength: 2,
          decoration: _buildInputDecoration('بادئة اسم المستخدم (1-2 أحرف)'),
          style: TextStyle(color: _textColor),
          validator: (value) {
            if (value == null || value.isEmpty) return 'يجب إدخال بادئة';
            return null;
          },
          onChanged: (value) => setState(() => _usernamePrefix = value),
        ),
        const SizedBox(height: 16),

        TextFormField(
          initialValue: _validityDays.toString(),
          keyboardType: TextInputType.number,
          decoration: _buildInputDecoration('مدة الصلاحية (أيام)'),
          style: TextStyle(color: _textColor),
          validator: (value) {
            if (value == null || value.isEmpty || int.tryParse(value) == null)
              return 'يجب إدخال عدد صحيح';
            return null;
          },
          onChanged:
              (value) =>
                  setState(() => _validityDays = int.tryParse(value) ?? 30),
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Expanded(
              child: TextFormField(
                initialValue: _limitBytes.toString(),
                keyboardType: TextInputType.number,
                decoration: _buildInputDecoration(
                  'الكمية',
                  hintText: 'مثال: 20',
                ),
                style: TextStyle(color: _textColor),
                onChanged:
                    (value) =>
                        setState(() => _limitBytes = int.tryParse(value) ?? 0),
              ),
            ),
            const SizedBox(width: 8),
            DropdownButton<String>(
              value: _dataUnit,
              items: const [
                DropdownMenuItem(value: 'MB', child: Text('ميغابايت')),
                DropdownMenuItem(value: 'GB', child: Text('جيجابايت')),
              ],
              onChanged: (value) => setState(() => _dataUnit = value!),
              dropdownColor: _cardColor,
              style: TextStyle(color: _textColor),
            ),
          ],
        ),
        const SizedBox(height: 16),
        TextFormField(
          initialValue: _limitHours.toString(),
          keyboardType: TextInputType.number,
          decoration: _buildInputDecoration('عدد الساعات'),
          style: TextStyle(color: _textColor),
          onChanged:
              (value) => setState(() => _limitHours = int.tryParse(value) ?? 0),
        ),
      ],
    );
  }

  Widget _buildDesignCard(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Container(
      decoration: BoxDecoration(
        color: _cardColor,
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: _textColor.withOpacity(0.1)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'تصميم الكرت',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: _textColor,
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: _pickBackgroundImage,
              icon: Icon(Icons.image, color: _textColor),
              label: Text(
                'اختر صورة خلفية',
                style: TextStyle(color: _textColor),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: _primaryColor,
                foregroundColor: _textColor,
                padding: const EdgeInsets.symmetric(vertical: 12),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                minimumSize: const Size(double.infinity, 50),
                elevation: 3,
                shadowColor: _primaryColor.withOpacity(0.3),
              ),
            ),
            const SizedBox(height: 16),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: _textColor.withOpacity(0.05),
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: _textColor.withOpacity(0.2)),
              ),
              child: Column(
                children: [
                  // معاينة الكرت مع ميزة السحب والإفلات
                  LayoutBuilder(
                    builder: (context, constraints) {
                      // تحديد حجم المعاينة بناء على حجم الشاشة
                      final previewWidth = min(
                        constraints.maxWidth - 32,
                        _previewCardWidth,
                      );
                      final previewHeight =
                          previewWidth *
                          (_previewCardHeight / _previewCardWidth);

                      return Container(
                        width: previewWidth,
                        height: previewHeight,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          image:
                              _backgroundImage != null
                                  ? DecorationImage(
                                    image: FileImage(_backgroundImage!),
                                    fit: BoxFit.contain,
                                  )
                                  : null,
                          color:
                              _backgroundImage == null
                                  ? _textColor.withOpacity(0.1)
                                  : null,
                          border: Border.all(
                            color: _textColor.withOpacity(0.3),
                          ),
                        ),
                        child: Stack(
                          children: [
                            if (_backgroundImage == null)
                              Center(child: Text('لا توجد صورة خلفية')),
                            Positioned(
                              left: _usernamePosition.dx * previewWidth,
                              top: _usernamePosition.dy * previewHeight,
                              child: GestureDetector(
                                onPanUpdate: (details) {
                                  setState(() {
                                    _usernamePosition = Offset(
                                      (_usernamePosition.dx +
                                              details.delta.dx / previewWidth)
                                          .clamp(0.0, 1.0),
                                      (_usernamePosition.dy +
                                              details.delta.dy / previewHeight)
                                          .clamp(0.0, 1.0),
                                    );
                                  });
                                },
                                child: Container(
                                  padding: const EdgeInsets.fromLTRB(
                                    6,
                                    1,
                                    6,
                                    1,
                                  ),
                                  decoration: BoxDecoration(
                                    color: Colors.white.withOpacity(0.7),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Text(
                                    (_tabController?.index ?? 0) == 0
                                        ? _username
                                        : 'رمز الدخول',
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize:
                                          constraints.maxWidth < 400 ? 14 : 16,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            if (_generationType != 'username_only')
                              Positioned(
                                left: _passwordPosition.dx * previewWidth,
                                top: _passwordPosition.dy * previewHeight,
                                child: GestureDetector(
                                  onPanUpdate: (details) {
                                    setState(() {
                                      _passwordPosition = Offset(
                                        (_passwordPosition.dx +
                                                details.delta.dx / previewWidth)
                                            .clamp(0.0, 1.0),
                                        (_passwordPosition.dy +
                                                details.delta.dy /
                                                    previewHeight)
                                            .clamp(0.0, 1.0),
                                      );
                                    });
                                  },
                                  child: Container(
                                    padding: const EdgeInsets.fromLTRB(
                                      6,
                                      1,
                                      6,
                                      1,
                                    ),
                                    decoration: BoxDecoration(
                                      color: Colors.white.withOpacity(0.7),
                                      borderRadius: BorderRadius.circular(4),
                                    ),
                                    child: Text(
                                      'كلمة السر',
                                      style: TextStyle(
                                        color: Colors.black,
                                        fontSize:
                                            constraints.maxWidth < 400
                                                ? 14
                                                : 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                          ],
                        ),
                      );
                    },
                  ),
                  const SizedBox(height: 16),
                  // عناصر التحكم في الموقع باستخدام الأسهم
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // عنوان تحريك رمز الدخول
                      Padding(
                        padding: const EdgeInsets.only(bottom: 8.0),
                        child: Text(
                          'تحريك رمز الدخول',
                          style: TextStyle(
                            color: _textColor,
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),

                      // أزرار التحريك لرمز الدخول
                      Center(
                        child: Container(
                          padding: const EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(16),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              _buildDirectionButton(
                                icon: Icons.keyboard_arrow_up,
                                isVertical: true,
                                isNegative: true,
                                isPassword: false,
                                onPressed:
                                    () => _updatePosition(true, false, -0.01),
                              ),
                              const SizedBox(width: 8),
                              _buildDirectionButton(
                                icon: Icons.keyboard_arrow_left,
                                isVertical: false,
                                isNegative: true,
                                isPassword: false,
                                onPressed:
                                    () => _updatePosition(false, true, -0.01),
                              ),
                              const SizedBox(width: 8),
                              _buildDirectionButton(
                                icon: Icons.keyboard_arrow_right,
                                isVertical: false,
                                isNegative: false,
                                isPassword: false,
                                onPressed:
                                    () => _updatePosition(false, true, 0.01),
                              ),
                              const SizedBox(width: 8),
                              _buildDirectionButton(
                                icon: Icons.keyboard_arrow_down,
                                isVertical: true,
                                isNegative: false,
                                isPassword: false,
                                onPressed:
                                    () => _updatePosition(true, false, 0.01),
                              ),
                            ],
                          ),
                        ),
                      ),

                      if (_generationType != 'username_only') ...[
                        const SizedBox(height: 16),

                        // عنوان تحريك كلمة السر
                        Padding(
                          padding: const EdgeInsets.only(bottom: 8.0),
                          child: Text(
                            'تحريك كلمة السر',
                            style: TextStyle(
                              color: _textColor,
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),

                        // أزرار التحريك لكلمة السر
                        Center(
                          child: Container(
                            padding: const EdgeInsets.all(8),
                            decoration: BoxDecoration(
                              color: Colors.white.withOpacity(0.1),
                              borderRadius: BorderRadius.circular(16),
                            ),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                _buildDirectionButton(
                                  icon: Icons.keyboard_arrow_up,
                                  isVertical: true,
                                  isNegative: true,
                                  isPassword: false,
                                  onPressed:
                                      () => _updatePosition(true, true, 0.01),
                                ),

                                const SizedBox(width: 8),
                                _buildDirectionButton(
                                  icon: Icons.keyboard_arrow_left,
                                  isVertical: false,
                                  isNegative: true,
                                  isPassword: true,
                                  onPressed:
                                      () => _updatePosition(
                                        false,
                                        true,
                                        -0.01,
                                        isPassword: true,
                                      ),
                                ),
                                const SizedBox(width: 8),
                                _buildDirectionButton(
                                  icon: Icons.keyboard_arrow_right,
                                  isVertical: false,
                                  isNegative: false,
                                  isPassword: true,
                                  onPressed:
                                      () => _updatePosition(
                                        false,
                                        true,
                                        0.01,
                                        isPassword: true,
                                      ),
                                ),
                                const SizedBox(width: 8),
                                _buildDirectionButton(
                                  icon: Icons.keyboard_arrow_down,
                                  isVertical: true,
                                  isNegative: false,
                                  isPassword: true,
                                  onPressed:
                                      () => _updatePosition(
                                        true,
                                        false,
                                        0.01,
                                        isPassword: true,
                                      ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],

                      const SizedBox(height: 12),

                      // نص إرشادي
                      Text(
                        'يمكنك تحريك العناصر إما بالسحب والإفلات أو باستخدام الأزرار',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.7),
                          fontSize: 12,
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLoadingOverlay() {
    return Positioned.fill(
      child: Container(
        color: Colors.black54,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const CircularProgressIndicator(color: Colors.white),
              const SizedBox(height: 20),
              Text(
                _progressMessage,
                style: const TextStyle(color: Colors.white, fontSize: 18),
              ),
              const SizedBox(height: 10),
              if (_progress > 0)
                SizedBox(
                  width: 300,
                  child: LinearProgressIndicator(
                    value: _progress,
                    backgroundColor: Colors.grey[800],
                    valueColor: const AlwaysStoppedAnimation<Color>(
                      Colors.white,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  // دالة مساعدة لإنشاء أزرار الاتجاه مع دعم النقر المطول
  Widget _buildDirectionButton({
    required IconData icon,
    required VoidCallback onPressed,
    required bool isVertical,
    required bool isNegative,
    required bool isPassword,
  }) {
    Timer? _timer;

    void _startContinuousMovement() {
      _timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
        onPressed();
      });
    }

    void _stopContinuousMovement() {
      _timer?.cancel();
      _timer = null;
    }

    return GestureDetector(
      onTapDown: (_) {
        onPressed(); // تنفيذ الحركة مرة واحدة عند النقر
        _startContinuousMovement(); // بدء الحركة المستمرة
      },
      onTapUp: (_) => _stopContinuousMovement(),
      onTapCancel: () => _stopContinuousMovement(),
      child: IconButton(
        icon: Icon(icon, size: 28),
        color: _textColor,
        splashRadius: 20,
        onPressed: null, // تم التعامل مع النقر عبر GestureDetector
      ),
    );
  }

  // دالة مساعدة لتحديث الموضع
  void _updatePosition(
    bool isVertical,
    bool isNegative,
    double value, {
    bool isPassword = false,
  }) {
    setState(() {
      final position = isPassword ? _passwordPosition : _usernamePosition;
      final delta = value * (isNegative ? -1 : 1);

      if (isPassword) {
        _passwordPosition = Offset(
          isVertical ? position.dx : (position.dx + delta).clamp(0.0, 1.0),
          !isVertical ? position.dy : (position.dy + delta).clamp(0.0, 1.0),
        );
      } else {
        _usernamePosition = Offset(
          isVertical ? position.dx : (position.dx + delta).clamp(0.0, 1.0),
          !isVertical ? position.dy : (position.dy + delta).clamp(0.0, 1.0),
        );
      }
    });
  }

  Widget _buildSettingsCard(String title, Widget child) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.05),
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: Colors.white.withOpacity(0.1)),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            const SizedBox(height: 16),
            child,
          ],
        ),
      ),
    );
  }
}


ملاحظة اعطيني الجزء السابق والجزء المراد استبدالة بة