@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>
            <div class="flex items-center gap-2 text-sm text-gray-500 mb-1">
                <a href="{{ route('barobill.kakaotalk.index') }}" class="hover:text-gray-700">카카오톡</a>
                <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="M9 5l7 7-7 7" /></svg>
                <span class="text-gray-700">채널 관리</span>
            </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">
            <button type="button" onclick="loadChannels()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                새로고침
            </button>
            <button type="button" onclick="openChannelManagement()" class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition text-sm 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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
                채널 관리 (바로빌)
            </button>
        </div>
    </div>

    <!-- 채널 목록 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div id="channels-list" class="p-6">
            <div class="text-center py-12 text-gray-400">
                <svg class="w-10 h-10 mx-auto mb-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                <p class="text-sm">채널 목록 로딩 중...</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function loadChannels() {
    const container = document.getElementById('channels-list');
    container.innerHTML = '<div class="text-center py-12 text-gray-400"><svg class="w-10 h-10 mx-auto mb-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg><p class="text-sm">채널 목록 로딩 중...</p></div>';

    fetch('/api/admin/barobill/kakaotalk/channels', {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        if (!data.success) {
            container.innerHTML = '<div class="text-center py-12"><p class="text-sm text-red-500">' + (data.error || data.message) + '</p></div>';
            return;
        }

        const raw = data.data;
        let items = [];
        if (Array.isArray(raw)) items = raw;
        else if (raw && raw.KakaotalkChannel) items = Array.isArray(raw.KakaotalkChannel) ? raw.KakaotalkChannel : [raw.KakaotalkChannel];
        else if (raw) items = [raw];

        if (items.length === 0) {
            container.innerHTML = '<div class="text-center py-12 text-gray-400"><svg class="w-10 h-10 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" /></svg><p class="text-sm">등록된 채널이 없습니다.</p><p class="text-xs mt-1">바로빌 채널 관리 페이지에서 채널을 등록해주세요.</p></div>';
            return;
        }

        let html = '<div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="border-b border-gray-200"><th class="text-left py-3 px-4 font-medium text-gray-600">채널 ID</th><th class="text-left py-3 px-4 font-medium text-gray-600">채널명</th><th class="text-center py-3 px-4 font-medium text-gray-600">상태</th></tr></thead><tbody>';
        items.forEach(ch => {
            const statusColor = ch.Status === '정상' || ch.Status === 'Y' ? 'green' : 'gray';
            html += '<tr class="border-b border-gray-50 hover:bg-gray-50">';
            html += '<td class="py-3 px-4 font-mono text-xs">' + (ch.ChannelId || '-') + '</td>';
            html += '<td class="py-3 px-4 font-medium">' + (ch.ChannelName || '-') + '</td>';
            html += '<td class="py-3 px-4 text-center"><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-' + statusColor + '-100 text-' + statusColor + '-700">' + (ch.Status || '-') + '</span></td>';
            html += '</tr>';
        });
        html += '</tbody></table></div>';
        container.innerHTML = html;
    })
    .catch(err => {
        container.innerHTML = '<div class="text-center py-12"><p class="text-sm text-red-500">조회 오류: ' + err.message + '</p></div>';
    });
}

function openChannelManagement() {
    fetch('/api/admin/barobill/kakaotalk/channels/management-url', {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success && data.data) {
            window.open(data.data, '_blank', 'width=1200,height=800');
        } else {
            alert(data.error || data.message || '관리 URL 조회 실패');
        }
    })
    .catch(err => alert('오류: ' + err.message));
}

document.addEventListener('DOMContentLoaded', loadChannels);
</script>
@endpush
