<template>
    <div class="container-fluid">
        <!-- Breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Chi tiết giao dịch</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <router-link to="/">Trang chủ</router-link>
                    </li>
                    <li class="breadcrumb-item">
                        <router-link to="/quan-ly-vi-tien">Quản lý ví</router-link>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Chi tiết giao dịch</li>
                </ol>
            </div>
        </div>

        <!-- Loading -->
        <div v-if="loading" class="text-center py-5">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>

        <!-- Content -->
        <div v-if="!loading && transactionData" class="row">
            <!-- Cột trái - Thông tin giao dịch -->
            <div class="col-md-6">
                <div class="card border-primary">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-exchange-alt me-2"></i>
                            Thông tin giao dịch
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Mã giao dịch:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ transactionData.Transaction.Id }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Mô tả:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ transactionData.Transaction.Description }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Số tiền:</strong>
                            </div>
                            <div class="col-sm-8">
                                <span class="h5 fw-bold"
                                    :class="getAmountClass(transactionData.Transaction.TransactionDirection)">
                                    {{ formatCurrency(transactionData.Transaction.Amount) }}
                                </span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Tiền mặt:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ formatCurrency(transactionData.Transaction.CashAmount) }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Chuyển khoản:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ formatCurrency(transactionData.Transaction.TransferAmount) }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Loại giao dịch:</strong>
                            </div>
                            <div class="col-sm-8">
                                <span class="badge bg-info">
                                    {{ transactionData.Transaction.TransactionTypeName }}
                                </span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Hướng giao dịch:</strong>
                            </div>
                            <div class="col-sm-8">
                                <span class="badge"
                                    :class="getDirectionClass(transactionData.Transaction.TransactionDirection)">
                                    {{ transactionData.Transaction.TransactionDirectionName }}
                                </span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Ngày giao dịch:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ transactionData.Transaction.CreatedTimeDisplay }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Người tạo:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ transactionData.Transaction.CreatedByUserName }}
                            </div>
                        </div>

                        <div v-if="transactionData.Transaction.Note" class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Ghi chú:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ transactionData.Transaction.Note }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Thông tin ví -->
                <div class="card border-success mt-3">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-wallet me-2"></i>
                            Thông tin ví
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Ví nguồn:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ transactionData.SourceWallet?.OwnerName }}
                                <small class="text-muted">({{ transactionData.SourceWallet?.WalletType }})</small>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Số dư hiện tại:</strong>
                            </div>
                            <div class="col-sm-8">
                                <span class="fw-bold text-success">
                                    {{ formatCurrency(transactionData.SourceWallet?.Balance) }}
                                </span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Trạng thái:</strong>
                            </div>
                            <div class="col-sm-8">
                                <span class="badge bg-success">
                                    {{ transactionData.SourceWallet?.Status }}
                                </span>
                            </div>
                        </div>

                        <div v-if="transactionData.DestinationWallet" class="border-top pt-3">
                            <div class="row mb-3">
                                <div class="col-sm-4">
                                    <strong>Ví đích:</strong>
                                </div>
                                <div class="col-sm-8">
                                    {{ transactionData.DestinationWallet.OwnerName }}
                                    <small class="text-muted">({{ transactionData.DestinationWallet.WalletType
                                        }})</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cột phải - Danh sách đơn hàng -->
            <div class="col-md-6">
                <div class="card border-warning">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-box me-2"></i>
                            Danh sách đơn hàng ({{ transactionData.Transaction.OrderCount }})
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-sm-6">
                                <strong>Tổng COD:</strong>
                                <span class="fw-bold text-primary ms-2">
                                    {{ formatCurrency(transactionData.Transaction.TotalCodAmount) }}
                                </span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Phí lấy hàng:</strong>
                                <span class="fw-bold text-info ms-2">
                                    {{ formatCurrency(transactionData.Transaction.TotalSourceFeeAmount) }}
                                </span>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-6">
                                <strong>Phí giao hàng:</strong>
                                <span class="fw-bold text-warning ms-2">
                                    {{ formatCurrency(transactionData.Transaction.TotalDestFeeAmount) }}
                                </span>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped table-sm">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Mã đơn</th>
                                        <th>Khách hàng</th>
                                        <th>COD</th>
                                        <th>Phí lấy</th>
                                        <th>Phí giao</th>
                                        <th>Tổng</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="order in transactionData.Orders" :key="order.OrderId">
                                        <td>

                                            <strong>
                                                <router-link
                                                    :to="{ name: 'orderTrack', params: { code: order.OrderCode } }"
                                                    target="_blank">
                                                    {{ order.OrderCode }}
                                                </router-link>
                                            </strong>
                                        </td>
                                        <td>
                                            <div>{{ order.CustomerName }}</div>
                                            <small class="text-muted">{{ order.SenderName }}</small>
                                        </td>
                                        <td>{{ formatCurrency(order.CodAmount) }}</td>
                                        <td>{{ formatCurrency(order.SourceFeeAmount) }}</td>
                                        <td>{{ formatCurrency(order.DestFeeAmount) }}</td>
                                        <td>
                                            <strong>{{ formatCurrency(order.TotalAmount) }}</strong>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error state -->
        <div v-if="!loading && !transactionData" class="text-center py-5">
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Không tìm thấy thông tin giao dịch
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import transactionService from '@/services/transactionService';
import { formatCurrency } from '@/infrastructure/utilities/currencyHelper';

const route = useRoute();
const loading = ref(true);
const transactionData = ref(null);

onMounted(async () => {
    await loadTransactionDetail();
});

const loadTransactionDetail = async () => {
    try {
        loading.value = true;
        const id = route.params.id;
        const result = await transactionService.getById(id);

        if (result && result.Result === 1) {
            transactionData.value = result;
        } else {
            console.error('Failed to load transaction:', result?.Message);
        }
    } catch (error) {
        console.error('Error loading transaction:', error);
    } finally {
        loading.value = false;
    }
};

// formatCurrency đã được import từ utilities

const getAmountClass = (direction) => {
    return direction === 1 ? 'text-success' : 'text-danger';
};

const getDirectionClass = (direction) => {
    return direction === 1 ? 'bg-success' : 'bg-danger';
};
</script>

<style scoped>
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.table th {
    font-size: 0.875rem;
    font-weight: 600;
}

.table td {
    font-size: 0.875rem;
}

.badge {
    font-size: 0.75rem;
}
</style>
