<template>
  <div
    ref="containerRef"
    class="terminal-container"
    @focus="handleFocus"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useTerminal } from "@/composables/useTerminal";
import "@/assets/css/terminal.css";

const props = defineProps<{
  sessionId: string;
  isActive: boolean;
}>();

const containerRef = ref<HTMLElement | null>(null);
const { terminal, mount, fit } = useTerminal(props.sessionId);

onMounted(() => {
  if (containerRef.value) {
    mount(containerRef.value);
  }
});

// Re-fit and focus terminal when this tab becomes active
watch(
  () => props.isActive,
  (active) => {
    if (active) {
      // nextTick is not needed — fit and focus happen after the DOM update
      setTimeout(() => {
        fit();
        terminal.focus();
      }, 0);
    }
  },
);

function handleFocus(): void {
  terminal.focus();
}
</script>
