<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">단어장 수정</p>
    </div>
    <div class="content-t">

        <div class="board-wrap">
            <div class="flex align-center mb20">
                <div class="flex align-center">
                    <label for="" class="title2">교재</label>
                    <select name="" id="" v-model="selectedBookId" @change="fetchUnits" class="mr10">
                        <option value="" disabled>교재를 선택하세요</option>
                        <option v-for="book in books" :key="book.book_id" :value="book.book_id">
                            {{ book.book_nm }}
                        </option>
                    </select>
                    <select name="" id="" v-model="selectedUnitId" @change="fetchTexts" class="mr10">
                        <option value="" disabled>단원을 선택하세요</option>
                        <option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
                            {{ unit.unitName }}
                        </option>
                    </select>

                    <select v-model="selectedTextId" class="mr10 data-wrap">
                        <option value="" disabled>지문을 선택하세요</option>
                        <option v-for="text in texts" :key="text.textId" :value="text.textId">
                            {{ text.textTtl }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="flex align-center mb20">
                <label for="" class="title2">단어장 타입</label>
                <select v-model="selectedWdBookTypeId" class="mr10 data-wrap">
                    <option value="1">단어장 (일반)</option>
                    <option value="2">단어장 (스피킹)</option>
                    <option value="3">단어장 (숏폼)</option>
                    <option value="4">단어장 (카드 뒤집기)</option>
                    <option value="5">단어장 (카드 맞추기)</option>
                </select>
            </div>
            <div class="flex align-center">
                <label for="" class="title2">단어 목록</label>
                <div class="flex-column" style="gap: 10px;">
                    <div class="flex align-center" style="gap: 10px;">
                        <input v-model="newWord.eng" type="text" class="data-wrap" placeholder="영어">
                        <input v-model="newWord.kor" type="text" class="data-wrap" placeholder="한글">
                        <input type="file" ref="fileInput" @change="handleFileUpload" multiple />
                        <button type="button" @click="addWord">
                            <img src="../../../resources/img/btn39_120t_normal.png" alt="">
                        </button>
                    </div>

                    <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 -->
                    <div v-for="(word, index) in words" :key="index" class="flex align-center" style="gap: 10px;">
                        <input v-model="word.eng" type="text" class="data-wrap" placeholder="영어">
                        <input v-model="word.kor" type="text" class="data-wrap" placeholder="한글">
                        <button type="button" @click="removeWord(index)">
                            <img src="../../../resources/img/btn38_120t_normal.png" alt="">
                        </button>
                    </div>

                </div>
                <!--
                <div class="flex align-center" style="gap: 10px;">
                    <input type="text" class="data-wrap" placeholder="영어">
                    <input type="text" class="data-wrap" placeholder="한글">
                    <button type="button" @click="addThesis">
                        <img src="../../../resources/img/btn39_120t_normal.png" alt="">

                    </button>
                </div>
                <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id">
                    <input type="text" class="data-wrap" placeholder="영어">
                    <input type="text" class="data-wrap" placeholder="한글">
                    <button type="button" @click="removeThesis(thesis.id)">
                        <img src="../../../resources/img/btn38_120t_normal.png" alt="">
                    </button>

                </div>

                -->
            </div>
        </div>
        <div class="flex justify-between mt50">
            <button type="button" title="목록" class="new-btn" @click="goToPage('VocaList')">
                목록
            </button>
            <div class="flex">
                <button type="button" title="취소" class="new-btn mr10" @click="cancelAction">
                    취소
                </button>
                <button type="button" title="수정" class="new-btn" @click="registerWordBook">
                    수정
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';
import axios from "axios";


export default {
    data() {
        return {
            thesised: [],
            mdiPlusCircleOutline: mdiPlusCircleOutline,
            mdiMagnify: mdiMagnify,
            mdiWindowClose: mdiWindowClose,

            selectedBookId: null,
            selectedUnitId: null,
            selectedTextId: null,

            newWord: { eng: '', kor: '', fileMngId: null }, // 입력된 새 단어
            words: [], // 단어 목록

            books: [],
            units: [],
            texts: [],

            wordbooks: [],
            selectedWdBookId: null,
        }
    },
    methods: {
        async handleFileUpload(e) {
            const files = e.target.files;
            if (files.length > 0) {
                const fileMngId = await this.uploadFiles(files);
                this.newWord.fileMngId = fileMngId; // 파일 매니지 ID 저장
            }
        },

        // 논문실적 버튼 추가
        addThesis() {
            // 고유 ID로 현재 시간의 타임스탬프를 사용
            const uniqueId = Date.now();
            this.thesised.push({
                id: uniqueId, // 고유 ID 추가

            });
        },
        removeThesis(thesisId) {
            // ID를 기준으로 교육 정보 객체를 찾아서 삭제
            const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
            if (index !== -1) {
                this.thesised.splice(index, 1);
            }
        },
        // 

        addWord() { // 단어 추가
            if (this.newWord.eng && this.newWord.kor) {
                const newWordWithFile = { ...this.newWord }; // 새 단어 객체
                this.words.push(newWordWithFile);
                // 초기화
                this.newWord.eng = '';
                this.newWord.kor = '';
                this.newWord.fileMngId = null; // 파일 매니지 ID 초기화
            } else {
                console.log("단어 입력이 비어 있음");
            }
        },

        removeWord(index) { // 단어 삭제
            this.words.splice(index, 1);
        },

        goToPage(page) {
            this.$router.push({ name: page });
        },

        cancelAction() {
            this.$router.go(-1);
        },


        // 교재 정보 가져오기
        fetchBooks() {
            axios({
                url: "/book/findAll.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
            })
                .then(response => {
                    console.log(response.data)
                    this.books = response.data;
                    this.selectedTextId = '';
                })
                .catch(error => {
                    console.error("fetchBooks - error: ", error);
                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
                });
        },

        // 단원 정보 가져오기
        fetchUnits() {
            if (!this.selectedBookId) return;

            axios({
                url: "/unit/unitList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    "bookId": this.selectedBookId
                },
            })
                .then(response => {
                    this.units = response.data;
                    this.selectedTextId = '';
                    this.fetchTexts();
                })
                .catch(error => {
                    console.error("fetchUnits - error: ", error);
                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
                });
        },

        // 지문 정보 가져오기
        fetchTexts() {
            axios({
                url: "/text/textSearch.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    "unitId": this.selectedUnitId
                },
            })
                .then(response => {
                    this.texts = response.data.list;
                })
                .catch(error => {
                    console.error("fetchTexts - error: ", error);
                    alert("지문 목록을 불러오는 중 오류가 발생했습니다.");
                });
        },

        // 단어장의 단어 정보 조회 메서드
        dataSelectList() {
            const vm = this;
            axios({
                url: "/word/getWordsByBookId.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    wdBookId: vm.selectedWdBookId,
                },
            })
                .then(function (response) {
                    console.log("dataList - response: ", response.data);
                    vm.words = response.data.map(word => ({
                        eng: word.wdNm,
                        kor: word.wdMnng,
                        fileMngId: word.fileMngId // 필요시 fileMngId도 포함
                    }));

                })
                .catch(function (error) {
                    console.log("dataList - error: ", error);
                    alert("단어장 목록 조회에 오류가 발생했습니다.");
                });
        },

        // 기존 단어 조회 메서드
        fetchExistingWords(wdBookId) {
            return axios.post('/word/getWordsByBookId.json', { wdBookId: wdBookId })
                .then(response => {
                    console.log("기존 단어 ", response.data);
                    return response.data;
                })
                .catch(error => {
                    console.error('기존 단어 목록 가져오기 실패:', error);
                    return [];
                });
        },
        // 파일 업로드 메서드
        async uploadFiles(files) {
            if (!files || files.length === 0) {
                return null;
            }

            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append("files", files[i]);
            }

            try {
                const response = await axios.post("/file/upload.json", formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                });

                return response.data.fileMngId; // 파일 매니지 ID 반환
            } catch (error) {
                console.error("파일 업로드 오류:", error);
                throw new Error("파일 업로드에 실패했습니다.");
            }
        },


        async registerWordBook() {
            const vm = this;

            try {
                const response = await axios.post('/wordbook/update.json', {
                    wdBookTypeId: vm.selectedWdBookTypeId,
                    textId: vm.selectedTextId,
                    userId: vm.wordbooks.userId,
                    bookId: vm.selectedBookId,
                    unitId: vm.selectedUnitId,
                    wdBookId: vm.selectedWdBookId,
                });

                const wdBookId = vm.selectedWdBookId;
                const existingWords = await vm.fetchExistingWords(wdBookId);
                console.log('기존 단어 목록:', existingWords);

                const existingWordMap = new Map(existingWords.map(word => [word.wdNm, word]));
                const wordsToInsert = [];
                const wordsToUpdate = [];
                const wordsToDelete = [];

                // 신규 단어 처리
                vm.words.forEach(word => {
                    const existingWord = existingWordMap.get(word.eng);
                    if (existingWord) {
                        wordsToUpdate.push({
                            wdId: existingWord.wdId,
                            wdBookId: wdBookId,
                            wdNm: existingWord.wdNm,
                            wdMnng: word.kor,
                            fileMngId: word.fileMngId,
                        });
                    } else {
                        wordsToInsert.push({
                            wdBookId: wdBookId,
                            wdNm: word.eng,
                            wdMnng: word.kor,
                            fileMngId: word.fileMngId
                        });
                    }
                });

                // 삭제할 단어 처리
                existingWords.forEach(word => {
                    if (!vm.words.find(newWord => newWord.eng === word.wdNm)) {
                        wordsToDelete.push(word);
                    }
                });

                console.log('신규 단어 목록:', wordsToInsert);
                console.log('업데이트 단어 목록:', wordsToUpdate);
                console.log('삭제할 단어 목록:', wordsToDelete);

                // 단어 삽입
                for (const word of wordsToInsert) {
                    const insertResponse = await axios.post('/word/insert.json', word);
                    console.log('삽입 응답:', insertResponse);
                }

                // 단어 업데이트
                for (const word of wordsToUpdate) {
                    const updateResponse = await axios.post('/word/update.json', {
                        wdId: word.wdId,
                        wdBookId: wdBookId,
                        wdNm: word.wdNm,
                        wdMnng: word.wdMnng,
                        fileMngId: word.fileMngId,
                    });
                    console.log('업데이트 응답:', updateResponse);
                }

                // 단어 삭제
                for (const word of wordsToDelete) {
                    const deleteResponse = await axios.post('/word/delete.json', {
                        wdBookId: wdBookId,
                        wdId: word.wdId
                    });
                    console.log('삭제 응답:', deleteResponse);
                }

                alert('단어장이 성공적으로 등록되었습니다.');
                vm.goToPage('VocaList');
            } catch (error) {
                console.error('단어장 등록 중 오류 발생:', error);
                alert('단어장 등록에 실패했습니다.');
            }
        },

        // 단어장 정보 가져오기
        wordBookFind() {
            const vm = this;
            axios({
                url: "/wordbook/find.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    wdBookId: vm.selectedWdBookId,
                },
            })
                .then(function (response) {
                    console.log("dataList - response: ", response.data);
                    vm.selectedWdBookTypeId = response.data.wdBookTypeId;
                    vm.selectedTextId = response.data.textId;
                    vm.wordbooks = response.data;
                })
                .catch(function (error) {
                    console.log("dataList - error: ", error);
                    alert("단어장 목록 조회에 오류가 발생했습니다.");
                });
        },


    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        this.selectedBookId = this.$route.query.selectedBookId || '';
        this.selectedUnitId = this.$route.query.selectedUnitId || '';
        this.selectedWdBookId = this.$route.query.wdBookId || '';
        this.fetchBooks();
        this.fetchUnits();

        this.dataSelectList();
        this.wordBookFind();
    }
}
</script>