{{-- 상담 기록 컴포넌트 --}}
@php
    $isProspectMode = isset($isProspect) && $isProspect;
    $entityId = $isProspectMode ? $prospect->id : $tenant->id;
@endphp
<div x-data="consultationLog({{ $entityId }}, {{ $isProspectMode ? 'true' : 'false' }}, '{{ $scenarioType }}', {{ $stepId ?? 'null' }})" class="space-y-4">
    {{-- 상담 기록 입력 --}}
    <div class="bg-white border border-gray-200 rounded-lg p-4">
        <h4 class="text-sm font-semibold text-gray-700 mb-3">상담 기록 추가</h4>
        <div class="space-y-3">
            <textarea
                x-model="newContent"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
                placeholder="상담 내용을 입력하세요..."
            ></textarea>
            <div class="flex justify-end">
                <button
                    @click="saveConsultation()"
                    :disabled="!newContent.trim() || saving"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <svg x-show="saving" class="w-4 h-4 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>
                    <svg x-show="!saving" 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>
                    <span x-text="saving ? '저장 중...' : '저장'"></span>
                </button>
            </div>
        </div>
    </div>

    {{-- 상담 기록 목록 --}}
    <div class="space-y-3">
        <h4 class="text-sm font-semibold text-gray-700">상담 기록 ({{ $consultations->count() }}건)</h4>

        @if($consultations->isEmpty())
            <div class="text-center py-8 text-gray-500">
                <svg class="w-12 h-12 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
                <p class="text-sm">아직 상담 기록이 없습니다.</p>
            </div>
        @else
            <div class="space-y-3 max-h-80 overflow-y-auto">
                @foreach($consultations as $consultation)
                    <div class="group relative bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors"
                         data-consultation-id="{{ $consultation->id }}">
                        {{-- 삭제 버튼 --}}
                        <button
                            @click="deleteConsultation({{ $consultation->id }})"
                            class="absolute top-2 right-2 p-1 text-gray-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity">
                            <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="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 class="flex items-start gap-3">
                            {{-- 타입 아이콘 --}}
                            <div class="flex-shrink-0 p-2 rounded-lg
                                @if($consultation->consultation_type === 'text') bg-blue-100 text-blue-600
                                @elseif($consultation->consultation_type === 'audio') bg-purple-100 text-purple-600
                                @else bg-green-100 text-green-600 @endif">
                                @if($consultation->consultation_type === 'text')
                                    <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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                                    </svg>
                                @elseif($consultation->consultation_type === 'audio')
                                    <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="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                                    </svg>
                                @else
                                    <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.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                                    </svg>
                                @endif
                            </div>

                            <div class="flex-1 min-w-0">
                                @if($consultation->consultation_type === 'text')
                                    <div class="max-h-32 overflow-y-auto">
                                        <p class="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">{{ $consultation->content }}</p>
                                    </div>
                                @elseif($consultation->consultation_type === 'audio')
                                    <div class="space-y-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm font-medium text-gray-900">음성 녹음</span>
                                            @if($consultation->duration)
                                                <span class="text-xs text-gray-500">
                                                    {{ $consultation->formatted_duration }}
                                                </span>
                                            @endif
                                            @if($consultation->gcs_uri)
                                                <span class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-green-100 text-green-700 text-xs rounded">
                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                                                    </svg>
                                                    GCS
                                                </span>
                                            @endif
                                        </div>

                                        {{-- 오디오 플레이어 --}}
                                        <div class="flex items-center gap-2">
                                            <audio
                                                id="audio-player-{{ $consultation->id }}"
                                                class="hidden"
                                                preload="none"
                                            ></audio>
                                            <button
                                                type="button"
                                                onclick="toggleAudioPlay({{ $consultation->id }}, '{{ route('sales.consultations.download-audio', $consultation->id) }}')"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-purple-700 bg-purple-100 rounded-lg hover:bg-purple-200 transition-colors"
                                                id="play-btn-{{ $consultation->id }}"
                                            >
                                                <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="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>
                                                <span>재생</span>
                                            </button>
                                            <a
                                                href="{{ route('sales.consultations.download-audio', $consultation->id) }}"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-100 rounded-lg hover:bg-blue-200 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                                </svg>
                                                <span>다운로드</span>
                                            </a>
                                        </div>

                                        @if($consultation->transcript)
                                            <div class="max-h-32 overflow-y-auto bg-gray-50 rounded p-2">
                                                <p class="text-sm text-gray-600 italic leading-relaxed">"{{ $consultation->transcript }}"</p>
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    {{-- 첨부파일 --}}
                                    <div class="space-y-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm font-medium text-gray-900">{{ $consultation->file_name }}</span>
                                            <span class="text-xs text-gray-500">
                                                {{ $consultation->formatted_file_size }}
                                            </span>
                                        </div>
                                        <a
                                            href="{{ route('sales.consultations.download-file', $consultation->id) }}"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-100 rounded-lg hover:bg-blue-200 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                            </svg>
                                            <span>다운로드</span>
                                        </a>
                                    </div>
                                @endif

                                {{-- 메타 정보 --}}
                                <div class="mt-2 flex items-center gap-2 text-xs text-gray-500">
                                    <span>{{ $consultation->creator?->name ?? '알 수 없음' }}</span>
                                    <span>|</span>
                                    <span>{{ $consultation->created_at->format('Y-m-d H:i') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

<script>
// 오디오 재생/정지 토글
function toggleAudioPlay(consultationId, audioUrl) {
    const audio = document.getElementById('audio-player-' + consultationId);
    const btn = document.getElementById('play-btn-' + consultationId);

    if (!audio || !btn) return;

    // 오디오 소스가 없으면 설정
    if (!audio.src) {
        audio.src = audioUrl;
    }

    if (audio.paused) {
        // 다른 재생 중인 오디오 중지
        document.querySelectorAll('audio').forEach(a => {
            if (a !== audio && !a.paused) {
                a.pause();
                const otherId = a.id.replace('audio-player-', '');
                const otherBtn = document.getElementById('play-btn-' + otherId);
                if (otherBtn) {
                    otherBtn.innerHTML = `
                        <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="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>
                        <span>재생</span>
                    `;
                }
            }
        });

        audio.play();
        btn.innerHTML = `
            <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 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>정지</span>
        `;

        // 재생 종료 시 버튼 복구
        audio.onended = function() {
            btn.innerHTML = `
                <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="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>
                <span>재생</span>
            `;
        };
    } else {
        audio.pause();
        btn.innerHTML = `
            <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="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>
            <span>재생</span>
        `;
    }
}

function consultationLog(entityId, isProspect, scenarioType, stepId) {
    return {
        entityId: entityId,
        isProspect: isProspect,
        scenarioType: scenarioType,
        stepId: stepId,
        newContent: '',
        saving: false,

        async saveConsultation() {
            if (!this.newContent.trim() || this.saving) return;

            this.saving = true;
            try {
                const storeUrl = this.isProspect
                    ? '/sales/consultations/prospect'
                    : '/sales/consultations';

                const bodyData = this.isProspect
                    ? {
                        prospect_id: this.entityId,
                        scenario_type: this.scenarioType,
                        step_id: this.stepId,
                        content: this.newContent,
                    }
                    : {
                        tenant_id: this.entityId,
                        scenario_type: this.scenarioType,
                        step_id: this.stepId,
                        content: this.newContent,
                    };

                const response = await fetch(storeUrl, {
                    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) {
                    this.newContent = '';
                    // 목록 새로고침
                    const refreshUrl = this.isProspect
                        ? `/sales/consultations/prospect/${this.entityId}?scenario_type=${this.scenarioType}`
                        : `/sales/consultations/${this.entityId}?scenario_type=${this.scenarioType}`;
                    htmx.ajax('GET', refreshUrl, { target: '#consultation-log-container', swap: 'innerHTML' });
                } else {
                    alert('저장에 실패했습니다.');
                }
            } catch (error) {
                console.error('상담 기록 저장 실패:', error);
                alert('저장 중 오류가 발생했습니다.');
            } finally {
                this.saving = false;
            }
        },

        async deleteConsultation(consultationId) {
            if (!confirm('이 상담 기록을 삭제하시겠습니까?')) return;

            try {
                const response = await fetch(`/sales/consultations/${consultationId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                });

                const result = await response.json();
                if (result.success) {
                    // DOM에서 제거
                    const element = document.querySelector(`[data-consultation-id="${consultationId}"]`);
                    if (element) {
                        element.remove();
                    }
                } else {
                    alert('삭제에 실패했습니다.');
                }
            } catch (error) {
                console.error('상담 기록 삭제 실패:', error);
                alert('삭제 중 오류가 발생했습니다.');
            }
        }
    };
}
</script>
