<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
require_once($_SERVER['DOCUMENT_ROOT'] . "/load_header.php");

// 권한 체크
if ($level > 5) {
    echo "<script>alert('접근 권한이 없습니다.'); history.back();</script>";
    exit;
}
?>

<!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">
    <title>음성 녹음 및 텍스트 변환</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        .voice-container {
            max-width: 900px;
            margin: 40px auto;
            padding: 30px;
            width: 100%;
        }

        .header-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .header-section h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .header-section p {
            color: #6c757d;
            font-size: 14px;
        }

        .recording-section {
            background: #fff;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .record-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .record-button {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            position: relative;
            overflow: hidden;
        }

        .record-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }

        .record-button.recording {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
            }
            50% {
                box-shadow: 0 4px 30px rgba(245, 87, 108, 0.8);
            }
        }

        .timer {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            font-family: 'Courier New', monospace;
            min-height: 40px;
        }

        .timer.active {
            color: #f5576c;
        }

        .status-indicator {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }

        .status-waiting {
            background: #e9ecef;
            color: #495057;
        }

        .status-recording {
            background: #f8d7da;
            color: #842029;
        }

        .status-processing {
            background: #cfe2ff;
            color: #084298;
        }

        .status-completed {
            background: #d1e7dd;
            color: #0f5132;
        }

        .status-error {
            background: #f8d7da;
            color: #842029;
        }

        .waveform-container {
            width: 100%;
            height: 100px;
            background: #f8f9fa;
            border-radius: 8px;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
        }

        .waveform-canvas {
            width: 100%;
            height: 100%;
        }

        .audio-player {
            width: 100%;
            margin: 20px 0;
            display: none;
        }

        .transcript-section {
            background: #fff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            min-height: 200px;
        }

        .transcript-section h5 {
            margin-bottom: 15px;
            color: #333;
        }

        .transcript-text {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            min-height: 150px;
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .transcript-text.empty {
            color: #999;
            font-style: italic;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-primary {
            background: #0d6efd;
            color: white;
        }

        .btn-primary:hover {
            background: #0b5ed7;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5c636a;
        }

        .btn-success {
            background: #198754;
            color: white;
        }

        .btn-success:hover {
            background: #157347;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .info-box {
            background: #e7f3ff;
            border-left: 4px solid #0d6efd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .info-box p {
            margin: 5px 0;
            color: #084298;
            font-size: 13px;
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 모바일 햄버거 메뉴 스타일 */
        .mobile-menu-toggle {
            display: none; /* 기본적으로 숨김, 모바일에서만 표시 */
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 1001;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            width: 48px;
            height: 48px;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-menu-toggle:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .mobile-menu-toggle:active {
            transform: scale(0.95);
        }

        .mobile-menu-toggle i {
            transition: transform 0.3s ease;
        }

        .mobile-menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .mobile-menu-overlay.active {
            opacity: 1;
        }

        .mobile-menu-sidebar {
            position: fixed;
            top: 0;
            right: -100%;
            width: 280px;
            max-width: 85%;
            height: 100%;
            background: white;
            z-index: 1000;
            overflow-y: auto;
            transition: right 0.3s ease;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        }

        .mobile-menu-sidebar.active {
            right: 0;
        }

        .mobile-menu-header {
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-menu-header h4 {
            margin: 0;
            font-size: 18px;
        }

        .mobile-menu-close {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-menu-content {
            padding: 20px 0;
        }

        .mobile-menu-content .navbar-nav {
            flex-direction: column;
        }

        .mobile-menu-content .nav-item {
            width: 100%;
            margin: 0;
            border-bottom: 1px solid #e9ecef;
        }

        .mobile-menu-content .nav-link {
            padding: 15px 20px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
        }

        .mobile-menu-content .nav-link:hover {
            background: #f8f9fa;
            color: #667eea;
        }

        .mobile-menu-content .dropdown-menu {
            position: static;
            float: none;
            width: 100%;
            margin: 0;
            border: none;
            box-shadow: none;
            background: #f8f9fa;
            padding: 0;
            display: none; /* 기본적으로 숨김 */
        }

        .mobile-menu-content .dropdown-menu.show {
            display: block !important;
        }

        .mobile-menu-content .dropdown-item {
            padding: 12px 20px 12px 50px;
            font-size: 14px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mobile-menu-content .dropdown-item:hover,
        .mobile-menu-content .dropdown-item:active {
            background: #e9ecef;
            color: #667eea;
        }

        .mobile-menu-content .dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mobile-menu-content .dropdown-toggle::after {
            margin-left: auto;
            transition: transform 0.3s ease;
        }

        .mobile-menu-content .dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(180deg);
        }

        .mobile-menu-content hr {
            margin: 8px 0;
            border-color: #dee2e6;
        }

        /* 모바일 반응형 스타일 */
        @media (max-width: 768px) {
            /* 모바일에서 기본 nav 숨기기 */
            .navbar-custom {
                display: none !important;
            }

            .mobile-menu-toggle {
                display: flex;
            }

            /* 컨테이너 상단 여백 조정 (햄버거 버튼 공간 확보) */
            .voice-container {
                margin-top: 70px;
            }
            .voice-container {
                max-width: 100%;
                margin: 20px auto;
                padding: 15px;
            }

            .header-section {
                margin-bottom: 25px;
            }

            .header-section h3 {
                font-size: 20px;
                margin-bottom: 8px;
            }

            .header-section p {
                font-size: 13px;
            }

            .recording-section {
                padding: 25px 20px;
                margin-bottom: 20px;
            }

            .record-button {
                width: 100px;
                height: 100px;
                font-size: 20px;
            }

            .record-button:active {
                transform: scale(0.95);
            }

            .timer {
                font-size: 28px;
                min-height: 35px;
            }

            .status-indicator {
                padding: 6px 16px;
                font-size: 12px;
            }

            .waveform-container {
                height: 80px;
                margin: 15px 0;
            }

            .transcript-section {
                padding: 20px 15px;
                margin-bottom: 20px;
                min-height: 150px;
            }

            .transcript-section h5 {
                font-size: 16px;
                margin-bottom: 12px;
            }

            .transcript-text {
                padding: 15px;
                min-height: 120px;
                font-size: 15px;
                line-height: 1.6;
            }

            .action-buttons {
                flex-direction: column;
                gap: 8px;
                margin-top: 15px;
            }

            .btn {
                width: 100%;
                padding: 14px 20px;
                font-size: 14px;
                min-height: 48px; /* 터치 친화적 최소 높이 */
                white-space: normal;
                word-break: keep-all;
            }

            .info-box {
                padding: 12px;
                margin-bottom: 15px;
            }

            .info-box p {
                font-size: 12px;
                margin: 4px 0;
                line-height: 1.5;
            }
        }

        /* 작은 모바일 화면 (480px 이하) */
        @media (max-width: 480px) {
            .voice-container {
                padding: 10px;
                margin: 10px auto;
                margin-top: 70px;
            }

            .mobile-menu-toggle {
                top: 10px;
                right: 10px;
                width: 44px;
                height: 44px;
                font-size: 20px;
            }

            .mobile-menu-sidebar {
                width: 260px;
            }

            .header-section {
                margin-bottom: 20px;
            }

            .header-section h3 {
                font-size: 18px;
            }

            .header-section p {
                font-size: 12px;
            }

            .recording-section {
                padding: 20px 15px;
            }

            .record-button {
                width: 90px;
                height: 90px;
                font-size: 18px;
            }

            .timer {
                font-size: 24px;
            }

            .status-indicator {
                padding: 5px 12px;
                font-size: 11px;
            }

            .waveform-container {
                height: 70px;
            }

            .transcript-section {
                padding: 15px 12px;
            }

            .transcript-text {
                padding: 12px;
                font-size: 14px;
                min-height: 100px;
            }

            .btn {
                padding: 12px 16px;
                font-size: 13px;
            }

            .info-box {
                padding: 10px;
            }

            .info-box p {
                font-size: 11px;
            }
        }

        /* 가로 모드 (landscape) 모바일 최적화 */
        @media (max-width: 768px) and (orientation: landscape) {
            .voice-container {
                padding: 15px;
            }

            .recording-section {
                padding: 20px;
            }

            .record-button {
                width: 80px;
                height: 80px;
                font-size: 16px;
            }

            .timer {
                font-size: 24px;
            }

            .transcript-section {
                padding: 15px;
            }

            .transcript-text {
                min-height: 100px;
                font-size: 14px;
            }

            .action-buttons {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .btn {
                flex: 1 1 calc(50% - 4px);
                min-width: calc(50% - 4px);
                font-size: 12px;
                padding: 10px 12px;
            }
        }

        /* 매우 작은 화면 (360px 이하) */
        @media (max-width: 360px) {
            .voice-container {
                padding: 8px;
            }

            .header-section h3 {
                font-size: 16px;
            }

            .record-button {
                width: 80px;
                height: 80px;
                font-size: 16px;
            }

            .timer {
                font-size: 20px;
            }

            .transcript-text {
                font-size: 13px;
            }

            .btn {
                font-size: 12px;
                padding: 10px 14px;
            }
        }

        /* 터치 디바이스 최적화 */
        @media (hover: none) and (pointer: coarse) {
            .record-button:hover {
                transform: none;
            }

            .btn:hover {
                opacity: 1;
            }

            .record-button:active {
                transform: scale(0.95);
            }

            .btn:active {
                opacity: 0.8;
            }

            /* 터치 영역 확대 */
            .record-button {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            }

            .btn {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            }
        }

        /* 스크롤 부드럽게 */
        html {
            scroll-behavior: smooth;
        }

        /* 모바일에서 텍스트 선택 개선 */
        @media (max-width: 768px) {
            .transcript-text {
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text;
            }
        }

        /* 디버그 패널 스타일 */
        .debug-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 350px;
            max-width: calc(100% - 40px);
            max-height: 400px;
            background: #1e1e1e;
            border: 2px solid #667eea;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            z-index: 10000;
            display: none;
            flex-direction: column;
            font-family: 'Courier New', monospace;
            font-size: 12px;
        }

        .debug-panel.active {
            display: flex;
        }

        .debug-panel-header {
            background: #667eea;
            color: white;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 6px 6px 0 0;
            cursor: move;
        }

        .debug-panel-title {
            font-weight: bold;
            font-size: 14px;
        }

        .debug-panel-controls {
            display: flex;
            gap: 8px;
        }

        .debug-panel-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            transition: background 0.2s;
        }

        .debug-panel-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .debug-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            color: #d4d4d4;
            background: #1e1e1e;
        }

        .debug-log {
            margin: 4px 0;
            padding: 4px 8px;
            border-left: 3px solid #667eea;
            word-break: break-word;
            line-height: 1.4;
        }

        .debug-log.log {
            border-left-color: #4ec9b0;
        }

        .debug-log.info {
            border-left-color: #4fc3f7;
        }

        .debug-log.warn {
            border-left-color: #ffa726;
            color: #ffa726;
        }

        .debug-log.error {
            border-left-color: #f44336;
            color: #ff6b6b;
        }

        .debug-toggle-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            cursor: pointer;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: all 0.3s ease;
        }

        .debug-toggle-btn:hover {
            transform: scale(1.1);
        }

        .debug-toggle-btn.active {
            background: #f44336;
        }

        @media (max-width: 768px) {
            .debug-panel {
                width: calc(100% - 20px);
                max-width: calc(100% - 20px);
                bottom: 10px;
                right: 10px;
                max-height: 50vh;
            }

            .debug-toggle-btn {
                bottom: 10px;
                right: 10px;
                width: 44px;
                height: 44px;
                font-size: 18px;
            }
        }
    </style>
</head>
<body>

<?php include $_SERVER['DOCUMENT_ROOT'] . "/myheader.php"; ?>

<!-- 모바일 햄버거 메뉴 버튼 -->
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="메뉴 열기">
    <i class="bi bi-list"></i>
</button>

<!-- 모바일 메뉴 오버레이 -->
<div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>

<!-- 모바일 사이드 메뉴 -->
<div class="mobile-menu-sidebar" id="mobile-menu-sidebar">
    <div class="mobile-menu-header">
        <h4>메뉴</h4>
        <button class="mobile-menu-close" id="mobile-menu-close" aria-label="메뉴 닫기">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>
    <div class="mobile-menu-content">
        <!-- myheader.php의 nav 내용을 복사하여 여기에 표시 -->
        <nav class="navbar-nav">
            <?php
            // myheader.php의 nav 구조를 모바일용으로 복제
            // 실제로는 JavaScript로 동적으로 복사하거나 PHP로 처리
            ?>
        </nav>
    </div>
</div>

<div class="voice-container">
    <div class="header-section">
        <h3><i class="bi bi-mic-fill"></i> 음성 녹음 및 텍스트 변환</h3>
        <p>음성을 녹음하고 AI를 통해 텍스트로 변환합니다</p>
    </div>

    <div class="info-box" id="info-box">
        <p><i class="bi bi-info-circle"></i> Chrome 브라우저에서 마이크 권한을 허용해주세요</p>
        <p><i class="bi bi-clock"></i> 실시간 음성 인식 - 말하는 즉시 텍스트로 변환됩니다</p>
        <p><i class="bi bi-stars"></i> Google Web Speech API를 사용한 무료 한국어 음성 인식</p>
        <p id="mobile-info" style="display: none;"><i class="bi bi-phone"></i> <strong>모바일:</strong> Android Chrome 권장, iOS Safari는 제한적 지원</p>
        <p id="mobile-warning" style="display: none; color: #842029; font-weight: bold;"><i class="bi bi-exclamation-triangle"></i> <strong>모바일 제한:</strong> 일부 모바일 Chrome에서는 Web Speech API가 제한될 수 있습니다. 데스크탑 Chrome 사용을 권장합니다.</p>
    </div>

    <div class="recording-section">
        <div class="record-controls">
            <button id="record-button" class="record-button">
                <i class="bi bi-mic-fill"></i>
            </button>

            <div id="status" class="status-indicator status-waiting">대기중</div>

            <div id="timer" class="timer">00:00</div>

            <div class="waveform-container">
                <canvas id="waveform" class="waveform-canvas"></canvas>
            </div>

            <audio id="audio-player" class="audio-player" controls></audio>
        </div>
    </div>

    <div class="transcript-section">
        <h5><i class="bi bi-file-text"></i> 변환된 텍스트</h5>
        <div id="transcript" class="transcript-text empty">
            녹음 버튼을 클릭하여 음성을 녹음하세요
        </div>

        <div class="action-buttons">
            <button id="copy-btn" class="btn btn-primary" disabled>
                <i class="bi bi-clipboard"></i> 복사
            </button>
            <button id="download-btn" class="btn btn-secondary" disabled>
                <i class="bi bi-download"></i> 다운로드
            </button>
            <button id="ai-summary-btn" class="btn btn-success" disabled>
                <i class="bi bi-stars"></i> AI 요약
            </button>
            <button id="reset-btn" class="btn btn-secondary">
                <i class="bi bi-arrow-clockwise"></i> 초기화
            </button>
        </div>
    </div>

    <div class="transcript-section" id="summary-section" style="display: none;">
        <h5><i class="bi bi-stars"></i> AI 요약 (회사 기록용)</h5>
        <textarea id="summary-text" class="transcript-text" style="min-height: 150px; width: 100%; resize: vertical; box-sizing: border-box; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px; font-size: 16px; line-height: 1.8;" placeholder="AI 요약 버튼을 클릭하면 여기에 요약이 표시됩니다"></textarea>

        <div class="action-buttons">
            <button id="copy-summary-btn" class="btn btn-primary">
                <i class="bi bi-clipboard"></i> 요약 복사
            </button>
            <button id="download-summary-btn" class="btn btn-secondary">
                <i class="bi bi-download"></i> 요약 다운로드
            </button>
        </div>
    </div>
</div>

<script>
// 모바일 감지
function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

function isIOS() {
    return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}

function isAndroid() {
    return /Android/i.test(navigator.userAgent);
}

// Web Speech API 변수
let recognition = null;
let isRecognizing = false;
let finalTranscript = '';
let interimTranscript = '';
let isMobile = isMobileDevice();

// Google Cloud Speech-to-Text API 변수
let mediaRecorder = null;
let audioChunks = [];
let useGoogleAPI = false; // 모바일에서는 자동으로 true로 설정
let recordingInterval = null;
let audioBlob = null;

// 타이머 변수
let startTime = null;
let timerInterval = null;

// 시각화 변수
let audioContext = null;
let analyser = null;
let dataArray = null;
let animationId = null;
let mediaStream = null;

// 모바일에서는 Google API 사용 (Web Speech API가 작동하지 않으므로)
if (isMobile) {
    useGoogleAPI = true;
    console.log('모바일 감지: Google Cloud Speech-to-Text API 사용');
}

// 모바일 정보 표시
if (isMobile) {
    const mobileInfo = document.getElementById('mobile-info');
    if (mobileInfo) {
        mobileInfo.style.display = 'block';
    }
    const mobileWarning = document.getElementById('mobile-warning');
    if (mobileWarning) {
        mobileWarning.style.display = 'block';
        mobileWarning.innerHTML = '<i class="bi bi-exclamation-triangle"></i> <strong>모바일:</strong> Google Cloud Speech-to-Text API를 사용합니다. (Web Speech API 대체)';
    }
}

// DOM Elements
const recordButton = document.getElementById('record-button');
const statusEl = document.getElementById('status');
const timerEl = document.getElementById('timer');
const waveformCanvas = document.getElementById('waveform');
const audioPlayer = document.getElementById('audio-player');
const transcriptEl = document.getElementById('transcript');
const copyBtn = document.getElementById('copy-btn');
const downloadBtn = document.getElementById('download-btn');
const aiSummaryBtn = document.getElementById('ai-summary-btn');
const resetBtn = document.getElementById('reset-btn');
const summarySection = document.getElementById('summary-section');
const summaryText = document.getElementById('summary-text');
const copySummaryBtn = document.getElementById('copy-summary-btn');
const downloadSummaryBtn = document.getElementById('download-summary-btn');

// Canvas Context
const canvasCtx = waveformCanvas.getContext('2d');

// Initialize Canvas Size
function resizeCanvas() {
    waveformCanvas.width = waveformCanvas.offsetWidth;
    waveformCanvas.height = waveformCanvas.offsetHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// Web Speech API 초기화
function initSpeechRecognition() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

    if (!SpeechRecognition) {
        let errorMsg = '이 브라우저는 음성 인식을 지원하지 않습니다.';
        if (isIOS()) {
            errorMsg += '\n\niOS Safari는 Web Speech API를 지원하지 않습니다. Android Chrome 또는 데스크탑 Chrome을 사용해주세요.';
        } else if (isMobile) {
            errorMsg += '\n\n모바일에서는 Android Chrome 브라우저를 권장합니다.';
        } else {
            errorMsg += '\n\nChrome 브라우저를 사용해주세요.';
        }
        alert(errorMsg);
        return false;
    }

    // HTTPS 체크 (모바일에서 더 엄격)
    if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
        console.warn('HTTPS가 아닙니다. 모바일에서 마이크 접근이 제한될 수 있습니다.');
    }

    recognition = new SpeechRecognition();
    
    // 모바일에서 언어 설정 시도 (ko-KR이 작동하지 않을 수 있음)
    // 여러 언어 코드를 시도해볼 수 있도록 설정
    if (isMobile) {
        // 모바일에서는 'ko' 또는 'ko-KR' 시도
        recognition.lang = 'ko-KR';
        console.log('모바일: 언어 설정 - ko-KR');
    } else {
        recognition.lang = 'ko-KR';
    }
    
    // 모바일에서 continuous를 true로 변경 (false에서도 작동하지 않았으므로)
    // 일부 모바일에서는 continuous=true가 필요할 수 있음
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.maxAlternatives = 1;
    
    // 모바일에서 디버깅 정보
    if (isMobile) {
        console.log('모바일 모드: continuous=' + recognition.continuous + ', interimResults=true, lang=' + recognition.lang);
        console.warn('⚠️ 모바일: continuous=true로 설정했습니다.');
        console.warn('⚠️ 모바일: onresult가 발생하지 않으면 Web Speech API가 모바일에서 제한될 수 있습니다.');
    }

    // 음성 인식 결과 처리
    recognition.onresult = (event) => {
        console.log('=== onresult 이벤트 발생 ===');
        console.log('전체 이벤트 객체:', event);
        console.log('resultIndex:', event.resultIndex);
        console.log('results.length:', event.results ? event.results.length : 'undefined');
        console.log('isMobile:', isMobile);
        
        // 모바일에서 결과가 제대로 전달되는지 확인
        if (!event.results || event.results.length === 0) {
            console.error('❌ 결과가 없습니다! event.results:', event.results);
            if (isMobile) {
                console.error('모바일에서 결과가 전달되지 않았습니다. Web Speech API가 제대로 작동하지 않을 수 있습니다.');
            }
            return;
        }

        // 임시 텍스트 초기화 (중복 방지를 위해 매번 초기화)
        const prevFinal = finalTranscript;
        const prevInterim = interimTranscript;
        interimTranscript = '';

        console.log('이전 상태 - finalTranscript:', prevFinal, 'interimTranscript:', prevInterim);
        console.log('resultIndex:', event.resultIndex, '새로 처리할 결과부터 시작');

        // resultIndex부터 처리하여 중복 방지 (continuous 모드에서 중요)
        let processedCount = 0;
        for (let i = event.resultIndex; i < event.results.length; i++) {
            const result = event.results[i];
            if (!result) {
                console.warn(`결과 ${i}: null 또는 undefined`);
                continue;
            }
            
            if (!result[0]) {
                console.warn(`결과 ${i}: result[0]이 없습니다. result 구조:`, result);
                continue;
            }

            const transcript = result[0].transcript;
            const isFinal = result.isFinal;
            const confidence = result[0].confidence || 'N/A';

            console.log(`결과 ${i}: "${transcript}" (isFinal: ${isFinal}, confidence: ${confidence})`);

            if (isFinal) {
                // 확정된 텍스트는 finalTranscript에 추가
                finalTranscript += transcript + ' ';
                console.log('✅ 확정된 텍스트 추가:', transcript);
                console.log('현재 finalTranscript:', finalTranscript);
                processedCount++;
            } else {
                // 임시 텍스트는 interimTranscript에 저장 (모바일에서도 표시)
                interimTranscript += transcript;
                console.log('⏳ 임시 텍스트:', transcript);
                console.log('현재 interimTranscript:', interimTranscript);
                processedCount++;
            }
        }
        
        console.log(`처리된 결과 개수: ${processedCount}/${event.results.length}`);

        // 텍스트 업데이트 (확정된 텍스트 + 현재 임시 텍스트만 표시)
        // 모바일에서는 모든 텍스트를 즉시 표시
        console.log('=== 텍스트 업데이트 시작 ===');
        console.log('finalTranscript 길이:', finalTranscript.length, '내용:', finalTranscript);
        console.log('interimTranscript 길이:', interimTranscript.length, '내용:', interimTranscript);
        
        let displayText = '';
        
        if (finalTranscript.trim()) {
            displayText = finalTranscript.trim();
            console.log('✅ finalTranscript 추가됨:', displayText);
        } else {
            console.log('⚠️ finalTranscript가 비어있음');
        }
        
        if (interimTranscript.trim()) {
            const interimHtml = '<span style="color: #999; font-style: italic;">' + interimTranscript.trim() + '</span>';
            displayText += (displayText ? ' ' : '') + interimHtml;
            console.log('⏳ interimTranscript 추가됨:', interimTranscript.trim());
        } else {
            console.log('⚠️ interimTranscript가 비어있음');
        }
        
        console.log('최종 displayText:', displayText);
        console.log('transcriptEl 존재:', !!transcriptEl);
        
        // 모바일에서는 텍스트가 조금이라도 있으면 표시
        if (displayText.trim() || finalTranscript.trim() || interimTranscript.trim()) {
            const textToShow = displayText || '음성을 인식하고 있습니다...';
            console.log('📝 화면에 표시할 텍스트:', textToShow);
            
            transcriptEl.innerHTML = textToShow;
            transcriptEl.classList.remove('empty');
            
            console.log('✅ transcriptEl.innerHTML 업데이트 완료');
            console.log('transcriptEl.innerHTML 실제 값:', transcriptEl.innerHTML);
            
            // 모바일에서 강제로 화면 업데이트
            if (isMobile) {
                console.log('모바일: 강제 리플로우 실행');
                transcriptEl.style.display = 'none';
                transcriptEl.offsetHeight; // 리플로우 강제
                transcriptEl.style.display = '';
                console.log('모바일: 리플로우 완료');
            }
        } else {
            console.error('❌ 표시할 텍스트가 없습니다!');
            console.error('finalTranscript:', finalTranscript);
            console.error('interimTranscript:', interimTranscript);
            console.error('displayText:', displayText);
            
            // 모바일에서도 최소한의 메시지 표시
            if (isMobile) {
                console.warn('모바일: 기본 메시지 표시');
                transcriptEl.innerHTML = '음성을 인식하고 있습니다...';
                transcriptEl.classList.remove('empty');
            }
        }
        
        console.log('=== 텍스트 업데이트 완료 ===');

        // 버튼 활성화 (확정된 텍스트가 있을 때만)
        if (finalTranscript.trim()) {
            copyBtn.disabled = false;
            downloadBtn.disabled = false;
            aiSummaryBtn.disabled = false;
        }
    };

    // 음성 인식 시작
    recognition.onstart = () => {
        console.log('onstart 이벤트 발생');
        isRecognizing = true;
        updateStatus('음성 인식 중', 'recording');
        if (isMobile) {
            console.log('모바일: 음성 인식 시작됨');
            console.warn('⚠️ 모바일: onresult 이벤트가 발생하는지 확인하세요.');
        }
    };

    // 음성이 감지되기 시작할 때 (모바일에서 유용)
    recognition.onspeechstart = () => {
        console.log('🎤 onspeechstart: 음성이 감지되기 시작했습니다.');
        if (isMobile) {
            console.log('모바일: 음성 감지 시작 - onresult가 곧 발생해야 합니다.');
        }
    };

    // 음성 감지가 끝날 때
    recognition.onspeechend = () => {
        console.log('🔇 onspeechend: 음성 감지가 끝났습니다.');
        if (isMobile) {
            console.log('모바일: 음성 감지 종료 - 결과를 기다립니다.');
        }
    };

    // 음성 인식이 시작되기 전에 음성이 감지되었을 때
    recognition.onaudiostart = () => {
        console.log('🔊 onaudiostart: 오디오 입력이 시작되었습니다.');
    };

    // 오디오 입력이 끝났을 때
    recognition.onaudioend = () => {
        console.log('🔇 onaudioend: 오디오 입력이 끝났습니다.');
    };

    // 음성 인식 서비스가 연결되었을 때
    recognition.onsoundstart = () => {
        console.log('🔊 onsoundstart: 소리가 감지되기 시작했습니다.');
    };

    // 소리 감지가 끝났을 때
    recognition.onsoundend = () => {
        console.log('🔇 onsoundend: 소리 감지가 끝났습니다.');
    };

    // 음성 인식 종료
    recognition.onend = () => {
        console.log('=== onend 이벤트 발생 ===');
        console.log('isRecognizing:', isRecognizing);
        console.log('finalTranscript 현재 상태:', finalTranscript);
        console.log('interimTranscript 현재 상태:', interimTranscript);
        
        if (isMobile) {
            console.warn('⚠️ 모바일: onend 발생 - onresult가 발생했는지 확인하세요.');
            if (!finalTranscript && !interimTranscript) {
                console.error('❌ 모바일: onresult가 발생하지 않았습니다!');
                console.error('가능한 원인:');
                console.error('1. 모바일 Chrome의 Web Speech API 제한 (가장 가능성 높음)');
                console.error('2. 네트워크 연결 문제 (Web Speech API는 서버 통신 필요)');
                console.error('3. 브라우저 호환성 문제');
                console.error('4. 음성 인식 서비스 접근 불가');
                console.error('');
                console.error('💡 해결 방법:');
                console.error('1. 데스크탑 Chrome 브라우저 사용 (가장 확실한 방법)');
                console.error('2. 다른 모바일 브라우저 시도 (Samsung Internet 등)');
                console.error('3. 모바일 Chrome 업데이트 확인');
                console.error('4. 인터넷 연결 확인 (Web Speech API는 온라인 필요)');
                
                // 사용자에게 경고 표시 (첫 번째 발생 시에만)
                if (!window.mobileWarningShown) {
                    window.mobileWarningShown = true;
                    setTimeout(() => {
                        const warningMsg = '⚠️ 모바일에서 음성 인식이 작동하지 않을 수 있습니다.\n\n' +
                                         '모바일 Chrome의 Web Speech API는 제한적일 수 있습니다.\n\n' +
                                         '권장 사항:\n' +
                                         '• 데스크탑 Chrome 브라우저 사용\n' +
                                         '• 다른 모바일 브라우저 시도\n' +
                                         '• 인터넷 연결 확인';
                        console.warn(warningMsg);
                        // alert는 사용자 경험을 해칠 수 있으므로 console.warn만 사용
                    }, 2000);
                }
            }
        }
        
        // continuous=false일 때는 onend가 자주 발생하므로 자동 재시작
        // continuous=true일 때는 예상치 못한 종료일 때만 발생
        if (recordButton.classList.contains('recording')) {
            console.log('녹음 중이므로 자동 재시작 시도');
            // 짧은 딜레이 후 재시작 (모바일에서 안정성 향상)
            setTimeout(() => {
                if (recordButton.classList.contains('recording')) {
                    try {
                        isRecognizing = true;
                        recognition.start();
                        console.log('✅ 재시작 성공');
                        if (isMobile) {
                            console.warn('⚠️ 모바일: 재시작 후 onresult가 발생하는지 확인하세요.');
                        }
                    } catch (e) {
                        console.error('❌ Recognition restart failed:', e);
                        // 재시작 실패 시 상태 업데이트
                        if (e.name === 'InvalidStateError') {
                            // 이미 시작된 경우 무시
                            console.log('이미 시작됨, 무시');
                            isRecognizing = true;
                        } else {
                            isRecognizing = false;
                            updateStatus('재시작 실패: ' + e.message, 'error');
                        }
                    }
                }
            }, isMobile ? 200 : 100);
        } else {
            console.log('녹음 중지됨, 정상 종료');
            isRecognizing = false;
            updateStatus('변환 완료', 'completed');
            stopTimer();
            stopWaveform();
            stopAudioStream();
        }
    };

    // 에러 처리
    recognition.onerror = (event) => {
        console.error('❌ Speech recognition error 발생!');
        console.error('에러 코드:', event.error);
        console.error('에러 메시지:', event.message || 'N/A');
        console.error('전체 이벤트:', event);
        
        if (isMobile) {
            console.error('⚠️ 모바일에서 에러 발생 - Web Speech API가 제대로 작동하지 않을 수 있습니다.');
            console.error('모바일 브라우저:', navigator.userAgent);
            console.error('HTTPS 여부:', window.location.protocol);
        }

        if (event.error === 'no-speech') {
            console.warn('⚠️ no-speech: 음성이 감지되지 않았습니다.');
            // 음성이 감지되지 않음 - 모바일에서는 자동 재시작하지 않음
            if (!isMobile) {
                return;
            }
            // 모바일에서는 상태만 업데이트
            updateStatus('음성 대기 중...', 'recording');
            console.warn('모바일: 음성 대기 중... (onresult가 발생하지 않을 수 있음)');
            return;
        }

        if (event.error === 'aborted') {
            console.log('ℹ️ aborted: 사용자가 중단했습니다.');
            // 사용자가 중단함
            isRecognizing = false;
            return;
        }

        // 모바일에서 더 자세한 에러 메시지
        let errorMsg = '오류 발생: ' + event.error;
        if (isMobile && event.error === 'network') {
            errorMsg += '\n\n네트워크 연결을 확인해주세요.';
            console.error('❌ 모바일 네트워크 오류: Web Speech API는 인터넷 연결이 필요합니다.');
        } else if (isMobile && event.error === 'service-not-allowed') {
            errorMsg += '\n\n음성 인식 서비스를 사용할 수 없습니다.';
            console.error('❌ 모바일 서비스 오류: 음성 인식 서비스가 허용되지 않았습니다.');
        } else if (isMobile) {
            console.error('❌ 모바일에서 알 수 없는 오류:', event.error);
        }
        
        updateStatus(errorMsg, 'error');
        isRecognizing = false;

        if (event.error === 'not-allowed') {
            let alertMsg = '마이크 권한이 거부되었습니다.';
            if (isMobile) {
                alertMsg += '\n\n모바일 브라우저 설정에서 마이크 권한을 허용해주세요.\n(설정 > 사이트 설정 > 마이크)';
            } else {
                alertMsg += '\n\n브라우저 설정에서 마이크 권한을 허용해주세요.';
            }
            alert(alertMsg);
        }
    };

    return true;
}

// Update Status
function updateStatus(message, statusClass) {
    statusEl.textContent = message;
    statusEl.className = 'status-indicator status-' + statusClass;
}

// Timer Functions
function startTimer() {
    startTime = Date.now();
    timerEl.classList.add('active');

    timerInterval = setInterval(() => {
        const elapsed = Math.floor((Date.now() - startTime) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        timerEl.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }, 1000);
}

function stopTimer() {
    if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
    timerEl.classList.remove('active');
}

function resetTimer() {
    stopTimer();
    timerEl.textContent = '00:00';
}

// Waveform Visualization
function drawWaveform() {
    if (!analyser || !dataArray) return;

    animationId = requestAnimationFrame(drawWaveform);

    analyser.getByteTimeDomainData(dataArray);

    canvasCtx.fillStyle = '#f8f9fa';
    canvasCtx.fillRect(0, 0, waveformCanvas.width, waveformCanvas.height);

    canvasCtx.lineWidth = 2;
    canvasCtx.strokeStyle = '#667eea';
    canvasCtx.beginPath();

    const sliceWidth = waveformCanvas.width / dataArray.length;
    let x = 0;

    for (let i = 0; i < dataArray.length; i++) {
        const v = dataArray[i] / 128.0;
        const y = v * waveformCanvas.height / 2;

        if (i === 0) {
            canvasCtx.moveTo(x, y);
        } else {
            canvasCtx.lineTo(x, y);
        }

        x += sliceWidth;
    }

    canvasCtx.lineTo(waveformCanvas.width, waveformCanvas.height / 2);
    canvasCtx.stroke();
}

function stopWaveform() {
    if (animationId) {
        cancelAnimationFrame(animationId);
        animationId = null;
    }

    // Clear canvas
    canvasCtx.fillStyle = '#f8f9fa';
    canvasCtx.fillRect(0, 0, waveformCanvas.width, waveformCanvas.height);
}

// 오디오 스트림 시작 (시각화용)
async function startAudioStream() {
    try {
        mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });

        // Setup Audio Context for Visualization
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        analyser = audioContext.createAnalyser();
        const source = audioContext.createMediaStreamSource(mediaStream);
        source.connect(analyser);

        analyser.fftSize = 2048;
        const bufferLength = analyser.frequencyBinCount;
        dataArray = new Uint8Array(bufferLength);

        // Start Waveform Visualization
        drawWaveform();

        return true;
    } catch (error) {
        console.error('마이크 접근 오류:', error);
        alert('마이크 권한을 허용해주세요');
        return false;
    }
}

// 오디오 스트림 중지
function stopAudioStream() {
    if (mediaStream) {
        mediaStream.getTracks().forEach(track => track.stop());
        mediaStream = null;
    }

    if (audioContext) {
        audioContext.close();
        audioContext = null;
    }
}

// 음성 인식 시작
async function startRecognition() {
    // 모바일에서는 매번 recognition 객체를 재생성 (일부 모바일에서 필요)
    if (isMobile && recognition) {
        console.log('모바일: 기존 recognition 객체 정리');
        try {
            recognition.stop();
        } catch (e) {
            // 무시
        }
        recognition = null;
    }
    
    // Speech Recognition 초기화
    if (!recognition) {
        if (!initSpeechRecognition()) {
            return;
        }
    }

    // 모바일에서는 마이크 권한을 먼저 요청
    try {
        // 오디오 스트림 시작 (시각화용 및 권한 확인)
        const streamStarted = await startAudioStream();
        if (!streamStarted) {
            updateStatus('마이크 권한 필요', 'error');
            return;
        }
    } catch (error) {
        console.error('마이크 접근 오류:', error);
        updateStatus('마이크 접근 실패', 'error');
        if (isMobile) {
            alert('마이크 권한을 허용해주세요.\n\n모바일 브라우저 설정에서 사이트의 마이크 권한을 확인해주세요.');
        }
        return;
    }

    // 변수 초기화
    finalTranscript = '';
    interimTranscript = '';
    transcriptEl.innerHTML = '음성을 인식하고 있습니다...';
    transcriptEl.classList.remove('empty');
    
    console.log('=== 음성 인식 시작 준비 ===');
    if (isMobile) {
        console.log('📱 모바일 모드로 시작');
        console.log('브라우저:', navigator.userAgent);
        console.log('HTTPS:', window.location.protocol);
        console.log('네트워크 상태:', navigator.onLine ? '온라인' : '오프라인');
        
        // 네트워크 상태 확인
        if (!navigator.onLine) {
            console.error('❌ 모바일: 오프라인 상태입니다. Web Speech API는 인터넷 연결이 필요합니다.');
            alert('인터넷 연결이 필요합니다.\n\nWeb Speech API는 서버와 통신해야 하므로 온라인 상태여야 합니다.');
            return;
        }
        
        // HTTPS 확인
        if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
            console.warn('⚠️ 모바일: HTTPS가 아닙니다. Web Speech API가 제한될 수 있습니다.');
        }
        
        console.warn('⚠️ 모바일: onresult 이벤트가 발생하는지 주의 깊게 확인하세요.');
        console.warn('⚠️ 모바일: onresult가 발생하지 않으면 Web Speech API가 작동하지 않는 것입니다.');
    }

    // UI 업데이트
    recordButton.classList.add('recording');
    recordButton.innerHTML = '<i class="bi bi-stop-fill"></i>';
    updateStatus('음성 인식 중', 'recording');
    startTimer();

    // 음성 인식 시작 (모바일에서는 약간의 딜레이 후 시작)
    try {
        if (isMobile) {
            // 모바일에서 안정성을 위해 짧은 딜레이
            setTimeout(() => {
                if (recordButton.classList.contains('recording')) {
                    console.log('모바일: recognition.start() 호출');
                    recognition.start();
                    console.log('모바일: recognition.start() 완료');
                } else {
                    console.log('모바일: 녹음이 중지되어 start() 취소');
                }
            }, 200);
        } else {
            console.log('데스크탑: recognition.start() 호출');
            recognition.start();
            console.log('데스크탑: recognition.start() 완료');
        }
    } catch (error) {
        console.error('음성 인식 시작 오류:', error);
        updateStatus('음성 인식 시작 실패: ' + error.message, 'error');
        recordButton.classList.remove('recording');
        recordButton.innerHTML = '<i class="bi bi-mic-fill"></i>';
        stopTimer();
        stopWaveform();
        stopAudioStream();
    }
}

