@extends('user.layouts.app')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/balance-transfer-create.css') }}">
@endsection

@section('title')
    تحويل الرصيد
@endsection

@section('content')
    <div class="content-wrapper" x-data="balanceTransfer" x-cloak>
        <div class="balance-transfer-container">

            <!-- Page Header -->
            <div class="page-header">
                <x-lucide-arrow-left-right width="24" height="24" />
                <h1>تحويل الرصيد</h1>
            </div>

            <!-- Balance Info Card -->
            <div class="balance-info-card">
                <div class="balance-info-header">
                    <x-lucide-wallet class="icon" width="20" height="20" />
                    <h3>معلومات الرصيد</h3>
                </div>
                <div class="balance-details">
                    <div class="balance-item">
                        <span class="balance-label">الرصيد الحالي</span>
                        <span class="balance-value current" x-text="formatAmount(userBalance)"></span>
                    </div>
                    <div class="balance-item">
                        <span class="balance-label">الحد الأدنى للرصيد</span>
                        <span class="balance-value minimum" x-text="formatAmount(minBalance)"></span>
                    </div>
                    <div class="balance-item">
                        <span class="balance-label">نسبة الخصم</span>
                        <span class="balance-value discount" x-text="transferRate + '%'"></span>
                    </div>
                </div>
            </div>

            <!-- Transfer Limits Warning -->
            <!--<div class="transfer-limits">-->
            <!--    <i class="bi bi-info-circle icon"></i>-->
            <!--    <div class="transfer-limits-content">-->
            <!--        <h5>حدود التحويل</h5>-->
            <!--        <p>الحد الأقصى للتحويل هو 500 {{ Auth::user()->currency->name ?? '$' }} يومياً</p>-->
            <!--        <p>لا يمكن تحويل الرصيد إلى نفس الحساب</p>-->
            <!--    </div>-->
            <!--</div>-->

            <!-- Error Message -->
            <div class="error-message" :class="{ active: errorMessage }" x-show="errorMessage">
                <x-lucide-triangle-alert class="icon" width="16" height="16" />
                <span x-text="errorMessage"></span>
            </div>

            <!-- Success Message -->
            <div class="success-message" :class="{ active: successMessage }" x-show="successMessage">
                <x-lucide-check-circle class="icon" width="16" height="16" />
                <span x-text="successMessage"></span>
            </div>

            <!-- Main Form -->
            <div class="form-container">
                <div class="form-header">
                    <h3>إجراء تحويل جديد</h3>
                    <p>أدخل رقم الجوال للمستخدم الذي تريد تحويل الرصيد إليه</p>
                </div>

                <form @submit.prevent="handleTransfer">
                    <!-- User Search Section -->
                    <div class="user-search-section">
                        <div class="input-group">
                            <label for="user-search">البحث عن المستخدم</label>
                            <div class="input-wrapper user-search-input">
                                <input type="text" id="user-search" placeholder="أدخل رقم الجوال..."
                                    x-model="searchQuery" @input="searchUsers"
                                    @focus="showDropdown = true; loadHistoryIfEmpty()"
                                    @blur="setTimeout(() => showDropdown = false, 200)" @keydown.escape="hideDropdown"
                                    @keydown.arrow-down.prevent="navigateDropdown(1)"
                                    @keydown.arrow-up.prevent="navigateDropdown(-1)"
                                    @keydown.enter.prevent="selectDropdownItem" autocomplete="off" :disabled="selectedUser">
                                <div class="search-loading" :class="{ active: searchLoading }">
                                    <x-lucide-refresh-cw class="spin" width="16" height="16" />
                                </div>
                            </div>

                            <!-- Combined Search Results and History Dropdown -->
                            <div class="search-dropdown"
                                :class="{
                                    active: showDropdown && (historyItems.length > 0 || searchResults.length > 0 || (
                                        searchQuery.length === 0 && historyItems.length === 0))
                                }">
                                <!-- History Section -->
                                <div class="dropdown-section" x-show="historyItems.length > 0 && searchQuery.length === 0">
                                    <div class="dropdown-section-header">
                                        <x-lucide-clock class="icon" width="14" height="14" />
                                        <span>التحويلات السابقة</span>
                                    </div>
                                    <template x-for="(item, index) in historyItems" :key="'history-' + item.number">
                                        <div class="dropdown-item history-item"
                                            :class="{
                                                selected: selectedDropdownIndex === index &&
                                                    dropdownSection === 'history'
                                            }"
                                            @click="selectFromHistory(item)"
                                            @mouseenter="setDropdownSelection('history', index)">
                                            <div class="dropdown-item-main">
                                                <img :src="item.image || '{{ vasset('images/default-avatar.png') }}'"
                                                    :alt="item.name" class="user-avatar"
                                                    onerror="this.src='{{ vasset('images/default-avatar.png') }}'">
                                                <div class="user-details">
                                                    <div class="user-name" x-text="item.name"></div>
                                                    <div class="user-mobile" x-text="item.number"></div>
                                                </div>
                                            </div>
                                            <div class="dropdown-item-meta">
                                                <div class="dropdown-item-badge">سابق</div>
                                                <div class="dropdown-item-date" x-text="formatDate(item.last_used)"></div>
                                            </div>
                                        </div>
                                    </template>
                                </div>

                                <!-- Empty History State -->
                                <div class="dropdown-empty" x-show="historyItems.length === 0 && searchQuery.length === 0">
                                    <x-lucide-clock width="24" height="24" />
                                    <p>لا توجد تحويلات سابقة</p>
                                    <small>ابدأ بإدخال رقم الجوال للبحث عن المستخدم</small>
                                </div>

                                <!-- Search Results Section -->
                                <div class="dropdown-section" x-show="searchResults.length > 0 && searchQuery.length > 0">
                                    <div class="dropdown-section-header">
                                        <x-lucide-search class="icon" width="14" height="14" />
                                        <span>نتائج البحث</span>
                                    </div>
                                    <template x-for="(user, index) in searchResults" :key="'search-' + user.id">
                                        <div class="dropdown-item"
                                            :class="{
                                                selected: selectedDropdownIndex === index &&
                                                    dropdownSection === 'search'
                                            }"
                                            @click="selectUser(user)" @mouseenter="setDropdownSelection('search', index)">
                                            <div class="dropdown-item-main">
                                                <img :src="user.image || '{{ vasset('images/default-avatar.png') }}'"
                                                    :alt="user.name" class="user-avatar"
                                                    onerror="this.src='{{ url('/images/default-avatar.png') }}'">
                                                <div class="user-details">
                                                    <div class="user-name" x-text="user.name"></div>
                                                    <div class="user-mobile" x-text="user.mobile"></div>
                                                </div>
                                            </div>
                                            <div class="dropdown-item-meta">
                                                <div class="dropdown-item-badge">جديد</div>
                                            </div>
                                        </div>
                                    </template>
                                </div>

                                <!-- Empty State -->
                                <div class="dropdown-empty"
                                    x-show="searchQuery.length > 0 && searchResults.length === 0 && !searchLoading">
                                    <x-lucide-search width="24" height="24" />
                                    <p>لم يتم العثور على المستخدم</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Selected User Display -->
                    <div class="selected-user-card" :class="{ active: selectedUser }">
                        <div class="selected-user-header">
                            <x-lucide-user-check class="icon" width="16" height="16" />
                            <h4>المستخدم المحدد</h4>
                            <button type="button" class="clear-selection" @click="clearSelectedUser">
                                <x-lucide-x-circle width="16" height="16" />
                            </button>
                        </div>
                        <div class="selected-user-info" x-show="selectedUser">
                            <img :src="selectedUser?.image || '{{ vasset('images/default-avatar.png') }}'"
                                :alt="selectedUser?.name" class="user-avatar"
                                onerror="this.src='{{ url('/images/default-avatar.png') }}'">
                            <div class="user-details">
                                <div class="user-name" x-text="selectedUser?.name"></div>
                                <div class="user-mobile" x-text="selectedUser?.mobile"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Amount Input -->
                    <div class="form-row" x-show="selectedUser">
                        <div class="input-group prefix">
                            <label for="amount">المبلغ المراد تحويله</label>
                            <div class="input-wrapper">
                                <span class="input-prefix">{{ Auth::user()->currency->name ?? '$' }}</span>
                                <input type="number" id="amount" x-model.number="transferAmount"
                                    @input="calculateTransferAmount" min="1" step="0.01"
                                    placeholder="أدخل المبلغ" required>
                            </div>
                        </div>
                    </div>

                    <!-- Amount Calculation -->
                    <div class="amount-calculation" x-show="selectedUser && transferAmount > 0">
                        <div class="calculation-header">
                            <x-lucide-calculator class="icon" width="16" height="16" />
                            <h4>حساب التحويل</h4>
                        </div>
                        <div class="calculation-row">
                            <span class="calculation-label">المبلغ الأساسي</span>
                            <span class="calculation-value" x-text="formatAmount(transferAmount)"></span>
                        </div>
                        <div class="calculation-row">
                            <span class="calculation-label">نسبة الخصم (<span x-text="transferRate"></span>%)</span>
                            <span class="calculation-value" x-text="formatAmount(discountAmount)"></span>
                        </div>
                        <div class="calculation-row">
                            <span class="calculation-label">المبلغ النهائي</span>
                            <span class="calculation-value final-amount" x-text="formatAmount(finalAmount)"></span>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div x-show="selectedUser" class="submit-section">
                        <button type="submit" class="submit-btn" :disabled="!canTransfer || isSubmitting"
                            :class="{ 'btn-loading': isSubmitting, 'btn-disabled': !canTransfer }">
                            <span x-show="!isSubmitting">تحويل الرصيد</span>
                            <span x-show="isSubmitting">جاري التحويل...</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('balanceTransfer', () => ({
                // User data
                userBalance: {{ Auth::user()->balance ?? 0 }},
                minBalance: {{ Auth::user()->min_balance ?? 0 }},
                transferRate: {{ Auth::user()->transfer_rate ?? 0 }},
                userCurrency: @json(Auth::user()->currency ?? null),

                // Transfer history
                transferHistory: @json($transferHistory ?? []),
                historyItems: [],

                // Dropdown functionality
                showDropdown: false,
                dropdownSection: 'history', // 'history' or 'search'
                selectedDropdownIndex: -1,

                // Search functionality
                searchQuery: '',
                searchResults: [],
                searchLoading: false,
                searchTimeout: null,

                // Selected user
                selectedUser: null,

                // Transfer amount
                transferAmount: 0,
                discountAmount: 0,
                finalAmount: 0,

                // UI state
                isSubmitting: false,
                errorMessage: '',
                successMessage: '',

                // Computed properties
                get canTransfer() {
                    const result = this.selectedUser &&
                        this.transferAmount > 0 &&
                        this.finalAmount <= (this.userBalance - this.minBalance)
                    // Debug information
                    console.log('canTransfer check:', {
                        selectedUser: !!this.selectedUser,
                        transferAmount: this.transferAmount,
                        finalAmount: this.finalAmount,
                        userBalance: this.userBalance,
                        minBalance: this.minBalance,
                        availableBalance: this.userBalance - this.minBalance,
                        result: result
                    });

                    return result;
                },

                // Methods
                init() {
                    // Initialize component
                    this.calculateTransferAmount();
                    this.loadHistoryItems();

                    // Ensure transfer history is always an array
                    if (!Array.isArray(this.transferHistory)) {
                        this.transferHistory = [];
                    }
                },

                loadHistoryItems() {
                    // Load history items with enhanced data
                    this.historyItems = (this.transferHistory || []).map(item => ({
                        ...item,
                        image: item.image || '{{ vasset('images/default-avatar.png') }}'
                    }));
                },

                loadHistoryIfEmpty() {
                    if (this.searchQuery.length === 0) {
                        this.dropdownSection = 'history';
                        this.selectedDropdownIndex = -1;
                        // Show dropdown even if no history items for empty state
                        this.showDropdown = true;
                    }
                },

                hideDropdown() {
                    this.showDropdown = false;
                    this.selectedDropdownIndex = -1;
                },

                setDropdownSelection(section, index) {
                    this.dropdownSection = section;
                    this.selectedDropdownIndex = index;
                },

                navigateDropdown(direction) {
                    const currentItems = this.getCurrentDropdownItems();
                    if (currentItems.length === 0) return;

                    const newIndex = this.selectedDropdownIndex + direction;
                    if (newIndex >= -1 && newIndex < currentItems.length) {
                        this.selectedDropdownIndex = newIndex;
                    }
                },

                getCurrentDropdownItems() {
                    if (this.searchQuery.length === 0) {
                        return this.historyItems || [];
                    } else {
                        return this.searchResults || [];
                    }
                },

                selectDropdownItem() {
                    const currentItems = this.getCurrentDropdownItems();
                    if (this.selectedDropdownIndex >= 0 && this.selectedDropdownIndex < currentItems
                        .length) {
                        const item = currentItems[this.selectedDropdownIndex];

                        if (this.searchQuery.length === 0) {
                            // History item
                            this.selectFromHistory(item);
                        } else {
                            // Search result
                            this.selectUser(item);
                        }
                    }
                },

                formatAmount(amount) {
                    if (!amount) return '0';
                    const formatted = parseFloat(amount).toLocaleString('ar-SA');
                    return formatted + (this.userCurrency ? ' ' + this.userCurrency.name : '');
                },

                formatDate(dateString) {
                    const date = new Date(dateString);
                    return date.toLocaleDateString('ar-EG', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                        calendar: 'gregory'
                    });
                },

                async selectFromHistory(historyItem) {
                    // Check if history item is valid
                    if (!historyItem || !historyItem.number) {
                        return;
                    }

                    // Clear any existing messages
                    this.clearMessages();
                    this.hideDropdown();

                    // Set search query to the history number
                    this.searchQuery = historyItem.number;

                    // Search for the user with this number
                    this.searchLoading = true;

                    try {
                        const response = await axios.post(
                            '{{ route('balance-transfer.searchuser') }}', {
                                number: historyItem.number
                            });

                        if (response.data.error === false) {
                            this.selectUser(response.data.data.user);
                        } else {
                            this.showError(response.data.message || 'لم يتم العثور على المستخدم');
                        }
                    } catch (error) {
                        const errorMessage = error.response?.data?.message || 'حدث خطأ أثناء البحث';
                        this.showError(errorMessage);
                    } finally {
                        this.searchLoading = false;
                    }
                },

                async searchUsers() {
                    // Clear previous timeout
                    if (this.searchTimeout) {
                        clearTimeout(this.searchTimeout);
                    }

                    // Clear messages
                    this.clearMessages();

                    // Reset dropdown selection
                    this.selectedDropdownIndex = -1;
                    this.dropdownSection = 'search';

                    // Check if query is valid
                    if (!this.searchQuery || this.searchQuery.length < 3) {
                        this.searchResults = [];
                        this.dropdownSection = 'history';
                        return;
                    }

                    // Show dropdown
                    this.showDropdown = true;

                    // Set timeout for search
                    this.searchTimeout = setTimeout(async () => {
                        this.searchLoading = true;

                        try {
                            const response = await axios.post(
                                '{{ route('balance-transfer.searchuser') }}', {
                                    number: this.searchQuery
                                });

                            if (response.data.error === false) {
                                this.searchResults = [response.data.data.user];
                            } else {
                                this.searchResults = [];
                            }
                        } catch (error) {
                            this.searchResults = [];
                        } finally {
                            this.searchLoading = false;
                        }
                    }, 300);
                },

                navigateResults(direction) {
                    // Legacy method - now handled by navigateDropdown
                    this.navigateDropdown(direction);
                },

                selectResult() {
                    // Legacy method - now handled by selectDropdownItem
                    this.selectDropdownItem();
                },

                selectUser(user) {
                    this.selectedUser = user;
                    this.searchQuery = user.mobile;
                    this.searchResults = [];
                    this.selectedDropdownIndex = -1;
                    this.hideDropdown();
                    this.clearMessages();
                    this.calculateTransferAmount();
                },

                clearSelectedUser() {
                    this.selectedUser = null;
                    this.searchQuery = '';
                    this.searchResults = [];
                    this.transferAmount = 0;
                    this.hideDropdown();
                    this.clearMessages();
                    this.calculateTransferAmount();
                },

                clearSearch() {
                    this.searchResults = [];
                    this.selectedDropdownIndex = -1;
                    this.hideDropdown();
                },

                calculateTransferAmount() {
                    if (!this.transferAmount || this.transferAmount <= 0) {
                        this.discountAmount = 0;
                        this.finalAmount = 0;
                        return;
                    }

                    this.discountAmount = (this.transferRate / 100) * this.transferAmount;
                    this.finalAmount = this.transferAmount - this.discountAmount;

                    console.log('calculateTransferAmount:', {
                        transferAmount: this.transferAmount,
                        transferRate: this.transferRate,
                        discountAmount: this.discountAmount,
                        finalAmount: this.finalAmount
                    });
                },

                async handleTransfer() {
                    if (!this.canTransfer) return;

                    this.isSubmitting = true;
                    this.clearMessages();

                    try {
                        const response = await axios.post(
                            '{{ route('balance-transfer.transfer') }}', {
                                mobile: this.selectedUser.mobile,
                                amount: this.transferAmount,
                                amountTransfer: this.finalAmount
                            });

                        if (response.data.error === false) {
                            this.showSuccess(response.data.message || 'تم تحويل الرصيد بنجاح');

                            // Update user balance
                            this.userBalance = Math.max(0, this.userBalance - this.finalAmount);

                            // Save selected user data before resetting form
                            const selectedUserData = {
                                number: this.selectedUser.mobile,
                                name: this.selectedUser.name,
                                image: this.selectedUser.image ||
                                    '{{ vasset('images/default-avatar.png') }}'
                            };

                            // Reset form data
                            this.resetForm();

                            // Add the new transfer to history
                            const newTransfer = {
                                ...selectedUserData,
                                last_used: new Date().toISOString().split('T')[
                                    0] // Today's date
                            };

                            // Add to beginning of history and remove duplicates
                            this.transferHistory.unshift(newTransfer);
                            this.transferHistory = this.transferHistory.filter((item, index,
                                    array) =>
                                index === array.findIndex(t => t.number === item.number)
                            );

                            // Reload history items
                            this.loadHistoryItems();
                        } else {
                            this.showError(response.data.message || 'فشل في التحويل');
                        }
                    } catch (error) {
                        const errorMessage = error.response?.data?.message ||
                            'حدث خطأ أثناء التحويل';
                        this.showError(errorMessage);
                    } finally {
                        this.isSubmitting = false;
                    }
                },

                resetForm() {
                    this.selectedUser = null;
                    this.searchQuery = '';
                    this.searchResults = [];
                    this.transferAmount = 0;
                    this.hideDropdown();
                    this.calculateTransferAmount();
                },

                showError(message) {
                    // Show toast notification
                    showToast({
                        icon: 'error',
                        title: 'خطأ',
                        text: message
                    });

                    // Keep the old way for styling
                    this.errorMessage = message;
                    this.successMessage = '';
                    setTimeout(() => {
                        this.errorMessage = '';
                    }, 5000);
                },

                showSuccess(message) {
                    // Show toast notification
                    showToast({
                        icon: 'success',
                        title: 'نجح',
                        text: message
                    });

                    // Keep the old way for styling but with different styling
                    this.successMessage = message;
                    this.errorMessage = '';
                    setTimeout(() => {
                        this.successMessage = '';
                    }, 5000);
                },

                clearMessages() {
                    this.errorMessage = '';
                    this.successMessage = '';
                }
            }));
        });
    </script>
@endsection