<!--
|--------------------------------------------------------------------------
| Preview de AgendaEventDialogV2 com fixtures.
| Rota: /preview/agenda-dialog-v2
| Uso: visualizar e iterar o template V2 sem subir pra produção.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, reactive } from 'vue';
import AgendaEventDialogV2 from '@/features/agenda/components/AgendaEventDialogV2.vue';

const open = ref(false);
const scenario = ref('novo-vazio');

// ── Fixtures ──────────────────────────────────────────────
const commitmentOptions = [
    { id: 'cm-sessao', name: 'Sessão', description: 'Atendimento clínico padrão', native_type: 'session', bg_color: '6366f1', fields: [] },
    { id: 'cm-bloqueio', name: 'Bloqueio', description: 'Indisponibilidade', native_type: 'bloqueio', bg_color: 'ef4444', fields: [] },
    { id: 'cm-supervisao', name: 'Supervisão', description: 'Encontro com supervisor', bg_color: 'f59e0b', fields: [] },
    { id: 'cm-evento', name: 'Evento', description: 'Reunião, palestra, etc.', bg_color: '10b981', fields: [] }
];

const workRules = [
    { dia_semana: 1, hora_inicio: '08:00', hora_fim: '18:00', ativo: true },
    { dia_semana: 2, hora_inicio: '08:00', hora_fim: '18:00', ativo: true },
    { dia_semana: 3, hora_inicio: '08:00', hora_fim: '18:00', ativo: true },
    { dia_semana: 4, hora_inicio: '08:00', hora_fim: '18:00', ativo: true },
    { dia_semana: 5, hora_inicio: '08:00', hora_fim: '17:00', ativo: true }
];

const agendaSettings = {
    session_duration_min: 50,
    session_break_min: 10,
    slot_mode: 'fixed',
    online_ativo: true
};

const allEvents = [];
const pausasSemanais = [];
const blockedDates = [];

// Cenários
const scenarios = {
    'novo-vazio': {
        label: 'Novo (vazio)',
        eventRow: null,
        presetCommitmentId: null
    },
    'novo-sessao': {
        label: 'Novo (preset Sessão)',
        eventRow: null,
        presetCommitmentId: 'cm-sessao'
    },
    'edit-avulsa': {
        label: 'Editar avulsa',
        eventRow: {
            id: 'evt-edit-1',
            commitment_id: 'cm-sessao',
            paciente_id: 'p-1',
            paciente_nome: 'Marina Souza',
            paciente_status: 'Ativo',
            paciente_avatar: null,
            inicio_em: '2026-05-09T14:00:00',
            fim_em: '2026-05-09T14:50:00',
            modalidade: 'presencial',
            status: 'agendado',
            price: 200,
            observacoes: 'Sessão de retorno',
            recurrence_id: null,
            serie_id: null
        },
        presetCommitmentId: null
    },
    'edit-serie': {
        label: 'Editar série',
        eventRow: {
            id: 'evt-serie-1',
            commitment_id: 'cm-sessao',
            paciente_id: 'p-2',
            paciente_nome: 'Carlos Mendes',
            paciente_status: 'Ativo',
            paciente_avatar: null,
            inicio_em: '2026-05-12T10:00:00',
            fim_em: '2026-05-12T10:50:00',
            modalidade: 'online',
            status: 'agendado',
            price: 220,
            recurrence_id: 'rec-1',
            serie_id: 'rec-1',
            serie_dia_semana: 2,
            serie_hora: '10:00'
        },
        presetCommitmentId: null
    },
    'paciente-inativo': {
        label: 'Paciente inativo (lock)',
        eventRow: {
            id: 'evt-inativo-1',
            commitment_id: 'cm-sessao',
            paciente_id: 'p-3',
            paciente_nome: 'João Pereira',
            paciente_status: 'Inativo',
            inicio_em: '2026-06-01T15:00:00',
            fim_em: '2026-06-01T15:50:00',
            modalidade: 'presencial',
            status: 'agendado'
        },
        presetCommitmentId: null
    }
};

const dialogProps = ref({
    eventRow: null,
    presetCommitmentId: null
});

function abrir(key) {
    scenario.value = key;
    const sc = scenarios[key];
    dialogProps.value = {
        eventRow: sc.eventRow,
        presetCommitmentId: sc.presetCommitmentId
    };
    open.value = true;
}