// 음성 인식 중지
function stopRecognition() {
    console.log('stopRecognition 호출됨');
    console.log('현재 finalTranscript:', finalTranscript);
    console.log('현재 interimTranscript:', interimTranscript);
    
    // isRecognizing을 먼저 false로 설정하여 onend에서 재시작하지 않도록
    isRecognizing = false;
    
    if (recognition) {
        try {
            recognition.stop();
            console.log('recognition.stop() 완료');
        } catch (error) {
            console.error('Recognition stop error:', error);
        }
    }

    // UI 업데이트
    recordButton.classList.remove('recording');
    recordButton.innerHTML = '<i class="bi bi-mic-fill"></i>';

    // 최종 텍스트 정리 (임시 텍스트 제거, 확정된 텍스트만 표시)
    // 모바일에서는 interimTranscript도 확인
    const hasFinalText = finalTranscript.trim().length > 0;
    const hasInterimText = interimTranscript.trim().length > 0;
    
    console.log('텍스트 상태 - final:', hasFinalText, 'interim:', hasInterimText);
    
    if (hasFinalText) {
        transcriptEl.textContent = finalTranscript.trim();
        transcriptEl.classList.remove('empty');
        updateStatus('변환 완료', 'completed');
        console.log('최종 텍스트 표시:', finalTranscript.trim());
        
        // 버튼 활성화
        copyBtn.disabled = false;
        downloadBtn.disabled = false;
        aiSummaryBtn.disabled = false;
    } else if (hasInterimText && isMobile) {
        // 모바일에서는 interim 텍스트라도 있으면 표시
        transcriptEl.textContent = interimTranscript.trim();
        transcriptEl.classList.remove('empty');
        updateStatus('변환 완료 (임시)', 'completed');
        console.log('임시 텍스트 표시 (모바일):', interimTranscript.trim());
        
        // 버튼 활성화
        copyBtn.disabled = false;
        downloadBtn.disabled = false;
        aiSummaryBtn.disabled = false;
    } else {
        transcriptEl.innerHTML = '<span style="color:#999;font-style:italic;">인식된 텍스트가 없습니다</span>';
        transcriptEl.classList.add('empty');
        updateStatus('대기중', 'waiting');
        console.warn('인식된 텍스트가 없음');
        
        // 버튼 비활성화
        copyBtn.disabled = true;
        downloadBtn.disabled = true;
        aiSummaryBtn.disabled = true;
    }

    stopTimer();
    stopWaveform();
    stopAudioStream();
}

