<template>
    <div class="flex flex-col h-screen p-4 bg-gray-100">
        <header class="flex justify-between items-center mb-4">
            <h1 class="text-xl font-bold">SKOS Browser</h1>
            <div class="flex space-x-2">
                <button @click="updateApp" title="Update the application">
                    <img src="/Resources/Images/refresh.png" alt="Update" class="w-4 h-4" />
                </button>
                <button @click="showInfo" title="Info">
                    <img src="/Resources/Images/info.png" alt="Info" class="w-4 h-4" />
                </button>
            </div>
        </header>

        <div class="bg-white shadow-md rounded-lg p-4 mb-6">
            <h2 class="text-lg font-semibold">GBA-Thesaurus</h2>
            <label class="block text-sm font-medium">Aktueller Endpoint:</label>
            <!-- <TreeView :items="endpoints" @select="onEndpointSelected" /> -->
        </div>

        <div class="bg-white shadow-md rounded-lg p-4">
            <h2 class="text-lg font-semibold">Konzept-Suche</h2>
            <!-- <Autocomplete v-model="selectedConcept" :items="concepts" placeholder="Search for a concept" @change="onConceptSelected" /> -->
            <div class="mt-4">
                <h3 class="text-md font-medium">Ausgewähltes Konzept</h3>
                <p>{{ selectedConcept.title }}</p>
                <a :href="selectedConcept.uri" target="_blank" class="text-blue-500">URI</a>
                <textarea
                    v-model="selectedConcept.description"
                    class="mt-2 w-full h-24 border rounded"
                    placeholder="Description"
                ></textarea>
            </div>
            <div class="mt-4">
                <h3 class="text-md font-medium">Untergeordnete Konzepte</h3>
                <!-- <LinkLabelList :items="narrowerConcepts" /> -->
            </div>
            <div class="mt-4">
                <h3 class="text-md font-medium">Übergeordnete Konzepte</h3>
                <!-- <LinkLabelList :items="broaderConcepts" /> -->
            </div>
            <div class="mt-4">
                <h3 class="text-md font-medium">Verwandte Konzepte</h3>
                <!-- <LinkLabelList :items="relatedConcepts" /> -->
            </div>
        </div>
    </div>
</template>

<script>
// import TreeView from './TreeView.vue'; // Assuming you have a TreeView component
// import Autocomplete from './Autocomplete.vue'; // Assuming you have an Autocomplete component
// import LinkLabelList from './LinkLabelList.vue'; // Assuming you have a LinkLabelList component

export default {
    components: {
        // TreeView,
        // Autocomplete,
        // LinkLabelList,
    },
    data() {
        return {
            endpoints: [], // This should be populated with your data
            concepts: [], // This should be populated with your data
            selectedConcept: {},
            narrowerConcepts: [], // Populate with data
            broaderConcepts: [], // Populate with data
            relatedConcepts: [], // Populate with data
        };
    },
    methods: {
        updateApp() {
            // Handle app update logic
        },
        showInfo() {
            // Handle showing information
        },
        onEndpointSelected(endpoint) {
            // Handle endpoint selection
        },
        onConceptSelected(concept) {
            this.selectedConcept = concept;
            // Handle concept selection logic, e.g., fetching related concepts
        },
    },
};
</script>

<style scoped>
/* Add your styles here */
</style>
