@extends('layouts.app')

@section('title', '메뉴 생성')

@section('content')
    <div class="max-w-4xl mx-auto">
        <!-- 페이지 헤더 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                <x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
                메뉴 생성
            </h1>
            <a href="{{ route('menus.index') }}" class="text-gray-600 hover:text-gray-800">
                ← 목록으로
            </a>
        </div>

        <!-- 폼 카드 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <form id="menuForm" action="/api/admin/menus" method="POST">
                @csrf

                <!-- 부모 메뉴 -->
                <div class="mb-4">
                    <label for="parent_id" class="block text-sm font-medium text-gray-700 mb-2">
                        부모 메뉴
                    </label>
                    <select name="parent_id" id="parent_id"
                            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="">최상위 메뉴</option>
                        @foreach($parentMenus as $parent)
                            <option value="{{ $parent->id }}">
                                {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- 메뉴명 -->
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        메뉴명 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" id="name" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- URL -->
                <div class="mb-4">
                    <label for="url" class="block text-sm font-medium text-gray-700 mb-2">
                        URL
                    </label>
                    <input type="text" name="url" id="url"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="/dashboard">
                </div>

                <!-- 아이콘 -->
                <div class="mb-4">
                    <label for="icon" class="block text-sm font-medium text-gray-700 mb-2">
                        아이콘
                    </label>
                    <div class="flex items-center gap-3 mb-2">
                        <div id="icon-preview" class="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-lg bg-gray-50 text-gray-600">
                            <x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
                        </div>
                        <input type="text" name="icon" id="icon"
                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="아래에서 선택하거나 직접 입력">
                    </div>
                    <!-- 아이콘 샘플 그리드 -->
                    <div class="border border-gray-200 rounded-lg p-3 bg-gray-50">
                        <p class="text-xs text-gray-500 mb-2">사용 가능한 아이콘 (클릭하여 선택)</p>
                        <div class="grid grid-cols-6 sm:grid-cols-9 md:grid-cols-13 gap-1">
                            @php
                            $sampleIcons = [
                                // 기본
                                'home', 'folder', 'menu', 'layout-dashboard', 'layout',
                                // 결재/문서
                                'file-check', 'file-edit', 'file-text', 'document-text', 'inbox',
                                'clipboard-check', 'clipboard-list',
                                // 게시판/보기
                                'layout-list', 'eye',
                                // 품목/재고
                                'package', 'box', 'archive', 'cube', 'warehouse', 'layers',
                                // 데이터베이스
                                'database',
                                // 사용자/인사
                                'users', 'user', 'user-group',
                                // 건물/회사
                                'building', 'building-2', 'landmark',
                                // 일정/시간
                                'calendar', 'calendar-check', 'calendar-days', 'clock',
                                // 금융/회계
                                'dollar-sign', 'credit-card', 'trending-up', 'trending-down', 'receipt',
                                // 차트/리포트
                                'bar-chart-3', 'chart-bar', 'pie-chart',
                                // 고객센터/커뮤니케이션
                                'headphones', 'megaphone', 'help-circle', 'message-circle', 'bell',
                                // 보안/권한
                                'shield', 'shield-check', 'lock', 'key', 'award',
                                // 상태/알림
                                'alert-circle', 'check-circle', 'check-square', 'x-circle',
                                'arrow-up-circle', 'arrow-down-circle',
                                // 기록/활동
                                'history', 'activity',
                                // 설정/조정
                                'cog', 'settings', 'sliders', 'adjustments', 'wrench',
                                // 개발/코드
                                'code', 'terminal', 'server', 'beaker',
                                // 유틸리티
                                'calculator', 'palette', 'map-pin', 'tag', 'collection',
                                'external-link', 'sparkles', 'lightning-bolt', 'puzzle',
                                // 물류/운송
                                'truck', 'car',
                                // 판매/생산
                                'shopping-cart', 'factory',
                            ];
                            @endphp
                            @foreach($sampleIcons as $iconKey)
                                <button type="button"
                                        onclick="selectIcon('{{ $iconKey }}')"
                                        class="icon-btn flex flex-col items-center gap-0.5 p-2 hover:bg-white hover:shadow-sm rounded-lg transition cursor-pointer border border-transparent hover:border-blue-300 group"
                                        data-icon="{{ $iconKey }}"
                                        title="{{ $iconKey }}">
                                    <x-sidebar.menu-icon :icon="$iconKey" class="w-5 h-5 text-gray-500 group-hover:text-blue-600" />
                                    <span class="text-[9px] text-gray-400 group-hover:text-blue-600 truncate max-w-full leading-none">{{ $iconKey }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- 정렬 순서 -->
                <div class="mb-4">
                    <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-2">
                        정렬 순서
                    </label>
                    <input type="number" name="sort_order" id="sort_order" value="0" min="0"
                           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 class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <!-- 활성 상태 -->
                    <div class="flex items-center">
                        <input type="checkbox" name="is_active" id="is_active" value="1" checked
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="is_active" class="ml-2 text-sm text-gray-700">
                            활성 상태
                        </label>
                    </div>

                    <!-- 숨김 -->
                    <div class="flex items-center">
                        <input type="checkbox" name="hidden" id="hidden" value="1"
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="hidden" class="ml-2 text-sm text-gray-700">
                            숨김
                        </label>
                    </div>

                    <!-- 외부 링크 -->
                    <div class="flex items-center">
                        <input type="checkbox" name="is_external" id="is_external" value="1"
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="is_external" class="ml-2 text-sm text-gray-700">
                            외부 링크
                        </label>
                    </div>
                </div>

                <!-- 외부 URL (is_external 체크 시 표시) -->
                <div id="external-url-group" class="mb-4 hidden">
                    <label for="external_url" class="block text-sm font-medium text-gray-700 mb-2">
                        외부 URL
                    </label>
                    <input type="text" name="external_url" id="external_url"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="https://example.com">
                </div>

                <!-- 확장 옵션 섹션 -->
                <div class="border-t border-gray-200 pt-4 mt-6 mb-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-gray-700">확장 옵션</h3>
                        <button type="button" onclick="toggleOptionsSection()" class="text-xs text-blue-600 hover:text-blue-800">
                            <span id="options-toggle-text">접기</span>
                        </button>
                    </div>

                    <div id="options-section" class="space-y-4">
                        <!-- section -->
                        <div>
                            <label for="option_section" class="block text-sm font-medium text-gray-700 mb-1">
                                section
                            </label>
                            <select name="option_section" id="option_section"
                                    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="main">main (기본)</option>
                                <option value="tools">tools (도구)</option>
                                <option value="labs">labs (실험실)</option>
                            </select>
                            <p class="text-xs text-gray-400 mt-1">사이드바 영역 구분. main: 메인 메뉴, tools: 개발도구 영역, labs: R&D 실험실 영역</p>
                        </div>

                        <!-- meta (JSON) -->
                        <div>
                            <label for="option_meta" class="block text-sm font-medium text-gray-700 mb-1">
                                meta <span class="text-xs text-gray-400">(JSON)</span>
                            </label>
                            <textarea name="option_meta" id="option_meta" rows="3"
                                      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"
                                      placeholder='{"tab": "S", "badge": "new"}'></textarea>
                            <p class="text-xs text-gray-400 mt-1">추가 메타 데이터 (JSON 형식). 탭 구분, 뱃지 표시 등 커스텀 속성 저장</p>
                        </div>
                    </div>
                </div>

                <!-- 버튼 그룹 -->
                <div class="flex justify-end gap-4 mt-6">
                    <a href="{{ route('menus.index') }}"
                       class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                        취소
                    </a>
                    <button type="submit"
                            class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                        생성
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // 아이콘 선택
    window.selectIcon = function(iconKey) {
        document.getElementById('icon').value = iconKey;
        updateIconPreview(iconKey);
        // 선택 상태 표시
        document.querySelectorAll('.icon-btn').forEach(btn => {
            btn.classList.remove('bg-blue-50', 'border-blue-400');
            if (btn.dataset.icon === iconKey) {
                btn.classList.add('bg-blue-50', 'border-blue-400');
            }
        });
    };

    // 아이콘 미리보기 업데이트
    window.updateIconPreview = function(iconKey) {
        const preview = document.getElementById('icon-preview');
        const iconBtn = document.querySelector(`.icon-btn[data-icon="${iconKey}"]`);
        if (iconBtn) {
            const svg = iconBtn.querySelector('svg');
            if (svg) {
                const clonedSvg = svg.cloneNode(true);
                clonedSvg.classList.remove('w-5', 'h-5');
                clonedSvg.classList.add('w-6', 'h-6');
                preview.innerHTML = '';
                preview.appendChild(clonedSvg);
            }
        } else if (iconKey) {
            preview.innerHTML = `<span class="text-xs text-gray-400">${iconKey}</span>`;
        }
    };

    // 외부 링크 체크박스 토글
    document.getElementById('is_external').addEventListener('change', function() {
        const externalUrlGroup = document.getElementById('external-url-group');
        if (this.checked) {
            externalUrlGroup.classList.remove('hidden');
        } else {
            externalUrlGroup.classList.add('hidden');
        }
    });

    // 확장 옵션 섹션 토글
    window.toggleOptionsSection = function() {
        const section = document.getElementById('options-section');
        const toggleText = document.getElementById('options-toggle-text');
        if (section.classList.contains('hidden')) {
            section.classList.remove('hidden');
            toggleText.textContent = '접기';
        } else {
            section.classList.add('hidden');
            toggleText.textContent = '펼치기';
        }
    };

    // options 객체 생성
    function buildOptionsObject() {
        const options = {};

        const section = document.getElementById('option_section').value;
        if (section && section !== 'main') {
            options.section = section;
        }

        const metaStr = document.getElementById('option_meta').value.trim();
        if (metaStr) {
            try {
                options.meta = JSON.parse(metaStr);
            } catch (e) {
                showToast('meta 필드의 JSON 형식이 올바르지 않습니다.', 'error');
                throw e;
            }
        }

        return Object.keys(options).length > 0 ? options : null;
    }

    // 폼 제출 처리
    document.getElementById('menuForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        // option_ 접두사 필드 제거
        delete data.option_section;
        delete data.option_meta;

        // options 객체 추가
        try {
            const options = buildOptionsObject();
            if (options) {
                data.options = options;
            }
        } catch (e) {
            return; // JSON 파싱 에러
        }

        try {
            const response = await fetch('/api/admin/menus', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                showToast(result.message, 'success');
                window.location.href = result.redirect;
            } else {
                showToast(result.message, 'error');
            }
        } catch (error) {
            showToast('메뉴 생성 중 오류가 발생했습니다.', 'error');
            console.error(error);
        }
    });
</script>
@endpush