@extends('layouts.app')

@section('title', '품목기준 필드 관리')

@section('content')
<div class="container mx-auto max-w-7xl">
    <!-- 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">품목기준 필드 관리</h1>
            <p class="text-sm text-gray-500 mt-1">테넌트별 품목관련 테이블의 필드를 관리합니다. 시스템 필드 시딩 및 커스텀 필드를 추가할 수 있습니다.</p>
        </div>
        <div class="flex gap-2">
            <!-- AI 문의하기 버튼 -->
            <button onclick="openAiInquiryModal()"
                    class="bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
                <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                AI에게 문의하기
            </button>
        </div>
    </div>

    <!-- 탭 네비게이션 -->
    <div class="mb-6 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
            <button id="tab-seeding" onclick="switchTab('seeding')"
                    class="tab-btn border-b-2 border-blue-500 text-blue-600 py-4 px-1 text-sm font-medium">
                시스템 필드 시딩
            </button>
            <button id="tab-custom" onclick="switchTab('custom')"
                    class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium">
                필드 관리
            </button>
            <button id="tab-errors" onclick="switchTab('errors')"
                    class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium flex items-center gap-2">
                오류 로그
                <span id="error-badge" class="hidden bg-red-500 text-white text-xs rounded-full px-2 py-0.5">0</span>
            </button>
        </nav>
    </div>

    <!-- 시딩 탭 컨텐츠 -->
    <div id="content-seeding" class="tab-content">
        <!-- 전체 시딩/초기화 버튼 -->
        <div class="mb-4 flex justify-end gap-2">
            <button onclick="seedAll()"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                전체 시딩
            </button>
            <button onclick="resetAll()"
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                전체 초기화
            </button>
        </div>

        <!-- 시딩 상태 테이블 (HTMX로 로드) -->
        <div id="seeding-status"
             hx-get="/api/admin/item-fields/seeding-status"
             hx-trigger="load, seedingRefresh from:body"
             hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
             class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 로딩 스피너 -->
            <div class="flex justify-center items-center p-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>

    <!-- 커스텀 필드 탭 컨텐츠 -->
    <div id="content-custom" class="tab-content hidden">
        <!-- 필터 및 추가 버튼 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <form id="customFilterForm" class="flex flex-wrap gap-4 items-end">
                <!-- 필드 유형 필터 (버튼 그룹) -->
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">필드 유형</label>
                    <input type="hidden" name="field_category" id="field_category_input" value="">
                    <div class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
                        <button type="button" onclick="setFieldCategory('')"
                                class="field-category-btn px-3 py-2 text-sm font-medium bg-gray-800 text-white"
                                data-value="">
                            전체
                        </button>
                        <button type="button" onclick="setFieldCategory('system')"
                                class="field-category-btn px-3 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-300"
                                data-value="system">
                            <span class="inline-flex items-center">
                                <svg class="w-3 h-3 mr-1 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                </svg>
                                시스템
                            </span>
                        </button>
                        <button type="button" onclick="setFieldCategory('custom')"
                                class="field-category-btn px-3 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-300"
                                data-value="custom">
                            <span class="inline-flex items-center">
                                <svg class="w-3 h-3 mr-1 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                </svg>
                                커스텀
                            </span>
                        </button>
                    </div>
                </div>

                <!-- 소스 테이블 필터 -->
                <div class="w-48">
                    <label class="block text-xs font-medium text-gray-600 mb-1">소스 테이블</label>
                    <select name="source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono">
                        <option value="">전체</option>
                        <option value="products">products</option>
                        <option value="materials">materials</option>
                        <option value="product_components">product_components</option>
                        <option value="material_inspections">material_inspections</option>
                        <option value="material_receipts">material_receipts</option>
                    </select>
                </div>

                <!-- 필드 타입 필터 -->
                <div class="w-40">
                    <label class="block text-xs font-medium text-gray-600 mb-1">필드 타입</label>
                    <select name="field_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">전체</option>
                        <option value="textbox">텍스트</option>
                        <option value="number">숫자</option>
                        <option value="dropdown">드롭다운</option>
                        <option value="checkbox">체크박스</option>
                        <option value="date">날짜</option>
                        <option value="textarea">텍스트영역</option>
                    </select>
                </div>

                <!-- 검색 -->
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-xs font-medium text-gray-600 mb-1">검색</label>
                    <input type="text" name="search"
                           placeholder="필드키, 필드명..."
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 검색 버튼 -->
                <button type="submit"
                        class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">
                    검색
                </button>

                <!-- 추가 버튼 -->
                <button type="button" onclick="openCreateModal()"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                    + 커스텀 필드 추가
                </button>
            </form>
        </div>

        <!-- 커스텀 필드 테이블 (HTMX로 로드) -->
        <div id="custom-fields"
             hx-get="/api/admin/item-fields/custom-fields"
             hx-trigger="customRefresh from:body"
             hx-include="#customFilterForm"
             hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
             class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 로딩 스피너 (탭 전환 시 자동 로드) -->
            <div class="flex justify-center items-center p-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>

    <!-- 오류 로그 탭 컨텐츠 -->
    <div id="content-errors" class="tab-content hidden">
        <!-- 오류 로그 테이블 (HTMX로 로드) -->
        <div id="error-logs"
             hx-get="/api/admin/item-fields/error-logs"
             hx-trigger="load, errorRefresh from:body"
             hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
             class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 로딩 스피너 -->
            <div class="flex justify-center items-center p-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>
