<script setup lang="ts">
import { computed } from 'vue'
import { VueFinder, RemoteDriver } from 'vuefinder'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()

// Recreate the RemoteDriver reactively so the token stays current across
// automatic refresh cycles (useApi composable silently rotates accessToken).
const driver = computed(
  () =>
    new RemoteDriver({
      baseURL: '/api/files',
      token: auth.accessToken ?? undefined,
    })
)

// Non-persistent config passed to VueFinder per session.
// maxFileSize in bytes — 10 MB limit matches the backend upload ceiling.
const finderConfig = {
  theme: 'midnight',
  maxFileSize: 10 * 1024 * 1024,
  showMenuBar: true,
  showToolbar: true,
}
</script>

<template>
  <div class="space-y-6 p-6">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-white">File Manager</h1>
        <p class="text-sm text-gray-400 mt-1">Browse and edit your server files</p>
      </div>
    </div>

    <div
      class="bg-neutral-900 rounded-lg border border-neutral-800 overflow-hidden"
      style="min-height: 640px;"
    >
      <VueFinder
        id="corrosion-filemanager"
        :driver="driver"
        :config="finderConfig"
        locale="en"
      />
    </div>
  </div>
</template>
