<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#6366f1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="청춘약국">
    <link rel="manifest" href="/static/manifest.json">
    <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
    <title>청춘약국 마일리지</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        .app-container {
            background: #ffffff;
            min-height: 100vh;
            max-width: 420px;
            margin: 0 auto;
        }

        .hero {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            padding: 48px 24px 56px;
            text-align: center;
            color: #ffffff;
            position: relative;
        }

        .hero-logo {
            width: 72px;
            height: 72px;
            background: rgba(255,255,255,0.15);
            border-radius: 20px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }

        .hero-title {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
        }

        .hero-desc {
            font-size: 15px;
            font-weight: 400;
            opacity: 0.85;
            letter-spacing: -0.2px;
        }

        /* 로그인 상태 배지 */
        .user-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.2);
            padding: 8px 16px;
            border-radius: 20px;
            margin-top: 16px;
            font-size: 14px;
            font-weight: 500;
        }

        .main-content {
            padding: 24px;
            margin-top: -20px;
            position: relative;
        }

        /* QR 스캔 버튼 */
        .scan-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 28px 24px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            text-align: center;
            margin-bottom: 20px;
        }

        .scan-title {
            font-size: 16px;
            font-weight: 700;
            color: #212529;
            margin-bottom: 6px;
            letter-spacing: -0.3px;
        }

        .scan-desc {
            font-size: 13px;
            color: #868e96;
            margin-bottom: 20px;
            letter-spacing: -0.2px;
        }

        .btn-scan {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #ffffff;
            border: none;
            border-radius: 16px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: -0.3px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
        }

        .btn-scan:active { transform: scale(0.98); }

        .btn-scan svg {
            width: 24px;
            height: 24px;
            fill: #ffffff;
        }

        /* 메뉴 카드들 */
        .menu-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .menu-card {
            display: flex;
            align-items: center;
            gap: 16px;
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 16px;
            padding: 20px;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .menu-card:active {
            transform: scale(0.98);
            background: #f8f9fa;
        }

        .menu-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
        }

        .menu-icon.purple { background: rgba(99, 102, 241, 0.1); }
        .menu-icon.yellow { background: rgba(254, 229, 0, 0.3); }
        .menu-icon.green { background: rgba(16, 185, 129, 0.1); }

        .menu-text {
            flex: 1;
        }

        .menu-title {
            font-size: 15px;
            font-weight: 700;
            color: #212529;
            letter-spacing: -0.3px;
            margin-bottom: 2px;
        }

        .menu-desc {
            font-size: 13px;
            color: #868e96;
            letter-spacing: -0.2px;
        }

        .menu-arrow {
            color: #ced4da;
            font-size: 18px;
        }

        /* QR 스캐너 모달 */
        .scanner-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.95);
            z-index: 1000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .scanner-overlay.open { display: flex; }

        .scanner-header {
            position: absolute;
            top: 0; left: 0; right: 0;
            padding: 16px 24px;
            padding-top: calc(16px + env(safe-area-inset-top, 0px));
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .scanner-title {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
        }

        .btn-close-scanner {
            color: #ffffff;
            background: rgba(255,255,255,0.15);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #qr-reader {
            width: 300px;
            height: 300px;
            border-radius: 20px;
            overflow: hidden;
        }

        .scanner-hint {
            color: rgba(255,255,255,0.7);
            font-size: 14px;
            margin-top: 24px;
            text-align: center;
            letter-spacing: -0.2px;
        }

        .footer {
            text-align: center;
            padding: 24px;
            padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        }

        .footer-link {
            color: #adb5bd;
            font-size: 12px;
            text-decoration: none;
            letter-spacing: -0.2px;
        }

        .footer-link + .footer-link { margin-left: 16px; }

        @media (max-width: 480px) {
            .hero {
                padding-top: calc(48px + env(safe-area-inset-top, 0px));
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="hero">
            <div class="hero-logo">💊</div>
            <div class="hero-title">청춘약국 마일리지</div>
            <div class="hero-desc">구매금액의 3%를 포인트로 돌려드려요</div>
            {% if logged_in %}
            <div class="user-badge">
                <span>{{ logged_in_name }}님 로그인 중</span>
            </div>
            {% endif %}
        </div>

        <div class="main-content">
            <!-- QR 스캔 카드 -->
            <div class="scan-card">
                <div class="scan-title">영수증 QR 스캔</div>
                <div class="scan-desc">
                    {% if logged_in %}
                    카메라로 QR을 찍으면 바로 적립됩니다
                    {% else %}
                    영수증의 QR 코드를 스캔하여 적립하세요
                    {% endif %}
                </div>
                <button class="btn-scan" id="btnOpenScanner">
                    <svg viewBox="0 0 24 24"><path d="M3 11h2V9H3v2zm0 2h2v-2H3v2zm4 8h2v-2H7v2zM3 15h2v-2H3v2zm8-12h-2v2h2V3zm4 0v2h2V3h-2zm-4 18h2v-2h-2v2zM3 3v2h2V3H3zm0 16h2v-2H3v2zm8-16h-2v2h2V3zm8 4h2V5h-2v2zm0 4h2V9h-2v2zm0-8v2h2V3h-2zm0 12h2v-2h-2v2zm0 4v-2h-2v2h2zm-4 0h2v-2h-2v2zm-8-8h10v-2H7v2zm0 4h6v-2H7v2zm4-8h2V7h-2v2zM3 7h2V5H3v2z"/></svg>
                    QR 코드 스캔하기
                </button>
            </div>

            <!-- 메뉴 카드들 -->
            <div class="menu-grid">
                {% if logged_in %}
                <a href="/my-page?phone={{ logged_in_phone }}" class="menu-card">
                    <div class="menu-icon purple">📊</div>
                    <div class="menu-text">
                        <div class="menu-title">내 마일리지</div>
                        <div class="menu-desc">적립 내역 및 포인트 확인</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </a>
                <a href="/logout" class="menu-card">
                    <div class="menu-icon green">🔓</div>
                    <div class="menu-text">
                        <div class="menu-title">로그아웃</div>
                        <div class="menu-desc">다른 계정으로 전환</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </a>
                {% else %}
                <a href="/my-page/kakao/start" class="menu-card">
                    <div class="menu-icon yellow">
                        <svg width="22" height="22" viewBox="0 0 20 20" fill="none"><path d="M10 1C4.477 1 0 4.477 0 8.5c0 2.58 1.693 4.847 4.243 6.134l-1.084 3.97a.3.3 0 00.457.338L7.7 16.392c.75.112 1.52.17 2.3.17 5.523 0 10-3.477 10-7.562C20 4.477 15.523 1 10 1z" fill="#191919"/></svg>
                    </div>
                    <div class="menu-text">
                        <div class="menu-title">카카오로 시작하기</div>
                        <div class="menu-desc">로그인하면 QR만 찍으면 바로 적립</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </a>
                <a href="/signup" class="menu-card">
                    <div class="menu-icon green">📝</div>
                    <div class="menu-text">
                        <div class="menu-title">회원가입</div>
                        <div class="menu-desc">전화번호 + 이름으로 간편 가입</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </a>
                <a href="/my-page" class="menu-card">
                    <div class="menu-icon purple">📊</div>
                    <div class="menu-text">
                        <div class="menu-title">마일리지 조회</div>
                        <div class="menu-desc">전화번호로 적립 내역 확인</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </a>
                {% endif %}
            </div>
        </div>

        <div class="footer">
            <a href="/privacy" class="footer-link">개인정보 처리방침</a>
        </div>
    </div>

    <!-- QR 스캐너 모달 -->
    <div class="scanner-overlay" id="scannerOverlay">
        <div class="scanner-header">
            <div class="scanner-title">QR 코드 스캔</div>
            <button class="btn-close-scanner" id="btnCloseScanner">✕</button>
        </div>
        <div id="qr-reader"></div>
        <div class="scanner-hint">영수증의 QR 코드를 카메라에 비춰주세요</div>
    </div>

    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <script>
    if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}

    (function() {
        const overlay = document.getElementById('scannerOverlay');
        const btnOpen = document.getElementById('btnOpenScanner');
        const btnClose = document.getElementById('btnCloseScanner');
        let scanner = null;
        let scanning = false;

        btnOpen.addEventListener('click', startScanner);
        btnClose.addEventListener('click', stopScanner);

        async function startScanner() {
            overlay.classList.add('open');

            if (scanner) {
                scanner.clear();
            }

            scanner = new Html5Qrcode('qr-reader');
            scanning = true;

            try {
                await scanner.start(
                    { facingMode: 'environment' },
                    { fps: 10, qrbox: { width: 250, height: 250 } },
                    onScanSuccess,
                    function() {} // ignore scan errors
                );
            } catch (err) {
                document.querySelector('.scanner-hint').textContent =
                    '카메라 접근이 거부되었습니다. 설정에서 카메라 권한을 허용해주세요.';
            }
        }

        async function stopScanner() {
            if (scanner && scanning) {
                try { await scanner.stop(); } catch(e) {}
                scanning = false;
            }
            overlay.classList.remove('open');
        }

        function onScanSuccess(decodedText) {
            // QR 코드 URL에서 /claim?t= 파라미터 추출
            try {
                let url;
                if (decodedText.startsWith('http')) {
                    url = new URL(decodedText);
                    // 같은 도메인이거나 claim 경로면 이동
                    if (url.pathname.startsWith('/claim')) {
                        stopScanner();
                        window.location.href = url.pathname + url.search;
                        return;
                    }
                }
                // 직접 t= 값인 경우 (예: "12345:abc123")
                if (decodedText.includes(':') && !decodedText.startsWith('http')) {
                    stopScanner();
                    window.location.href = '/claim?t=' + encodeURIComponent(decodedText);
                    return;
                }
            } catch(e) {}

            // 인식은 됐지만 유효하지 않은 QR
            document.querySelector('.scanner-hint').textContent =
                '유효한 영수증 QR 코드가 아닙니다. 다시 시도해주세요.';
        }
    })();
    </script>
</body>
</html>
