@extends('layouts.app')

@section('title', 'API 플로우 테스터')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">API 플로우 테스터</h1>
        <div class="flex gap-2">
            <!-- 인증 버튼 -->
            <button onclick="DevToolsAuth.openModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2" title="인증 설정">
                <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                </svg>
                <span id="auth-status" class="dev-tools-auth-status text-gray-500">인증 필요</span>
            </button>
            <!-- JSON 작성 가이드 버튼 -->
            <button onclick="GuideModal.open()"
                    class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition 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>
                JSON 가이드
            </button>
            <!-- 예제 플로우 버튼 -->
            <button onclick="ExamplesModal.open()"
                    class="bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-lg transition 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                </svg>
                예제 플로우
            </button>
            <!-- 새 플로우 버튼 -->
            <a href="{{ route('dev-tools.flow-tester.create') }}"
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition 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="M12 4v16m8-8H4" />
                </svg>
                새 플로우
            </a>
        </div>
    </div>

    <!-- 필터 영역 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <form method="GET" class="flex gap-4">
            <!-- 카테고리 선택 -->
            <div class="w-40">
                <select name="category"
                        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>
                    <option value="item-master" {{ request('category') === 'item-master' ? 'selected' : '' }}>item-master</option>
                    <option value="auth" {{ request('category') === 'auth' ? 'selected' : '' }}>auth</option>
                    <option value="bom" {{ request('category') === 'bom' ? 'selected' : '' }}>bom</option>
                </select>
            </div>

            <!-- 검색 -->
            <div class="flex-1">
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="플로우 이름으로 검색..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- 검색 버튼 -->
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition">
                검색
            </button>
        </form>
    </div>

    <!-- 플로우 목록 -->
    <div class="bg-white rounded-lg shadow-sm overflow-x-auto">
        @if($flows->isEmpty())
            <div class="text-center py-12 text-gray-500">
                <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                <p class="text-lg font-medium">등록된 플로우가 없습니다</p>
                <p class="text-sm mt-1">새 플로우를 생성하여 API 테스트를 시작하세요.</p>
            </div>
        @else
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap w-12">#</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">이름</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">카테고리</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">스텝</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">최근 실행</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">상태</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">생성일</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap">액션</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($flows as $flow)
                        @php
                            $latestRun = $flow->latestRun;
                            $steps = $flow->flow_definition['steps'] ?? [];
                        @endphp
                        {{-- 메인 row --}}
                        <tr class="hover:bg-gray-50 cursor-pointer flow-row" data-flow-id="{{ $flow->id }}" onclick="toggleFlowDetail({{ $flow->id }}, event)">
                            <td class="px-3 py-4 text-center text-sm text-gray-500">
                                {{ $flows->firstItem() + $loop->index }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-400 transition-transform flow-chevron" id="chevron-{{ $flow->id }}" 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>
                                    <div>
                                        <div class="font-medium text-gray-900">{{ $flow->name }}</div>
                                        @if($flow->description)
                                            <div class="text-sm text-gray-500 truncate max-w-xs">{{ $flow->description }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($flow->category)
                                    <span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded">{{ $flow->category }}</span>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                                {{ $flow->step_count }}개
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                                @if($latestRun)
                                    {{ $latestRun->created_at->diffForHumans() }}
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($latestRun)
                                    <span class="px-2 py-1 text-xs font-medium rounded {{ $latestRun->status_color }}">
                                        {{ $latestRun->status_label }}
                                    </span>
                                @else
                                    <span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-500 rounded">대기</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                                {{ $flow->created_at->format('y.m.d') }}
                            </td>
                            <td class="px-4 py-4 text-right" onclick="event.stopPropagation()">
                                <div class="flex justify-end gap-1">
                                    <!-- 실행 버튼 -->
                                    <button onclick="runFlow({{ $flow->id }})"
                                            class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition"
                                            title="실행">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </button>
                                    <!-- 편집 버튼 -->
                                    <a href="{{ route('dev-tools.flow-tester.edit', $flow->id) }}"
                                       class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition"
                                       title="편집">
                                        <svg class="w-5 h-5" 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>
                                    </a>
                                    <!-- 이력 버튼 -->
                                    <a href="{{ route('dev-tools.flow-tester.history', $flow->id) }}"
                                       class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition"
                                       title="실행 이력">
                                        <svg class="w-5 h-5" 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>
                                    </a>
                                    <!-- 복제 버튼 -->
                                    <form action="{{ route('dev-tools.flow-tester.clone', $flow->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit"
                                                class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition"
                                                title="복제">
                                            <svg class="w-5 h-5" 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>
                                    </form>
                                    <!-- 삭제 버튼 -->
                                    <button onclick="confirmDelete({{ $flow->id }}, '{{ $flow->name }}')"
                                            class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition"
                                            title="삭제">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {{-- 스텝 상세 row (확장 영역) --}}
                        @php
                            // 최근 실행 로그에서 스텝별 상태 추출
                            $stepResults = [];
                            if ($latestRun && $latestRun->execution_log) {
                                foreach ($latestRun->execution_log as $log) {
                                    $stepResults[$log['stepId'] ?? ''] = $log;
                                }
                            }
                        @endphp
                        <tr id="flow-detail-{{ $flow->id }}" class="hidden">
                            <td colspan="8" class="px-6 py-4 bg-gray-50">
                                <div class="mb-3 flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <h4 class="text-sm font-semibold text-gray-700">플로우 스텝 ({{ count($steps) }}개)</h4>
                                        @if($latestRun)
                                            <span class="text-xs text-gray-500">
                                                최근 실행: {{ $latestRun->created_at->format('m/d H:i') }}
                                                @if($latestRun->duration_ms)
                                                    ({{ number_format($latestRun->duration_ms / 1000, 2) }}초)
                                                @endif
                                            </span>
                                        @endif
                                    </div>
                                    @if($flow->flow_definition['config']['baseUrl'] ?? null)
                                        <span class="text-xs text-gray-500">Base URL: {{ $flow->flow_definition['config']['baseUrl'] }}</span>
                                    @endif
                                </div>
                                {{-- 스텝 파이프라인 --}}
                                <div style="background: white; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                    <div style="display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;">
                                        @foreach($steps as $idx => $step)
                                            @php
                                                // 메서드 배지 색상만 정의
                                                $badgeColors = [
                                                    'GET' => '#3b82f6',
                                                    'POST' => '#10b981',
                                                    'PUT' => '#f59e0b',
                                                    'PATCH' => '#f97316',
                                                    'DELETE' => '#ef4444',
                                                ];
                                                $method = strtoupper($step['method'] ?? 'GET');
                                                $badgeColor = $badgeColors[$method] ?? '#6b7280';
                                                $hasDeps = !empty($step['dependsOn']);

                                                // 실행 결과 확인
                                                $stepId = $step['id'] ?? '';
                                                $result = $stepResults[$stepId] ?? null;
                                                $isSkipped = $result && ($result['skipped'] ?? false);
                                                $isSuccess = $result && !$isSkipped && ($result['success'] ?? false);
                                                $isFailed = $result && !$isSkipped && !($result['success'] ?? true);
                                                $isPending = !$result;

                                                // 상태 기준 카드 스타일
                                                if ($isPending) {
                                                    $cardBg = '#f9fafb';
                                                    $cardBorder = '#e5e7eb';
                                                    $numberBg = '#9ca3af';
                                                    $statusIcon = null;
                                                } elseif ($isSkipped) {
                                                    $cardBg = '#fefce8'; // 연노랑
                                                    $cardBorder = '#facc15'; // 노랑
                                                    $numberBg = '#eab308';
                                                    $statusIcon = 'skip';
                                                } elseif ($isSuccess) {
                                                    $cardBg = '#ecfdf5';
                                                    $cardBorder = '#10b981';
                                                    $numberBg = '#10b981';
                                                    $statusIcon = 'success';
                                                } else {
                                                    $cardBg = '#fef2f2';
                                                    $cardBorder = '#ef4444';
                                                    $numberBg = '#ef4444';
                                                    $statusIcon = 'fail';
                                                }
                                            @endphp
                                            {{-- 연결 화살표 --}}
                                            @if($idx > 0)
                                                <div style="display: flex; align-items: center; align-self: center; margin: 0 -4px;">
                                                    <div style="width: 24px; height: 2px; background: linear-gradient(to right, #d1d5db, #9ca3af);"></div>
                                                    <div style="width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #9ca3af;"></div>
                                                </div>
                                            @endif
                                            {{-- 스텝 카드 --}}
                                            <div class="group" style="position: relative; display: flex; flex-direction: column; min-width: 170px; max-width: 210px;">
                                                {{-- 스텝 번호 --}}
                                                <div style="position: absolute; top: -10px; left: -10px; width: 28px; height: 28px; border-radius: 50%; background: {{ $numberBg }}; color: white; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10;">
                                                    {{ $idx + 1 }}
                                                </div>
                                                {{-- 상태 인디케이터 (성공/실패/스킵 시) --}}
                                                @if($statusIcon)
                                                    @php
                                                        $iconBgColor = match($statusIcon) {
                                                            'success' => '#10b981',
                                                            'fail' => '#ef4444',
                                                            'skip' => '#eab308',
                                                            default => '#9ca3af'
                                                        };
                                                    @endphp
                                                    <div style="position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; background: {{ $iconBgColor }}; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10;">
                                                        @if($statusIcon === 'success')
                                                            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                                            </svg>
                                                        @elseif($statusIcon === 'skip')
                                                            {{-- Skip 아이콘: 화살표 우회 --}}
                                                            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
                                                            </svg>
                                                        @else
                                                            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/>
                                                            </svg>
                                                        @endif
                                                    </div>
                                                @endif
                                                {{-- 카드 본체 (상태 기준 색상) --}}
                                                <div style="flex: 1; border-radius: 10px; border: 2px solid {{ $cardBorder }}; background: {{ $cardBg }}; padding: 14px; transition: box-shadow 0.2s;" class="hover:shadow-lg">
                                                    {{-- 메서드 배지 --}}
                                                    <div style="margin-bottom: 10px;">
                                                        <span style="display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: bold; border-radius: 4px; background: {{ $badgeColor }}; color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
                                                            {{ $method }}
                                                        </span>
                                                    </div>
                                                    {{-- 스텝 이름 --}}
                                                    <div style="font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 6px; line-height: 1.3;">
                                                        {{ $step['name'] ?? $step['id'] }}
                                                    </div>
                                                    {{-- 엔드포인트 --}}
                                                    <div style="font-size: 11px; color: #6b7280; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $step['endpoint'] ?? '' }}">
                                                        {{ $step['endpoint'] ?? '-' }}
                                                    </div>
                                                    {{-- 실행 결과 또는 의존성 --}}
                                                    @if($result)
                                                        <div style="display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid {{ $cardBorder }};">
                                                            @if($isSkipped)
                                                                <span style="display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #ca8a04;">
                                                                    <svg style="width: 14px; height: 14px;" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z" clip-rule="evenodd" transform="rotate(45 10 10)"/></svg>
                                                                    스킵
                                                                </span>
                                                            @elseif($isSuccess)
                                                                <span style="display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #059669;">
                                                                    <svg style="width: 14px; height: 14px;" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                                                    성공
                                                                    <span style="color: #6b7280; margin-left: 4px;">{{ $result['duration'] ?? 0 }}ms</span>
                                                                </span>
                                                            @else
                                                                <span style="display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #dc2626;">
                                                                    <svg style="width: 14px; height: 14px;" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
                                                                    실패
                                                                    <span style="color: #6b7280; margin-left: 4px;">{{ $result['duration'] ?? 0 }}ms</span>
                                                                </span>
                                                            @endif
                                                        </div>
                                                    @elseif($hasDeps)
                                                        <div style="display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid {{ $cardBorder }};">
                                                            <svg style="width: 12px; height: 12px; color: #9ca3af;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"/>
                                                            </svg>
                                                            <span style="font-size: 10px; color: #6b7280;">{{ implode(', ', $step['dependsOn']) }}</span>
                                                        </div>
                                                    @endif
                                                </div>
                                                {{-- 툴팁 --}}
                                                <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-30 hidden group-hover:block" style="width: 320px; padding: 16px; background: #111827; color: white; font-size: 12px; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);">
                                                    <div style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #111827;"></div>
                                                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                                                        <span style="padding: 2px 8px; font-size: 10px; font-weight: bold; border-radius: 4px; background: {{ $badgeColor }}; color: white;">{{ $method }}</span>
                                                        <span style="font-weight: 600;">{{ $step['name'] ?? $step['id'] }}</span>
                                                    </div>
                                                    <div style="color: #9ca3af; font-family: monospace; font-size: 11px; margin-bottom: 8px; word-break: break-all;">{{ $step['endpoint'] ?? '' }}</div>
                                                    @if(!empty($step['description']))
                                                        <div style="color: #d1d5db; margin-bottom: 8px;">{{ $step['description'] }}</div>
                                                    @endif
                                                    @if($result)
                                                        <div style="border-top: 1px solid #374151; padding-top: 8px; margin-top: 8px;">
                                                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 4px;">
                                                                @if($isSkipped)
                                                                    <span style="font-weight: 600; color: #facc15;">⏭ 스킵됨</span>
                                                                @else
                                                                    <span style="font-weight: 600; color: {{ $isSuccess ? '#4ade80' : '#f87171' }};">
                                                                        {{ $isSuccess ? '✓ 성공' : '✗ 실패' }}
                                                                    </span>
                                                                    <span style="color: #9ca3af;">{{ $result['duration'] ?? 0 }}ms</span>
                                                                    @if(!empty($result['response']['status']))
                                                                        <span style="padding: 2px 6px; background: #374151; border-radius: 4px; color: #d1d5db;">HTTP {{ $result['response']['status'] }}</span>
                                                                    @endif
                                                                @endif
                                                            </div>
                                                            @if($isSkipped && !empty($result['skipReason']))
                                                                <div style="color: #fde047; font-size: 11px; margin-top: 4px;">{{ $result['skipReason'] }}</div>
                                                            @elseif(!$isSuccess && !$isSkipped && !empty($result['error']))
                                                                <div style="color: #fca5a5; font-size: 11px; margin-top: 4px;">{{ $result['error'] }}</div>
                                                            @endif
                                                        </div>
                                                    @else
                                                        @if(!empty($step['expect']))
                                                            <div style="color: #9ca3af; margin-top: 4px;">
                                                                <span style="color: #6b7280;">expect:</span> status {{ json_encode($step['expect']['status'] ?? []) }}
                                                            </div>
                                                        @endif
                                                        @if(!empty($step['extract']))
                                                            <div style="color: #34d399; margin-top: 4px;">
                                                                <span style="color: #6b7280;">extract:</span> {{ implode(', ', array_keys($step['extract'])) }}
                                                            </div>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                @if(empty($steps))
                                    <div class="text-sm text-gray-400 italic">스텝이 없습니다.</div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- 페이지네이션 -->
            @if($flows->hasPages())
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $flows->links() }}
                </div>
            @endif
        @endif
    </div>

    {{-- 모달 포함 --}}
    @include('dev-tools.flow-tester.partials.guide-modal')
    @include('dev-tools.flow-tester.partials.example-flows')

    <!-- 공유 인증 모달 -->
    @include('dev-tools.partials.auth-modal')
