<script setup lang="ts">
import type { AdminTenantDetail } from '../../../composables/mockTenantDetail';
import {
    formatDate,
    formatRub,
    roleLabel,
    txTypeColor,
    txTypeLabel,
} from '../../../composables/adminTenantDetailFormatters';

type TabKey = 'finance' | 'users' | 'projects' | 'activity';

defineProps<{
    tenant: AdminTenantDetail;
    activeTab: TabKey;
}>();

const emit = defineEmits<{
    'update:activeTab': [value: TabKey];
}>();
</script>

<template>
    <v-tabs
        :model-value="activeTab"
        class="mt-4 detail-tabs"
        color="primary"
        density="comfortable"
        @update:model-value="(v: TabKey) => emit('update:activeTab', v)"
    >
        <v-tab value="finance" data-testid="tab-finance">Финансы</v-tab>
        <v-tab value="users" data-testid="tab-users">Пользователи ({{ tenant.users.length }})</v-tab>
        <v-tab value="projects" data-testid="tab-projects">Проекты ({{ tenant.projects.length }})</v-tab>
        <v-tab value="activity" data-testid="tab-activity">Активность</v-tab>
    </v-tabs>

    <v-card variant="outlined" class="mt-3 panel">
        <div v-if="activeTab === 'finance'" class="pa-4" data-testid="pane-finance">
            <h3 class="text-subtitle-2 mb-3">История операций (последние {{ tenant.balanceHistory.length }})</h3>
            <v-table density="comfortable">
                <thead>
                    <tr>
                        <th>Дата</th>
                        <th>Операция</th>
                        <th>ID</th>
                        <th>Описание</th>
                        <th class="text-end">Сумма</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="tx in tenant.balanceHistory" :key="tx.id">
                        <td class="num text-medium-emphasis">{{ formatDate(tx.created_at) }}</td>
                        <td>
                            <v-chip size="x-small" variant="tonal" :color="txTypeColor(tx.type, tx.amount)">
                                {{ txTypeLabel(tx.type) }}
                            </v-chip>
                        </td>
                        <td class="num text-caption text-medium-emphasis">{{ tx.id }}</td>
                        <td>{{ tx.description }}</td>
                        <td
                            class="text-end num"
                            :class="{ 'text-error': tx.amount < 0, 'text-success': tx.amount > 0 }"
                        >
                            {{ formatRub(tx.amount) }}
                        </td>
                    </tr>
                </tbody>
            </v-table>
        </div>

        <div v-else-if="activeTab === 'users'" class="pa-4" data-testid="pane-users">
            <v-table density="comfortable">
                <thead>
                    <tr>
                        <th>Пользователь</th>
                        <th>Email</th>
                        <th>Роль</th>
                        <th>Последняя активность</th>
                        <th>Статус</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="u in tenant.users" :key="u.id">
                        <td>{{ u.fullName }}</td>
                        <td class="text-caption">{{ u.email }}</td>
                        <td>
                            <v-chip size="x-small" variant="tonal">{{ roleLabel(u.role) }}</v-chip>
                        </td>
                        <td class="num text-medium-emphasis">{{ formatDate(u.last_active_at) }}</td>
                        <td>
                            <v-chip size="x-small" variant="tonal" :color="u.is_active ? 'success' : 'error'">
                                {{ u.is_active ? 'активен' : 'отключён' }}
                            </v-chip>
                        </td>
                    </tr>
                </tbody>
            </v-table>
        </div>

        <div v-else-if="activeTab === 'projects'" class="pa-4" data-testid="pane-projects">
            <v-table density="comfortable">
                <thead>
                    <tr>
                        <th>Проект</th>
                        <th>Slug</th>
                        <th class="text-end">Поставщиков</th>
                        <th class="text-end">Лидов сегодня</th>
                        <th class="text-end">План</th>
                        <th>Статус</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="p in tenant.projects" :key="p.id">
                        <td>{{ p.name }}</td>
                        <td class="text-caption text-medium-emphasis num">{{ p.slug }}</td>
                        <td class="text-end num">{{ p.suppliers }}</td>
                        <td class="text-end num">{{ p.leadsToday }}</td>
                        <td class="text-end num">{{ p.desiredToday }}</td>
                        <td>
                            <v-chip size="x-small" variant="tonal" :color="p.is_active ? 'success' : 'error'">
                                {{ p.is_active ? 'активен' : 'отключён' }}
                            </v-chip>
                        </td>
                    </tr>
                </tbody>
            </v-table>
        </div>

        <div v-else-if="activeTab === 'activity'" class="pa-4" data-testid="pane-activity">
            <ul class="activity-list">
                <li v-for="ev in tenant.activity" :key="ev.id" class="activity-item">
                    <div class="act-time num text-medium-emphasis">{{ formatDate(ev.created_at) }}</div>
                    <div class="act-body">
                        <div class="act-event">
                            <code class="font-mono">{{ ev.event }}</code>
                            <span class="act-actor text-caption text-medium-emphasis">· {{ ev.actor }}</span>
                        </div>
                        <div class="act-summary text-body-2">{{ ev.summary }}</div>
                    </div>
                </li>
            </ul>
        </div>
    </v-card>
</template>

<style scoped>
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}
.font-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.panel {
    background: #fff;
}
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.activity-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f0ede4;
}
.activity-item:last-child {
    border-bottom: none;
}
.act-event {
    margin-bottom: 2px;
}
.act-actor {
    margin-left: 6px;
}
</style>
