<script setup lang="ts">

import { Settings } from '@vicons/carbon'
import { getAuthClient } from '@/api/auth_client';
import { Icon } from '@vicons/utils'
import { NButton } from 'naive-ui'
import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server';
import { NCard, NInput, NModal, NSpace, NFlex, NText } from 'naive-ui'
import HeaderMenu from '@/components/HeaderMenu.vue'
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const client = getAuthClient()
const router = useRouter()
const route = useRoute()
const gameId = route.params.id

const message = useMessage()

const showSettingsModal = ref(false)
const showGiveApplicationModal = ref(false)
const showAddTeamModal = ref(false)
const showDeleteTeamModal = ref(false)
const newTeamName = ref('')

const game = ref<Game>({
    id: undefined,
    name: undefined,
    description: undefined,
    startAt: undefined,
    status: undefined,
    scenario: undefined,
    teams: undefined,
})

async function getGame(id: number) {
    const res = await client.GetGame({ id: id })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    game.value = res.game!
}
getGame(Number(gameId))

async function toTeamStory(id: number, password: string) {
    router.push('/team-story/' + id + '?password=' + password)
}

async function updateGame() {
    const res = await client.UpdateGame({
        id: game.value.id,
        name: game.value.name,
        description: game.value.description,
        startAt: game.value.startAt,
        scenarioId: game.value.scenario?.id,
    })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    await getGame(game.value.id!)
    showSettingsModal.value = false
}

const giveApplicationTeam = ref<Team>({
    id: 0,
    name: '',
    status: '',
    password: '',
    actionsCount: 0,
    applications: []
})

const deletedTeamName = ref('')
const deletedTeam = ref<Team>({
    id: 0,
    name: '',
    status: '',
    password: '',
    actionsCount: 0,
    applications: []
})

const giveApplicationApplication = ref<Application>({
    name: '',
    image: ''
})

function giveApplication(team: Team, application: Application) {
    giveApplicationTeam.value = team
    giveApplicationApplication.value = application
    showGiveApplicationModal.value = true
}

async function addTeam() {
    const res = await client.AddTeam({
        gameId: game.value.id,
        name: newTeamName.value,
    })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    await getGame(game.value.id!)
    showAddTeamModal.value = false
}

async function confirmGiveApplication() {
    const res = await client.GiveTeamApplications({
        id: giveApplicationTeam.value.id,
        name: giveApplicationApplication.value.name,
    })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    await getGame(game.value.id!)
    showGiveApplicationModal.value = false
}

async function deleteTeam(team: Team) {
    deletedTeam.value = team
    showDeleteTeamModal.value = true
}

async function confirmDeleteTeam() {
    const res = await client.DeleteTeam({
        id: deletedTeam.value.id,
    })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    await getGame(game.value.id!)
    showDeleteTeamModal.value = false
}
</script>

<template>
    <div class="center-block-custom">
        <div class="width1200">

            <div class="settings-block">
                Команд: {{ game.teams?.length }}
                <n-button quaternary @click="showSettingsModal = true" class="settings-button">
                    <Icon class="settings-icon">
                        <Settings />
                    </Icon>
                    Настройки
                </n-button>
            </div>

            <div class="team-block team-block-hover" @click="showAddTeamModal = true">
                <p class="place-image-plus">+</p>
            </div>

            <div v-for="team in game.teams" class="team-block">
                <div class="team-content-block">
                    <div class="title-block">
                        <span class="team-name-block">
                            {{ team.name }}
                        </span>
                        <div>
                            Поездки: {{ team.actionsCount }}
                        </div>
                    </div>

                    <n-flex justify="end">
                        <n-button @click="toTeamStory(team.id!, team.password!)">
                            Подсмотреть игру
                        </n-button>
                        <n-button type="error" ghost @click="deleteTeam(team)">
                            Удалить
                        </n-button>
                    </n-flex>

                    <n-button v-for="application in team.applications" :key="application.name" class="link-button"
                        @click="giveApplication(team, application)">
                        Выдать: {{ application.name }}
                    </n-button>
                </div>
            </div>
        </div>
    </div>

    <!-- Окно настроек -->
    <n-modal v-model:show="showSettingsModal">
        <n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog"
            aria-modal="true">
            <template #header-extra>
                <n-button @click="showSettingsModal = false"> x </n-button>
            </template>
            <n-space vertical>
                <p>Название</p>
                <n-input v-model:value="game.name" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />

                <p class="settings-header">Описание</p>
                <n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />

            </n-space>
            <template #footer>
                <n-flex justify="end">
                    <n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
                </n-flex>
            </template>
        </n-card>
    </n-modal>

    <!-- Окно выдачи улик -->
    <n-modal v-model:show="showGiveApplicationModal">
        <n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog"
            aria-modal="true">
            <template #header-extra>
                <n-button @click="showGiveApplicationModal = false"> x </n-button>
            </template>
            <n-space vertical>
                <p>Команда</p>
                <h3>{{ giveApplicationTeam.name }}</h3>


                <p>Улика</p>
                <h3>{{ giveApplicationApplication.name }}</h3>

            </n-space>
            <template #footer>
                <n-flex justify="end">
                    <n-button @click="confirmGiveApplication()" ghost> Выдать </n-button>
                </n-flex>
            </template>
        </n-card>
    </n-modal>

    <!-- Окно создания команды -->
    <n-modal v-model:show="showAddTeamModal">
        <n-card style="width: 600px" title="Создание команды" :bordered="false" size="huge" role="dialog"
            aria-modal="true">
            <template #header-extra>
                <n-button @click="showAddTeamModal = false"> x </n-button>
            </template>
            <n-input v-model:value="newTeamName" type="text" placeholder='Три дебила' />
            <template #footer>
                <n-flex justify="end">
                    <n-button @click="addTeam()" :disabled="newTeamName.length == 0">
                        Создать
                    </n-button>
                </n-flex>
            </template>
        </n-card>
    </n-modal>

    <!-- Окно создания команды -->
    <n-modal v-model:show="showDeleteTeamModal">
        <n-card style="width: 600px" title="Удаление команды" :bordered="false" size="huge" role="dialog"
            aria-modal="true">
            <template #header-extra>
                <n-button @click="showDeleteTeamModal = false"> x </n-button>
            </template>
            <n-space vertical>
                <p>
                    Введите название команды
                    <n-text class="name-text" strong>{{ deletedTeam.name }}</n-text> чтобы удалить его
                </p>
                <n-input v-model:value="deletedTeamName" type="text" placeholder='Три дебила' />
            </n-space>

            <template #footer>
                <n-flex justify="end">
                    <n-button @click="confirmDeleteTeam()" :disabled="deletedTeamName != deletedTeam.name">
                        Удалить
                    </n-button>
                </n-flex>
            </template>
        </n-card>
    </n-modal>

    <HeaderMenu active="games" />
</template>

<style scoped>
.team-block {
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid #444;
}

.team-block-hover:hover {
    color: #63e2b7;
    cursor: pointer;
    border: 1px solid #63e2b7;
}

.team-content-block {
    padding: 20px;
}

.team-name-block {
    font-weight: 600;
    font-size: 20px;
}

.settings-block {
    height: 40px;
}

.settings-button {
    float: right;
}

.settings-icon {
    width: 20px;
}

.title-block {
    margin-bottom: 20px;
}

.link-button {
    margin-top: 20px;
    width: 100%;
}

.place-image-plus {
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name-text {
    padding: 3px;
    border-radius: 3px;
    background-color: rgb(255 255 255 / 10%);
}
</style>
