<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        layout:decorate="~{layout/default_layout}">
<head>
    <script th:src="@{/js/imagesloaded.pkgd.min.js}"></script>
    <script th:src="@{/js/masonry.pkgd.min.js}"></script>
    <style>
        .feed-grid {
            /* 그리드 컨테이너 */
            width: 100%;
        }
        .grid-sizer, .feed-item {
            /* 반응형 너비 설정 (기존 col-4 col-12-medium 등과 호환되게 조정) */
            width: 33.333%;
        }

        /* 모바일 화면에서는 1단으로 변경 */
        @media screen and (max-width: 980px) {
            .grid-sizer, .feed-item {
                width: 50%;
            }
        }
        @media screen and (max-width: 736px) {
            .grid-sizer, .feed-item {
                width: 100%;
            }
        }

        .feed-item {
            padding: 0 1em 2em 1em; /* 카드 간 간격 */
            float: left; /* Masonry 필수 */
        }
    </style>
</head>
<th:block layout:fragment="content" id="content">
    <section id="banner"
             th:styleappend="${randomBannerImage != null} ? |background-image: url('${apiBaseUrl}${randomBannerImage}');| : ''">
        <header th:if="${gibberish != null}">
            <h2>Bum's Gibberish: <em>[[${gibberish}]]</em></h2>
            <a th:href="@{/blog/viewer/{id}(id=${gibberishId})}" class="button">코멘트 남기기<br>[Leave a Comment]</a>
        </header>
        <header th:if="${gibberish == null}">
            <h2>Bum's: <em>짧은 헛소리 혹은 기사?! 링크 있으면 링크까지</a></em></h2>
            <a href="#" class="button">더 읽으쉴?!<br>[Read More Gibberish]</a>
        </header>
    </section>
    <section class="wrapper style1" style="padding: 2em 0 1em 0;">
        <div class="container">
            <form action="/" method="get" id="search-form" style="display: flex; justify-content: center; gap: 10px;">
                <input type="text" name="q" th:value="${searchQuery}" placeholder="관심 있는 내용을 검색해보세요 (예: Spring, 일상...)"
                       style="width: 50%; min-width: 300px; padding: 0.75em;" />
                <button type="submit" class="button icon solid fa-search">검색</button>
            </form>

            <div th:if="${searchQuery}" style="text-align: center; margin-top: 1em;">
                <h3>'<span th:text="${searchQuery}" style="color: #e44c65;"></span>' 검색 결과</h3>
                <a th:href="@{/}" class="button small alt">전체 목록 돌아가기</a>
            </div>
        </div>
    </section>