// ========== Google Cloud Speech-to-Text API 함수 ==========

// Google API로 오디오 녹음 시작
async function startGoogleRecognition() {
    try {
        console.log('=== Google Cloud Speech-to-Text API 시작 ===');
        
        // 마이크 권한 요청
        const stream = await navigator.mediaDevices.getUserMedia({ 
            audio: {
                channelCount: 1,
                sampleRate: 16000,
                echoCancellation: true,
                noiseSuppression: true
            } 
        });
        
        mediaStream = stream;
        
        // 오디오 시각화를 위한 설정
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        analyser = audioContext.createAnalyser();
        const source = audioContext.createMediaStreamSource(stream);
        source.connect(analyser);
        
        analyser.fftSize = 2048;
        const bufferLength = analyser.frequencyBinCount;
        dataArray = new Uint8Array(bufferLength);
        
        // 파형 시각화 시작
        drawWaveform();
        
        // MediaRecorder 설정 (최적의 형식 선택)
        const options = {
            mimeType: 'audio/webm;codecs=opus',
            audioBitsPerSecond: 16000
        };
        
        // 지원하는 형식 확인 (우선순위: webm opus > webm > ogg opus)
        if (!MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
            if (MediaRecorder.isTypeSupported('audio/webm')) {
                options.mimeType = 'audio/webm';
            } else if (MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')) {
                options.mimeType = 'audio/ogg;codecs=opus';
            } else if (MediaRecorder.isTypeSupported('audio/mp4')) {
                options.mimeType = 'audio/mp4';
            } else {
                // 기본 형식 사용
                options.mimeType = '';
            }
        }
        
        console.log('MediaRecorder 형식:', options.mimeType || '기본값');
        
        mediaRecorder = new MediaRecorder(stream, options);
        audioChunks = [];
        
        // 데이터 수집
        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                audioChunks.push(event.data);
                console.log('오디오 청크 수집:', event.data.size, 'bytes');
            }
        };
        
        // 녹음 중지 시 처리
        mediaRecorder.onstop = async () => {
            console.log('MediaRecorder 중지됨');
            audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
            console.log('오디오 Blob 생성:', audioBlob.size, 'bytes');
            
            // 서버로 전송
            await sendAudioToServer(audioBlob);
        };
        
        // 주기적으로 오디오 전송 (실시간 느낌)
        mediaRecorder.start(3000); // 3초마다 데이터 수집
        
        // 주기적으로 서버로 전송
        recordingInterval = setInterval(async () => {
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
                mediaRecorder.start(3000);
                
                if (audioChunks.length > 0) {
                    const chunkBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
                    audioChunks = []; // 청크 초기화
                    await sendAudioToServer(chunkBlob, true); // 실시간 전송
                }
            }
        }, 3000);
        
        // UI 업데이트
        recordButton.classList.add('recording');
        recordButton.innerHTML = '<i class="bi bi-stop-fill"></i>';
        updateStatus('음성 인식 중 (Google API)', 'recording');
        startTimer();
        isRecognizing = true;
        
        console.log('✅ Google API 녹음 시작 완료');
        
    } catch (error) {
        console.error('Google API 녹음 시작 오류:', error);
        updateStatus('녹음 시작 실패: ' + error.message, 'error');
        alert('마이크 권한을 허용해주세요.');
    }
}

