<script setup lang="ts">
/**
 * Форма «Запросить отчёт» (Sprint 3 Phase C — extraction из ReportsView).
 *
 * Логически замкнутый блок: тип отчёта, период (date_from/date_to), фильтры
 * (project/manager), формат, кнопки запуска/сброса, баннеры успеха/ошибки.
 *
 * Состояние (selectedType, dateFrom, dateTo, project, manager, selectedFormat,
 * submitting, submitSuccess, submitError, quotaActive/Max) держится в родителе —
 * передаётся через v-model:* и props. canSubmit и handler'ы submit/reset —
 * тоже из родителя через emit.
 */
import { REPORT_FORMATS, REPORT_TYPES, type ReportFormat, type ReportType } from '../../composables/mockReports';
import RuDateField from '../common/RuDateField.vue';

defineProps<{
    selectedType: ReportType;
    dateFrom: string;
    dateTo: string;
    project: string;
    manager: string;
    selectedFormat: ReportFormat;
    projectOptions: string[];
    managerOptions: string[];
    submitting: boolean;
    submitSuccess: boolean;
    submitError: string | null;
    canSubmit: boolean;
    quotaActive: number;
    quotaMax: number;
}>();

defineEmits<{
    'update:selectedType': [value: ReportType];
    'update:dateFrom': [value: string];
    'update:dateTo': [value: string];
    'update:project': [value: string];
    'update:manager': [value: string];
    'update:selectedFormat': [value: ReportFormat];
    submit: [];
    reset: [];
}>();
</script>

<template>
    <v-card variant="outlined" class="mt-4 panel pa-5">
        <h2 class="text-h6 mb-1">Запросить отчёт</h2>
        <p class="text-body-2 text-medium-emphasis mb-4">Готовится асинхронно. При &gt; 5 000 строк — на email.</p>

        <div class="field-block">
            <label class="field-label">Тип отчёта</label>
            <div class="type-grid">
                <v-card
                    v-for="t in REPORT_TYPES"
                    :key="t.id"
                    variant="outlined"
                    :class="['tc-card', { active: selectedType === t.id }]"
                    :data-testid="`type-card-${t.id}`"
                    @click="$emit('update:selectedType', t.id)"
                >
                    <div class="tc-name">{{ t.name }}</div>
                    <div class="tc-desc text-caption text-medium-emphasis">{{ t.description }}</div>
                </v-card>
            </div>
        </div>

        <v-row dense class="mt-4">
            <v-col cols="12" md="6">
                <RuDateField
                    :model-value="dateFrom"
                    label="Период с"
                    @update:model-value="(v: string) => $emit('update:dateFrom', v ?? '')"
                />
            </v-col>
            <v-col cols="12" md="6">
                <RuDateField
                    :model-value="dateTo"
                    label="по"
                    @update:model-value="(v: string) => $emit('update:dateTo', v ?? '')"
                />
            </v-col>
        </v-row>

        <v-row dense>
            <v-col cols="12" md="6">
                <v-select
                    :model-value="project"
                    :items="projectOptions"
                    label="Проект"
                    variant="outlined"
                    density="comfortable"
                    @update:model-value="(v: string) => $emit('update:project', v ?? '')"
                />
            </v-col>
            <v-col cols="12" md="6">
                <v-select
                    :model-value="manager"
                    :items="managerOptions"
                    label="Менеджер"
                    variant="outlined"
                    density="comfortable"
                    @update:model-value="(v: string) => $emit('update:manager', v ?? '')"
                />
            </v-col>
        </v-row>

        <div class="field-block">
            <label class="field-label">Формат файла</label>
            <div class="fmt-row">
                <v-btn
                    v-for="f in REPORT_FORMATS"
                    :key="f.id"
                    :variant="selectedFormat === f.id ? 'flat' : 'outlined'"
                    :color="selectedFormat === f.id ? 'primary' : undefined"
                    size="small"
                    :data-testid="`format-${f.id}`"
                    @click="$emit('update:selectedFormat', f.id)"
                >
                    {{ f.label }}
                </v-btn>
            </div>
        </div>

        <v-alert type="info" variant="tonal" density="compact" class="mt-4 quota-banner">
            Квота: <strong>{{ quotaActive }} из {{ quotaMax }}</strong> одновременных отчётов · до
            <strong>3 попыток retry</strong> в окне 7 дней.
        </v-alert>

        <v-alert
            v-if="submitSuccess"
            type="success"
            variant="tonal"
            density="compact"
            class="mt-3"
            closable
            data-testid="submit-success-alert"
        >
            Отчёт поставлен в очередь.
        </v-alert>

        <v-alert
            v-if="submitError"
            type="error"
            variant="tonal"
            density="compact"
            class="mt-3"
            closable
            data-testid="submit-error-alert"
        >
            {{ submitError }}
        </v-alert>

        <div class="d-flex ga-2 mt-4">
            <v-btn
                color="primary"
                variant="flat"
                prepend-icon="mdi-play"
                :loading="submitting"
                :disabled="!canSubmit"
                data-testid="submit-btn"
                @click="$emit('submit')"
            >
                Запустить
            </v-btn>
            <v-btn variant="text" data-testid="reset-btn" @click="$emit('reset')">Сброс</v-btn>
        </div>
    </v-card>
</template>

<style scoped>
.panel {
    background: #fff;
}

.field-block {
    margin-top: 8px;
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #66635c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    margin-bottom: 8px;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.tc-card {
    padding: 12px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.tc-card:hover {
    border-color: #66635c !important;
}
.tc-card.active {
    border-color: #0f6e56 !important;
    background: #e1eeea !important;
}
.tc-name {
    font-weight: 600;
    color: #081319;
}

.fmt-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.num-field :deep(input) {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
}
</style>
