@extends('layouts.app')

@section('title', 'AI 설정 관리')

@push('styles')
<style>
    /* Alpine.js x-cloak: 초기화 전 숨김 */
    [x-cloak] { display: none !important; }

    .provider-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    .provider-gemini { background: #e8f0fe; color: #1a73e8; }
    .provider-claude { background: #fef3e8; color: #d97706; }
    .provider-openai { background: #e8f8e8; color: #16a34a; }
    .provider-notion { background: #f3f0ff; color: #7c3aed; }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    .status-active { background: #dcfce7; color: #16a34a; }
    .status-inactive { background: #f3f4f6; color: #6b7280; }

    .config-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 16px;
    }

    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
    }
    .modal-content {
        background: white;
        border-radius: 12px;
        padding: 24px;
        width: 100%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-overlay.hidden {
        display: none !important;
    }
</style>
@endpush

@section('content')
<div class="space-y-6">
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800">AI 및 스토리지 설정</h1>
    </div>

    <!-- AI 설정 섹션 -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <h2 class="text-lg font-semibold text-gray-800">AI 설정</h2>
            </div>
            <button type="button" onclick="openModal()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition inline-flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                AI 설정 추가
            </button>
        </div>
        <!-- AI 설정 목록 -->
        <div id="config-list" class="space-y-4">
            @forelse($configs as $config)
            <div class="config-card" data-id="{{ $config->id }}">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <h3 class="font-semibold text-lg text-gray-800">{{ $config->name }}</h3>
                            <span class="provider-badge provider-{{ $config->provider }}">
                                {{ $config->provider_label }}
                            </span>
                            <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
                                {{ $config->status_label }}
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 space-y-1">
                            <p><span class="font-medium">모델:</span> {{ $config->model }}</p>
                            <p><span class="font-medium">인증:</span> {{ $config->auth_type_label }}</p>
                            @if($config->isVertexAi())
                            <p><span class="font-medium">프로젝트:</span> {{ $config->getProjectId() }} ({{ $config->getRegion() }})</p>
                            @else
                            <p><span class="font-medium">API 키:</span> {{ $config->masked_api_key }}</p>
                            @endif
                            @if($config->description)
                            <p><span class="font-medium">설명:</span> {{ $config->description }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" onclick="testConnection({{ $config->id }})" class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
                            테스트
                        </button>
                        <button type="button" onclick="toggleConfig({{ $config->id }})" class="px-3 py-1.5 text-sm {{ $config->is_active ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-700' : 'bg-green-100 hover:bg-green-200 text-green-700' }} rounded-lg transition">
                            {{ $config->is_active ? '비활성화' : '활성화' }}
                        </button>
                        <button type="button" data-config='@json($config)' onclick="editConfig(this)" class="px-3 py-1.5 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition">
                            수정
                        </button>
                        <button type="button" onclick="deleteConfig({{ $config->id }}, '{{ $config->name }}')" class="px-3 py-1.5 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition">
                            삭제
                        </button>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-12 bg-white rounded-lg shadow-sm">
                <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <p class="text-gray-500">등록된 AI 설정이 없습니다.</p>
                <p class="text-sm text-gray-400 mt-1">'새 설정 추가' 버튼을 클릭하여 AI API를 등록하세요.</p>
            </div>
            @endforelse
        </div>

        <!-- AI 사용 안내 -->
        <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
            <h3 class="font-medium text-blue-800 mb-2">사용 안내</h3>
            <ul class="text-sm text-blue-700 space-y-1">
                <li>각 Provider(Gemini, Claude, OpenAI)별로 하나의 설정만 활성화할 수 있습니다.</li>
                <li>명함 OCR 기능은 Gemini Vision API를 사용합니다.</li>
                <li>API 키는 각 제공자의 콘솔에서 발급받을 수 있습니다.</li>
                <li>테스트 버튼으로 API 연결 상태를 확인할 수 있습니다.</li>
            </ul>
        </div>
    </div>

    <!-- 스토리지 설정 (GCS) 섹션 -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                </svg>
                <h2 class="text-lg font-semibold text-gray-800">스토리지 설정 (GCS)</h2>
            </div>
            <button type="button" onclick="openGcsModal()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition inline-flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                GCS 설정 추가
            </button>
        </div>
        <!-- GCS 설정 목록 -->
        <div id="storage-config-list" class="space-y-4">
            @forelse($storageConfigs as $config)
            <div class="config-card" data-id="{{ $config->id }}">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <h3 class="font-semibold text-lg text-gray-800">{{ $config->name }}</h3>
                            <span class="provider-badge" style="background: #e8f5e9; color: #2e7d32;">
                                Google Cloud Storage
                            </span>
                            <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
                                {{ $config->status_label }}
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 space-y-1">
                            <p><span class="font-medium">버킷:</span> {{ $config->getBucketName() ?? '-' }}</p>
                            <p><span class="font-medium">서비스 계정:</span>
                                @if($config->getServiceAccountPath())
                                    파일 경로: {{ $config->getServiceAccountPath() }}
                                @elseif($config->getServiceAccountJson())
                                    JSON 직접 입력됨
                                @else
                                    미설정
                                @endif
                            </p>
                            @if($config->description)
                            <p><span class="font-medium">설명:</span> {{ $config->description }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" onclick="testGcsConnection({{ $config->id }})" class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
                            테스트
                        </button>
                        <button type="button" onclick="toggleConfig({{ $config->id }})" class="px-3 py-1.5 text-sm {{ $config->is_active ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-700' : 'bg-green-100 hover:bg-green-200 text-green-700' }} rounded-lg transition">
                            {{ $config->is_active ? '비활성화' : '활성화' }}
                        </button>
                        <button type="button" data-config='@json($config)' onclick="editGcsConfig(this)" class="px-3 py-1.5 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition">
                            수정
                        </button>
                        <button type="button" onclick="deleteConfig({{ $config->id }}, '{{ $config->name }}')" class="px-3 py-1.5 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition">
                            삭제
                        </button>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-12 bg-white rounded-lg shadow-sm">
                <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                </svg>
                <p class="text-gray-500">등록된 GCS 설정이 없습니다.</p>
                <p class="text-sm text-gray-400 mt-1">'새 설정 추가' 버튼을 클릭하여 Google Cloud Storage를 등록하세요.</p>
            </div>
            @endforelse
        </div>

        <!-- GCS 사용 안내 -->
        <div class="mt-6 bg-green-50 border border-green-200 rounded-lg p-4">
            <h3 class="font-medium text-green-800 mb-2">Google Cloud Storage 사용 안내</h3>
            <ul class="text-sm text-green-700 space-y-1">
                <li>음성 녹음 파일(10MB 이상)은 GCS에 자동 백업됩니다.</li>
                <li>GCP 콘솔에서 서비스 계정을 생성하고 Storage 권한을 부여하세요.</li>
                <li>서비스 계정 키(JSON)를 직접 입력하거나, 파일 경로를 지정할 수 있습니다.</li>
                <li>버킷은 미리 GCP 콘솔에서 생성해 두어야 합니다.</li>
            </ul>
        </div>
    </div>

    <!-- API 서비스 설정 (Notion) 섹션 -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <h2 class="text-lg font-semibold text-gray-800">API 서비스 설정 (Notion)</h2>
            </div>
            <button type="button" onclick="openNotionModal()" class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition inline-flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Notion 설정 추가
            </button>
        </div>
        <!-- Notion 설정 목록 -->
        <div id="notion-config-list" class="space-y-4">
            @forelse($apiServiceConfigs as $config)
            <div class="config-card" data-id="{{ $config->id }}">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <h3 class="font-semibold text-lg text-gray-800">{{ $config->name }}</h3>
                            <span class="provider-badge provider-notion">Notion</span>
                            <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
                                {{ $config->status_label }}
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 space-y-1">
                            <p><span class="font-medium">API 버전:</span> {{ $config->model }}</p>
                            <p><span class="font-medium">API 키:</span> {{ $config->masked_api_key }}</p>
                            @if($config->description)
                            <p><span class="font-medium">설명:</span> {{ $config->description }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" onclick="toggleConfig({{ $config->id }})" class="px-3 py-1.5 text-sm {{ $config->is_active ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-700' : 'bg-green-100 hover:bg-green-200 text-green-700' }} rounded-lg transition">
                            {{ $config->is_active ? '비활성화' : '활성화' }}
                        </button>
                        <button type="button" data-config='@json($config)' onclick="editNotionConfig(this)" class="px-3 py-1.5 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition">
                            수정
                        </button>
                        <button type="button" onclick="deleteConfig({{ $config->id }}, '{{ $config->name }}')" class="px-3 py-1.5 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition">
                            삭제
                        </button>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-12 bg-white rounded-lg shadow-sm">
                <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <p class="text-gray-500">등록된 Notion 설정이 없습니다.</p>
                <p class="text-sm text-gray-400 mt-1">'Notion 설정 추가' 버튼을 클릭하여 Notion API를 등록하세요.</p>
            </div>
            @endforelse
        </div>

        <!-- Notion 사용 안내 -->
        <div class="mt-6 bg-purple-50 border border-purple-200 rounded-lg p-4">
            <h3 class="font-medium text-purple-800 mb-2">Notion API 사용 안내</h3>
            <ul class="text-sm text-purple-700 space-y-1">
                <li>Notion 검색 기능(추가기능 > Notion 검색)에서 사용됩니다.</li>
                <li><a href="https://www.notion.so/my-integrations" target="_blank" class="underline font-medium">Notion Integrations</a>에서 Internal Integration을 생성하고 API 키를 발급받으세요.</li>
                <li>검색할 페이지/데이터베이스에 Integration을 연결(Share)해야 합니다.</li>
                <li>Gemini AI 설정이 활성화되어 있어야 검색어 정제 및 AI 답변이 동작합니다.</li>
            </ul>
        </div>
    </div>
</div>

<!-- GCS 추가/수정 모달 -->
<div id="gcs-modal" class="modal-overlay hidden">
    <div class="modal-content">
        <div class="flex items-center justify-between mb-6">
            <h2 id="gcs-modal-title" class="text-xl font-bold text-gray-800">GCS 설정 추가</h2>
            <button type="button" onclick="closeGcsModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <form id="gcs-form" class="space-y-4">
            <input type="hidden" id="gcs-config-id" value="">

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">설정 이름 <span class="text-red-500">*</span></label>
                <input type="text" id="gcs-name" required placeholder="예: Production GCS" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">버킷 이름 <span class="text-red-500">*</span></label>
                <input type="text" id="gcs-bucket-name" required placeholder="예: my-bucket-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="mt-1 text-xs text-gray-500">GCP 콘솔에서 생성한 버킷 이름</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">인증 방식</label>
                <select id="gcs-auth-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="path">파일 경로</option>
                    <option value="json">JSON 직접 입력</option>
                </select>
            </div>

            <div id="gcs-path-section">
                <label class="block text-sm font-medium text-gray-700 mb-1">서비스 계정 파일 경로</label>
                <input type="text" id="gcs-service-account-path" placeholder="/var/www/sales/apikey/google_service_account.json" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="mt-1 text-xs text-gray-500">Docker 컨테이너 내부 경로 (기본: /var/www/sales/apikey/google_service_account.json)</p>
            </div>

            <div id="gcs-json-section" class="hidden">
                <label class="block text-sm font-medium text-gray-700 mb-1">서비스 계정 JSON</label>
                <textarea id="gcs-service-account-json" rows="6" placeholder='{"type": "service_account", "project_id": "...", ...}' class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"></textarea>
                <p class="mt-1 text-xs text-gray-500">GCP에서 다운로드한 JSON 키 내용을 붙여넣기</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">설명 (선택)</label>
                <textarea id="gcs-description" rows="2" placeholder="설정에 대한 설명" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            <div class="flex items-center">
                <input type="checkbox" id="gcs-is-active" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                <label for="gcs-is-active" class="ml-2 text-sm text-gray-700">활성화 (기존 GCS 설정은 비활성화됩니다)</label>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t">
                <button type="button" onclick="closeGcsModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                    취소
                </button>
                <button type="button" onclick="testGcsConnectionFromModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
                    연결 테스트
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                    저장
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Notion 추가/수정 모달 -->
<div id="notion-modal" class="modal-overlay hidden">
    <div class="modal-content">
        <div class="flex items-center justify-between mb-6">
            <h2 id="notion-modal-title" class="text-xl font-bold text-gray-800">Notion 설정 추가</h2>
            <button type="button" onclick="closeNotionModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <form id="notion-form" class="space-y-4">
            <input type="hidden" id="notion-config-id" value="">

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">설정 이름 <span class="text-red-500">*</span></label>
                <input type="text" id="notion-name" required placeholder="예: Notion Production" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">API 키 <span class="text-red-500">*</span></label>
                <input type="password" id="notion-api-key" required placeholder="ntn_... 또는 secret_..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                <p class="mt-1 text-xs text-gray-500">Notion Integrations에서 발급받은 Internal Integration Token</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">API 버전</label>
                <input type="text" id="notion-api-version" placeholder="2025-09-03" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                <p class="mt-1 text-xs text-gray-500">기본값: 2025-09-03 (비워두면 기본값 사용)</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">설명 (선택)</label>
                <textarea id="notion-description" rows="2" placeholder="설정에 대한 설명" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
            </div>

            <div class="flex items-center">
                <input type="checkbox" id="notion-is-active" class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                <label for="notion-is-active" class="ml-2 text-sm text-gray-700">활성화 (기존 Notion 설정은 비활성화됩니다)</label>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t">
                <button type="button" onclick="closeNotionModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                    취소
                </button>
                <button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition">
                    저장
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 추가/수정 모달 -->
<div id="config-modal" class="modal-overlay hidden">
    <div class="modal-content">
        <div class="flex items-center justify-between mb-6">
            <h2 id="modal-title" class="text-xl font-bold text-gray-800">새 설정 추가</h2>
            <button type="button" onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <form id="config-form" class="space-y-4">
            <input type="hidden" id="config-id" value="">

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Provider <span class="text-red-500">*</span></label>
                <select id="config-provider" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="gemini">Google Gemini</option>
                    <option value="claude">Anthropic Claude</option>
                    <option value="openai">OpenAI</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">설정 이름 <span class="text-red-500">*</span></label>
                <input type="text" id="config-name" required placeholder="예: Gemini Production" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- 인증 방식 (Gemini만 해당) -->
            <div id="auth-type-section" class="hidden">
                <label class="block text-sm font-medium text-gray-700 mb-1">인증 방식 <span class="text-red-500">*</span></label>
                <select id="config-auth-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="api_key">API 키 (Google AI Studio)</option>
                    <option value="vertex_ai">Vertex AI (서비스 계정)</option>
                </select>
                <p class="mt-1 text-xs text-gray-500">유료 플랜은 Vertex AI를 선택하세요</p>
            </div>

            <!-- API 키 인증 섹션 -->
            <div id="api-key-section">
                <label class="block text-sm font-medium text-gray-700 mb-1">API 키 <span class="text-red-500">*</span></label>
                <input type="password" id="config-api-key" placeholder="API 키 입력" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Vertex AI 섹션 -->
            <div id="vertex-ai-section" class="hidden space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">프로젝트 ID <span class="text-red-500">*</span></label>
                    <input type="text" id="config-project-id" placeholder="예: my-gcp-project" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">리전</label>
                    <select id="config-region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="us-central1">us-central1 (아이오와)</option>
                        <option value="asia-northeast3">asia-northeast3 (서울)</option>
                        <option value="asia-northeast1">asia-northeast1 (도쿄)</option>
                        <option value="europe-west1">europe-west1 (벨기에)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">서비스 계정 파일 경로 <span class="text-red-500">*</span></label>
                    <input type="text" id="config-service-account-path" placeholder="/var/www/sales/apikey/google_service_account.json" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="mt-1 text-xs text-gray-500">Docker 컨테이너 내부 경로로 입력</p>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">모델 <span class="text-red-500">*</span></label>
                <input type="text" id="config-model" required placeholder="예: gemini-2.0-flash" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="mt-1 text-xs text-gray-500">기본값: <span id="default-model">gemini-2.0-flash</span></p>
            </div>

            <div id="base-url-section">
                <label class="block text-sm font-medium text-gray-700 mb-1">Base URL (선택)</label>
                <input type="url" id="config-base-url" placeholder="비워두면 기본 URL 사용" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">설명 (선택)</label>
                <textarea id="config-description" rows="2" placeholder="설정에 대한 설명" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            <div class="flex items-center">
                <input type="checkbox" id="config-is-active" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                <label for="config-is-active" class="ml-2 text-sm text-gray-700">활성화 (동일 Provider의 기존 활성 설정은 비활성화됩니다)</label>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t">
                <button type="button" onclick="closeModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                    취소
                </button>
                <button type="button" onclick="testConnectionFromModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
                    연결 테스트
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                    저장
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function() {
    const csrfToken = '{{ csrf_token() }}';

    // 토스트 메시지 함수
    function showToast(message, type = 'info') {
        // 기존 토스트 제거
        const existingToast = document.getElementById('custom-toast');
        if (existingToast) {
            existingToast.remove();
        }

        const colors = {
            success: 'bg-green-500',
            error: 'bg-red-500',
            warning: 'bg-yellow-500',
            info: 'bg-blue-500'
        };

        const toast = document.createElement('div');
        toast.id = 'custom-toast';
        toast.className = `fixed top-4 right-4 ${colors[type] || colors.info} text-white px-6 py-3 rounded-lg shadow-lg z-[100] transition-opacity duration-300`;
        toast.textContent = message;
        document.body.appendChild(toast);

        // 3초 후 자동 제거
        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    const defaultModels = {
        gemini: 'gemini-2.0-flash',
        claude: 'claude-sonnet-4-20250514',
        openai: 'gpt-4o'
    };

    // 인증 방식에 따른 UI 전환
    function toggleAuthTypeUI(provider, authType) {
        const authTypeSection = document.getElementById('auth-type-section');
        const apiKeySection = document.getElementById('api-key-section');
        const vertexAiSection = document.getElementById('vertex-ai-section');
        const baseUrlSection = document.getElementById('base-url-section');

        // Gemini만 인증 방식 선택 가능
        if (provider === 'gemini') {
            authTypeSection.classList.remove('hidden');

            if (authType === 'vertex_ai') {
                apiKeySection.classList.add('hidden');
                vertexAiSection.classList.remove('hidden');
                baseUrlSection.classList.add('hidden');
                document.getElementById('config-api-key').removeAttribute('required');
            } else {
                apiKeySection.classList.remove('hidden');
                vertexAiSection.classList.add('hidden');
                baseUrlSection.classList.remove('hidden');
                document.getElementById('config-api-key').setAttribute('required', 'required');
            }
        } else {
            authTypeSection.classList.add('hidden');
            apiKeySection.classList.remove('hidden');
            vertexAiSection.classList.add('hidden');
            baseUrlSection.classList.remove('hidden');
            document.getElementById('config-api-key').setAttribute('required', 'required');
        }
    }

    // 모달 열기
    window.openModal = function(config) {
        const modal = document.getElementById('config-modal');
        const title = document.getElementById('modal-title');
        const form = document.getElementById('config-form');

        if (config) {
            title.textContent = '설정 수정';
            document.getElementById('config-id').value = config.id;
            document.getElementById('config-provider').value = config.provider;
            document.getElementById('config-name').value = config.name;
            document.getElementById('config-api-key').value = config.api_key || '';
            document.getElementById('config-model').value = config.model;
            document.getElementById('config-base-url').value = config.base_url || '';
            document.getElementById('config-description').value = config.description || '';
            document.getElementById('config-is-active').checked = config.is_active;

            // Vertex AI 옵션 로드
            const options = config.options || {};
            const authType = options.auth_type || 'api_key';
            document.getElementById('config-auth-type').value = authType;
            document.getElementById('config-project-id').value = options.project_id || '';
            document.getElementById('config-region').value = options.region || 'us-central1';
            document.getElementById('config-service-account-path').value = options.service_account_path || '';

            toggleAuthTypeUI(config.provider, authType);
        } else {
            title.textContent = '새 설정 추가';
            form.reset();
            document.getElementById('config-id').value = '';
            document.getElementById('config-auth-type').value = 'api_key';
            toggleAuthTypeUI('gemini', 'api_key');
        }

        modal.classList.remove('hidden');
    };

    // 모달 닫기
    window.closeModal = function() {
        document.getElementById('config-modal').classList.add('hidden');
    };

    // 수정
    window.editConfig = function(btn) {
        try {
            const config = JSON.parse(btn.dataset.config);
            window.openModal(config);
        } catch (e) {
            console.error('Config parse error:', e);
            showToast('설정 데이터를 불러올 수 없습니다.', 'error');
        }
    };

    // 토글
    window.toggleConfig = async function(id) {
        try {
            const response = await fetch(`{{ url('system/ai-config') }}/${id}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message, 'success');
                location.reload();
            } else {
                showToast(result.message || '변경 실패', 'error');
            }
        } catch (error) {
            showToast('처리 중 오류가 발생했습니다.', 'error');
        }
    };

    // 삭제
    window.deleteConfig = async function(id, name) {
        if (!confirm(`'${name}' 설정을 삭제하시겠습니까?`)) {
            return;
        }

        try {
            const response = await fetch(`{{ url('system/ai-config') }}/${id}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message, 'success');
                location.reload();
            } else {
                showToast(result.message || '삭제 실패', 'error');
            }
        } catch (error) {
            showToast('삭제 중 오류가 발생했습니다.', 'error');
        }
    };

    // 연결 테스트 (목록에서)
    window.testConnection = async function(id) {
        showToast('설정 수정 화면에서 테스트해주세요.', 'warning');
    };

    // 연결 테스트 (모달에서)
    window.testConnectionFromModal = async function() {
        const provider = document.getElementById('config-provider').value;
        const authType = document.getElementById('config-auth-type').value;

        const data = {
            provider: provider,
            model: document.getElementById('config-model').value,
            auth_type: authType
        };

        // Vertex AI 방식인 경우
        if (provider === 'gemini' && authType === 'vertex_ai') {
            data.project_id = document.getElementById('config-project-id').value;
            data.region = document.getElementById('config-region').value;
            data.service_account_path = document.getElementById('config-service-account-path').value;

            if (!data.project_id) {
                showToast('프로젝트 ID를 입력해주세요.', 'error');
                return;
            }
            if (!data.service_account_path) {
                showToast('서비스 계정 파일 경로를 입력해주세요.', 'error');
                return;
            }
        } else {
            // API 키 방식인 경우
            data.api_key = document.getElementById('config-api-key').value;
            data.base_url = document.getElementById('config-base-url').value || null;

            if (!data.api_key) {
                showToast('API 키를 입력해주세요.', 'error');
                return;
            }
        }

        showToast('연결 테스트 중...', 'info');

        try {
            const response = await fetch('{{ route("system.ai-config.test") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message || '연결 테스트 성공!', 'success');
            } else {
                showToast(result.error || '연결 테스트 실패', 'error');
            }
        } catch (error) {
            showToast('테스트 중 오류가 발생했습니다.', 'error');
        }
    };

    // 폼 제출
    async function handleFormSubmit(e) {
        e.preventDefault();

        const id = document.getElementById('config-id').value;
        const provider = document.getElementById('config-provider').value;
        const authType = document.getElementById('config-auth-type').value;

        const data = {
            provider: provider,
            name: document.getElementById('config-name').value,
            model: document.getElementById('config-model').value,
            description: document.getElementById('config-description').value || null,
            is_active: document.getElementById('config-is-active').checked,
            options: {}
        };

        // Gemini + Vertex AI인 경우
        if (provider === 'gemini' && authType === 'vertex_ai') {
            data.api_key = 'vertex_ai_service_account';  // Vertex AI는 서비스 계정 사용 (DB NOT NULL 제약)
            data.base_url = '';
            data.options = {
                auth_type: 'vertex_ai',
                project_id: document.getElementById('config-project-id').value,
                region: document.getElementById('config-region').value,
                service_account_path: document.getElementById('config-service-account-path').value
            };

            // 필수 값 검증
            if (!data.options.project_id || !data.options.service_account_path) {
                showToast('프로젝트 ID와 서비스 계정 경로를 입력해주세요.', 'error');
                return;
            }
        } else {
            data.api_key = document.getElementById('config-api-key').value;
            data.base_url = document.getElementById('config-base-url').value || null;
            data.options = { auth_type: 'api_key' };

            if (!data.api_key) {
                showToast('API 키를 입력해주세요.', 'error');
                return;
            }
        }

        try {
            const url = id
                ? `{{ url('system/ai-config') }}/${id}`
                : '{{ route("system.ai-config.store") }}';
            const method = id ? 'PUT' : 'POST';

            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message, 'success');
                window.closeModal();
                location.reload();
            } else {
                showToast(result.message || '저장 실패', 'error');
            }
        } catch (error) {
            showToast('저장 중 오류가 발생했습니다.', 'error');
        }
    }

    // === GCS 설정 관련 함수들 ===

    // GCS 모달 열기
    window.openGcsModal = function(config) {
        const modal = document.getElementById('gcs-modal');
        const title = document.getElementById('gcs-modal-title');

        if (config) {
            title.textContent = 'GCS 설정 수정';
            document.getElementById('gcs-config-id').value = config.id;
            document.getElementById('gcs-name').value = config.name;
            document.getElementById('gcs-description').value = config.description || '';
            document.getElementById('gcs-is-active').checked = config.is_active;

            const options = config.options || {};
            document.getElementById('gcs-bucket-name').value = options.bucket_name || '';
            document.getElementById('gcs-service-account-path').value = options.service_account_path || '';

            if (options.service_account_json) {
                document.getElementById('gcs-auth-type').value = 'json';
                document.getElementById('gcs-service-account-json').value = JSON.stringify(options.service_account_json, null, 2);
                toggleGcsAuthType('json');
            } else {
                document.getElementById('gcs-auth-type').value = 'path';
                toggleGcsAuthType('path');
            }
        } else {
            title.textContent = 'GCS 설정 추가';
            document.getElementById('gcs-form').reset();
            document.getElementById('gcs-config-id').value = '';
            document.getElementById('gcs-service-account-path').value = '/var/www/sales/apikey/google_service_account.json';
            toggleGcsAuthType('path');
        }

        modal.classList.remove('hidden');
    };

    // GCS 모달 닫기
    window.closeGcsModal = function() {
        document.getElementById('gcs-modal').classList.add('hidden');
    };

    // GCS 인증 방식 전환
    function toggleGcsAuthType(type) {
        const pathSection = document.getElementById('gcs-path-section');
        const jsonSection = document.getElementById('gcs-json-section');

        if (type === 'json') {
            pathSection.classList.add('hidden');
            jsonSection.classList.remove('hidden');
        } else {
            pathSection.classList.remove('hidden');
            jsonSection.classList.add('hidden');
        }
    }

    // GCS 수정
    window.editGcsConfig = function(btn) {
        try {
            const config = JSON.parse(btn.dataset.config);
            window.openGcsModal(config);
        } catch (e) {
            console.error('Config parse error:', e);
            showToast('설정 데이터를 불러올 수 없습니다.', 'error');
        }
    };

    // GCS 연결 테스트 (목록)
    window.testGcsConnection = function(id) {
        showToast('GCS 수정 화면에서 테스트해주세요.', 'warning');
    };

    // GCS 연결 테스트 (모달)
    window.testGcsConnectionFromModal = async function() {
        const authType = document.getElementById('gcs-auth-type').value;
        const data = {
            bucket_name: document.getElementById('gcs-bucket-name').value,
        };

        if (authType === 'json') {
            try {
                const jsonText = document.getElementById('gcs-service-account-json').value;
                data.service_account_json = JSON.parse(jsonText);
            } catch (e) {
                showToast('JSON 형식이 올바르지 않습니다.', 'error');
                return;
            }
        } else {
            data.service_account_path = document.getElementById('gcs-service-account-path').value;
        }

        if (!data.bucket_name) {
            showToast('버킷 이름을 입력해주세요.', 'error');
            return;
        }

        showToast('GCS 연결 테스트 중...', 'info');

        try {
            const response = await fetch('{{ route("system.ai-config.test-gcs") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message, 'success');
            } else {
                showToast(result.error || '연결 테스트 실패', 'error');
            }
        } catch (error) {
            showToast('테스트 중 오류가 발생했습니다.', 'error');
        }
    };

    // GCS 폼 제출
    async function handleGcsFormSubmit(e) {
        e.preventDefault();

        const id = document.getElementById('gcs-config-id').value;
        const authType = document.getElementById('gcs-auth-type').value;

        const data = {
            provider: 'gcs',
            name: document.getElementById('gcs-name').value,
            description: document.getElementById('gcs-description').value || null,
            is_active: document.getElementById('gcs-is-active').checked,
            options: {
                bucket_name: document.getElementById('gcs-bucket-name').value,
            }
        };

        if (authType === 'json') {
            try {
                const jsonText = document.getElementById('gcs-service-account-json').value;
                data.options.service_account_json = JSON.parse(jsonText);
            } catch (e) {
                showToast('JSON 형식이 올바르지 않습니다.', 'error');
                return;
            }
        } else {
            data.options.service_account_path = document.getElementById('gcs-service-account-path').value;
        }

        if (!data.options.bucket_name) {
            showToast('버킷 이름을 입력해주세요.', 'error');
            return;
        }

        try {
            const url = id
                ? `{{ url('system/ai-config') }}/${id}`
                : '{{ route("system.ai-config.store") }}';
            const method = id ? 'PUT' : 'POST';

            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message, 'success');
                window.closeGcsModal();
                location.reload();
            } else {
                showToast(result.message || '저장 실패', 'error');
            }
        } catch (error) {
            showToast('저장 중 오류가 발생했습니다.', 'error');
        }
    }

    // === Notion 설정 관련 함수들 ===

    // Notion 모달 열기
    window.openNotionModal = function(config) {
        const modal = document.getElementById('notion-modal');
        const title = document.getElementById('notion-modal-title');

        if (config) {
            title.textContent = 'Notion 설정 수정';
            document.getElementById('notion-config-id').value = config.id;
            document.getElementById('notion-name').value = config.name;
            document.getElementById('notion-api-key').value = config.api_key || '';
            document.getElementById('notion-api-version').value = config.model || '';
            document.getElementById('notion-description').value = config.description || '';
            document.getElementById('notion-is-active').checked = config.is_active;
        } else {
            title.textContent = 'Notion 설정 추가';
            document.getElementById('notion-form').reset();
            document.getElementById('notion-config-id').value = '';
        }

        modal.classList.remove('hidden');
    };

    // Notion 모달 닫기
    window.closeNotionModal = function() {
        document.getElementById('notion-modal').classList.add('hidden');
    };

    // Notion 수정
    window.editNotionConfig = function(btn) {
        try {
            const config = JSON.parse(btn.dataset.config);
            window.openNotionModal(config);
        } catch (e) {
            console.error('Config parse error:', e);
            showToast('설정 데이터를 불러올 수 없습니다.', 'error');
        }
    };

    // Notion 폼 제출
    async function handleNotionFormSubmit(e) {
        e.preventDefault();

        const id = document.getElementById('notion-config-id').value;
        const apiKey = document.getElementById('notion-api-key').value;

        if (!apiKey) {
            showToast('API 키를 입력해주세요.', 'error');
            return;
        }

        const data = {
            provider: 'notion',
            name: document.getElementById('notion-name').value,
            api_key: apiKey,
            model: document.getElementById('notion-api-version').value || '2025-09-03',
            description: document.getElementById('notion-description').value || null,
            is_active: document.getElementById('notion-is-active').checked,
            options: {},
        };

        try {
            const url = id
                ? `{{ url('system/ai-config') }}/${id}`
                : '{{ route("system.ai-config.store") }}';
            const method = id ? 'PUT' : 'POST';

            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.ok) {
                showToast(result.message, 'success');
                window.closeNotionModal();
                location.reload();
            } else {
                showToast(result.message || '저장 실패', 'error');
            }
        } catch (error) {
            showToast('저장 중 오류가 발생했습니다.', 'error');
        }
    }

    // DOM 로드 후 이벤트 리스너 등록
    document.addEventListener('DOMContentLoaded', function() {
        // 페이지 로드 시 모달 강제 닫기
        const modal = document.getElementById('config-modal');
        if (modal) {
            modal.classList.add('hidden');
        }
        const gcsModal = document.getElementById('gcs-modal');
        if (gcsModal) {
            gcsModal.classList.add('hidden');
        }
        const notionModal = document.getElementById('notion-modal');
        if (notionModal) {
            notionModal.classList.add('hidden');
        }

        // Provider 변경 시 기본 모델 업데이트 및 UI 전환
        const providerEl = document.getElementById('config-provider');
        if (providerEl) {
            providerEl.addEventListener('change', function() {
                const provider = this.value;
                document.getElementById('default-model').textContent = defaultModels[provider];
                document.getElementById('config-model').placeholder = '예: ' + defaultModels[provider];

                // Gemini가 아니면 API 키 모드로 강제
                if (provider !== 'gemini') {
                    document.getElementById('config-auth-type').value = 'api_key';
                }
                toggleAuthTypeUI(provider, document.getElementById('config-auth-type').value);
            });
        }

        // 인증 방식 변경 시 UI 전환
        const authTypeEl = document.getElementById('config-auth-type');
        if (authTypeEl) {
            authTypeEl.addEventListener('change', function() {
                const provider = document.getElementById('config-provider').value;
                toggleAuthTypeUI(provider, this.value);
            });
        }

        // 폼 제출
        const formEl = document.getElementById('config-form');
        if (formEl) {
            formEl.addEventListener('submit', handleFormSubmit);
        }

        // GCS 폼 제출
        const gcsFormEl = document.getElementById('gcs-form');
        if (gcsFormEl) {
            gcsFormEl.addEventListener('submit', handleGcsFormSubmit);
        }

        // GCS 인증 방식 변경
        const gcsAuthTypeEl = document.getElementById('gcs-auth-type');
        if (gcsAuthTypeEl) {
            gcsAuthTypeEl.addEventListener('change', function() {
                toggleGcsAuthType(this.value);
            });
        }

        // Notion 폼 제출
        const notionFormEl = document.getElementById('notion-form');
        if (notionFormEl) {
            notionFormEl.addEventListener('submit', handleNotionFormSubmit);
        }

        // 모달 외부 클릭 시 닫지 않음 (의도치 않은 닫힘 방지)
        // 닫기 버튼이나 취소 버튼으로만 닫을 수 있음
    });
})();
</script>
@endpush