// Google API로 오디오 녹음 중지
function stopGoogleRecognition() {
    console.log('=== Google Cloud Speech-to-Text API 중지 ===');
    
    isRecognizing = false;
    
    // MediaRecorder 중지
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
    }
    
    // 인터벌 정리
    if (recordingInterval) {
        clearInterval(recordingInterval);
        recordingInterval = null;
    }
    
    // 스트림 정리
    if (mediaStream) {
        mediaStream.getTracks().forEach(track => track.stop());
        mediaStream = null;
    }
    
    // 마지막 오디오 전송
    if (audioChunks.length > 0 && mediaRecorder) {
        const finalBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
        sendAudioToServer(finalBlob);
        audioChunks = [];
    }
    
    // UI 업데이트
    recordButton.classList.remove('recording');
    recordButton.innerHTML = '<i class="bi bi-mic-fill"></i>';
    
    stopTimer();
    stopWaveform();
    stopAudioStream();
    
    console.log('✅ Google API 녹음 중지 완료');
}

// 서버로 오디오 전송
async function sendAudioToServer(audioBlob, isChunk = false) {
    try {
        console.log('서버로 오디오 전송:', audioBlob.size, 'bytes', isChunk ? '(청크)' : '(최종)');
        
        // 빈 오디오 체크
        if (audioBlob.size === 0) {
            console.warn('⚠️ 빈 오디오 파일, 전송 건너뜀');
            return;
        }
        
        const formData = new FormData();
        // 파일명에 타임스탬프 추가하여 고유성 보장
        const fileName = 'recording_' + Date.now() + '.webm';
        formData.append('audio', audioBlob, fileName);
        
        const response = await fetch('api/speech_to_text.php', {
            method: 'POST',
            body: formData
        });
        
        // 응답 상태 확인
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const result = await response.json();
        
        if (result.success && result.transcript) {
            console.log('✅ 텍스트 변환 성공:', result.transcript);
            console.log('신뢰도:', result.confidence || 'N/A');
            
            if (isChunk) {
                // 실시간 청크: 텍스트 추가 (중복 방지)
                const newText = result.transcript.trim();
                if (newText && !finalTranscript.includes(newText)) {
                    finalTranscript += newText + ' ';
                }
            } else {
                // 최종: 텍스트 설정 또는 추가
                if (finalTranscript.trim()) {
                    finalTranscript += ' ' + result.transcript.trim();
                } else {
                    finalTranscript = result.transcript.trim();
                }
            }
            
            // 화면 업데이트
            transcriptEl.textContent = finalTranscript.trim();
            transcriptEl.classList.remove('empty');
            
            // 버튼 활성화
            if (finalTranscript.trim()) {
                copyBtn.disabled = false;
                downloadBtn.disabled = false;
                aiSummaryBtn.disabled = false;
            }
            
            updateStatus('음성 인식 중 (Google API)', 'recording');
        } else {
            console.error('❌ 텍스트 변환 실패:', result.error);
            console.error('디버그 정보:', result.debug || result.hint || '없음');
            
            // API 키 오류인 경우 사용자에게 상세 안내
            if (result.error && (
                result.error.includes('API key') || 
                result.error.includes('API 키') || 
                result.error.includes('not valid') ||
                result.error.includes('invalid')
            )) {
                updateStatus('API 키 오류', 'error');
                if (!isChunk) {
                    let errorMsg = 'Google Cloud Speech-to-Text API 키 오류가 발생했습니다.\n\n';
                    errorMsg += '해결 방법:\n';
                    errorMsg += '1. Google Cloud Console (https://console.cloud.google.com/) 접속\n';
                    errorMsg += '2. 프로젝트: codebridge-chatbot 선택\n';
                    errorMsg += '3. "API 및 서비스" > "라이브러리"에서 "Cloud Speech-to-Text API" 활성화\n';
                    errorMsg += '4. "API 및 서비스" > "사용자 인증 정보"에서 API 키 확인\n';
                    errorMsg += '5. API 키 제한 설정에서 "Cloud Speech-to-Text API" 허용 확인\n\n';
                    errorMsg += '현재 API 키 파일: ' + (result.debug?.api_key_path || 'N/A');
                    
                    alert(errorMsg);
                }
            } else if (!isChunk) {
                // 에러 메시지에서 줄바꿈 처리
                const errorMsg = result.error ? result.error.replace(/\\n/g, '\n') : '알 수 없는 오류';
                updateStatus('변환 실패: ' + errorMsg.split('\n')[0], 'error');
                
                // 상세 에러가 있으면 콘솔에 출력
                if (result.error && result.error.includes('\n')) {
                    console.error('상세 에러:', result.error);
                }
            }
        }
        
    } catch (error) {
        console.error('서버 전송 오류:', error);
        if (!isChunk) {
            updateStatus('전송 실패: ' + error.message, 'error');
        }
    }
}

