<template>
  <div ref="root" class="flex min-h-0 flex-1 flex-col bg-[#09090b]">
    <header class="flex items-center gap-3 border-b border-zinc-800 bg-zinc-900/60 px-3 py-1.5">
      <RouterLink :to="{ name: 'sessions' }" class="text-sm text-zinc-400 transition-colors hover:text-zinc-200">
        ← {{ t('terminal.back') }}
      </RouterLink>
      <span v-if="session" class="badge bg-zinc-800 font-mono text-zinc-300">{{ session.command }}</span>
      <span class="truncate font-mono text-xs text-zinc-500" :title="session?.cwd ?? sessionId">
        {{ session?.cwd ?? sessionId }}
      </span>
      <button
        type="button"
        class="ml-auto shrink-0 rounded p-1 text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-200"
        :title="t(isFullscreen ? 'terminal.exitFullscreen' : 'terminal.fullscreen')"
        :aria-label="t(isFullscreen ? 'terminal.exitFullscreen' : 'terminal.fullscreen')"
        @click="toggleFullscreen"
      >
        <component :is="isFullscreen ? Minimize : Maximize" class="h-4 w-4" />
      </button>
    </header>
    <DialogPrompt v-if="session && session.activity === 'waiting'" :session="session" class="m-2" />
    <TerminalView v-if="attachable" :key="`${sessionId}:${mode}`" :session-id="sessionId" :mode="mode" class="flex-1" />
    <!-- session externe non détenue par Arboretum : pas de terminal interactif (cf. fork/resume). -->
    <div v-else class="flex flex-1 items-center justify-center p-6 text-center">
      <p class="max-w-md text-sm text-zinc-400">{{ t('terminal.notAttachable') }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { Maximize, Minimize } from '@lucide/vue';
import { useSessionsStore } from '../stores/sessions';
import TerminalView from '../components/TerminalView.vue';
import DialogPrompt from '../components/DialogPrompt.vue';

const { t } = useI18n();
const route = useRoute();
const store = useSessionsStore();

const sessionId = computed(() => String(route.params.id));
const mode = computed<'interactive' | 'observer'>(() => (route.query.mode === 'observer' ? 'observer' : 'interactive'));
const session = computed(() => store.sessions.find((s) => s.id === sessionId.value) ?? null);
// défaut true : une navigation directe (liste pas encore chargée) tente l'attache d'une session managée.
const attachable = computed(() => session.value?.attachable ?? true);

// Vrai plein écran (API Fullscreen) — surtout utile sur mobile pour récupérer la barre d'URL.
// On synchronise `isFullscreen` sur l'événement natif : l'utilisateur peut sortir via Échap.
const root = useTemplateRef<HTMLDivElement>('root');
const isFullscreen = ref(false);
function syncFullscreen(): void {
  isFullscreen.value = document.fullscreenElement === root.value;
}
function toggleFullscreen(): void {
  if (document.fullscreenElement) void document.exitFullscreen().catch(() => {});
  else void root.value?.requestFullscreen().catch(() => {});
}

onMounted(() => {
  // navigation directe : garantit l'en-tête (cwd/commande) même si l'AppShell n'a pas encore chargé.
  if (store.sessions.length === 0) void store.fetchSessions();
  document.addEventListener('fullscreenchange', syncFullscreen);
});
onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', syncFullscreen);
  if (document.fullscreenElement === root.value) void document.exitFullscreen().catch(() => {});
});
</script>