</div>

<!-- 커스텀 필드 추가 모달 -->
<div id="createModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeCreateModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">커스텀 필드 추가</h3>
                <button onclick="closeCreateModal()" 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="createForm" onsubmit="submitCreateForm(event)">
                <!-- 소스 테이블 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블 <span class="text-red-500">*</span></label>
                    <select name="source_table" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono">
                        <option value="">선택하세요</option>
                        <option value="products">products</option>
                        <option value="materials">materials</option>
                        <option value="product_components">product_components</option>
                        <option value="material_inspections">material_inspections</option>
                        <option value="material_receipts">material_receipts</option>
                    </select>
                </div>

                <!-- 필드 키 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드 키 <span class="text-red-500">*</span></label>
                    <input type="text" name="field_key" required
                           pattern="^[a-zA-Z0-9_]+$"
                           maxlength="100"
                           placeholder="예: custom_field_1, 96_item_name"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">영문, 숫자, 밑줄(_)만 사용 가능 (최대 100자)</p>
                </div>

                <!-- 필드명 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
                    <input type="text" name="field_name" required
                           placeholder="예: 커스텀필드1"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 필드 타입 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
                    <select name="field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">선택하세요</option>
                        <option value="textbox">텍스트</option>
                        <option value="number">숫자</option>
                        <option value="dropdown">드롭다운</option>
                        <option value="checkbox">체크박스</option>
                        <option value="date">날짜</option>
                        <option value="textarea">텍스트영역</option>
                    </select>
                </div>

                <!-- 필수 여부 -->
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_required" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">필수 입력</span>
                    </label>
                </div>

                <!-- 기본값 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
                    <input type="text" name="default_value"
                           placeholder="기본값 (선택사항)"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 버튼 -->
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeCreateModal()"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        취소
                    </button>
                    <button type="submit"
                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
                        추가
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- AI 문의하기 모달 -->
<div id="aiInquiryModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeAiInquiryModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800 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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    AI에게 문의하기
                </h3>
                <button onclick="closeAiInquiryModal()" 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>

            <div id="aiInquiryContent">
                <!-- 로딩 상태 -->
                <div id="aiInquiryLoading" class="flex justify-center items-center p-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
                    <span class="ml-3 text-gray-600">오류 보고서 생성 중...</span>
                </div>

                <!-- 오류 없음 -->
                <div id="aiInquiryNoError" class="hidden p-8 text-center">
                    <div class="text-green-500 mb-2">
                        <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <p class="text-gray-600">저장된 오류 로그가 없습니다.</p>
                    <p class="text-sm text-gray-500 mt-1">시딩 중 오류가 발생하면 여기에 보고서가 생성됩니다.</p>
                </div>

                <!-- 보고서 내용 -->
                <div id="aiInquiryReport" class="hidden">
                    <div class="mb-4 p-3 bg-purple-50 rounded-lg text-sm text-purple-700">
                        아래 보고서를 복사하여 AI에게 붙여넣으면 오류 원인과 해결 방법을 문의할 수 있습니다.
                    </div>
                    <div class="relative">
                        <textarea id="aiReportText" readonly
                                  class="w-full h-96 p-4 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50 focus:outline-none resize-none"></textarea>
                        <button onclick="copyReportToClipboard()"
                                class="absolute top-2 right-2 px-3 py-1 bg-white border border-gray-300 rounded text-xs text-gray-600 hover:bg-gray-100 transition-colors flex items-center gap-1">
                            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                            복사
                        </button>
                    </div>
                </div>
            </div>

            <!-- 버튼 -->
            <div class="flex justify-end gap-2 mt-6">
                <button type="button" onclick="closeAiInquiryModal()"
                        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    닫기
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 필드 상세보기 모달 -->
<div id="detailModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeDetailModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-800">필드 상세정보</h3>
                <button onclick="closeDetailModal()" 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>

            <div class="p-6">
                <!-- 기본 정보 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        기본 정보
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
                        <div>
                            <span class="text-xs text-gray-500">필드 키</span>
                            <p id="detail_field_key" class="text-sm font-mono font-medium mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">필드명</span>
                            <p id="detail_field_name" class="text-sm font-medium mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">소스 테이블</span>
                            <p id="detail_source_table" class="text-sm font-mono mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">필드 타입</span>
                            <p id="detail_field_type" class="text-sm mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">저장 방식</span>
                            <p id="detail_storage_type" class="text-sm mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">카테고리</span>
                            <p id="detail_category" class="text-sm mt-1">-</p>
                        </div>
                    </div>
                </div>

                <!-- 상태 정보 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        상태
                    </h4>
                    <div class="flex flex-wrap gap-4 bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">필수:</span>
                            <span id="detail_is_required" class="text-sm">-</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">활성:</span>
                            <span id="detail_is_active" class="text-sm">-</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">잠금:</span>
                            <span id="detail_is_locked" class="text-sm">-</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">공통:</span>
                            <span id="detail_is_common" class="text-sm">-</span>
                        </div>
                    </div>
                </div>

                <!-- 기본값/Placeholder -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        입력 설정
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
                        <div>
                            <span class="text-xs text-gray-500">기본값</span>
                            <p id="detail_default_value" class="text-sm mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">Placeholder</span>
                            <p id="detail_placeholder" class="text-sm mt-1">-</p>
                        </div>
                        <div class="col-span-2">
                            <span class="text-xs text-gray-500">설명</span>
                            <p id="detail_description" class="text-sm mt-1">-</p>
                        </div>
                    </div>
                </div>

                <!-- Options (JSON) -->
                <div id="detail_options_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                        </svg>
                        옵션 (Options)
                        <span class="ml-2 text-xs text-gray-400">드롭다운 선택 항목 등</span>
                    </h4>
                    <pre id="detail_options" class="bg-gray-900 text-green-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- Properties (JSON) -->
                <div id="detail_properties_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        속성 (Properties)
                        <span class="ml-2 text-xs text-gray-400">멀티컬럼, 추가 설정 등</span>
                    </h4>
                    <pre id="detail_properties" class="bg-gray-900 text-cyan-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- Validation Rules (JSON) -->
                <div id="detail_validation_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                        유효성 검사 (Validation Rules)
                    </h4>
                    <pre id="detail_validation_rules" class="bg-gray-900 text-yellow-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- Display Condition (JSON) -->
                <div id="detail_display_condition_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        표시 조건 (Display Condition)
                    </h4>
                    <pre id="detail_display_condition" class="bg-gray-900 text-pink-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- 시간 정보 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        시간 정보
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4 text-xs">
                        <div>
                            <span class="text-gray-500">생성일:</span>
                            <span id="detail_created_at" class="ml-2">-</span>
                        </div>
                        <div>
                            <span class="text-gray-500">수정일:</span>
                            <span id="detail_updated_at" class="ml-2">-</span>
                        </div>
                        <div id="detail_locked_info" class="col-span-2 hidden">
                            <span class="text-gray-500">잠금 정보:</span>
                            <span id="detail_locked_at" class="ml-2 text-orange-600">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sticky bottom-0 bg-white border-t border-gray-200 px-6 py-4 flex justify-end gap-2">
                <button type="button" onclick="closeDetailModal()"
                        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    닫기
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 커스텀 필드 수정 모달 -->
<div id="editModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeEditModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-800">필드 수정</h3>
                <button onclick="closeEditModal()" 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="editForm" onsubmit="submitEditForm(event)" class="p-6">
                <input type="hidden" name="id" id="edit_id">
                <input type="hidden" name="storage_type" id="edit_storage_type">

                <!-- 기본 정보 섹션 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">기본 정보</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <!-- 소스 테이블 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블</label>
                            <select name="source_table" id="edit_source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 font-mono">
                                <option value="">미지정</option>
                                <option value="products">products</option>
                                <option value="materials">materials</option>
                                <option value="product_components">product_components</option>
                                <option value="material_inspections">material_inspections</option>
                                <option value="material_receipts">material_receipts</option>
                            </select>
                            <p id="edit_source_table_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 변경 불가</p>
                        </div>

                        <!-- 필드 키 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">필드 키</label>
                            <input type="text" name="field_key" id="edit_field_key"
                                   placeholder="예: custom_field_1"
                                   pattern="^[a-zA-Z0-9_]+$"
                                   maxlength="100"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 font-mono">
                            <p id="edit_field_key_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 변경 불가</p>
                            <p id="edit_field_key_policy" class="text-xs text-gray-500 mt-1">영문, 숫자, _ (최대 100자)</p>
                        </div>

                        <!-- 필드명 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
                            <input type="text" name="field_name" id="edit_field_name" required
                                   placeholder="필드 표시명"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm 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>
                            <select name="field_type" id="edit_field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="textbox">텍스트</option>
                                <option value="number">숫자</option>
                                <option value="dropdown">드롭다운</option>
                                <option value="checkbox">체크박스</option>
                                <option value="date">날짜</option>
                                <option value="textarea">텍스트영역</option>
                            </select>
                        </div>

                        <!-- 기본값 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
                            <input type="text" name="default_value" id="edit_default_value"
                                   placeholder="기본값 (선택)"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <!-- Placeholder -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Placeholder</label>
                            <input type="text" name="placeholder" id="edit_placeholder"
                                   placeholder="입력 안내 문구"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <!-- 설명 -->
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">설명</label>
                            <textarea name="description" id="edit_description" rows="2"
                                      placeholder="필드 설명 (선택)"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                </div>

                <!-- 상태 설정 섹션 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">상태 설정</h4>
                    <div class="flex flex-wrap gap-6">
                        <label class="flex items-center">
                            <input type="checkbox" name="is_required" id="edit_is_required" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-700">필수 입력</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <span class="ml-2 text-sm text-gray-700">활성화</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="is_locked" id="edit_is_locked" value="1" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                            <span class="ml-2 text-sm text-gray-700">잠금</span>
                        </label>
                    </div>
                </div>

                <!-- JSON 필드 섹션 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b flex items-center justify-between">
                        <span>고급 설정 (JSON)</span>
                        <button type="button" onclick="toggleJsonHelp()" class="text-xs text-blue-600 hover:text-blue-800">
                            입력 도움말
                        </button>
                    </h4>

                    <!-- JSON 도움말 -->
                    <div id="jsonHelp" class="hidden mb-4 p-3 bg-blue-50 rounded-lg text-xs text-blue-800">
                        <p class="font-medium mb-2">JSON 입력 예시:</p>
                        <div class="space-y-2 font-mono">
                            <p><strong>옵션 (드롭다운용):</strong> [{"label": "옵션1", "value": "opt1"}, {"label": "옵션2", "value": "opt2"}]</p>
                            <p><strong>속성 (멀티컬럼):</strong> {"multiColumn": true, "columnCount": 2, "columnNames": ["가로", "세로"]}</p>
                            <p><strong>유효성:</strong> {"minLength": 1, "maxLength": 100, "pattern": "^[a-zA-Z]+$"}</p>
                            <p><strong>표시조건:</strong> {"targetType": "field", "fieldConditions": [{"fieldKey": "type", "expectedValue": "A"}]}</p>
                        </div>
                    </div>

                    <!-- Options -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
                            옵션 (Options)
                            <span class="ml-2 text-xs text-gray-400">드롭다운 선택 항목</span>
                        </label>
                        <textarea name="options" id="edit_options" rows="3"
                                  placeholder='[{"label": "옵션1", "value": "opt1"}]'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono"></textarea>
                    </div>

                    <!-- Properties -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-cyan-500 rounded-full mr-2"></span>
                            속성 (Properties)
                            <span class="ml-2 text-xs text-gray-400">멀티컬럼, 추가 설정</span>
                        </label>
                        <textarea name="properties" id="edit_properties" rows="3"
                                  placeholder='{"multiColumn": true, "columnCount": 2}'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 font-mono"></textarea>
                    </div>

                    <!-- Validation Rules -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
                            유효성 검사 (Validation Rules)
                        </label>
                        <textarea name="validation_rules" id="edit_validation_rules" rows="3"
                                  placeholder='{"minLength": 1, "maxLength": 100}'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 font-mono"></textarea>
                    </div>

                    <!-- Display Condition -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-pink-500 rounded-full mr-2"></span>
                            표시 조건 (Display Condition)
                        </label>
                        <textarea name="display_condition" id="edit_display_condition" rows="3"
                                  placeholder='{"targetType": "field", "fieldConditions": [...]}'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 font-mono"></textarea>
                    </div>
                </div>

                <!-- 필드 정보 표시 -->
                <div id="edit_field_info" class="mb-4 p-3 bg-gray-50 rounded-lg text-xs text-gray-600">
                    <div class="flex justify-between">
                        <span>저장 방식:</span>
                        <span id="edit_storage_type_display" class="font-medium">-</span>
                    </div>
                    <div class="flex justify-between mt-1">
                        <span>생성일:</span>
                        <span id="edit_created_at" class="font-medium">-</span>
                    </div>
                </div>

                <!-- 버튼 -->
                <div class="flex justify-end gap-2 pt-4 border-t">
                    <button type="button" onclick="closeEditModal()"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        취소
                    </button>
                    <button type="submit"
                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
                        저장
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script>
    // 탭 전환
    function switchTab(tab) {
        // 탭 버튼 스타일 변경
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'text-blue-600');
            btn.classList.add('border-transparent', 'text-gray-500');
        });
        document.getElementById('tab-' + tab).classList.remove('border-transparent', 'text-gray-500');
        document.getElementById('tab-' + tab).classList.add('border-blue-500', 'text-blue-600');

        // 컨텐츠 표시/숨김
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        document.getElementById('content-' + tab).classList.remove('hidden');

        // 탭별 데이터 로드
        if (tab === 'custom') {
            htmx.trigger('#custom-fields', 'customRefresh');
        } else if (tab === 'errors') {
            htmx.trigger('#error-logs', 'errorRefresh');
        }
    }

    // 폼 제출 시 HTMX 이벤트 트리거
    document.getElementById('customFilterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        htmx.trigger('#custom-fields', 'customRefresh');
    });

    // 시딩 새로고침
    function refreshSeeding() {
        htmx.trigger('#seeding-status', 'seedingRefresh');
    }

    // 시딩 탭에서 필드 관리 탭으로 이동 (source_table 필터링)
    window.goToFieldManagement = function(sourceTable) {
        // 1. 소스 테이블 필터 설정
        const sourceTableSelect = document.querySelector('#customFilterForm select[name="source_table"]');
        if (sourceTableSelect) {
            sourceTableSelect.value = sourceTable;
        }

        // 2. 필드 유형을 '시스템'으로 설정
        setFieldCategory('system');

        // 3. 필드 관리 탭으로 전환 (데이터 로드 포함)
        switchTab('custom');
    };

    // 오류 처리 공통 함수
    function handleSeedingResponse(data) {
        if (data.success) {
            showToast(data.message, 'success');
        } else {
            showToast(data.message, 'error');
        }

        // 오류가 있으면 오류 탭 배지 업데이트 및 표시
        if (data.has_errors || data.error_count > 0) {
            updateErrorBadge(data.error_count || data.errors?.length || 1);
            showToast(`${data.error_count || 1}건의 오류가 발생했습니다. 오류 로그 탭을 확인하세요.`, 'warning');
        }

        refreshSeeding();
        htmx.trigger('#error-logs', 'errorRefresh');
    }

    // 오류 배지 업데이트
    function updateErrorBadge(count) {
        const badge = document.getElementById('error-badge');
        if (count > 0) {
            badge.textContent = count;
            badge.classList.remove('hidden');
        } else {
            badge.classList.add('hidden');
        }
    }

    // 단일 테이블 시딩
    window.seedTable = function(sourceTable) {
        showConfirm('이 테이블의 시스템 필드를 시딩하시겠습니까?', () => {
            fetch('/api/admin/item-fields/seed', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ source_table: sourceTable })
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '시딩 확인', icon: 'question' });
    };

    // 단일 테이블 초기화
    window.resetTable = function(sourceTable) {
        showConfirm('이 테이블의 시스템 필드를 초기화(삭제 후 재시딩)하시겠습니까?', () => {
            fetch('/api/admin/item-fields/reset', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ source_table: sourceTable })
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '초기화 확인', icon: 'warning' });
    };

    // 전체 시딩
    function seedAll() {
        showConfirm('모든 테이블의 시스템 필드를 시딩하시겠습니까?', () => {
            fetch('/api/admin/item-fields/seed-all', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '전체 시딩 확인', icon: 'question' });
    }

    // 전체 초기화
    function resetAll() {
        showConfirm('모든 테이블의 시스템 필드를 초기화(삭제 후 재시딩)하시겠습니까?\n\n주의: 기존 시스템 필드가 모두 삭제됩니다.', () => {
            fetch('/api/admin/item-fields/reset-all', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '전체 초기화 확인', icon: 'warning' });
    }

    // 커스텀 필드 추가 모달 열기
    function openCreateModal() {
        document.getElementById('createModal').classList.remove('hidden');
    }

    // 커스텀 필드 추가 모달 닫기
    function closeCreateModal() {
        document.getElementById('createModal').classList.add('hidden');
        document.getElementById('createForm').reset();
    }

    // 커스텀 필드 추가 폼 제출
    function submitCreateForm(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const data = {};
        formData.forEach((value, key) => {
            if (key === 'is_required') {
                data[key] = true;
            } else {
                data[key] = value;
            }
        });
        if (!data.is_required) {
            data.is_required = false;
        }

        fetch('/api/admin/item-fields/custom-fields', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                closeCreateModal();
                htmx.trigger('#custom-fields', 'customRefresh');
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(err => showToast('오류가 발생했습니다.', 'error'));
    }

    // 커스텀 필드 삭제
    window.deleteCustomField = function(id, name) {
        showDeleteConfirm(`"${name}" 커스텀 필드`, () => {
            fetch(`/api/admin/item-fields/custom-fields/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    htmx.trigger('#custom-fields', 'customRefresh');
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        });
    };

    // 오류 로그 초기화
    window.clearErrorLogs = function() {
        showConfirm('모든 오류 로그를 초기화하시겠습니까?', () => {
            fetch('/api/admin/item-fields/error-logs', {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    htmx.trigger('#error-logs', 'errorRefresh');
                    updateErrorBadge(0);
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '로그 초기화', icon: 'warning' });
    };

    // AI 문의하기 모달 열기
    function openAiInquiryModal() {
        document.getElementById('aiInquiryModal').classList.remove('hidden');
        document.getElementById('aiInquiryLoading').classList.remove('hidden');
        document.getElementById('aiInquiryNoError').classList.add('hidden');
        document.getElementById('aiInquiryReport').classList.add('hidden');

        // 오류 보고서 가져오기
        fetch('/api/admin/item-fields/error-report', {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('aiInquiryLoading').classList.add('hidden');

            if (data.success) {
                document.getElementById('aiInquiryReport').classList.remove('hidden');
                document.getElementById('aiReportText').value = data.report;
            } else {
                document.getElementById('aiInquiryNoError').classList.remove('hidden');
            }
        })
        .catch(err => {
            document.getElementById('aiInquiryLoading').classList.add('hidden');
            document.getElementById('aiInquiryNoError').classList.remove('hidden');
        });
    }

    // AI 문의하기 모달 닫기
    function closeAiInquiryModal() {
        document.getElementById('aiInquiryModal').classList.add('hidden');
    }

    // 보고서 클립보드 복사
    function copyReportToClipboard() {
        const textarea = document.getElementById('aiReportText');
        textarea.select();
        document.execCommand('copy');
        showToast('보고서가 클립보드에 복사되었습니다.', 'success');
    }

    // 상세보기 모달 열기
    window.openDetailModal = function(field) {
        const modal = document.getElementById('detailModal');
        const typeLabels = {
            'textbox': '텍스트',
            'number': '숫자',
            'dropdown': '드롭다운',
            'checkbox': '체크박스',
            'date': '날짜',
            'textarea': '텍스트영역'
        };

        // 기본 정보
        document.getElementById('detail_field_key').textContent = field.field_key || '-';
        document.getElementById('detail_field_name').textContent = field.field_name || '-';
        document.getElementById('detail_source_table').textContent = field.source_table || '-';
        document.getElementById('detail_field_type').textContent = typeLabels[field.field_type] || field.field_type || '-';
        document.getElementById('detail_storage_type').textContent = field.storage_type === 'column' ? '시스템 (컬럼)' : '커스텀 (JSON)';
        document.getElementById('detail_category').textContent = field.category || '-';

        // 상태
        document.getElementById('detail_is_required').innerHTML = field.is_required ? '<span class="text-green-600 font-medium">예</span>' : '<span class="text-gray-400">아니오</span>';
        document.getElementById('detail_is_active').innerHTML = field.is_active ? '<span class="text-green-600 font-medium">활성</span>' : '<span class="text-gray-400">비활성</span>';
        document.getElementById('detail_is_locked').innerHTML = field.is_locked ? '<span class="text-orange-600 font-medium">잠금</span>' : '<span class="text-gray-400">미잠금</span>';
        document.getElementById('detail_is_common').innerHTML = field.is_common ? '<span class="text-blue-600 font-medium">공통</span>' : '<span class="text-gray-400">개별</span>';

        // 입력 설정
        document.getElementById('detail_default_value').textContent = field.default_value || '-';
        document.getElementById('detail_placeholder').textContent = field.placeholder || '-';
        document.getElementById('detail_description').textContent = field.description || '-';

        // JSON 필드들
        const showJsonSection = (sectionId, elementId, data) => {
            const section = document.getElementById(sectionId);
            const element = document.getElementById(elementId);
            if (data) {
                try {
                    const parsed = typeof data === 'string' ? JSON.parse(data) : data;
                    element.textContent = JSON.stringify(parsed, null, 2);
                    section.classList.remove('hidden');
                } catch (e) {
                    element.textContent = data;
                    section.classList.remove('hidden');
                }
            } else {
                section.classList.add('hidden');
            }
        };

        showJsonSection('detail_options_section', 'detail_options', field.options);
        showJsonSection('detail_properties_section', 'detail_properties', field.properties);
        showJsonSection('detail_validation_section', 'detail_validation_rules', field.validation_rules);
        showJsonSection('detail_display_condition_section', 'detail_display_condition', field.display_condition);

        // 시간 정보
        document.getElementById('detail_created_at').textContent = field.created_at ? new Date(field.created_at).toLocaleString('ko-KR') : '-';
        document.getElementById('detail_updated_at').textContent = field.updated_at ? new Date(field.updated_at).toLocaleString('ko-KR') : '-';

        // 잠금 정보
        const lockedInfo = document.getElementById('detail_locked_info');
        if (field.is_locked && field.locked_at) {
            document.getElementById('detail_locked_at').textContent = `${new Date(field.locked_at).toLocaleString('ko-KR')} (ID: ${field.locked_by || '-'})`;
            lockedInfo.classList.remove('hidden');
        } else {
            lockedInfo.classList.add('hidden');
        }

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

    // 상세보기 모달 닫기
    function closeDetailModal() {
        document.getElementById('detailModal').classList.add('hidden');
    }

    // JSON 도움말 토글
    function toggleJsonHelp() {
        document.getElementById('jsonHelp').classList.toggle('hidden');
    }

    // 수정 모달 열기
    window.openEditModal = function(field) {
        const modal = document.getElementById('editModal');
        const isSystemField = field.storage_type === 'column';

        // 기본 필드 채우기
        document.getElementById('edit_id').value = field.id;
        document.getElementById('edit_storage_type').value = field.storage_type;
        document.getElementById('edit_source_table').value = field.source_table || '';
        document.getElementById('edit_field_key').value = field.field_key || '';
        document.getElementById('edit_field_name').value = field.field_name;
        document.getElementById('edit_field_type').value = field.field_type;
        document.getElementById('edit_default_value').value = field.default_value || '';
        document.getElementById('edit_placeholder').value = field.placeholder || '';
        document.getElementById('edit_description').value = field.description || '';

        // 체크박스
        document.getElementById('edit_is_required').checked = field.is_required;
        document.getElementById('edit_is_active').checked = field.is_active;
        document.getElementById('edit_is_locked').checked = field.is_locked;

        // JSON 필드 (문자열로 변환)
        const formatJson = (data) => {
            if (!data) return '';
            try {
                const parsed = typeof data === 'string' ? JSON.parse(data) : data;
                return JSON.stringify(parsed, null, 2);
            } catch (e) {
                return data;
            }
        };

        document.getElementById('edit_options').value = formatJson(field.options);
        document.getElementById('edit_properties').value = formatJson(field.properties);
        document.getElementById('edit_validation_rules').value = formatJson(field.validation_rules);
        document.getElementById('edit_display_condition').value = formatJson(field.display_condition);

        // 시스템 필드인 경우 source_table, field_key 비활성화
        document.getElementById('edit_source_table').disabled = isSystemField;
        document.getElementById('edit_field_key').disabled = isSystemField;
        document.getElementById('edit_source_table_hint').classList.toggle('hidden', !isSystemField);
        document.getElementById('edit_field_key_hint').classList.toggle('hidden', !isSystemField);
        document.getElementById('edit_field_key_policy').classList.toggle('hidden', isSystemField);

        // 필드 정보 표시
        document.getElementById('edit_storage_type_display').textContent =
            isSystemField ? '시스템 필드 (컬럼)' : '커스텀 필드 (JSON)';
        document.getElementById('edit_created_at').textContent =
            field.created_at ? new Date(field.created_at).toLocaleString('ko-KR') : '-';

        // JSON 도움말 숨기기
        document.getElementById('jsonHelp').classList.add('hidden');

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

    // 수정 모달 닫기
    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
        document.getElementById('editForm').reset();
    }

    // JSON 파싱 헬퍼 (빈 문자열이면 null 반환)
    function parseJsonField(value) {
        if (!value || value.trim() === '') return null;
        try {
            return JSON.parse(value);
        } catch (e) {
            showToast('JSON 형식이 올바르지 않습니다: ' + e.message, 'error');
            throw e;
        }
    }

    // 수정 폼 제출
    function submitEditForm(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const id = formData.get('id');
        const storageType = formData.get('storage_type');
        const isSystemField = storageType === 'column';

        // JSON 필드 파싱 시도
        let options, properties, validationRules, displayCondition;
        try {
            options = parseJsonField(formData.get('options'));
            properties = parseJsonField(formData.get('properties'));
            validationRules = parseJsonField(formData.get('validation_rules'));
            displayCondition = parseJsonField(formData.get('display_condition'));
        } catch (e) {
            return; // JSON 파싱 에러 시 중단
        }

        const data = {
            field_name: formData.get('field_name'),
            field_type: formData.get('field_type'),
            is_required: formData.get('is_required') === '1',
            is_active: formData.get('is_active') === '1',
            is_locked: formData.get('is_locked') === '1',
            default_value: formData.get('default_value') || null,
            placeholder: formData.get('placeholder') || null,
            description: formData.get('description') || null,
            options: options,
            properties: properties,
            validation_rules: validationRules,
            display_condition: displayCondition
        };

        // 커스텀 필드인 경우에만 source_table, field_key 포함
        if (!isSystemField) {
            data.source_table = formData.get('source_table') || null;
            data.field_key = formData.get('field_key') || null;
        }

        fetch(`/api/admin/item-fields/custom-fields/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                closeEditModal();
                htmx.trigger('#custom-fields', 'customRefresh');
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(err => showToast('오류가 발생했습니다.', 'error'));
    }

    // 필드 유형 버튼 그룹 선택
    function setFieldCategory(value) {
        // hidden input 값 업데이트
        document.getElementById('field_category_input').value = value;

        // 버튼 스타일 업데이트
        document.querySelectorAll('.field-category-btn').forEach(btn => {
            if (btn.dataset.value === value) {
                btn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                btn.classList.add('bg-gray-800', 'text-white');
            } else {
                btn.classList.remove('bg-gray-800', 'text-white');
                btn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
            }
        });

        // 즉시 검색 실행
        htmx.trigger('#custom-fields', 'customRefresh');
    }
</script>
@endpush