<template>
    <div>
        <h2>{{ $t('createClub.title') }}</h2>
        <label>{{ $t('createClub.clubName') }} <input type="text" v-model="clubName" /></label>
        <button @click="createClub">{{ $t('createClub.create') }}</button>
    </div>

    
    <!-- Info Dialog -->
    <InfoDialog
        v-model="infoDialog.isOpen"
        :title="infoDialog.title"
        :message="infoDialog.message"
        :details="infoDialog.details"
        :type="infoDialog.type"
    />
    
    <!-- Confirm Dialog -->
    <ConfirmDialog
        v-model="confirmDialog.isOpen"
        :title="confirmDialog.title"
        :message="confirmDialog.message"
        :details="confirmDialog.details"
        :type="confirmDialog.type"
        @confirm="handleConfirmResult(true)"
        @cancel="handleConfirmResult(false)"
    />
</template>

<script>
import { mapActions } from 'vuex';
import apiClient from '../apiClient.js';
import { buildInfoConfig, buildConfirmConfig, safeErrorMessage } from '../utils/dialogUtils.js';

import InfoDialog from '../components/InfoDialog.vue';
import ConfirmDialog from '../components/ConfirmDialog.vue';
export default {
    name: "CreateClubView",
    data() {
        return {
            // Dialog States
            infoDialog: {
                isOpen: false,
                title: '',
                message: '',
                details: '',
                type: 'info'
            },
            confirmDialog: {
                isOpen: false,
                title: '',
                message: '',
                details: '',
                type: 'info',
                resolveCallback: null
            },
            clubName: '',
        }
    },
    methods: {
        // Dialog Helper Methods
        async showInfo(title, message, details = '', type = 'info') {
            this.infoDialog = buildInfoConfig({ title, message, details, type });
        },
        
        async showConfirm(title, message, details = '', type = 'info', options = {}) {
            return new Promise((resolve) => {
                this.confirmDialog = buildConfirmConfig({
                    title,
                    message,
                    details,
                    type,
                    resolveCallback: resolve,
                    ...options,
                });
            });
        },
        
        handleConfirmResult(confirmed) {
            if (this.confirmDialog.resolveCallback) {
                this.confirmDialog.resolveCallback(confirmed);
                this.confirmDialog.resolveCallback = null;
            }
            this.confirmDialog.isOpen = false;
        },
        
        ...mapActions(['setClubs', 'setCurrentClub']),
        async createClub() {
            if (this.clubName.trim().length < 3) {
                await this.showInfo(this.$t('messages.info'), this.$t('createClub.nameRequired'), '', 'warning');
                return;
            }
            try {
                const newClub = await apiClient.post('/clubs', { name: this.clubName });
                const clubsResponse = await apiClient.get('/clubs');
                this.setClubs(clubsResponse.data);
                this.setCurrentClub(newClub.data);
            } catch (error) {
                if (error.status === 409) {
                    await this.showInfo(this.$t('messages.info'), this.$t('createClub.clubExists'), '', 'info');
                } else {
                    const message = safeErrorMessage(error, this.$t('createClub.unknownError'));
                    await this.showInfo(this.$t('messages.error'), message, '', 'error');
                }
            }
        }
    }
}
</script>