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

renderHeader('사용자 설정', 'user_settings');
?>
<div class="user-settings-page" data-user-settings-page>
    <section class="user-settings-hero">
        <div>
            <span class="user-settings-kicker"><i class="fa-solid fa-sliders"></i> 사용자 설정</span>
            <h1 class="page-main-title">내 사용 환경</h1>
            <p class="page-subtitle">테마, 플레이어, 알림, PWA 동작을 이 기기 기준으로 조정합니다.</p>
        </div>
        <div class="user-settings-status" id="user-settings-status" role="status" aria-live="polite">설정을 불러오는 중입니다.</div>
    </section>

    <section class="user-settings-grid">
        <article class="user-settings-card">
            <div class="user-settings-card-head">
                <span class="user-settings-icon"><i class="fa-solid fa-circle-half-stroke"></i></span>
                <div>
                    <h2>테마 설정</h2>
                    <p>화면 색상을 선택합니다.</p>
                </div>
            </div>
            <div class="settings-segmented" role="radiogroup" aria-label="테마 설정">
                <label><input type="radio" name="themeMode" value="system" data-pref-key="themeMode"> <span>시스템</span></label>
                <label><input type="radio" name="themeMode" value="light" data-pref-key="themeMode"> <span>라이트</span></label>
                <label><input type="radio" name="themeMode" value="dark" data-pref-key="themeMode"> <span>다크</span></label>
            </div>
        </article>

        <article class="user-settings-card">
            <div class="user-settings-card-head">
                <span class="user-settings-icon"><i class="fa-solid fa-headphones"></i></span>
                <div>
                    <h2>플레이어 설정</h2>
                    <p>플레이어 표시와 이어듣기를 조정합니다.</p>
                </div>
            </div>
            <label class="setting-toggle-row">
                <span><strong>하단 플레이어 표시</strong><small>숨겨도 재생 상태는 유지됩니다.</small></span>
                <input type="checkbox" data-pref-key="playerBarVisible">
            </label>
            <label class="setting-toggle-row">
                <span><strong>전체화면 플레이어 선호</strong><small>재생 화면을 크게 보는 설정입니다.</small></span>
                <input type="checkbox" data-pref-key="preferredExpandedPlayer">
            </label>
            <label class="setting-toggle-row">
                <span><strong>이어듣기 사용</strong><small>새로고침 후 재생 위치를 복원합니다.</small></span>
                <input type="checkbox" data-pref-key="resumePlayback">
            </label>
        </article>

        <article class="user-settings-card">
            <div class="user-settings-card-head">
                <span class="user-settings-icon"><i class="fa-solid fa-play"></i></span>
                <div>
                    <h2>재생 설정</h2>
                    <p>기본 재생 방식을 저장합니다.</p>
                </div>
            </div>
            <label class="setting-toggle-row">
                <span><strong>기본 셔플</strong><small>새 대기열 시작 시 기본값으로 사용합니다.</small></span>
                <input type="checkbox" data-pref-key="defaultShuffle">
            </label>
            <label class="setting-field">
                <span>기본 반복</span>
                <select data-pref-key="defaultRepeat">
                    <option value="none">반복 안 함</option>
                    <option value="all">전체 반복</option>
                    <option value="one">한 곡 반복</option>
                </select>
            </label>
            <label class="setting-field">
                <span>기본 볼륨 <strong id="default-volume-label">80%</strong></span>
                <input type="range" min="0" max="100" step="1" data-pref-key="defaultVolume">
            </label>
        </article>

        <article class="user-settings-card">
            <div class="user-settings-card-head">
                <span class="user-settings-icon"><i class="fa-solid fa-bell"></i></span>
                <div>
                    <h2>알림 설정</h2>
                    <p>공지와 안내 표시를 조정합니다.</p>
                </div>
            </div>
            <label class="setting-toggle-row">
                <span><strong>공지 배너 표시</strong><small>상단 공지를 표시합니다.</small></span>
                <input type="checkbox" data-pref-key="showAnnouncements">
            </label>
            <label class="setting-toggle-row">
                <span><strong>업데이트 안내 표시</strong><small>패치노트와 업데이트 안내를 표시합니다.</small></span>
                <input type="checkbox" data-pref-key="showUpdateNotices">
            </label>
            <label class="setting-toggle-row">
                <span><strong>피드백 버튼 표시</strong><small>오류 신고 진입 버튼을 표시합니다.</small></span>
                <input type="checkbox" data-pref-key="showFeedbackButton">
            </label>
        </article>

        <article class="user-settings-card">
            <div class="user-settings-card-head">
                <span class="user-settings-icon"><i class="fa-solid fa-mobile-screen-button"></i></span>
                <div>
                    <h2>PWA 설정</h2>
                    <p>설치 안내와 오프라인 안내를 관리합니다.</p>
                </div>
            </div>
            <div class="settings-action-row">
                <button type="button" class="btn btn-secondary" data-reset-pwa-guide><i class="fa-solid fa-rotate-left"></i> 설치 안내 다시 보기</button>
                <a class="btn btn-secondary" href="./offline.php"><i class="fa-solid fa-wifi"></i> 오프라인 안내</a>
            </div>
        </article>

        <article class="user-settings-card">
            <div class="user-settings-card-head">
                <span class="user-settings-icon"><i class="fa-solid fa-table-cells-large"></i></span>
                <div>
                    <h2>화면 설정</h2>
                    <p>사이드바와 목록 밀도를 조정합니다.</p>
                </div>
            </div>
            <label class="setting-toggle-row">
                <span><strong>사이드바 접힘 기본값</strong><small>태블릿/PC에서 사이드바를 접은 상태로 유지합니다.</small></span>
                <input type="checkbox" data-pref-key="sidebarCollapsed">
            </label>
            <label class="setting-field">
                <span>목록 밀도</span>
                <select data-pref-key="listDensity">
                    <option value="comfortable">여유 있게</option>
                    <option value="compact">촘촘하게</option>
                    <option value="card">카드 중심</option>
                </select>
            </label>
        </article>
    </section>

    <section class="user-settings-footer-card help-settings-card">
        <div>
            <h2>도움말과 온보딩</h2>
            <p>주요 기능 안내를 다시 확인하거나 전체 도움말 페이지를 열 수 있습니다.</p>
        </div>
        <div class="settings-action-row">
            <button type="button" class="btn btn-secondary" data-onboarding-open><i class="fa-solid fa-route"></i> 온보딩 다시 보기</button>
            <a class="btn btn-secondary" href="./help.php"><i class="fa-solid fa-circle-question"></i> 도움말 열기</a>
            <a class="btn btn-secondary" href="./policies.php"><i class="fa-solid fa-scale-balanced"></i> 정책 안내</a>
        </div>
    </section>

    <section class="user-settings-footer-card">
        <div>
            <h2>설정 저장 방식</h2>
            <p>이 설정은 현재 브라우저에 저장됩니다. 잘못된 값이 발견되면 기본값으로 자동 복구합니다.</p>
        </div>
        <button type="button" class="btn btn-secondary" data-reset-user-settings><i class="fa-solid fa-eraser"></i> 기본값으로 복원</button>
    </section>
</div>
<?php renderFooter(); ?>
