<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRdp } from '~/composables/useRdp'

const props = defineProps<{
  hostId: number
  hostName: string
  color?: string | null
}>()

const container = ref<HTMLDivElement | null>(null)
const { connectRdp } = useRdp()

let rdpSession: ReturnType<ReturnType<typeof useRdp>['connectRdp']> | null = null

// Expose to parent (RdpToolbar uses these)
const sendClipboard = (text: string) => rdpSession?.sendClipboardText(text)
const disconnect = () => rdpSession?.disconnect()

defineExpose({ sendClipboard, disconnect })

onMounted(() => {
  if (!container.value) return

  rdpSession = connectRdp(
    container.value,
    props.hostId,
    props.hostName,
    props.color ?? null,
    {
      width: container.value.clientWidth,
      height: container.value.clientHeight,
    },
  )
})

onBeforeUnmount(() => {
  rdpSession?.disconnect()
  rdpSession = null
})
</script>

<template>
  <!-- Full-size container for the Guacamole display canvas.
       The Guacamole client appends its own <canvas> element here. -->
  <div
    ref="container"
    class="rdp-canvas-container"
  />
</template>

<style scoped>
.rdp-canvas-container {
  @apply absolute inset-0 bg-gray-950 overflow-hidden cursor-default;
}

/* Guacamole appends a display div; make it fill the container */
.rdp-canvas-container :deep(> div) {
  width: 100% !important;
  height: 100% !important;
}

.rdp-canvas-container :deep(canvas) {
  display: block;
}
</style>