// ========== 통합 함수 ==========

// Record Button Click
recordButton.addEventListener('click', () => {
    if (!isRecognizing) {
        if (useGoogleAPI) {
            startGoogleRecognition();
        } else {
            startRecognition();
        }
    } else {
        if (useGoogleAPI) {
            stopGoogleRecognition();
        } else {
            stopRecognition();
        }
    }
});

// Copy Button
copyBtn.addEventListener('click', () => {
    const text = transcriptEl.textContent;
    navigator.clipboard.writeText(text).then(() => {
        const originalText = copyBtn.innerHTML;
        copyBtn.innerHTML = '<i class="bi bi-check"></i> 복사됨';
        setTimeout(() => {
            copyBtn.innerHTML = originalText;
        }, 2000);
    }).catch(err => {
        console.error('복사 실패:', err);
        alert('복사에 실패했습니다');
    });
});

// Download Button
downloadBtn.addEventListener('click', () => {
    const text = transcriptEl.textContent;
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `transcript_${new Date().getTime()}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});

// AI Summary Button
aiSummaryBtn.addEventListener('click', async () => {
    const text = transcriptEl.textContent;

    if (!text || text.trim() === '') {
        alert('요약할 텍스트가 없습니다.');
        return;
    }

    // 버튼 비활성화 및 로딩 표시
    aiSummaryBtn.disabled = true;
    const originalBtnText = aiSummaryBtn.innerHTML;
    aiSummaryBtn.innerHTML = '<span class="loading-spinner"></span> 요약 중...';

    try {
        // Claude API 호출
        const response = await fetch('summary_api.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                text: text
            })
        });

        const result = await response.json();

        if (result.ok) {
            summaryText.value = result.summary;
            summarySection.style.display = 'block';

            // 요약 섹션으로 스크롤
            summarySection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        } else {
            // 에러 상세 정보 콘솔 출력
            console.error('API 에러 응답:', result);

            let errorMsg = result.error || 'API 호출 실패';
            if (result.details) {
                errorMsg += '\n상세: ' + result.details;
            }
            if (result.curl_error) {
                errorMsg += '\nCURL 오류: ' + result.curl_error;
            }

            throw new Error(errorMsg);
        }
    } catch (error) {
        console.error('요약 오류:', error);
        console.error('에러 상세:', error);

        // 더 자세한 에러 메시지 표시
        let errorMsg = 'AI 요약에 실패했습니다: ' + error.message;
        alert(errorMsg);
    } finally {
        // 버튼 복원
        aiSummaryBtn.disabled = false;
        aiSummaryBtn.innerHTML = originalBtnText;
    }
});

// Copy Summary Button
copySummaryBtn.addEventListener('click', () => {
    const text = summaryText.value;
    navigator.clipboard.writeText(text).then(() => {
        const originalText = copySummaryBtn.innerHTML;
        copySummaryBtn.innerHTML = '<i class="bi bi-check"></i> 복사됨';
        setTimeout(() => {
            copySummaryBtn.innerHTML = originalText;
        }, 2000);
    }).catch(err => {
        console.error('복사 실패:', err);
        alert('복사에 실패했습니다');
    });
});

// Download Summary Button
downloadSummaryBtn.addEventListener('click', () => {
    const text = summaryText.value;
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `summary_${new Date().getTime()}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});

