<script setup lang="ts">
import { ref } from 'vue'
import { EditOutlined } from '@ant-design/icons-vue'
import ButtonCommon from '@/components/common/ButtonCommon.vue'

const inUseUtxosCount = ref(0)
const inUseUtxosAmount = ref(0)

const handleShowUTXOs = () => {
    console.log('Show UTXOs')
}

const handleForceTransactionUpdate = () => {
    console.log('Force transaction times update')
}

const handleScanMoreAddresses = () => {
    console.log('Scan More Addresses')
}
</script>

<template>
    <div class="content-card debug-card">
        <div class="debug-header">
            <h3 class="debug-title">
                IN USE UTXOS
                <EditOutlined style="margin-left: 8px; font-size: 16px" />
            </h3>
            <div class="debug-info">
                <p><strong>COUNT</strong> {{ inUseUtxosCount }}</p>
                <p><strong>AMOUNT</strong> {{ inUseUtxosAmount }} KAS</p>
            </div>
        </div>

        <div class="debug-actions">
            <ButtonCommon type="primary" size="large" block @click="handleShowUTXOs">
                Show UTXOs
            </ButtonCommon>
            <ButtonCommon type="primary" size="large" block @click="handleForceTransactionUpdate">
                Force transaction times update
            </ButtonCommon>
            <ButtonCommon type="primary" size="large" block @click="handleScanMoreAddresses">
                Scan More Addresses
            </ButtonCommon>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content-card {
    @include card-base;
}

.debug-card {
    .debug-header {
        text-align: center;
        margin-bottom: var(--spacing-2xl);
        padding-bottom: var(--spacing-xl);
        border-bottom: 2px solid var(--border-color);

        .debug-title {
            font-size: var(--font-2xl);
            font-weight: var(--font-bold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
            letter-spacing: var(--tracking-wide);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .debug-info {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);

            p {
                margin: 0;
                font-size: var(--font-lg);
                color: var(--text-secondary);

                strong {
                    font-weight: var(--font-semibold);
                    margin-right: var(--spacing-sm);
                }
            }
        }
    }

    .debug-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }
}
</style>
