@extends('layouts.admin')

@section('title', '알림 템플릿 관리')

@section('content')

<!-- 상단 타이틀 및 액션 헤더 영역 -->
<div class="content-header-box mb-4 px-0">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap">
        <!-- 신규 템플릿 등록 버튼 -->
        <a href="{{ route('admin.notifications.templates.create') }}" class="btn btn-primary btn-app-sm fw-bold">
            <i class="fa-solid fa-plus me-1"></i> 등록
        </a>
    </div>
</div>

<!-- 공통 에러, 성공 알림 블레이드 컴포넌트 -->
<x-admin.alerts-display />

<div class="container-fluid px-0">

    <!-- 1. 수신 대상(Target) 탭 네비게이션 (Config 및 모델 정규화 1차원 문자열 보장) -->
    @php
        $currentTarget = request('target', '');
        $rawTargets = \App\Models\NotificationTemplate::getTargets();

        // 다차원 배열 또는 1차원 배열 어떤 구조여도 안전하게 [key => label] 문자열로 변환
        $targetsConfig = collect($rawTargets)->map(function ($item, $key) {
            return is_array($item) ? ($item['label'] ?? $item['name'] ?? (string)$key) : (string)$item;
        })->toArray();
    @endphp
    <div class="admin-horizontal-scroll mb-3">
        <a href="{{ route('admin.notifications.templates.list', array_merge(request()->except('page'), ['target' => ''])) }}"
           class="btn btn-app-sm {{ $currentTarget === '' ? 'btn-primary' : 'btn-outline-secondary' }}">
            전체 보기
        </a>
        @foreach($targetsConfig as $tKey => $tLabel)
            <a href="{{ route('admin.notifications.templates.list', array_merge(request()->except('page'), ['target' => (string)$tKey])) }}"
               class="btn btn-app-sm {{ $currentTarget === (string)$tKey ? 'btn-primary' : 'btn-outline-secondary' }}">
                {{ $tLabel }}
            </a>
        @endforeach
    </div>

    <!-- 2. 키워드 검색 및 상세 필터 영역 -->
    <x-admin.search-filter :route="route('admin.notifications.templates.list')" :total="$templates->total()" searchPlaceholder="식별코드, 제목, 설명 검색">
        @slot('filters')
            @if(request('target'))
                <input type="hidden" name="target" value="{{ request('target') }}">
            @endif

            @php
                $notificationCategories = config('notification_categories.categories', []);

                // 1단 카테고리 배열 안전 매핑 [ '키' => '표시이름' ]
                $parentOptions = collect($notificationCategories)->mapWithKeys(function ($cat, $key) {
                    $name = is_array($cat) ? ($cat['name'] ?? (string)$key) : (string)$cat;
                    return [(string)$key => $name];
                })->toArray();

                $selectedCategory = request('category');
                $currentSubcategories = ($selectedCategory && isset($notificationCategories[$selectedCategory]['subcategories']))
                    ? $notificationCategories[$selectedCategory]['subcategories']
                    : [];

                // 채널/구분(Type) 옵션 1차원 문자열 보장
                $rawTypes = \App\Models\NotificationTemplate::getTypes();
                $typeOptions = collect($rawTypes)->map(function ($item, $key) {
                    return is_array($item) ? ($item['label'] ?? $item['name'] ?? (string)$key) : (string)$item;
                })->toArray();
            @endphp
            
            <x-admin.forms.select id="categorySelect" name="category" label="대분류" allLabel="대분류 전체" :options="$parentOptions" />
            <x-admin.forms.select id="subcategorySelect" name="subcategory" label="소분류" allLabel="소분류 전체" :options="$currentSubcategories" />
            <x-admin.forms.select id="typeSelect" name="type" label="구분" allLabel="채널 전체" :options="$typeOptions" />
            <!-- 웹 알림함 동시 적재 여부 필터 -->
            <x-admin.forms.select id="is_web_notifySelect" name="is_web_notify" label="웹 알림 여부" allLabel="웹 알림 전체" :options="['1' => '사용함 (ON)', '0' => '사용안함 (OFF)']" />
        @endslot
    </x-admin.search-filter>

    <!-- 3. 스마트폰 모바일 화면 갤러리 그리드 리스트 영역 -->
    <div class="phone-mockup-grid mb-4">
        @forelse($templates as $template)
            @php
                // 모델 접근자 또는 인라인 fallback을 통한 테마 클래스 및 아이콘 결정
                $screenClass = method_exists($template, 'getScreenClassAttribute') 
                    ? $template->screen_class 
                    : match ($template->type) {
                        'ALIMTALK' => 'screen-alimtalk',
                        'EMAIL'    => 'screen-email',
                        default    => 'screen-sms',
                    };

                $channelIcon = method_exists($template, 'getChannelIconAttribute') 
                    ? $template->channel_icon 
                    : match ($template->type) {
                        'ALIMTALK' => 'fa-solid fa-comment',
                        'EMAIL'    => 'fa-solid fa-envelope-open-text',
                        default    => 'fa-solid fa-comment-sms',
                    };

                // 문자열 보장된 표시 데이터 추출
                $targetDisplayName = is_array($template->target_name)
                    ? ($template->target_name['label'] ?? $template->target)
                    : ($template->target_name ?: $template->target);

                $categoryDisplayName = is_array($template->category_name)
                    ? ($template->category_name['name'] ?? '')
                    : $template->category_name;

                $subcategoryDisplayName = is_array($template->subcategory_name)
                    ? ($template->subcategory_name['name'] ?? '')
                    : $template->subcategory_name;

                $targetLower = strtolower((string)$template->target);
            @endphp

            <div class="phone-mockup-card">
                <!-- 스마트폰 상단 하드웨어 프레임 (스피커 노치 & 상태 표시줄) -->
                <div class="phone-speaker-notch"></div>
                <div class="phone-status-bar">
                    <span>{{ now()->format('H:i') }}</span>
                    <div class="d-flex gap-1 align-items-center">
                        <i class="fa-solid fa-signal"></i>
                        <i class="fa-solid fa-wifi"></i>
                        <i class="fa-solid fa-battery-full"></i>
                    </div>
                </div>

                <!-- 휴대폰 액정 화면 (채널별 테마 배경 및 수신 말풍선) -->
                <div class="phone-screen {{ $screenClass }}">
                    <!-- 템플릿 메타 배지 (대/소분류, 웹 알림 여부, 채널) -->
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="d-flex gap-1 align-items-center flex-wrap">
                            <span class="badge badge-outline-primary badge-sm">{{ $categoryDisplayName }}</span>
                            <span class="badge bg-white text-secondary border badge-sm">{{ $subcategoryDisplayName }}</span>
                            
                            <!-- 실시간 웹 알림 동기화 뱃지 (admin_notification.js 연동 ID) -->
                            <span id="badge-web-{{ $template->id }}" 
                                  class="badge badge-sm {{ $template->is_web_notify ? 'bg-success-subtle text-success border border-success' : 'bg-light text-muted border' }}"
                                  title="{{ $template->is_web_notify ? '시스템 웹 알림함 동시 사용' : '외부 발송만 진행 (웹 알림 미사용)' }}">
                                <i class="{{ $template->is_web_notify ? 'fa-solid fa-bell' : 'fa-regular fa-bell-slash' }} me-0.5"></i>
                                <span class="badge-text">{{ $template->is_web_notify ? '웹 ON' : '웹 OFF' }}</span>
                            </span>
                        </div>
                        <span class="badge bubble-badge badge-sm">
                            <i class="{{ $channelIcon }} me-1"></i>
                            {{ $template->type }}
                        </span>
                    </div>

                    <!-- 식별 코드 라벨 -->
                    <div class="text-secondary small font-monospace fw-bold mb-1">
                        <i class="fa-solid fa-code me-1"></i>{{ $template->code }}
                    </div>

                    <!-- 수신 대상 표기 (뷰티샵 고유 브론즈 모카 테마 적용) -->
                    <div class="text-muted small mb-2">
                        <span class="text-dark fw-semibold">수신:</span>
                        @if($targetLower === 'user')
                            <span class="text-primary fw-bold">{{ $targetDisplayName }}</span>
                        @elseif($targetLower === 'shop')
                            <span class="fw-bold" style="color: #b18977 !important;">{{ $targetDisplayName }}</span>
                        @elseif($targetLower === 'admin')
                            <span class="text-danger fw-bold">{{ $targetDisplayName }}</span>
                        @else
                            <span class="text-secondary fw-bold">{{ $targetDisplayName }}</span>
                        @endif
                    </div>

                    <!-- 실제 스마트폰 수신 메시지 말풍선 -->
                    <div class="chat-bubble flex-grow-1">
                        @if($template->type === 'EMAIL')
                            <!-- 이메일 전용 발송자 표기 라인 -->
                            <div class="d-flex align-items-center text-muted small mb-2 pb-1 border-bottom">
                                <i class="fa-solid fa-envelope email-envelope-icon me-1"></i>
                                <span class="fw-semibold text-dark">발송자:</span> GLOBEAU 고객센터
                            </div>
                        @endif

                        @if($template->title)
                            <div class="chat-bubble-title {{ $template->type === 'EMAIL' ? 'text-primary' : '' }}">
                                {{ $template->type === 'EMAIL' ? '제목: ' . $template->title : '[' . $template->title . ']' }}
                            </div>
                        @endif
                        <div class="chat-bubble-body text-break" style="white-space: pre-wrap;">{{ $template->content }}</div>
                    </div>

                    <!-- 웹 알림 이동 경로 칩 -->
                    @if($template->is_web_notify && !empty($template->action_url))
                        <div class="mt-2 p-1 bg-white bg-opacity-90 rounded border border-light d-flex align-items-center gap-1 fs-xs text-truncate">
                            <i class="fa-solid fa-link text-primary flex-shrink-0"></i>
                            <span class="text-muted flex-shrink-0" style="font-size: 11px;">이동:</span>
                            <span class="font-monospace text-dark text-truncate" style="font-size: 11px;">{{ $template->action_url }}</span>
                        </div>
                    @endif

                    <!-- 템플릿 부가 설명 및 변수 가이드 -->
                    @if($template->description)
                        <div class="mt-2 text-muted small bg-white bg-opacity-75 p-2 rounded border border-light">
                            <i class="fa-solid fa-circle-info me-1 text-primary"></i>{{ $template->description }}
                        </div>
                    @endif
                </div>

                <!-- 스마트폰 하단 컨트롤 패널 & 액션 버튼 영역 -->
                <div class="phone-card-footer border-top">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <!-- 토글 스위치 2종 그룹: 1.발송 ON/OFF | 2.웹알림 ON/OFF -->
                        <div class="d-flex align-items-center gap-3">
                            <!-- 1. 원클릭 발송 ON/OFF 토글 스위치 -->
                            <div class="form-check form-switch mb-0 d-flex align-items-center">
                                <input class="form-check-input js-toggle-switch"
                                       type="checkbox"
                                       role="switch"
                                       id="switch-{{ $template->id }}"
                                       data-url="{{ route('admin.notifications.templates.toggle-active', $template) }}"
                                       data-code="{{ $template->code }}"
                                       {{ $template->is_active ? 'checked' : '' }}>
                                <label class="form-check-label small ms-1 fw-bold text-nowrap {{ $template->is_active ? 'text-success' : 'text-muted' }}"
                                       id="label-{{ $template->id }}"
                                       for="switch-{{ $template->id }}">
                                    {{ $template->is_active ? '발송 ON' : '발송 OFF' }}
                                </label>
                            </div>

                            <!-- 2. 웹 알림함 동시 적재 ON/OFF 토글 스위치 -->
                            <div class="form-check form-switch mb-0 d-flex align-items-center">
                                <input class="form-check-input js-toggle-web-switch"
                                       type="checkbox"
                                       role="switch"
                                       id="web-switch-{{ $template->id }}"
                                       data-url="{{ route('admin.notifications.templates.toggle-web-notify', $template) }}"
                                       data-id="{{ $template->id }}"
                                       data-code="{{ $template->code }}"
                                       {{ $template->is_web_notify ? 'checked' : '' }}>
                                <label class="form-check-label small ms-1 fw-bold text-nowrap {{ $template->is_web_notify ? 'text-primary' : 'text-muted' }}"
                                       id="web-label-{{ $template->id }}"
                                       for="web-switch-{{ $template->id }}">
                                    {{ $template->is_web_notify ? '웹 ON' : '웹 OFF' }}
                                </label>
                            </div>
                        </div>

                        <!-- 수정 및 삭제 액션 버튼 -->
                        <div class="btn-group-sm d-flex gap-1">
                            <a href="{{ route('admin.notifications.templates.edit', $template) }}" class="btn btn-outline-primary btn-app-xs" title="템플릿 수정">
                                <i class="fa-solid fa-pen-to-square me-1"></i>수정
                            </a>
                            <button type="button"
                                    class="btn btn-outline-danger btn-app-xs js-delete-btn"
                                    data-id="{{ $template->id }}"
                                    data-code="{{ $template->code }}"
                                    title="템플릿 삭제">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 스마트폰 하단 홈 인디케이터 바 -->
                    <div class="phone-home-indicator"></div>
                </div>
            </div>
        @empty
            <!-- 등록 데이터 부재 시 빈 상태 안내 -->
            <div class="col-12 py-5 text-center text-muted">
                <i class="fa-solid fa-mobile-screen-button fa-3x d-block mb-3 text-secondary opacity-50"></i>
                등록되었거나 검색 조건에 일치하는 알림 템플릿이 없습니다.
            </div>
        @endforelse
    </div>

    <!-- 공용 삭제 처리용 히든 폼 -->
    <form id="globalDeleteForm" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

    <!-- 4. 페이지네이션 영역 -->
    @if(isset($templates) && method_exists($templates, 'hasPages') && $templates->hasPages())
        <div class="mt-4 d-flex justify-content-center">
            {{ $templates->appends(request()->query())->links('vendor.pagination.admin') }}
        </div>
    @endif

</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/admin/admin_notification.css') }}?v={{ time() }}">
@endpush

@push('scripts')
<script>
    // JS 동적 필터링을 위한 Config 데이터 전달 (문자열 라벨 보장)
    window.notificationCategoriesConfig = @json(config('notification_categories.categories', []));
    window.notificationTargetsConfig    = @json(\App\Models\NotificationTemplate::getTargets());
</script>
<script src="{{ asset('js/admin/admin_notification.js') }}?v={{ time() }}"></script>
@endpush