// Reset Button
resetBtn.addEventListener('click', () => {
    if (confirm('모든 내용을 초기화하시겠습니까?')) {
        // Stop recognition if active
        if (isRecognizing) {
            stopRecognition();
        }

        // Reset all states
        finalTranscript = '';
        interimTranscript = '';
        transcriptEl.textContent = '녹음 버튼을 클릭하여 음성을 녹음하세요';
        transcriptEl.classList.add('empty');

        copyBtn.disabled = true;
        downloadBtn.disabled = true;
        aiSummaryBtn.disabled = true;

        // 요약 섹션 숨기기
        summarySection.style.display = 'none';
        summaryText.value = '';

        resetTimer();
        stopWaveform();
        stopAudioStream();
        updateStatus('대기중', 'waiting');

        recordButton.classList.remove('recording');
        recordButton.innerHTML = '<i class="bi bi-mic-fill"></i>';
    }
});

// 모바일 햄버거 메뉴 기능
function initMobileMenu() {
    const menuToggle = document.getElementById('mobile-menu-toggle');
    const menuClose = document.getElementById('mobile-menu-close');
    const menuSidebar = document.getElementById('mobile-menu-sidebar');
    const menuOverlay = document.getElementById('mobile-menu-overlay');
    const menuContent = document.querySelector('.mobile-menu-content .navbar-nav');
    const originalNav = document.querySelector('.navbar-custom .navbar-nav');

    // 원본 nav 내용을 모바일 메뉴로 복사
    if (originalNav && menuContent) {
        menuContent.innerHTML = originalNav.innerHTML;
        
        // 드롭다운 메뉴 토글 기능 추가
        const dropdownToggles = menuContent.querySelectorAll('.dropdown-toggle');
        dropdownToggles.forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const dropdown = this.nextElementSibling;
                if (dropdown && dropdown.classList.contains('dropdown-menu')) {
                    const isOpen = dropdown.classList.contains('show');
                    // 모든 드롭다운 닫기
                    menuContent.querySelectorAll('.dropdown-menu').forEach(menu => {
                        menu.classList.remove('show');
                    });
                    menuContent.querySelectorAll('.dropdown-toggle').forEach(tog => {
                        tog.setAttribute('aria-expanded', 'false');
                    });
                    // 클릭한 드롭다운 토글
                    if (!isOpen) {
                        dropdown.classList.add('show');
                        toggle.setAttribute('aria-expanded', 'true');
                    }
                }
            });
        });

        // 메뉴 외부 클릭 시 드롭다운 닫기
        document.addEventListener('click', function(e) {
            if (!menuContent.contains(e.target)) {
                menuContent.querySelectorAll('.dropdown-menu').forEach(menu => {
                    menu.classList.remove('show');
                });
                menuContent.querySelectorAll('.dropdown-toggle').forEach(tog => {
                    tog.setAttribute('aria-expanded', 'false');
                });
            }
        });
    }

    // 메뉴 열기
    function openMenu() {
        menuSidebar.classList.add('active');
        menuOverlay.style.display = 'block';
        setTimeout(() => {
            menuOverlay.classList.add('active');
        }, 10);
        document.body.style.overflow = 'hidden'; // 스크롤 방지
        // 햄버거 버튼 아이콘 변경
        if (menuToggle) {
            menuToggle.innerHTML = '<i class="bi bi-x-lg"></i>';
            menuToggle.setAttribute('aria-label', '메뉴 닫기');
        }
    }

    // 메뉴 닫기
    function closeMenu() {
        menuSidebar.classList.remove('active');
        menuOverlay.classList.remove('active');
        setTimeout(() => {
            menuOverlay.style.display = 'none';
        }, 300);
        document.body.style.overflow = ''; // 스크롤 복원
        // 햄버거 버튼 아이콘 변경
        if (menuToggle) {
            menuToggle.innerHTML = '<i class="bi bi-list"></i>';
            menuToggle.setAttribute('aria-label', '메뉴 열기');
        }
    }

    // 메뉴 토글 (열기/닫기)
    function toggleMenu() {
        const isOpen = menuSidebar.classList.contains('active');
        if (isOpen) {
            closeMenu();
        } else {
            openMenu();
        }
    }

    // 이벤트 리스너
    if (menuToggle) {
        menuToggle.addEventListener('click', toggleMenu);
    }
    if (menuClose) {
        menuClose.addEventListener('click', closeMenu);
    }
    if (menuOverlay) {
        menuOverlay.addEventListener('click', closeMenu);
    }

    // ESC 키로 메뉴 닫기
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && menuSidebar.classList.contains('active')) {
            closeMenu();
        }
    });
}

