var pollFunction = (function () {
    let limit = 10;
    let cursor = 0;
  return {
    getPollList: () => {
        commonFunction.aJax({
        url: service_url + `/get-poll-list.php?limit=${limit}&cursor=${cursor}`,
        data: { },
        type: "POST",
        done: function (response) {
            if (response.state) {
                const items = response.info.list;

                items.forEach((item) => {
                    const buttons = (() => {
                        // 진행중
                        if (item.status_code === '003') {
                            return `
                                <button class="px-4 py-1.5 text-sm xs:text-xs rounded bg-blue-600 text-white hover:bg-blue-700" name="vote-button" data-poll-id="${item.poll_id}" data-poll-uid="${item.poll_uid}" data-status-code="${item.status_code}">
                                    투표하기
                                </button>
                                <button class="px-4 py-1.5 text-sm xs:text-xs rounded bg-gray-600 text-white hover:bg-gray-700" name="vote-status-button" data-poll-id="${item.poll_id}" data-poll-uid="${item.poll_uid}" data-status-code="${item.status_code}">
                                    현황보기
                                </button>`;
                        } else if (item.status_code === '004') {
                            return `
                                <button class="px-4 py-1.5 text-sm xs:text-xs rounded bg-gray-600 text-white hover:bg-gray-700" name="vote-result-button" data-poll-id="${item.poll_id}" data-poll-uid="${item.poll_uid}" data-status-code="${item.status_code}">
                                    결과보기
                                </button>`;
                        } else {
                            return ``;
                        }
                    })()

                    const listItem = `
                        <article class="flex flex-row rounded-lg bg-white dark:bg-surface-dark shadow-md p-4 w-full" >
                            <!-- 이미지 -->
                            <div class="flex-shrink-0 w-60 h-48 sm:w-48 sm:h-36 xs:w-40 xs:h-28 rounded-md overflow-hidden bg-gray-200">
                                <img src="${item.photo}" alt="설문 관련 이미지" class="w-full h-full object-cover" />
                            </div>
                            <!-- 내용 -->
                            <div class="flex flex-col flex-grow ml-6 sm:ml-4 xs:ml-3">
                            <!-- 상단: 카테고리 | 제목 | 상태 -->
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center gap-2">
                                    <span class="text-2xl sm:text-xl xs:text-lg font-bold text-gray-800">${item.category_name}</span>
                                    <span class="text-3xl sm:text-2xl xs:text-xl text-gray-700">| ${item.subject}</span>
                                    </div>
                                    <span class="px-3 py-1 text-sm rounded bg-orange-500 text-white">
                                    ${item.status_name}
                                    </span>
                                </div>

                                <!-- 내용 -->
                                <p class="text-base sm:text-sm xs:text-xs text-gray-700 line-clamp-3">
                                    ${item.contents}
                                </p>

                                <!-- 기간 + 버튼 (하단 고정) -->
                                <div class="flex items-center justify-between mt-auto pt-4 text-base sm:text-sm xs:text-xs text-gray-600">
                                    <span>설문 기간 ${item.start_date} ~ ${item.end_date} | 총 참여 ${commonFunction.addComma(item.votes_count)}명</span>
                                    <div class="flex gap-2">
                                        ${buttons}
                                    </div>
                                </div>
                            </div>
                        </article>
                    `;

                    $('#poll-list').append(listItem);
                });


                cursor = response.info.next_cursor;


                if(!response.info.has_more) {
                    $('#moreButtonBox').hide();
                }

            } else {
            }


            $('#moreButtonBox').removeClass('invisible');
            $('#loadingBar').addClass('invisible');
        },
        fail: function (error) {
            location.href = "/";
        },
    });
    },
    getPollDetail: ({mode}) => {
        commonFunction.aJax({
            url: service_url + "/get-poll-detail.php?uid=" + pagePollUid,
            data: { },
            type: "GET",
            done: function (response) {
                if (response.state) {
                    const info = response.info;

                    infoData = info;

                    poll_id = infoData.poll_id;

                    $('#poll_subject').append(info.poll_subject);
                    $('#poll_created_at').append(`등록일 : ${info.poll_created_at}`);
                    $('#poll_photo').append(`<img src="${info.poll_photo}" alt="설문 관련 이미지" class="w-full h-full object-cover" />`);
                    $('#poll_contents').append(`${info.poll_contents}`);
                    $('#poll_start_end').append(`${info.poll_start_date} ~ ${info.poll_end_date}  |`);

                } else {
                }

                $('#poll-view').removeClass('invisible');
                $('#loadingBar').addClass('invisible');


                pollFunction.getPollOptions({mode: mode, poll_id: infoData.poll_id});

            },
            fail: function (error) {
                location.href = "/";
            },
        });
    },
    getPollOptions: ({mode, poll_id}) => {
        commonFunction.aJax({
            url: service_url + "/get-poll-options.php?poll_id=" + poll_id,
            data: { },
            type: "GET",
            done: function (response) {
                if (response.state) {
                    const questions = response.info.questions[0];

                    $('#poll_vote_count').append(`총 참여 ${commonFunction.addComma(questions.total_votes)}명`);

                    if(mode === 'status' || mode === 'result') {
                        return;
                    }

                    let optionsHtml = '';

                    questions.options.forEach((option, index) => {
                         optionsHtml += `<li><label><input type="radio" name="option-radio" class="mr-2" value="${option.option_id}" /> <span class="text-gray-800">${option.option_text}</span></label></li>`;
                    });

                    $('#poll-options-box').append(`

                        <h3 class="font-semibold text-center text-gray-800">Q. ${questions.question_text}<h3>

                        <!-- 보기 목록 -->
                        <ul class="space-y-2 text-sm pl-6">${optionsHtml}</ul>

                        <!-- 버튼 -->
                        <div class="flex justify-center gap-3 pt-4">
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded" name="vote-button" data-poll_id="${poll_id}" data-question_id="${questions.question_id}">
                                투표하기
                            </button>
                            <button class="bg-gray-600 hover:bg-gray-700 text-white px-5 py-2 rounded" name="vote-result-button" data-poll_id="${poll_id}">
                                현황보기
                            </button>
                        </div>
                    `);

                } else {
                }
            },
            fail: function (error) {
                location.href = "/";
            },
        });
    },
    getPollStatus: ({poll_id, poll_uid}) => {
        commonFunction.aJax({
            // url: service_url + "/get-poll-status.php?poll_id=" + poll_id,
            url:(() => {
                if(poll_id) {
                    return service_url + "/get-poll-status.php?poll_id=" + poll_id;
                } else if(poll_uid) {
                    return service_url + "/get-poll-status.php?uid=" + poll_uid;
                }
            })(),
            data: { },
            type: "GET",
            done: function (response) {
                if (response.state) {

                    const info = response.info;
                    const poll = info.poll;
                    const questions = info.questions[0];

                    let optionsHtml = "";
                    questions.options.forEach((option, index) => {
                        const optNum = index + 1

                         optionsHtml += `
                            <!-- 항목 ${optNum} -->
                            <li class="grid grid-cols-12 items-center gap-3">
                                <div class="col-span-12 sm:col-span-3 text-sm sm:text-base text-slate-800 text-right sm:text-left">
                                    <span class="font-medium">${optNum}. ${option.option_text}</span>
                                </div>
                                <div class="col-span-12 sm:col-span-7">
                                    <div class="w-full h-4 rounded bg-slate-200 overflow-hidden">
                                        <div class="h-full bg-teal-700" style="width: ${option.percent}%;" aria-label="보기 1 막대"></div>
                                    </div>
                                </div>
                                <div class="col-span-12 sm:col-span-2 text-xs sm:text-sm text-slate-800 text-right">
                                    <span class="font-semibold">${commonFunction.addComma(option.votes)}명</span> <span class="text-slate-500">(${option.percent}%)</span>
                                </div>
                            </li>
                         `;
                    });


                    $('#poll-options-box').append(`
                        <!-- 결과 카드 -->
                        <!-- 기간/총참여 -->
                        <!--div class="text-center text-sm sm:text-base text-slate-700">
                            <span class="text-slate-600">설문 <span class="font-semibold text-blue-700">기간</span></span>
                            <span class="mx-1">${poll.period.start_date} ~ ${poll.period.end_date}</span>
                            <span class="mx-2">|</span>
                            <span class="font-semibold text-slate-800">총 참여 <span>${commonFunction.addComma(info.total_votes)}</span>명</span>
                        </div-->

                        <!-- 질문 -->
                        <h3 class="text-center text-xl sm:text-2xl font-semibold text-slate-900"> Q. ${questions.question_text}</h3>

                        <!-- 결과 리스트 -->
                        <ul class="space-y-3">
                            ${optionsHtml}
                        </ul>

                        <!-- 이전 버튼 -->
                        <div class="flex justify-center">
                            <button class="px-6 py-2 rounded bg-teal-800 text-white hover:bg-teal-900 shadow" name="vote-view-button" data-poll_id="${poll_id}">
                                투표하기
                            </button>
                        </div>
                    `);

                } else {
                }

                $('#loadingBar').addClass('invisible');

            },
            fail: function (error) {
                location.href = "/";
            },
        });
    },
  };
})();