<script setup lang="ts">
/**
 * InvoicesTable — список счетов и УПД (PDF / 1С 8.3 XML).
 * Sprint 4 Phase B/2 — split BillingView.
 */
import { MOCK_INVOICES } from '../../composables/mockBilling';
import { formatIcon, formatLabel, formatPlain } from '../../composables/billingFormatters';
</script>

<template>
    <v-card variant="outlined" class="mt-4 panel">
        <div class="panel-h pa-4">
            <h2 class="text-h6 panel-title ma-0">Счета и УПД</h2>
            <v-btn variant="outlined" size="small" prepend-icon="mdi-download">Реестр XLSX</v-btn>
        </div>
        <v-divider />
        <ul class="invoices-list pa-2 ma-0">
            <li v-for="inv in MOCK_INVOICES" :key="inv.id" class="inv-row">
                <span class="inv-when num">{{ inv.when }}</span>
                <span class="inv-name">
                    {{ inv.title }}
                    <span class="sub">{{ inv.sub }}</span>
                </span>
                <span class="inv-amount num">{{ formatPlain(inv.amountRub) }}</span>
                <v-btn variant="text" size="small" :prepend-icon="formatIcon(inv.format)">
                    {{ formatLabel(inv.format) }}
                </v-btn>
            </li>
        </ul>
    </v-card>
</template>

<style scoped>
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}

.panel {
    background: #fff;
}
.panel-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.panel-title {
    font-variation-settings: 'opsz' 18;
    letter-spacing: -0.01em;
}

.invoices-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.inv-row {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0ede4;
}
.inv-row:last-child {
    border-bottom: none;
}
.inv-when {
    font-size: 12px;
    color: #66635c;
}
.inv-name {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    color: #081319;
}
.inv-name .sub {
    font-weight: 400;
    color: #66635c;
    font-size: 12px;
}
.inv-amount {
    font-weight: 500;
    color: #081319;
}
</style>