// Page Load Complete
window.addEventListener('load', function() {
    const loadingOverlay = document.getElementById('loadingOverlay');
    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
    
    // 모바일 햄버거 메뉴 초기화
    initMobileMenu();
    
    // 모바일 환경 체크 및 안내
    if (isMobile) {
        console.log('모바일 환경 감지됨');
        
        // iOS 체크
        if (isIOS()) {
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SpeechRecognition) {
                const infoBox = document.getElementById('info-box');
                if (infoBox) {
                    const warning = document.createElement('p');
                    warning.style.color = '#842029';
                    warning.style.fontWeight = 'bold';
                    warning.innerHTML = '<i class="bi bi-exclamation-triangle"></i> <strong>주의:</strong> iOS Safari는 Web Speech API를 지원하지 않습니다. Android Chrome 또는 데스크탑 브라우저를 사용해주세요.';
                    infoBox.appendChild(warning);
                }
            }
        }
        
        // HTTPS 체크
        if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
            const infoBox = document.getElementById('info-box');
            if (infoBox) {
                const warning = document.createElement('p');
                warning.style.color = '#842029';
                warning.style.fontWeight = 'bold';
                warning.innerHTML = '<i class="bi bi-shield-exclamation"></i> <strong>주의:</strong> HTTPS 연결이 아닙니다. 모바일에서 마이크 접근이 제한될 수 있습니다.';
                infoBox.appendChild(warning);
            }
        }
    }
});
</script>

