<template>
    <div class="admin-supplier-prices-view">
        <h1 class="text-h4 mb-6">Цены поставщиков (закупка)</h1>
        <v-card elevation="1">
            <v-data-table :headers="headers" :items="suppliers" density="comfortable" class="numeric-tnum">
                <template #[`item.cost_rub`]="{ item }">
                    <v-text-field
                        v-model="item.cost_rub"
                        type="number"
                        step="0.01"
                        min="0"
                        density="compact"
                        hide-details
                        variant="plain"
                        :aria-label="`Cost (₽) для ${item.name}`"
                    />
                </template>
                <template #[`item.quality_score`]="{ item }">
                    <v-text-field
                        v-model="item.quality_score"
                        type="number"
                        step="0.01"
                        min="0"
                        max="9.99"
                        density="compact"
                        hide-details
                        variant="plain"
                        :aria-label="`Quality для ${item.name}`"
                    />
                </template>
                <template #[`item.is_active`]="{ item }">
                    <v-switch
                        v-model="item.is_active"
                        hide-details
                        inset
                        density="compact"
                        :aria-label="`Active для ${item.name}`"
                    />
                </template>
                <template #[`item.actions`]="{ item }">
                    <v-btn size="small" color="primary" :loading="!!saving[item.id]" @click="save(item)">
                        Сохранить
                    </v-btn>
                </template>
            </v-data-table>
        </v-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';

/**
 * SaaS-admin → Цены поставщиков (Plan 4 Task 10).
 *
 * Backend: AdminSuppliersController (GET/PATCH).
 * Палитра Forest + JetBrains Mono для tnum-цифр.
 *
 * defineExpose ниже — для Vitest unit-тестов (`load`/`save`/`suppliers`/
 * `saving`). На прод-сборку это не влияет.
 */

interface SupplierRow {
    id: number;
    code: string;
    name: string;
    cost_rub: string;
    quality_score: string;
    is_active: boolean;
}

const suppliers = ref<SupplierRow[]>([]);
const saving = reactive<Record<number, boolean>>({});

const headers = [
    { title: 'Code', key: 'code', sortable: false, width: 80 },
    { title: 'Name', key: 'name', sortable: false },
    { title: 'Cost (₽)', key: 'cost_rub', sortable: false, width: 140 },
    { title: 'Quality', key: 'quality_score', sortable: false, width: 100 },
    { title: 'Active', key: 'is_active', sortable: false, width: 100 },
    { title: 'Действия', key: 'actions', sortable: false, width: 120 },
];

async function load(): Promise<void> {
    const { data } = await axios.get('/api/admin/suppliers');
    suppliers.value = data.data;
}

async function save(s: SupplierRow): Promise<void> {
    saving[s.id] = true;
    try {
        await axios.patch(`/api/admin/suppliers/${s.id}`, {
            cost_rub: s.cost_rub,
            quality_score: s.quality_score,
            is_active: s.is_active,
        });
    } finally {
        saving[s.id] = false;
    }
}

onMounted(load);

defineExpose({ load, save, suppliers, saving });
</script>

<style scoped>
.numeric-tnum :deep(td) {
    font-feature-settings: 'tnum';
    font-family: 'JetBrains Mono', monospace;
}
</style>
