<?php
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/layout.php';

renderHeader('오프라인 안내', 'home');
?>
<div class="offline-page">
    <section class="offline-card" aria-labelledby="offline-title">
        <div class="offline-icon" aria-hidden="true"><i class="fas fa-wifi"></i></div>
        <span class="offline-badge">오프라인 모드</span>
        <h1 id="offline-title">현재 인터넷 연결이 없습니다.</h1>
        <p>네트워크가 복구되면 음악 목록, 검색, 가사, 플레이어 정보가 다시 최신 상태로 동기화됩니다.</p>
        <p class="offline-last-seen">마지막 접속 시간: <strong id="offline-last-online">확인 중</strong></p>
        <div class="offline-actions">
            <button type="button" class="btn btn-primary" id="offline-retry-btn">
                <i class="fas fa-rotate-right"></i> 다시 시도
            </button>
            <a href="index.php" class="btn btn-secondary">
                <i class="fas fa-home"></i> 홈으로 이동
            </a>
        </div>
        <div class="offline-note">
            <strong>저장된 화면 안내</strong>
            <span>일부 화면과 아이콘은 캐시로 열릴 수 있지만, 음악 스트리밍과 최신 API 데이터는 서버 연결이 필요합니다.</span>
        </div>
        <ul class="offline-checklist" aria-label="오프라인 상태 안내">
            <li><i class="fas fa-circle-check" aria-hidden="true"></i><span>최근에 열었던 일부 화면은 다시 확인할 수 있습니다.</span></li>
            <li><i class="fas fa-circle-exclamation" aria-hidden="true"></i><span>음악 재생, 검색, 저장, 피드백 전송은 연결 복구 후 사용할 수 있습니다.</span></li>
            <li><i class="fas fa-rotate-right" aria-hidden="true"></i><span>연결이 복구되면 다시 시도 버튼으로 최신 상태를 불러오세요.</span></li>
        </ul>
    </section>
</div>
<script>
(function () {
    var lastEl = document.getElementById('offline-last-online');
    var retry = document.getElementById('offline-retry-btn');
    try {
        var value = localStorage.getItem('melon_lite_last_online_at');
        if (lastEl) {
            lastEl.textContent = value ? new Date(Number(value)).toLocaleString() : '기록 없음';
        }
    } catch (err) {
        if (lastEl) lastEl.textContent = '확인할 수 없음';
    }
    if (retry) {
        retry.addEventListener('click', function () {
            window.location.reload();
        });
    }
    window.addEventListener('online', function () {
        window.location.href = 'index.php';
    });
})();
</script>
<?php renderFooter(); ?>