<!--    <section class="wrapper style2">-->
<!--        <div class="container">-->
<!--            <header class="major">-->
<!--                <h2>A gigantic heading you can use for whatever</h2>-->
<!--                <p>With a much smaller subtitle hanging out just below it</p>-->
<!--            </header>-->
<!--        </div>-->
<!--    </section>-->
<!--    <section id="cta2" class="wrapper style3">-->
<!--        <div class="container">-->
<!--            <header>-->
<!--                <h2>Are you ready to continue your quest?</h2>-->
<!--            </header>-->
<!--        </div>-->
<!--    </section>-->

    <section class="wrapper style1">
        <div class="container">
            <article id="feed-container" class="feed-grid">
                <section th:each="item, iterStat : ${feedItems}" class="feed-item">

                    <div th:if="${item.type.name() == 'POST'}" class="box post"
                         th:onclick="|location.href='@{${item.url}}'|" style="cursor: pointer;">
                <span class="image left">
                    <img th:if="${item.thumbnail}" th:src="${apiBaseUrl + item.thumbnail}"
                         alt="Thumbnail" th:onerror="|this.onerror=null; this.src='@{/images/pic01.jpg}';|" />
                    <img th:unless="${item.thumbnail}" th:src="@{/images/pic01.jpg}" alt="Default Thumbnail" />
                </span>
                        <div class="inner">
                            <h3 th:text="${item.title}">제목</h3>
                            <p style="font-size: 0.9em; color: #555; margin-bottom: 0.5em;"
                               th:text="${#dates.format(new java.util.Date(item.createdAt), 'yyyy-MM-dd HH:mm')} + ' by ' + ${item.writer}"></p>
                            <p th:text="${#strings.abbreviate(item.content, 150)}">내용 요약</p>
                        </div>
                    </div>

                    <div th:if="${item.type.name() == 'GIBBERISH'}" class="box post gibberish-card"
                         th:onclick="|location.href='@{${item.url}}'|"
                         style="cursor: pointer; background-color: #fff9c4; border-left: 5px solid #fbc02d;">
                        <div class="inner">
                            <blockquote>
                                <i class="icon fa-quote-left" style="color:#fbc02d; margin-right:10px;"></i>
                                <span th:text="${item.content}" style="font-size: 1.1em; font-weight: bold; color: #333;"></span>
                                <i class="icon fa-quote-right" style="color:#fbc02d; margin-left:10px;"></i>
                            </blockquote>
                            <p style="text-align: right; font-size: 0.8em; color: #777; margin-top: 10px;"
                               th:text="${#dates.format(new java.util.Date(item.createdAt), 'yyyy-MM-dd HH:mm')}"></p>
                        </div>
                    </div>

                    <div th:if="${item.type.name() == 'BOOKMARK'}" class="box post bookmark-card"
                         style="border: 1px dashed #3498db;">
                        <div class="inner" style="display: flex; align-items: center;">
                            <div style="flex-shrink: 0; margin-right: 20px;" th:if="${item.thumbnail}">
                                <img th:src="${apiBaseUrl + item.thumbnail}"
                                     style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px;" />
                            </div>
                            <div style="flex-grow: 1;">
                                <h4>
                                    <a th:href="${item.url}" target="_blank" style="text-decoration: none; color: #3498db;">
                                        <i class="icon solid fa-bookmark"></i> <span th:text="${item.title}">북마크 제목</span>
                                        <i class="icon solid fa-external-link-alt" style="font-size: 0.7em;"></i>
                                    </a>
                                </h4>
                                <p th:if="${item.content}" th:text="${item.content}" style="font-size: 0.9em; color: #666; margin-bottom: 0.5em;"></p>
                                <p style="font-size: 0.8em; color: #999;">
                                    Saved on <span th:text="${#dates.format(new java.util.Date(item.createdAt), 'yyyy-MM-dd')}"></span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div th:if="${iterStat.count % 3 == 0}" class="box ad-container" style="padding: 1em; text-align: center; margin-bottom: 2em; background: #f4f4f4;">
                        <span style="font-size: 0.8em; color: #aaa;">- Advertisement -</span>
                        <ins class="adsbygoogle"
                             style="display:block"
                             data-ad-client="ca-pub-9504446465764716"
                             data-ad-slot="5334609005"
                             data-ad-format="auto"
                             data-full-width-responsive="true"></ins>
                        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
                    </div>
                </section>
            </article>

            <div id="load-more-container" style="text-align: center; margin-top: 2em; margin-bottom: 2em;">
                <button id="btn-load-more" class="button alt"
                        th:if="${nextCursor != null}"
                        th:data-cursor="${nextCursor}"
                        onclick="loadMoreFeed()">
                    More Stories <i class="icon solid fa-chevron-down"></i>
                </button>
                <div id="loading-spinner" style="display:none;">
                    <i class="icon solid fa-spinner fa-spin fa-2x"></i>
                </div>
            </div>
        </div>
    </section>
    <section class="wrapper style1">
        <div class="container">
            <div class="row gtr-200">
                <section class="col-4 col-12-narrower">
                    <div class="box highlight">
                        <i class="icon solid major fa-paper-plane"></i>
                        <h3>This Is Important</h3>
                        <p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
                    </div>
                </section>
                <section class="col-4 col-12-narrower">

                    <div class="box highlight" sec:authorize="isAuthenticated()" onclick=gotoWrite()>
                        <i class="icon solid major fa-pencil-alt"></i>
                        <h3>글쓰기[Writing]</h3>
                        <p>오직 주인장 만의 권한 임요. 그냥 내가 쓰기 편하게 여기 놔둔 메뉴임. 님들은 못씀요.<br>[Only the owner has the authority. This is just a menu that I put here for my convenience. You can't use it.]</p>
                    </div>
                    <div class="box highlight open-login-popup" sec:authorize="isAnonymous()" to="#loginPopup" style="cursor: pointer;">
                        <i class="icon solid major fa-pencil-alt"></i>
                        <h3>글쓰기[Writing]</h3>
                        <p>오직 주인장 만의 권한 임요. 그냥 내가 쓰기 편하게 여기 놔둔 메뉴임. 님들은 못씀요.<br>[Only the owner has the authority. This is just a menu that I put here for my convenience. You can't use it.]</p>
                    </div>
                </section>
                <section class="col-4 col-12-narrower">
                    <div class="box highlight">
                        <i class="icon solid major fa-wrench"></i>
                        <h3>Probably Important</h3>
                        <p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="wrapper style1" sec:authorize="isAuthenticated()">
        <div class="container">
            <div id="gibberish-form" class="box post">
                <h4>오늘의 Gibberish 남기기 (100자 이내)</h4>
                <textarea id="gibberish-content" rows="3" maxlength="100" placeholder="문득 떠오른 생각을 적어보세요..."></textarea>
                <button class="button" style="margin-top: 1em;" onclick="submitGibberish()">등록</button>
            </div>
        </div>
    </section>
    <section id="cta2" class="wrapper style3">
        <div class="container">
            <header>
<!--                <h2>Are you ready to continue your quest?</h2>-->
            </header>
        </div>
    </section>
    <script th:inline="javascript">
        const apiBaseUrl = /*[[${apiBaseUrl}]]*/ ''; // Thymeleaf 변수 바인딩

        function loadMoreFeed() {
            const btn = document.getElementById('btn-load-more');
            const spinner = document.getElementById('loading-spinner');
            const container = document.getElementById('feed-container');

            // 현재 커서 값 가져오기
            const cursor = btn.getAttribute('data-cursor');
            if (!cursor) return;

            // UI 상태 변경 (로딩 중)
            btn.style.display = 'none';
            spinner.style.display = 'inline-block';
            const urlParams = new URLSearchParams(window.location.search);
            const query = urlParams.get('q') || '';

            // API 호출 시 q 파라미터 포함
            fetch(`/api/feed?cursor=${cursor}&q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    // 데이터가 없으면 버튼 숨기고 종료
                    if (!data.items || data.items.length === 0) {
                        spinner.style.display = 'none';
                        return;
                    }

                    // 받아온 데이터를 HTML로 변환하여 추가
                    data.items.forEach(item => {
                        const html = createFeedItemHtml(item);
                        // section 태그로 감싸서 추가
                        const section = document.createElement('section');
                        section.className = 'feed-item';
                        section.innerHTML = html;
                        container.appendChild(section);
                    });

                    // 다음 커서 업데이트
                    if (data.nextCursor) {
                        btn.setAttribute('data-cursor', data.nextCursor);
                        btn.style.display = 'inline-block';
                    } else {
                        // 더 이상 불러올 게 없으면 버튼 제거
                        btn.remove();
                    }
                })
                .catch(err => {
                    console.error('Feed load error:', err);
                    alert('추가 콘텐츠를 불러오는 중 오류가 발생했습니다.');
                    btn.style.display = 'inline-block';
                })
                .finally(() => {
                    spinner.style.display = 'none';
                });
        }

        // JSON 데이터를 HTML 문자열로 변환하는 헬퍼 함수
        function createFeedItemHtml(item) {
            const dateStr = new Date(item.createdAt).toISOString().split('T')[0];

            if (item.type === 'POST') {
                const thumbSrc = item.thumbnail ? (apiBaseUrl + item.thumbnail) : '/images/pic01.jpg';
                return `
                <div class="box post" onclick="location.href='${item.url}'" style="cursor: pointer;">
                    <span class="image left"><img src="${thumbSrc}" onerror="this.onerror=null; this.src='/images/pic01.jpg';" /></span>
                    <div class="inner">
                        <h3>${item.title || 'Untitled'}</h3>
                        <p style="font-size: 0.9em; color: #555; margin-bottom: 0.5em;">${dateStr} by ${item.writer || 'Bum'}</p>
                        <p>${item.content ? item.content.substring(0, 150) + '...' : ''}</p>
                    </div>
                </div>`;
            }
            else if (item.type === 'GIBBERISH') {
                return `
                <div class="box post gibberish-card" onclick="location.href='${item.url}'"
                     style="cursor: pointer; background-color: #fff9c4; border-left: 5px solid #fbc02d;">
                    <div class="inner">
                        <blockquote>
                            <i class="icon fa-quote-left" style="color:#fbc02d; margin-right:10px;"></i>
                            <span style="font-size: 1.1em; font-weight: bold; color: #333;">${item.content}</span>
                        </blockquote>
                        <p style="text-align: right; font-size: 0.8em; color: #777;">${dateStr}</p>
                    </div>
                </div>`;
            }
            else if (item.type === 'BOOKMARK') {
                const thumbImg = item.thumbnail ?
                    `<div style="flex-shrink: 0; margin-right: 20px;"><img src="${apiBaseUrl + item.thumbnail}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px;" /></div>` : '';

                return `
                <div class="box post bookmark-card" style="border: 1px dashed #3498db;">
                    <div class="inner" style="display: flex; align-items: center;">
                        ${thumbImg}
                        <div style="flex-grow: 1;">
                            <h4>
                                <a href="${item.url}" target="_blank" style="text-decoration: none; color: #3498db;">
                                    <i class="icon solid fa-bookmark"></i> ${item.title}
                                    <i class="icon solid fa-external-link-alt" style="font-size: 0.7em;"></i>
                                </a>
                            </h4>
                            <p style="font-size: 0.9em; color: #666; margin-bottom: 0.5em;">${item.content || ''}</p>
                            <p style="font-size: 0.8em; color: #999;">Saved on ${dateStr}</p>
                        </div>
                    </div>
                </div>`;
            }
            return '';
        }
    </script>
    /* home.html 하단 스크립트 */
    <script th:inline="javascript">
        var $grid; // Masonry 인스턴스 저장 변수

        // 1. 페이지 로드 완료 후 초기화
        document.addEventListener('DOMContentLoaded', function() {
            var gridElement = document.querySelector('.feed-grid');

            // 이미지 로딩이 완료된 후 레이아웃 실행 (겹침 방지)
            imagesLoaded(gridElement, function() {
                $grid = new Masonry(gridElement, {
                    itemSelector: '.feed-item',
                    columnWidth: '.grid-sizer',
                    percentPosition: true
                });
            });
        });

    </script>
</th:block>
</html>