{{-- 시나리오 단계별 체크리스트 --}}
@php
    use App\Models\Sales\SalesScenarioChecklist;

    // $steps가 없거나 비어있으면 config에서 가져오기 (안전장치)
    if (empty($steps)) {
        $steps = config($scenarioType === 'sales' ? 'sales_scenario.sales_steps' : 'sales_scenario.manager_steps', []);
    }
    $step = $step ?? collect($steps)->firstWhere('id', $currentStep ?? 1);

    // prospect 모드 확인
    $isProspectMode = isset($isProspect) && $isProspect;
    $entity = $isProspectMode ? $prospect : $tenant;
    $entityId = $entity->id;

    // 읽기 전용 모드 확인
    $isReadonly = isset($readonly) && $readonly;

    // DB에서 체크된 항목 조회
    $checklist = $isProspectMode
        ? SalesScenarioChecklist::getChecklistByProspect($entityId, $scenarioType)
        : SalesScenarioChecklist::getChecklist($entityId, $scenarioType);
@endphp

<div class="space-y-6">
    {{-- 단계 헤더 --}}
    <div class="flex items-start gap-4">
        <div class="{{ $step['bg_class'] }} {{ $step['text_class'] }} p-3 rounded-xl">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {!! $icons[$step['icon']] ?? '' !!}
            </svg>
        </div>
        <div class="flex-1">
            <div class="flex items-center gap-2">
                <span class="text-sm font-medium text-gray-500">STEP {{ $step['id'] }}</span>
                <span class="text-sm text-gray-400">{{ $step['subtitle'] }}</span>
            </div>
            <h2 class="text-2xl font-bold text-gray-900">{{ $step['title'] }}</h2>
            <p class="mt-1 text-gray-600">{{ $step['description'] }}</p>
        </div>
    </div>

    {{-- 매니저용 팁 (있는 경우) --}}
    @if(isset($step['tips']))
        <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-amber-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
                <div>
                    <p class="text-sm font-medium text-amber-800">매니저 TIP</p>
                    <p class="text-sm text-amber-700">{{ $step['tips'] }}</p>
                </div>
            </div>
        </div>
    @endif

    {{-- 체크포인트 목록 --}}
    <div class="space-y-4">
        @foreach($step['checkpoints'] as $checkpoint)
            @php
                $checkKey = "{$step['id']}_{$checkpoint['id']}";
                $isChecked = isset($checklist[$checkKey]);
            @endphp
            <div x-data="{
                    expanded: false,
                    checked: {{ $isChecked ? 'true' : 'false' }},
                    isProspect: {{ $isProspectMode ? 'true' : 'false' }},
                    entityId: {{ $entityId }},
                    readonly: {{ $isReadonly ? 'true' : 'false' }},
                    async toggle() {
                        if (this.readonly) return;
                        this.checked = !this.checked;
                        try {
                            const url = this.isProspect
                                ? '/sales/scenarios/prospect/checklist/toggle'
                                : '/sales/scenarios/checklist/toggle';
                            const bodyData = this.isProspect
                                ? {
                                    prospect_id: this.entityId,
                                    scenario_type: '{{ $scenarioType }}',
                                    step_id: {{ $step['id'] }},
                                    checkpoint_id: '{{ $checkpoint['id'] }}',
                                    checked: this.checked,
                                }
                                : {
                                    tenant_id: this.entityId,
                                    scenario_type: '{{ $scenarioType }}',
                                    step_id: {{ $step['id'] }},
                                    checkpoint_id: '{{ $checkpoint['id'] }}',
                                    checked: this.checked,
                                };

                            const response = await fetch(url, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                                    'Accept': 'application/json',
                                },
                                body: JSON.stringify(bodyData),
                            });
                            const result = await response.json();
                            if (result.success) {
                                window.dispatchEvent(new CustomEvent('progress-updated', { detail: result.progress }));
                            }
                        } catch (error) {
                            console.error('체크리스트 토글 실패:', error);
                            this.checked = !this.checked;
                        }
                    }
                 }"
                 class="bg-white border rounded-xl overflow-hidden transition-all duration-200"
                 :class="checked ? 'border-green-300 bg-green-50/50' : 'border-gray-200 hover:border-gray-300'">

                {{-- 체크포인트 헤더 --}}
                <div class="flex items-center gap-4 p-4 cursor-pointer" @click="expanded = !expanded">
                    {{-- 체크박스 --}}
                    <button type="button"
                        @click.stop="toggle()"
                        class="flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all"
                        :class="[
                            checked ? 'bg-green-500 border-green-500' : 'border-gray-300',
                            readonly ? 'cursor-not-allowed opacity-60' : 'hover:border-green-400'
                        ]"
                        :disabled="readonly">
                        <svg x-show="checked" class="w-4 h-4 text-white" 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>
                    </button>

                    {{-- 제목 및 설명 --}}
                    <div class="flex-1 min-w-0">
                        <h4 class="font-semibold text-gray-900" :class="checked && 'line-through text-gray-500'">
                            {{ $checkpoint['title'] }}
                        </h4>
                        <p class="text-sm text-gray-600 truncate">{{ $checkpoint['detail'] }}</p>
                    </div>

                    {{-- 확장 아이콘 --}}
                    <svg class="w-5 h-5 text-gray-400 transition-transform duration-200"
                         :class="expanded && 'rotate-180'"
                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>

                {{-- 확장 콘텐츠 --}}
                <div x-show="expanded"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 -translate-y-2"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 -translate-y-2"
                     class="border-t border-gray-100">
                    <div class="p-4 space-y-4">
                        {{-- 상세 설명 --}}
                        <div>
                            <h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">상세 설명</h5>
                            <p class="text-sm text-gray-700">{{ $checkpoint['detail'] }}</p>
                        </div>

                        {{-- PRO TIP --}}
                        <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-4">
                            <div class="flex items-start gap-3">
                                <div class="p-1.5 bg-indigo-100 rounded-lg">
                                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-xs font-semibold text-indigo-800 uppercase">PRO TIP</p>
                                    <p class="text-sm text-indigo-700 mt-1">{{ $checkpoint['pro_tip'] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- 계약 체결 단계 (Step 6)에서만 상품 선택 컴포넌트 표시 --}}
    @if($step['id'] === 6 && $scenarioType === 'sales')
        @include('sales.modals.partials.product-selection', [
            'entity' => $entity,
            'isProspect' => $isProspectMode,
        ])
    @endif

    {{-- 단계 이동 버튼 --}}
    @php
        $currentStepId = (int) $step['id'];
        $totalSteps = count($steps);
        $isLastStep = ($currentStepId >= $totalSteps);
        $nextStepId = $currentStepId + 1;
        $prevStepId = $currentStepId - 1;
        $stepColor = $step['color'] ?? 'blue';

        // 라우트 결정
        $routeName = $isProspectMode
            ? 'sales.scenarios.prospect.' . $scenarioType
            : 'sales.scenarios.' . $scenarioType;

        // readonly 파라미터
        $readonlyParam = $isReadonly ? '&readonly=1' : '';
    @endphp
    <div class="flex items-center justify-between pt-4 border-t border-gray-200">
        {{-- 이전 단계 버튼 --}}
        @if($currentStepId > 1)
            <button type="button"
                hx-get="{{ route($routeName, $entityId) }}?step={{ $prevStepId }}{{ $readonlyParam }}"
                hx-target="#scenario-step-content"
                hx-swap="innerHTML"
                x-on:click="window.dispatchEvent(new CustomEvent('step-changed', { detail: {{ $prevStepId }} }))"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                <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 19l-7-7 7-7" />
                </svg>
                이전 단계
            </button>
        @else
            <div></div>
        @endif

        {{-- 다음 단계 / 완료 버튼 --}}
        @if($isLastStep)
            <button type="button"
                x-on:click="window.dispatchEvent(new CustomEvent('scenario-completed', { detail: { {{ $isProspectMode ? 'prospectId' : 'tenantId' }}: {{ $entityId }}, scenarioType: '{{ $scenarioType }}' } }))"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
                <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="M5 13l4 4L19 7" />
                </svg>
                {{ $isReadonly ? '닫기' : '완료' }}
            </button>
        @else
            <button type="button"
                hx-get="{{ route($routeName, $entityId) }}?step={{ $nextStepId }}{{ $readonlyParam }}"
                hx-target="#scenario-step-content"
                hx-swap="innerHTML"
                x-on:click="window.dispatchEvent(new CustomEvent('step-changed', { detail: {{ $nextStepId }} }))"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors">
                다음 단계
                <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>
            </button>
        @endif
    </div>
</div>