<script setup lang="ts">
/**
 * Обёртка панели деталей сделки. `inline=false` (по умолчанию) — overlay
 * v-navigation-drawer (Канбан). `inline=true` — боковая панель master-detail
 * для страницы «Сделки» (список сжимается, панель встаёт рядом, не перекрывает).
 * Тело — общий DealDetailBody.vue.
 */
import { computed } from 'vue';
import type { MockDeal } from '../../composables/mockDeals';
import DealDetailBody from './DealDetailBody.vue';

const props = withDefaults(
    defineProps<{
        open: boolean;
        deal: MockDeal | null;
        tenantId?: number;
        inline?: boolean;
    }>(),
    { inline: false, tenantId: undefined },
);

const emit = defineEmits<{
    'update:open': [value: boolean];
    'status-changed': [slug: string];
}>();

const drawerOpen = computed({
    get: () => props.open,
    set: (v) => emit('update:open', v),
});

function close() {
    emit('update:open', false);
}
</script>

<template>
    <aside v-if="inline" v-show="open" class="deal-detail-inline" data-testid="deal-detail-panel">
        <DealDetailBody
            :deal="deal"
            :tenant-id="tenantId"
            @close="close"
            @status-changed="(s: string) => emit('status-changed', s)"
        />
    </aside>
    <v-navigation-drawer v-else v-model="drawerOpen" location="right" temporary :width="480" class="deal-drawer">
        <DealDetailBody
            :deal="deal"
            :tenant-id="tenantId"
            @close="close"
            @status-changed="(s: string) => emit('status-changed', s)"
        />
    </v-navigation-drawer>
</template>

<style scoped>
.deal-drawer {
    background: #fff;
}
.deal-detail-inline {
    flex: 0 0 400px;
    width: 400px;
    background: #fff;
    border: 1px solid #e8e3d6;
    border-radius: 8px;
    overflow-y: auto;
    align-self: flex-start;
    max-height: calc(100vh - 160px);
    position: sticky;
    top: 16px;
}
</style>
