@extends('layouts.app')

@section('title', '카테고리 동기화')

@section('content')
<div class="flex flex-col h-full">
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6 flex-shrink-0">
        <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 items-center gap-2">
            <a href="{{ route('categories.index') }}"
               class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 text-sm">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                카테고리 관리
            </a>
            <a href="{{ route('menus.sync.index') }}"
               class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 text-sm">
                <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="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>
                환경 설정
            </a>
        </div>
    </div>

    <!-- 타입 선택 + 환경 선택 탭 -->
    <div class="bg-white rounded-lg shadow-sm mb-4">
        <div class="border-b border-gray-200">
            <nav class="flex items-center -mb-px" aria-label="Tabs">
                <!-- 글로벌/테넌트 토글 -->
                <div class="flex items-center border-r border-gray-200 px-4">
                    <a href="{{ route('categories.sync.index', ['env' => $selectedEnv, 'type' => 'global']) }}"
                       class="px-3 py-2 text-sm font-medium rounded-l-lg border transition-colors
                              {{ $selectedType === 'global'
                                  ? 'bg-purple-600 text-white border-purple-600'
                                  : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' }}">
                        <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        글로벌
                    </a>
                    <a href="{{ route('categories.sync.index', ['env' => $selectedEnv, 'type' => 'tenant']) }}"
                       class="px-3 py-2 text-sm font-medium rounded-r-lg border border-l-0 transition-colors
                              {{ $selectedType === 'tenant'
                                  ? 'bg-blue-600 text-white border-blue-600'
                                  : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' }}">
                        <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                        테넌트
                    </a>
                </div>

                <!-- 환경 탭 -->
                @foreach($environments as $key => $env)
                    <a href="{{ route('categories.sync.index', ['env' => $key, 'type' => $selectedType]) }}"
                       class="px-6 py-3 text-sm font-medium border-b-2 transition-colors
                              {{ $selectedEnv === $key
                                  ? 'border-blue-500 text-blue-600'
                                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                        로컬 ↔ {{ $env['name'] ?? strtoupper($key) }}
                        @if(empty($env['url']))
                            <span class="ml-1 text-xs text-gray-400">(미설정)</span>
                        @endif
                    </a>
                @endforeach
            </nav>
        </div>
    </div>

    @if($remoteError)
        <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            원격 서버 연결 실패: {{ $remoteError }}
        </div>
    @endif

    @if(empty($environments[$selectedEnv]['url']))
        <div class="mb-4 bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <a href="{{ route('menus.sync.index') }}" class="underline">메뉴 동기화 환경 설정</a>에서 {{ $environments[$selectedEnv]['name'] ?? strtoupper($selectedEnv) }} 서버 URL을 설정해주세요.
        </div>
    @endif

    <!-- 동기화 요약 -->
    @if(!empty($environments[$selectedEnv]['url']) && !$remoteError)
        <div class="grid grid-cols-3 gap-4 mb-4">
            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                <div class="flex items-center gap-2">
                    <span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <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="M12 4v16m8-8H4" />
                        </svg>
                    </span>
                    <div>
                        <p class="text-sm font-medium text-green-800">로컬에만 있음</p>
                        <p class="text-2xl font-bold text-green-600">{{ count($diff['local_only']) }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div class="flex items-center gap-2">
                    <span class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                        </svg>
                    </span>
                    <div>
                        <p class="text-sm font-medium text-blue-800">양쪽 모두</p>
                        <p class="text-2xl font-bold text-blue-600">{{ count($diff['both']) }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                <div class="flex items-center gap-2">
                    <span class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                        <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="M7 16l-4-4m0 0l4-4m-4 4h18" />
                        </svg>
                    </span>
                    <div>
                        <p class="text-sm font-medium text-purple-800">원격에만 있음</p>
                        <p class="text-2xl font-bold text-purple-600">{{ count($diff['remote_only']) }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- 카테고리 비교 테이블 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 flex-1 min-h-0">
        <!-- 로컬 카테고리 -->
        <div class="bg-white rounded-lg shadow-sm flex flex-col">
            <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <div class="flex items-center gap-2">
                    <input type="checkbox" id="selectAllLocal" onchange="toggleSelectAll('local', this.checked)"
                           class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                    <span class="w-6 h-6 bg-green-100 rounded flex items-center justify-center">
                        <svg class="w-4 h-4 text-green-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>
                    </span>
                    <h3 class="font-semibold text-gray-800">로컬 (현재)</h3>
                    <span class="text-xs text-gray-500">({{ count($localCategories) }}개)</span>
                </div>
                @if(!empty($environments[$selectedEnv]['url']) && !$remoteError)
                    <div class="flex items-center gap-2">
                        <span id="localSelectedCount" class="text-xs text-gray-500">0개 선택</span>
                        <button type="button" onclick="pushSelected()"
                                class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded transition-colors flex items-center gap-1">
                            Push →
                        </button>
                    </div>
                @endif
            </div>
            <div class="overflow-auto flex-1">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 sticky top-0">
                        <tr>
                            <th class="px-3 py-2 text-center w-10"></th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">타입</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">그룹</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">코드</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">이름</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">상위</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($localCategories as $cat)
                            @php
                                $typePart = $cat['is_global'] ? 'global' : 'tenant:' . $cat['tenant_id'];
                                $key = $typePart . ':' . $cat['code_group'] . ':' . $cat['code'];
                                $inBoth = in_array($key, $diff['both']);
                                $localOnly = in_array($key, $diff['local_only']);
                            @endphp
                            <tr class="{{ $inBoth ? 'bg-blue-50/50' : ($localOnly ? 'bg-green-50/50' : '') }}">
                                <td class="px-3 py-2 text-center">
                                    <input type="checkbox" name="local_cat" value="{{ $key }}"
                                           class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500"
                                           {{ $inBoth ? 'disabled' : '' }}>
                                </td>
                                <td class="px-3 py-2">
                                    @if($cat['is_global'])
                                        <span class="px-1.5 py-0.5 bg-purple-100 text-purple-700 text-xs rounded">글로벌</span>
                                    @else
                                        <span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">테넌트</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2 font-mono text-xs text-gray-600">{{ $cat['code_group'] }}</td>
                                <td class="px-3 py-2 font-mono text-xs">{{ $cat['code'] }}</td>
                                <td class="px-3 py-2">{{ $cat['name'] }}</td>
                                <td class="px-3 py-2 text-xs text-gray-500">{{ $cat['parent_code'] ?? '-' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-3 py-8 text-center text-gray-400">카테고리가 없습니다.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 원격 카테고리 -->
        <div class="bg-white rounded-lg shadow-sm flex flex-col">
            <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <div class="flex items-center gap-2">
                    <input type="checkbox" id="selectAllRemote" onchange="toggleSelectAll('remote', this.checked)"
                           class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                    <span class="w-6 h-6 bg-purple-100 rounded flex items-center justify-center">
                        <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                        </svg>
                    </span>
                    <h3 class="font-semibold text-gray-800">{{ $environments[$selectedEnv]['name'] ?? strtoupper($selectedEnv) }}</h3>
                    <span class="text-xs text-gray-500">({{ count($remoteCategories) }}개)</span>
                </div>
                @if(!empty($environments[$selectedEnv]['url']) && !$remoteError)
                    <div class="flex items-center gap-2">
                        <span id="remoteSelectedCount" class="text-xs text-gray-500">0개 선택</span>
                        <button type="button" onclick="pullSelected()"
                                class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs font-medium rounded transition-colors flex items-center gap-1">
                            ← Pull
                        </button>
                    </div>
                @endif
            </div>
            <div class="overflow-auto flex-1">
                @if(empty($environments[$selectedEnv]['url']))
                    <div class="flex items-center justify-center h-full text-gray-400">
                        <p>환경을 설정해주세요</p>
                    </div>
                @elseif($remoteError)
                    <div class="flex items-center justify-center h-full text-red-400">
                        <p>연결 실패</p>
                    </div>
                @elseif(empty($remoteCategories))
                    <div class="flex items-center justify-center h-full text-gray-400">
                        <p>카테고리가 없습니다</p>
                    </div>
                @else
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 sticky top-0">
                            <tr>
                                <th class="px-3 py-2 text-center w-10"></th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">타입</th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">그룹</th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">코드</th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">이름</th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">상위</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($remoteCategories as $cat)
                                @php
                                    $typePart = $cat['is_global'] ? 'global' : 'tenant:' . ($cat['tenant_id'] ?? '');
                                    $key = $typePart . ':' . $cat['code_group'] . ':' . $cat['code'];
                                    $inBoth = in_array($key, $diff['both']);
                                    $remoteOnly = in_array($key, $diff['remote_only']);
                                @endphp
                                <tr class="{{ $inBoth ? 'bg-blue-50/50' : ($remoteOnly ? 'bg-purple-50/50' : '') }}">
                                    <td class="px-3 py-2 text-center">
                                        <input type="checkbox" name="remote_cat" value="{{ $key }}"
                                               class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                                               {{ $inBoth ? 'disabled' : '' }}>
                                    </td>
                                    <td class="px-3 py-2">
                                        @if($cat['is_global'])
                                            <span class="px-1.5 py-0.5 bg-purple-100 text-purple-700 text-xs rounded">글로벌</span>
                                        @else
                                            <span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">테넌트</span>
                                        @endif
                                    </td>
                                    <td class="px-3 py-2 font-mono text-xs text-gray-600">{{ $cat['code_group'] }}</td>
                                    <td class="px-3 py-2 font-mono text-xs">{{ $cat['code'] }}</td>
                                    <td class="px-3 py-2">{{ $cat['name'] }}</td>
                                    <td class="px-3 py-2 text-xs text-gray-500">{{ $cat['parent_code'] ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

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

    // 전체 선택
    function toggleSelectAll(side, checked) {
        const checkboxes = document.querySelectorAll(`input[name="${side}_cat"]:not(:disabled)`);
        checkboxes.forEach(cb => cb.checked = checked);
        updateSelectedCount(side);
    }

    // 선택된 개수 업데이트
    function updateSelectedCount(side) {
        const checkboxes = document.querySelectorAll(`input[name="${side}_cat"]:checked`);
        const countEl = document.getElementById(`${side}SelectedCount`);
        if (countEl) {
            countEl.textContent = `${checkboxes.length}개 선택`;
        }
    }

    // 체크박스 변경 이벤트 리스너
    document.addEventListener('change', function(e) {
        if (e.target.name === 'local_cat') {
            updateSelectedCount('local');
        } else if (e.target.name === 'remote_cat') {
            updateSelectedCount('remote');
        }
    });

    // Push
    async function pushSelected() {
        const checkboxes = document.querySelectorAll('input[name="local_cat"]:checked');
        if (checkboxes.length === 0) {
            alert('Push할 카테고리를 선택해주세요.');
            return;
        }

        const categoryKeys = Array.from(checkboxes).map(cb => cb.value);
        const typeLabel = selectedType === 'global' ? '글로벌' : '테넌트';

        if (!confirm(`${categoryKeys.length}개 ${typeLabel} 카테고리를 ${selectedEnv === 'dev' ? '개발' : '운영'} 서버로 Push 하시겠습니까?`)) {
            return;
        }

        try {
            const response = await fetch('{{ route("categories.sync.push") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ env: selectedEnv, type: selectedType, category_keys: categoryKeys })
            });

            const result = await response.json();
            if (result.success) {
                alert(result.message);
                location.reload();
            } else {
                alert(result.error || 'Push 실패');
            }
        } catch (e) {
            alert('오류 발생: ' + e.message);
        }
    }

    // Pull
    async function pullSelected() {
        const checkboxes = document.querySelectorAll('input[name="remote_cat"]:checked');
        if (checkboxes.length === 0) {
            alert('Pull할 카테고리를 선택해주세요.');
            return;
        }

        const categoryKeys = Array.from(checkboxes).map(cb => cb.value);
        const typeLabel = selectedType === 'global' ? '글로벌' : '테넌트';

        if (!confirm(`${categoryKeys.length}개 ${typeLabel} 카테고리를 로컬로 Pull 하시겠습니까?`)) {
            return;
        }

        try {
            const response = await fetch('{{ route("categories.sync.pull") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ env: selectedEnv, type: selectedType, category_keys: categoryKeys })
            });

            const result = await response.json();
            if (result.success) {
                alert(result.message);
                location.reload();
            } else {
                alert(result.error || 'Pull 실패');
            }
        } catch (e) {
            alert('오류 발생: ' + e.message);
        }
    }
</script>
@endpush