<template>
    <div>
        <StatusBar />
        <h2>{{ $t('falukant.branch.title') }}</h2>

        <!-- Branch Selection Section -->
        <div class="branch-selection">
            <h3>{{ $t('falukant.branch.selection.title') }}</h3>
            <div>
                <FormattedDropdown :options="branches" :columns="branchColumns" v-model="selectedBranch"
                    :placeholder="$t('falukant.branch.selection.placeholder')" />
            </div>
            <div>
                <button @click="createBranch">{{ $t('falukant.branch.actions.create') }}</button>
                <button @click="upgradeBranch" :disabled="!selectedBranch">
                    {{ $t('falukant.branch.actions.upgrade') }}
                </button>
            </div>
        </div>

        <!-- Director Info Section -->
        <div class="director-info">
            <h3>{{ $t('falukant.branch.director.title') }}</h3>
            <p v-if="selectedBranch">
                {{ $t('falukant.branch.director.info', { branchName: selectedBranch.cityName }) }}
            </p>
            <p v-else>{{ $t('falukant.branch.director.noSelection') }}</p>
        </div>

        <!-- Sale Section -->
        <div class="sale-section">
            <h3>{{ $t('falukant.branch.sale.title') }}</h3>
            <p>{{ $t('falukant.branch.sale.info') }}</p>
        </div>

        <!-- Production Section -->
        <div class="production-section">
            <h3>{{ $t('falukant.branch.production.title') }}</h3>
            <p>{{ $t('falukant.branch.production.info') }}</p>
        </div>
    </div>
</template>

<script>
import StatusBar from '@/components/falukant/StatusBar.vue';
import FormattedDropdown from '@/components/form/FormattedDropdown.vue';
import apiClient from '@/utils/axios.js';

export default {
    name: "BranchView",
    components: {
        StatusBar,
        FormattedDropdown,
    },
    data() {
        return {
            selectedBranch: null,
            branches: [],
            branchColumns: [
                { field: "cityName", label: this.$t('falukant.branch.columns.city') },
                { field: "type", label: this.$t('falukant.branch.columns.type') },
            ],
        };
    },
    async mounted() {
        await this.loadBranches();
        const branchId = this.$route.params.branchId;
        console.log('route params:', this.$route.params, branchId);
        if (branchId) {
            console.log('branch selected');
            this.selectedBranch = this.branches.find(branch => branch.id === parseInt(branchId)) || null;
        } else {
            console.log('main branch selected');
            this.selectMainBranch();
        }
    },
    methods: {
        async loadBranches() {
            try {
                const branchesResult = await apiClient.get('/api/falukant/branches');
                this.branches = branchesResult.data.map((branch) => ({
                    id: branch.id,
                    cityName: branch.region.name,
                    type: this.$t(`falukant.branch.types.${branch.branchType.labelTr}`),
                    isMainBranch: branch.isMainBranch,
                }));
                // Wenn keine selectedBranch gesetzt ist, versuche die Main Branch zu wählen
                if (!this.selectedBranch) {
                    this.selectMainBranch();
                }
            } catch (error) {
                console.error('Error loading branches:', error);
            }
        },
        selectMainBranch() {
            const main = this.branches.find(b => b.isMainBranch) || null;
            if (main !== this.selectedBranch) {
                this.selectedBranch = main;
                console.log("Main branch selected:", this.selectedBranch);
            }
        },
        createBranch() {
            alert(this.$t('falukant.branch.actions.createAlert'));
        },
        upgradeBranch() {
            if (this.selectedBranch) {
                alert(
                    this.$t('falukant.branch.actions.upgradeAlert', { branchId: this.selectedBranch.id })
                );
            }
        },
    },
};
</script>

<style scoped lang="scss">
.branch-selection,
.director-info,
.sale-section,
.production-section {
    border: 1px solid #ccc;
    margin: 10px 0;
    border-radius: 4px;
    padding: 10px;
}

button {
    margin: 5px;
}
</style>
