<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { usePageTitle } from '@/composables/Core/usePageTitle';
import { useNavigate } from '@/composables/Core/useNavigate';

usePageTitle('Send Money');
const { navigate } = useNavigate();

const search = ref('');
const users = ref([]);
const selectedUser = ref(null);
const amount = ref('');
const isSearching = ref(false);
const isSubmitting = ref(false);

const searchUsers = async () => {
    if (search.value.length < 3) {
        users.value = [];
        return;
    }
    isSearching.value = true;
    try {
        const response = await axios.post('/Financial/Credit/SearchUsers', { q: search.value });
        if (response.data.success) {
            users.value = response.data.data;
        }
    } catch (error) {
        console.error('Search failed');
    } finally {
        isSearching.value = false;
    }
};

let searchTimeout;
watch(search, () => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(searchUsers, 500);
});

const handleTransfer = async () => {
    if (!selectedUser.value || !amount.value) return;
    
    isSubmitting.value = true;
    try {
        if (window.toastr) window.toastr.info('Processing transfer...');
        const response = await axios.post('/Financial/Credit/Transfer', {
            recipient_hash: selectedUser.value.hashkey,
            amount: amount.value
        });
        if (response.data.success) {
            if (window.toastr) window.toastr.success('Transfer successful!');
            navigate({ page: 'MyWallet' });
        }
    } catch (error) {
        if (window.toastr) window.toastr.error(error.response?.data?.message || 'Transfer failed');
    } finally {
        isSubmitting.value = false;
    }
};
</script>

<template>
    <div class="send-money pb-5">
        <div class="tf-container mt-4">
            <div class="card border-0 shadow-sm rounded-25 p-4 mb-4">
                <h5 class="fw_7 mb-4">Send Money</h5>
                
                <!-- Recipient Search -->
                <div v-if="!selectedUser" class="search-section">
                    <div class="form-group mb-3">
                        <label class="smallest fw_6 text-muted mb-1">Search Recipient</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0 rounded-start-pill ps-3">
                                <i :class="isSearching ? 'fas fa-spinner fa-spin' : 'fas fa-search'"></i>
                            </span>
                            <input v-model="search" type="text" class="form-control bg-light border-0 rounded-end-pill pe-3" placeholder="Name or mobile number">
                        </div>
                    </div>

                    <div class="user-results">
                        <div v-for="user in users" :key="user.hashkey" 
                             @click="selectedUser = user"
                             class="d-flex align-items-center gap-3 p-3 mb-2 bg-light rounded-20 cursor-pointer hover-up">
                            <div class="bg-primary text-white rounded-circle p-2" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="fw_7 mb-0 text-dark text-truncate">{{ user.fullname || user.name }}</h6>
                                <p class="smallest text-muted mb-0">{{ user.mobile_number }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Selected User & Amount -->
                <div v-else class="amount-section animate-fade-in">
                    <div class="d-flex align-items-center gap-3 p-3 mb-4 bg-soft-primary rounded-20 position-relative">
                        <div class="bg-primary text-white rounded-circle p-2" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-user fa-lg"></i>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="smallest fw_6 text-muted mb-0">Sending to</p>
                            <h6 class="fw_7 mb-0 text-dark text-truncate">{{ selectedUser.fullname || selectedUser.name }}</h6>
                        </div>
                        <button @click="selectedUser = null" class="btn btn-link py-0 smallest text-danger">Change</button>
                    </div>

                    <div class="form-group mb-4">
                        <label class="smallest fw_6 text-muted mb-1">Amount to Send</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text bg-light border-0 rounded-start-pill ps-4 fw_7">₱</span>
                            <input v-model="amount" type="number" class="form-control bg-light border-0 rounded-end-pill pe-4 fw_8" placeholder="0.00">
                        </div>
                    </div>

                    <button @click="handleTransfer" 
                            :disabled="isSubmitting || !amount"
                            class="btn btn-primary rounded-pill w-100 py-3 fw_7 shadow-sm transition-all">
                        <i v-if="isSubmitting" class="fas fa-spinner fa-spin me-2"></i>
                        Confirm Transfer
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.rounded-25 { border-radius: 25px; }
.rounded-20 { border-radius: 20px; }
.bg-soft-primary { background-color: rgba(var(--primary-rgb), 0.1); }
.cursor-pointer { cursor: pointer; }
.hover-up:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.smallest { font-size: 0.75rem; }
.transition-all { transition: all 0.2s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
</style>