@endsection

@push('scripts')
{{-- 공유 인증 스크립트 --}}
@include('dev-tools.partials.auth-scripts')

<script>
    // 플로우 스텝 상세 토글
    function toggleFlowDetail(id, event) {
        // 버튼/링크 클릭 시 무시 (액션 영역)
        if (event.target.closest('button, a, form')) {
            return;
        }

        const detailRow = document.getElementById(`flow-detail-${id}`);
        const chevron = document.getElementById(`chevron-${id}`);

        if (!detailRow) return;

        const isHidden = detailRow.classList.contains('hidden');

        if (isHidden) {
            detailRow.classList.remove('hidden');
            chevron?.classList.add('rotate-90');
        } else {
            detailRow.classList.add('hidden');
            chevron?.classList.remove('rotate-90');
        }
    }

    function runFlow(id) {
        showConfirm('이 플로우를 실행하시겠습니까?', () => {
            executeRunFlow(id);
        }, { title: '플로우 실행', icon: 'question' });
    }

    function executeRunFlow(id) {
        // 실행 버튼을 로딩 상태로 변경
        const btn = document.querySelector(`button[onclick="runFlow(${id})"]`);
        const originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>`;

        fetch(`/dev-tools/flow-tester/${id}/run`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            // 버튼 복원
            btn.disabled = false;
            btn.innerHTML = originalHtml;

            // 결과 모달 표시
            showResultModal(data);
        })
        .catch(error => {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
            showToast('오류 발생: ' + error.message, 'error');
        });
    }

    function showResultModal(data) {
        const isSuccess = data.status === 'SUCCESS';
        const isFailed = data.status === 'FAILED';
        const isPartial = data.status === 'PARTIAL';

        const statusColor = isSuccess ? 'green' : (isFailed ? 'red' : 'yellow');
        const statusIcon = isSuccess
            ? `<svg class="w-12 h-12 text-green-500" 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>`
            : (isFailed
                ? `<svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>`
                : `<svg class="w-12 h-12 text-yellow-500" 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>`);

        const result = data.result || {};
        const duration = result.duration ? `${(result.duration / 1000).toFixed(2)}초` : '-';

        // 실행 로그 요약
        let logSummary = '';
        if (result.executionLog && result.executionLog.length > 0) {
            logSummary = result.executionLog.map((step, idx) => {
                const stepIcon = step.success
                    ? '<span class="text-green-500">✓</span>'
                    : '<span class="text-red-500">✗</span>';
                return `<div class="flex items-center gap-2 py-1 text-sm ${!step.success ? 'text-red-600' : ''}">
                    ${stepIcon}
                    <span class="font-medium">${step.stepName || step.stepId}</span>
                    <span class="text-gray-400">${step.duration}ms</span>
                    ${step.error ? `<span class="text-red-500 text-xs ml-2">${step.error}</span>` : ''}
                </div>`;
            }).join('');
        }

        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 z-50 overflow-y-auto';
        modal.innerHTML = `
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75" onclick="this.parentElement.remove()"></div>
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
                    <div class="text-center mb-4">
                        ${statusIcon}
                        <h3 class="mt-4 text-lg font-semibold text-gray-900">${data.message}</h3>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div>
                                <span class="text-gray-500">상태:</span>
                                <span class="ml-2 font-medium text-${statusColor}-600">${data.status}</span>
                            </div>
                            <div>
                                <span class="text-gray-500">소요 시간:</span>
                                <span class="ml-2 font-medium">${duration}</span>
                            </div>
                            <div>
                                <span class="text-gray-500">완료 스텝:</span>
                                <span class="ml-2 font-medium">${result.completedSteps || 0}/${result.totalSteps || 0}</span>
                            </div>
                            <div>
                                <span class="text-gray-500">실행 ID:</span>
                                <span class="ml-2 font-medium">#${data.run_id}</span>
                            </div>
                        </div>
                    </div>

                    ${logSummary ? `
                    <div class="mb-4">
                        <h4 class="text-sm font-medium text-gray-700 mb-2">실행 로그</h4>
                        <div class="bg-gray-50 rounded-lg p-3 max-h-48 overflow-y-auto">
                            ${logSummary}
                        </div>
                    </div>
                    ` : ''}

                    ${getApiLogSummary(result.apiLogs, result.executionLog)}

                    <div class="flex gap-3">
                        <button onclick="this.closest('.fixed').remove(); location.reload();"
                                class="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
                            닫기
                        </button>
                        <a href="/dev-tools/flow-tester/runs/${data.run_id}"
                           class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-center rounded-lg transition">
                            상세 보기
                        </a>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    // API 로그 요약 생성
    // executionLog: 스텝 실행 결과 (성공 여부 판단 기준)
    function getApiLogSummary(apiLogs, executionLog = []) {
        if (!apiLogs || apiLogs.length === 0) {
            return '';
        }

        // 실행 로그에서 실패한 스텝만 추출 (스텝이 실패한 경우만 진짜 오류)
        const failedSteps = (executionLog || []).filter(step => !step.success && !step.skipped);
        const actualErrorCount = failedSteps.length;
        const hasErrors = actualErrorCount > 0;

        // Request/Response 분리
        const requests = apiLogs.filter(l => l.type === 'request');
        const responses = apiLogs.filter(l => l.type === 'response');

        // 최대 3개만 표시
        const displayLogs = apiLogs.slice(0, 6);
        const logItems = displayLogs.map(log => {
            const isRequest = log.type === 'request';
            // HTTP 4xx/5xx는 시각적으로 구분하되, 스텝이 성공이면 경고(주황) 표시
            const isHttpError = !isRequest && (log.status || 0) >= 400;

            if (isRequest) {
                return `<div class="flex items-center gap-2 py-1 text-sm">
                    <span class="px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-700 rounded">REQ</span>
                    <code class="text-gray-700 text-xs">${log.method || ''} ${log.uri || ''}</code>
                </div>`;
            } else {
                // 스텝 성공 여부와 관계없이 HTTP 상태만 시각적으로 표시
                const statusColor = isHttpError ? 'bg-amber-500' : 'bg-green-600';
                const badgeColor = isHttpError ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700';
                return `<div class="flex items-center gap-2 py-1 text-sm">
                    <span class="px-1.5 py-0.5 text-xs font-medium ${badgeColor} rounded">RES</span>
                    <span class="px-1.5 py-0.5 text-xs font-medium ${statusColor} text-white rounded">${log.status || '-'}</span>
                    <code class="text-gray-500 text-xs truncate">${log.uri || ''}</code>
                </div>`;
            }
        }).join('');

        const moreCount = apiLogs.length > 6 ? apiLogs.length - 6 : 0;

        return `
            <div class="mb-4">
                <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    API 로그
                    <span class="text-xs font-normal text-gray-400">(${responses.length}개 응답)</span>
                    ${hasErrors ? `<span class="px-1.5 py-0.5 text-xs font-medium bg-red-100 text-red-700 rounded">${actualErrorCount}개 오류</span>` : ''}
                </h4>
                <div class="${hasErrors ? 'bg-red-50 border border-red-200' : 'bg-gray-50'} rounded-lg p-3 max-h-32 overflow-y-auto">
                    ${logItems}
                    ${moreCount > 0 ? `<div class="text-xs text-gray-400 mt-1">... ${moreCount}개 더 (상세 보기에서 확인)</div>` : ''}
                </div>
            </div>
        `;
    }

    function confirmDelete(id, name) {
        showDeleteConfirm(`"${name}" 플로우`, () => {
            fetch(`/dev-tools/flow-tester/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    showToast(data.message || '삭제 실패', 'error');
                }
            })
            .catch(error => {
                showToast('오류 발생: ' + error.message, 'error');
            });
        });
    }

</script>
@endpush