<template>
    <div class="contenthidden">
        <StatusBar />
        <div class="contentscroll">

            <!-- Titel -->
            <h2>{{ $t('falukant.family.title') }}</h2>

            <!-- Ehepartner -->
            <div class="spouse-section">
                <h3>{{ $t('falukant.family.spouse.title') }}</h3>
                <div v-if="relationships.length > 0">
                    <table>
                        <tr>
                            <td>{{ $t('falukant.family.relationships.name') }}</td>
                            <td>
                                {{ $t('falukant.titles.' + relationships[0].character2.gender + '.' +
                                relationships[0].character2.nobleTitle) }}
                                {{ relationships[0].character2.firstName }}
                            </td>
                        </tr>
                        <tr>
                            <td>{{ $t('falukant.family.spouse.age') }}</td>
                            <td>{{ relationships[0].character2.age }}</td>
                        </tr>
                        <tr>
                            <td>{{ $t('falukant.family.spouse.status') }}</td>
                            <td>{{ $t('falukant.family.statuses.' + relationships[0].relationshipType) }}</td>
                        </tr>
                    </table>
                    <div v-if="relationships[0].relationshipType === 'wooing'">
                        <h3>{{ $t('falukant.family.spouse.wooing.gifts') }}</h3>
                        <table class="spouse-table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>{{ $t('falukant.family.spouse.wooing.gift') }}</th>
                                    <th>{{ $t('falukant.family.spouse.wooing.value') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="gift in gifts" :key="gift.id">
                                    <td><input type="radio" name="gift" :value="gift.id" v-model="selectedGiftId"></td>
                                    <td>{{ $t(`falukant.gifts.${gift.name}`) }}</td>
                                    <td>{{ formatCost(gift.cost) }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <button @click="sendGift" class="button">{{ $t('falukant.family.spouse.wooing.sendGift') }}</button>
                        </div>
                    </div>
                </div>
                <div v-else-if="proposals && proposals.length > 0">
                    <table class="spouse-table">
                        <thead>
                            <tr>
                                <th>{{ $t('falukant.family.spouse.select') }}</th>
                                <th>{{ $t('falukant.family.spouse.name') }}</th>
                                <th>{{ $t('falukant.family.spouse.age') }}</th>
                                <th>{{ $t('falukant.family.spouse.marriagecost') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="proposal in proposals" :key="proposal.id">
                                <td><input type="radio" name="spouse" :value="proposal.proposedCharacterId"
                                        v-model="selectedProposalId"></td>
                                <td>{{
                                    $t(`falukant.titles.${proposal.proposedCharacterGender}.${proposal.proposedCharacterNobleTitle}`)
                                    }} {{ proposal.proposedCharacterName }}</td>
                                <td>{{ proposal.proposedCharacterAge }}</td>
                                <td>{{ formatCost(proposal.cost) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div>{{ $t('falukant.family.spouse.notice') }}</div>
                    <div v-if="selectedProposalId">
                        <button @click="acceptProposal">{{ $t('falukant.family.spouse.accept') }}</button>
                    </div>
                </div>
            </div>

            <!-- Kinder -->
            <div class="children-section">
                <h3>{{ $t('falukant.family.children.title') }}</h3>
                <div v-if="children && children.length > 0">
                    <table>
                        <thead>
                            <tr>
                                <th>{{ $t('falukant.family.children.name') }}</th>
                                <th>{{ $t('falukant.family.children.age') }}</th>
                                <th>{{ $t('falukant.family.children.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(child, index) in children" :key="index">
                                <td>
                                    {{ $t('falukant.titles.' + child.gender + '.' + child.title) }}
                                    {{ child.name }}
                                </td>
                                <td>{{ child.age }}</td>
                                <td>
                                    <button @click="showChildDetails(child)">
                                        {{ $t('falukant.family.children.detailButton') }}
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    <p>{{ $t('falukant.family.children.none') }}</p>
                </div>
            </div>

            <!-- Liebhaber / Geliebte -->
            <div class="lovers-section">
                <h3>{{ $t('falukant.family.lovers.title') }}</h3>
                <div v-if="lovers && lovers.length > 0">
                    <ul>
                        <li v-for="(lover, idx) in lovers" :key="idx">
                            {{ $t('falukant.titles.' + lover.gender + '.' + lover.title) }} {{ lover.name }}
                            ({{ $t('falukant.family.lovers.affection') }}: {{ lover.affection }})
                        </li>
                    </ul>
                </div>
                <div v-else>
                    <p>{{ $t('falukant.family.lovers.none') }}</p>
                </div>
            </div>

        </div>
    </div>
    <!-- Dialog-Beispiele oder ähnliche Komponenten -->
    <MessageDialog ref="messageDialog" />
    <ErrorDialog ref="errorDialog" />
</template>

<script>
import StatusBar from '@/components/falukant/StatusBar.vue'
import MessageDialog from '@/dialogues/standard/MessageDialog.vue'
import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue'

import apiClient from '@/utils/axios.js'
import { mapState } from 'vuex'

export default {
    name: 'FamilyView',
    components: {
        StatusBar,
        MessageDialog,
        ErrorDialog
    },
    data() {
        return {
            relationships: [],
            children: [],
            lovers: [],
            deathPartners: [],
            proposals: [],
            selectedProposalId: null,
            gifts: [],
            selectedGiftId: null
        }
    },
    computed: {
        ...mapState(['socket', 'daemonSocket'])
    },
    async mounted() {
        await this.loadFamilyData();
        await this.loadGifts();
    },
    methods: {
        async loadFamilyData() {
            try {
                const response = await apiClient.get('/api/falukant/family');
                console.log(response.data);
                this.relationships = response.data.relationships;
                this.children = response.data.children;
                this.lovers = response.data.lovers;
                this.proposals = response.data.possiblePartners;
                this.deathPartners = response.data.deathPartners;
            } catch (error) {
                console.error('Error loading family data:', error);
            }
        },

        showChildDetails(child) {
            console.log('Show details for child:', child);
        },

        formatCost(value) {
            return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
        },

        async acceptProposal() {
            const response = await apiClient.post('/api/falukant/family/acceptmarriageproposal'
                , { proposalId: this.selectedProposalId });
            this.loadFamilyData();
        },

        async loadGifts() {
             const response = await apiClient.get('/api/falukant/family/gifts');
             this.gifts = response.data;
        },

        async sendGift() {
            if (!this.selectedGiftId) {
                alert('Please select a gift');
                return;
            }
            const response = await apiClient.post('/api/falukant/family/gift'
                , { giftId: this.selectedGiftId });
            this.loadFamilyData();
        }
    }
}
</script>

<style scoped lang="scss">
.spouse-section,
.children-section,
.lovers-section {
    border: 1px solid #ccc;
    margin: 10px 0;
    border-radius: 4px;
    padding: 10px;
}

.spouse-section table,
.children-section table {
    margin-top: 10px;
    border-collapse: collapse;
}

.spouse-section th,
.spouse-section td,
.children-section th,
.children-section td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.spouse-section th {
    background-color: #f2f2f2;
}

.children-section th {
    background-color: #f9f9f9;
}

.lovers-section {
    ul {
        list-style: none;
        padding-left: 0;
    }

    li {
        padding: 4px 0;
    }
}

.spouse-table th,
.spouse-table td {
    white-space: nowrap;
}

.spouse-table th:first-child,
.spouse-table td:first-child {
    width: 20px;
}

.spouse-table th:nth-child(3),
.spouse-table td:nth-child(3) {
    width: 30px;
}

.spouse-table th:nth-child(4),
.spouse-table td:nth-child(4) {
    width: 50px;
}

h2 {
    padding-top: 20px;
}
</style>