<!-- 디버그 패널 -->
<button class="debug-toggle-btn" id="debug-toggle-btn" title="디버그 패널 열기/닫기">
    <i class="bi bi-bug"></i>
</button>

<div class="debug-panel" id="debug-panel">
    <div class="debug-panel-header">
        <span class="debug-panel-title">🔍 디버그 콘솔</span>
        <div class="debug-panel-controls">
            <button class="debug-panel-btn" id="debug-copy-btn" title="로그 복사">
                <i class="bi bi-clipboard"></i>
            </button>
            <button class="debug-panel-btn" id="debug-clear-btn" title="로그 지우기">
                <i class="bi bi-trash"></i>
            </button>
            <button class="debug-panel-btn" id="debug-close-btn" title="패널 닫기">
                <i class="bi bi-x"></i>
            </button>
        </div>
    </div>
    <div class="debug-panel-content" id="debug-content">
        <div class="debug-log info">디버그 패널이 준비되었습니다. 로그가 여기에 표시됩니다.</div>
    </div>
</div>

<script>
// 디버그 패널 기능
(function() {
    const debugPanel = document.getElementById('debug-panel');
    const debugToggleBtn = document.getElementById('debug-toggle-btn');
    const debugCloseBtn = document.getElementById('debug-close-btn');
    const debugClearBtn = document.getElementById('debug-clear-btn');
    const debugCopyBtn = document.getElementById('debug-copy-btn');
    const debugContent = document.getElementById('debug-content');
    const maxLogs = 100; // 최대 로그 개수

    // 디버그 패널 토글
    function toggleDebugPanel() {
        debugPanel.classList.toggle('active');
        debugToggleBtn.classList.toggle('active');
    }

    // 로그 추가
    function addLog(message, type = 'log') {
        const logDiv = document.createElement('div');
        logDiv.className = `debug-log ${type}`;
        
        const timestamp = new Date().toLocaleTimeString('ko-KR');
        const logMessage = typeof message === 'object' ? JSON.stringify(message, null, 2) : String(message);
        
        logDiv.innerHTML = `<span style="color: #888; font-size: 10px;">[${timestamp}]</span> ${logMessage}`;
        
        debugContent.appendChild(logDiv);
        
        // 최대 로그 개수 제한
        while (debugContent.children.length > maxLogs) {
            debugContent.removeChild(debugContent.firstChild);
        }
        
        // 자동 스크롤
        debugContent.scrollTop = debugContent.scrollHeight;
    }

    // 로그 지우기
    function clearLogs() {
        debugContent.innerHTML = '<div class="debug-log info">로그가 지워졌습니다.</div>';
    }

    // 로그 복사
    async function copyLogs() {
        try {
            // 모든 로그 요소 가져오기
            const logElements = debugContent.querySelectorAll('.debug-log');
            
            if (logElements.length === 0) {
                console.warn('복사할 로그가 없습니다.');
                return;
            }

            // 로그 내용을 텍스트로 변환
            let logText = '=== 디버그 로그 ===\n';
            logText += `생성 시간: ${new Date().toLocaleString('ko-KR')}\n`;
            logText += `로그 개수: ${logElements.length}\n`;
            logText += '==================\n\n';

            logElements.forEach((logEl, index) => {
                // 타임스탬프와 메시지 추출
                const logContent = logEl.textContent || logEl.innerText;
                const logType = logEl.className.includes('error') ? '[ERROR]' :
                               logEl.className.includes('warn') ? '[WARN]' :
                               logEl.className.includes('info') ? '[INFO]' :
                               '[LOG]';
                
                logText += `${index + 1}. ${logType} ${logContent}\n`;
            });

            // 클립보드에 복사
            if (navigator.clipboard && navigator.clipboard.writeText) {
                await navigator.clipboard.writeText(logText);
                
                // 복사 성공 피드백
                const originalIcon = debugCopyBtn.innerHTML;
                debugCopyBtn.innerHTML = '<i class="bi bi-check"></i>';
                debugCopyBtn.style.background = 'rgba(76, 175, 80, 0.3)';
                
                console.log('✅ 로그가 클립보드에 복사되었습니다.');
                
                // 2초 후 원래 아이콘으로 복원
                setTimeout(() => {
                    debugCopyBtn.innerHTML = originalIcon;
                    debugCopyBtn.style.background = '';
                }, 2000);
            } else {
                // 클립보드 API를 사용할 수 없는 경우 대체 방법
                const textArea = document.createElement('textarea');
                textArea.value = logText;
                textArea.style.position = 'fixed';
                textArea.style.left = '-999999px';
                document.body.appendChild(textArea);
                textArea.select();
                
                try {
                    document.execCommand('copy');
                    console.log('✅ 로그가 클립보드에 복사되었습니다. (대체 방법)');
                    
                    // 복사 성공 피드백
                    const originalIcon = debugCopyBtn.innerHTML;
                    debugCopyBtn.innerHTML = '<i class="bi bi-check"></i>';
                    debugCopyBtn.style.background = 'rgba(76, 175, 80, 0.3)';
                    
                    setTimeout(() => {
                        debugCopyBtn.innerHTML = originalIcon;
                        debugCopyBtn.style.background = '';
                    }, 2000);
                } catch (err) {
                    console.error('복사 실패:', err);
                    alert('복사에 실패했습니다. 로그를 수동으로 선택하여 복사해주세요.');
                } finally {
                    document.body.removeChild(textArea);
                }
            }
        } catch (error) {
            console.error('로그 복사 중 오류 발생:', error);
            alert('로그 복사 중 오류가 발생했습니다: ' + error.message);
        }
    }

    // 이벤트 리스너
    if (debugToggleBtn) {
        debugToggleBtn.addEventListener('click', toggleDebugPanel);
    }
    if (debugCloseBtn) {
        debugCloseBtn.addEventListener('click', toggleDebugPanel);
    }
    if (debugClearBtn) {
        debugClearBtn.addEventListener('click', clearLogs);
    }
    if (debugCopyBtn) {
        debugCopyBtn.addEventListener('click', copyLogs);
    }

    // console 오버라이드
    const originalConsole = {
        log: console.log.bind(console),
        info: console.info.bind(console),
        warn: console.warn.bind(console),
        error: console.error.bind(console)
    };

    console.log = function(...args) {
        originalConsole.log(...args);
        addLog(args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' '), 'log');
    };

    console.info = function(...args) {
        originalConsole.info(...args);
        addLog(args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' '), 'info');
    };

    console.warn = function(...args) {
        originalConsole.warn(...args);
        addLog(args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' '), 'warn');
    };

    console.error = function(...args) {
        originalConsole.error(...args);
        addLog(args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' '), 'error');
    };

    // 전역 함수로 export (다른 스크립트에서도 사용 가능)
    window.debugLog = addLog;
    window.clearDebugLogs = clearLogs;
    window.copyDebugLogs = copyLogs;
    window.toggleDebugPanel = toggleDebugPanel;

    // 초기 메시지
    console.log('디버그 패널이 활성화되었습니다.');
    console.info('모바일에서도 콘솔 로그를 확인할 수 있습니다.');
})();
</script>

</body>
</html>