// ── Logs de events ───────────────────────────────────────
const log = reactive({ entries: [] });
function pushLog(label, payload) {
    log.entries.unshift({
        ts: new Date().toLocaleTimeString('pt-BR'),
        label,
        payload: JSON.stringify(payload, null, 2)
    });
    if (log.entries.length > 8) log.entries.pop();
}

function onSave(payload) { pushLog('save', payload); }
function onDelete(payload) { pushLog('delete', payload); }
function onUpdateSeries(payload) { pushLog('updateSeriesEvent', payload); }
function onEditSeriesOccurrence(payload) { pushLog('editSeriesOccurrence', payload); }
</script>

<template>
    <div class="aev2-preview-page">
        <header class="aev2-preview-header">
            <div>
                <h1 class="text-xl font-bold">AgendaEventDialogV2 — Preview</h1>
                <p class="text-sm opacity-70">A66 sub-sessão 2. Iterar visual antes de migrar consumers (sub-sessão 3).</p>
            </div>
            <div class="text-xs opacity-60">
                Cenário atual: <code>{{ scenario }}</code>
            </div>
        </header>

        <div class="aev2-preview-grid">
            <section>
                <h2 class="aev2-preview-section-title">Cenários</h2>
                <div class="aev2-preview-buttons">
                    <button
                        v-for="(sc, key) in scenarios"
                        :key="key"
                        type="button"
                        class="aev2-preview-btn"
                        :class="{ 'aev2-preview-btn--active': scenario === key }"
                        @click="abrir(key)"
                    >
                        {{ sc.label }}
                    </button>
                </div>
            </section>

            <section>
                <h2 class="aev2-preview-section-title">Eventos emitidos</h2>
                <div class="aev2-preview-log">
                    <div v-if="!log.entries.length" class="opacity-50 text-sm">
                        Abra o dialog e dispare ações pra ver os emits aqui.
                    </div>
                    <div v-else>
                        <div v-for="(e, i) in log.entries" :key="i" class="aev2-preview-log-entry">
                            <div class="aev2-preview-log-meta">
                                <span class="font-mono text-xs opacity-60">{{ e.ts }}</span>
                                <span class="aev2-preview-log-label">{{ e.label }}</span>
                            </div>
                            <pre class="aev2-preview-log-payload">{{ e.payload }}</pre>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <AgendaEventDialogV2
            v-model="open"
            :event-row="dialogProps.eventRow"
            :preset-commitment-id="dialogProps.presetCommitmentId"
            owner-id="owner-preview"
            tenant-id="tenant-preview"
            :commitment-options="commitmentOptions"
            :work-rules="workRules"
            :agenda-settings="agendaSettings"
            :all-events="allEvents"
            :pausas-semanais="pausasSemanais"
            :blocked-dates="blockedDates"
            @save="onSave"
            @delete="onDelete"
            @update-series-event="onUpdateSeries"
            @edit-series-occurrence="onEditSeriesOccurrence"
        />
    </div>
</template>

<style scoped>
.aev2-preview-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    color: var(--text-color);
}
.aev2-preview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--surface-border);
}
.aev2-preview-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
}
@media (max-width: 800px) {
    .aev2-preview-grid { grid-template-columns: 1fr; }
}
.aev2-preview-section-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    margin-bottom: .75rem;
}
.aev2-preview-buttons {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.aev2-preview-btn {
    text-align: left;
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    color: var(--text-color);
    padding: .65rem .85rem;
    border-radius: 10px;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
}
.aev2-preview-btn:hover {
    border-color: var(--p-primary-500, #6366f1);
    transform: translateX(2px);
}
.aev2-preview-btn--active {
    background: var(--p-primary-500, #6366f1);
    color: #fff;
    border-color: var(--p-primary-500, #6366f1);
    font-weight: 600;
}
.aev2-preview-log {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 1rem;
    max-height: 480px;
    overflow-y: auto;
}
.aev2-preview-log-entry {
    border-top: 1px solid var(--surface-border);
    padding: .5rem 0;
}
.aev2-preview-log-entry:first-child { border-top: 0; padding-top: 0; }
.aev2-preview-log-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}
.aev2-preview-log-label {
    background: var(--p-primary-500, #6366f1);
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
}
.aev2-preview-log-payload {
    font-family: ui-monospace, monospace;
    font-size: .72rem;
    background: var(--surface-100);
    padding: .5rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}
</style>
