<template>
    <div class="container-fluid">
        <!-- Breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Demo 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">Demo Chi tiết giao dịch</li>
                </ol>
            </div>
        </div>

        <!-- Content -->
        <div 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">
                                {{ demoData.Transaction.Id }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Mô tả:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ demoData.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(demoData.Transaction.TransactionDirection)">
                                    {{ formatCurrency(demoData.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(demoData.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(demoData.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">
                                    {{ demoData.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(demoData.Transaction.TransactionDirection)">
                                    {{ demoData.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">
                                {{ demoData.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">
                                {{ demoData.Transaction.CreatedByUserName }}
                            </div>
                        </div>

                        <div v-if="demoData.Transaction.Note" class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Ghi chú:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ demoData.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">
                                {{ demoData.SourceWallet?.OwnerName }}
                                <small class="text-muted">({{ demoData.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(demoData.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">
                                    {{ demoData.SourceWallet?.Status }}
                                </span>
                            </div>
                        </div>

                        <div v-if="demoData.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">
                                    {{ demoData.DestinationWallet.OwnerName }}
                                    <small class="text-muted">({{ demoData.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 ({{ demoData.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(demoData.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(demoData.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(demoData.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 demoData.Orders" :key="order.OrderId">
                                        <td>
                                            <strong>{{ order.OrderCode }}</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>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { formatCurrency } from '@/infrastructure/utilities/currencyHelper';

// Dữ liệu demo từ API response mẫu
const demoData = ref({
    "Transaction": {
        "Id": "9566298d-b1ce-41d8-eec6-08ddd9634ae3",
        "Description": "Nhận tiền từ lái xe",
        "Note": "",
        "Amount": 4550000.00,
        "CashAmount": 0.00,
        "TransferAmount": 4550000.00,
        "TransactionType": 4,
        "TransactionTypeName": "Thu tiền từ lái xe",
        "TransactionDirection": 1,
        "TransactionDirectionName": "Cộng tiền",
        "TransactionDate": "2025-08-12T12:44:23.7148322+07:00",
        "WalletId": 4,
        "WalletOwnerName": "ketoan_cuoc",
        "RelatedWalletId": null,
        "RelatedWalletOwnerName": "",
        "OrderCount": 4,
        "OrderCodes": [
            "41039081340",
            "41143081371",
            "41172081393",
            "41293081447"
        ],
        "TotalCodAmount": 4030000.00,
        "TotalSourceFeeAmount": 150000.00,
        "TotalDestFeeAmount": 370000.00,
        "Status": 0,
        "StatusName": "",
        "CreatedTime": "2025-08-12T12:44:23.7411734+07:00",
        "CreatedTimeDisplay": "12/08/2025 12:44",
        "UpdatedTime": "2025-08-12T12:44:23.7411734+07:00",
        "UpdatedTimeDisplay": "12/08/2025 12:44",
        "UpdatedBy": 37,
        "UpdatedByUserName": "ketoan_cuoc",
        "CreatedBy": 37,
        "CreatedByUserName": "ketoan_cuoc"
    },
    "Orders": [
        {
            "TransactionId": "9566298d-b1ce-41d8-eec6-08ddd9634ae3",
            "OrderId": 139,
            "OrderCode": "41039081340",
            "PartnerCode": "",
            "OrderNote": "",
            "CodAmount": 0.00,
            "SourceFeeAmount": 0.00,
            "DestFeeAmount": 220000.00,
            "TotalAmount": 220000.00,
            "CustomerId": 34,
            "CustomerName": "hn-qn",
            "SenderName": "chổi xể",
            "SenderAddress": "thành thái",
            "SenderPhone": "0971536213",
            "ReceiverName": "CHỊ THẢO ",
            "ReceiverAddress": "LK04 số nhà 9 Hoàng Huy RiverSide,Thượng Lý - Hồng Bàng - HP ",
            "ReceiverPhone": "0948427586",
            "ChargeWeight": 0.00,
            "OrderCodAmount": 0.00,
            "OrderFee": 90000.00,
            "OrderTotalFee": 220000.00,
            "PayFeeType": 2,
            "PayFeeTypeName": "Người nhận thanh toán",
            "OrderStatus": 0,
            "OrderStatusName": "",
            "OrderCreatedTime": "2025-08-10T23:24:18.272659+07:00",
            "OrderUpdatedTime": "2025-08-11T20:51:57.5073619+07:00"
        },
        {
            "TransactionId": "9566298d-b1ce-41d8-eec6-08ddd9634ae3",
            "OrderId": 170,
            "OrderCode": "41143081371",
            "PartnerCode": "",
            "OrderNote": "",
            "CodAmount": 1150000.00,
            "SourceFeeAmount": 0.00,
            "DestFeeAmount": 150000.00,
            "TotalAmount": 1300000.00,
            "CustomerId": 101,
            "CustomerName": "Tẹt Nguyễn",
            "SenderName": "Tẹt Nguyễn",
            "SenderAddress": "Viện kỹ thuật công binh, sa đôi",
            "SenderPhone": "0988213914",
            "ReceiverName": "a Dương",
            "ReceiverAddress": "14 quán nam",
            "ReceiverPhone": "0783640666",
            "ChargeWeight": 0.00,
            "OrderCodAmount": 1150000.00,
            "OrderFee": 160000.00,
            "OrderTotalFee": 150000.00,
            "PayFeeType": 2,
            "PayFeeTypeName": "Người nhận thanh toán",
            "OrderStatus": 0,
            "OrderStatusName": "",
            "OrderCreatedTime": "2025-08-11T10:16:34.5967977+07:00",
            "OrderUpdatedTime": "2025-08-11T20:51:57.5073619+07:00"
        },
        {
            "TransactionId": "9566298d-b1ce-41d8-eec6-08ddd9634ae3",
            "OrderId": 192,
            "OrderCode": "41172081393",
            "PartnerCode": "",
            "OrderNote": "",
            "CodAmount": 2880000.00,
            "SourceFeeAmount": 0.00,
            "DestFeeAmount": 0.00,
            "TotalAmount": 2880000.00,
            "CustomerId": 118,
            "CustomerName": "Đồ Gỗ Azon shop",
            "SenderName": "Đỗ gỗ Azon shop",
            "SenderAddress": "số 54 đường tiến thành",
            "SenderPhone": "0982228882",
            "ReceiverName": "khách",
            "ReceiverAddress": "Hh2 chung cư hoàng huy, lạch tray, đổng quốc bình",
            "ReceiverPhone": "0849266931",
            "ChargeWeight": 0.00,
            "OrderCodAmount": 2880000.00,
            "OrderFee": 100000.00,
            "OrderTotalFee": 278800.00,
            "PayFeeType": 5,
            "PayFeeTypeName": "Cấn trừ COD",
            "OrderStatus": 0,
            "OrderStatusName": "",
            "OrderCreatedTime": "2025-08-11T12:02:14.7555394+07:00",
            "OrderUpdatedTime": "2025-08-11T20:51:57.5073619+07:00"
        },
        {
            "TransactionId": "9566298d-b1ce-41d8-eec6-08ddd9634ae3",
            "OrderId": 251,
            "OrderCode": "41293081447",
            "PartnerCode": "",
            "OrderNote": "",
            "CodAmount": 0.00,
            "SourceFeeAmount": 150000.00,
            "DestFeeAmount": 0.00,
            "TotalAmount": 150000.00,
            "CustomerId": 157,
            "CustomerName": "ngọc ánh",
            "SenderName": "A",
            "SenderAddress": " 2/36 Cấm, phường Gia Viên, quận Ngô Quyền, thành phố Hải Phòng",
            "SenderPhone": "0783170180",
            "ReceiverName": "B",
            "ReceiverAddress": "Số 56 louis 1 khu đô thị louis city đại mỗ, Nam Từ Liêm, Hà Nội",
            "ReceiverPhone": "0931674368",
            "ChargeWeight": 0.00,
            "OrderCodAmount": 0.00,
            "OrderFee": 100000.00,
            "OrderTotalFee": 150000.00,
            "PayFeeType": 1,
            "PayFeeTypeName": "Người gửi thanh toán",
            "OrderStatus": 0,
            "OrderStatusName": "",
            "OrderCreatedTime": "2025-08-12T07:33:13.0720675+07:00",
            "OrderUpdatedTime": "2025-08-12T14:22:52.2792957+07:00"
        }
    ],
    "SourceWallet": {
        "Id": 4,
        "OwnerName": "ketoan_cuoc",
        "WalletType": "Ví cá nhân",
        "Balance": 5810000.00,
        "Status": "Đang hoạt động"
    },
    "DestinationWallet": null,
    "Result": 1,
    "Message": ""
});

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>
