<template>
  <div :class="embedded ? '' : 'flex h-full flex-col'">
    <div v-if="!embedded" class="flex items-center gap-1 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
      <FolderTree :size="13" /> {{ t('workspace.files') }}
      <button type="button" class="ml-auto rounded p-0.5 hover:bg-zinc-800 hover:text-zinc-300" :title="t('common.refresh')" @click="load">
        <RefreshCw :size="12" />
      </button>
    </div>
    <div :class="embedded ? '' : 'min-h-0 flex-1 overflow-auto px-1 pb-2'">
      <p v-if="loading" class="px-2 py-1 text-xs text-zinc-600">{{ t('fs.loading') }}</p>
      <p v-else-if="error" class="px-2 py-1 text-xs text-rose-400">{{ error }}</p>
      <p v-else-if="entries.length === 0" class="px-2 py-1 text-xs text-zinc-600">{{ t('fs.empty') }}</p>
      <FileTreeNode
        v-for="e in entries"
        :key="e.path"
        :entry="e"
        :wt="wt"
        :depth="depth"
        :active="active"
        @open="(p) => emit('open', p)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { FolderTree, RefreshCw } from '@lucide/vue';
import type { FsEntry, FsListResponse } from '@arboretum/shared';
import { api } from '../../lib/api';
import FileTreeNode from './FileTreeNode.vue';

const props = withDefaults(defineProps<{ wt: string; active: string | null; embedded?: boolean; depth?: number }>(), {
  embedded: false,
  depth: 0,
});
const emit = defineEmits<{ open: [relPath: string] }>();
const { t } = useI18n();

const entries = ref<FsEntry[]>([]);
const loading = ref(false);
const error = ref<string | null>(null);

async function load(): Promise<void> {
  loading.value = true;
  error.value = null;
  try {
    const res = await api.get<FsListResponse>(`/api/v1/fs/list?path=${encodeURIComponent(props.wt)}&includeFiles=1`);
    entries.value = [...res.entries].sort((a, b) => Number(!!a.isFile) - Number(!!b.isFile) || a.name.localeCompare(b.name));
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err);
  } finally {
    loading.value = false;
  }
}

onMounted(load);
watch(() => props.wt, load);
</script>
