@extends('layouts.app')

@section('title', $session->title)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Main Stream Area --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Video Player --}}
            <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
                <div class="relative aspect-video bg-gray-900" id="stream-container">
                    @if($session->daily_room_url)
                        <div id="meeting-container" class="absolute inset-0"></div>
                    @else
                        @if($session->product && $session->product->primaryImage)
                            <img src="{{ asset('storage/' . $session->product->primaryImage->path) }}" alt="{{ $session->product->name }}" class="w-full h-full object-cover opacity-40">
                        @endif

                        @if($session->active)
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center">
                                <div class="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse shadow-lg shadow-red-500/30">
                                    <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4l12 6-12 6V4z"/></svg>
                                </div>
                                <p class="text-white text-lg font-medium">Watch Live</p>
                                <p class="text-white/60 text-sm mt-1" id="session-duration">Loading...</p>
                            </div>
                        </div>
                        @endif
                    @endif

                    {{-- LIVE Badge --}}
                    @if($session->active)
                    <div class="absolute top-4 left-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold flex items-center gap-2 shadow-lg">
                        <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span>
                        LIVE
                    </div>
                    @endif

                    {{-- Viewer Count --}}
                    <div class="absolute top-4 right-4 bg-black/70 backdrop-blur-sm text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-1.5">
                        <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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                        <span id="viewer-count">{{ number_format($session->viewers_count) }}</span>
                    </div>

                    {{-- Floating Reactions --}}
                    <div id="floating-reactions" class="absolute bottom-20 right-4 pointer-events-none"></div>
                </div>

                {{-- Session Info Bar --}}
                <div class="p-4 border-t">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
                            {{ substr($session->promoter->name, 0, 1) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <h1 class="text-lg font-bold text-gray-800">{{ $session->title }}</h1>
                            <p class="text-sm text-gray-500 mt-0.5">{{ $session->promoter->name }}</p>
                            @if($session->description)
                            <p class="text-sm text-gray-600 mt-2">{{ $session->description }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Featured Product --}}
            @if($session->product)
            <div class="bg-white rounded-xl shadow-sm border p-5">
                <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">Featured Product</h3>
                <div class="flex items-center gap-5">
                    <div class="w-24 h-24 rounded-xl overflow-hidden flex-shrink-0 bg-gray-100">
                        @if($session->product->primaryImage)
                            <img src="{{ asset('storage/' . $session->product->primaryImage->path) }}" alt="{{ $session->product->name }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-300">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            </div>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <a href="{{ route('products.show', $session->product->slug) }}" class="font-semibold text-gray-800 hover:text-purple-600 transition-colors">{{ $session->product->name }}</a>
                        @if($session->product->vendor)
                        <p class="text-sm text-gray-500 mt-0.5">by {{ $session->product->vendor->name }}</p>
                        @endif
                        <p class="text-xl font-bold text-purple-600 mt-2">${{ number_format($session->product->price, 2) }}</p>
                    </div>
                    <a href="{{ route('products.show', $session->product->slug) }}" class="px-6 py-2.5 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors flex-shrink-0">View Details</a>
                </div>
            </div>
            @endif

            {{-- Session Stats (for completed) --}}
            @if($session->completed)
            <div class="bg-white rounded-xl shadow-sm border p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">Session Summary</h3>
                <div class="grid grid-cols-3 gap-6">
                    <div class="text-center p-4 bg-gray-50 rounded-xl">
                        <p class="text-3xl font-bold text-purple-600">{{ number_format($session->viewers_count) }}</p>
                        <p class="text-sm text-gray-500 mt-1">Total Viewers</p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-xl">
                        <p class="text-3xl font-bold text-green-600">{{ $session->sales_count }}</p>
                        <p class="text-sm text-gray-500 mt-1">Sales Generated</p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-xl">
                        <p class="text-3xl font-bold text-blue-600">{{ $session->duration }}</p>
                        <p class="text-sm text-gray-500 mt-1">Minutes</p>
                    </div>
                </div>
            </div>
            @endif
        </div>

        {{-- Chat Sidebar --}}
        <div class="space-y-6">
            <div class="bg-white rounded-xl shadow-sm border overflow-hidden sticky top-6" style="height: calc(100vh - 3rem); max-height: 600px; display: flex; flex-direction: column;">
                {{-- Chat Header --}}
                <div class="px-4 py-3 border-b bg-gray-50 flex items-center justify-between">
                    <h3 class="font-semibold text-gray-800">Live Chat</h3>
                    @if($session->active)
                    <span class="flex items-center gap-1.5 text-xs text-green-600">
                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                        Online
                    </span>
                    @else
                    <span class="text-xs text-gray-400">Session ended</span>
                    @endif
                </div>

                {{-- Chat Messages --}}
                <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-3" style="min-height: 0;">
                    <div class="text-center text-sm text-gray-400 py-8">
                        <svg class="w-8 h-8 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="1.5" 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"></path></svg>
                        Welcome to the chat!
                    </div>
                </div>

                {{-- Chat Input --}}
                @if($session->active && auth()->check())
                <div class="border-t p-3">
                    {{-- Quick Reactions --}}
                    <div class="flex items-center gap-1 mb-2" id="quick-reactions">
                        <button data-emoji="🔥" class="w-8 h-8 text-lg hover:bg-gray-100 rounded transition-colors">🔥</button>
                        <button data-emoji="❤️" class="w-8 h-8 text-lg hover:bg-gray-100 rounded transition-colors">❤️</button>
                        <button data-emoji="👏" class="w-8 h-8 text-lg hover:bg-gray-100 rounded transition-colors">👏</button>
                        <button data-emoji="😍" class="w-8 h-8 text-lg hover:bg-gray-100 rounded transition-colors">😍</button>
                        <button data-emoji="🛒" class="w-8 h-8 text-lg hover:bg-gray-100 rounded transition-colors">🛒</button>
                    </div>
                    <form id="chat-form" class="flex items-center gap-2">
                        <input type="text" id="chat-input" placeholder="Type a message..." maxlength="500" autocomplete="off" class="flex-1 px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-colors">
                        <button type="submit" class="w-10 h-10 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors flex items-center justify-center">
                            <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 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                        </button>
                    </form>
                </div>
                @elseif(!$session->active)
                <div class="border-t p-4 text-center text-sm text-gray-400">
                    Chat has ended
                </div>
                @else
                <div class="border-t p-4 text-center text-sm text-gray-400">
                    <a href="{{ route('login') }}" class="text-purple-600 hover:underline">Sign in</a> to join the chat
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
@if($session->active)
@if($session->daily_room_url && $dailyToken)
<script src="https://unpkg.com/@daily-co/daily-js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const callFrame = window.DailyIframe.createFrame(document.getElementById('meeting-container'), {
        showLeaveButton: false,
        iframeStyle: {
            position: 'absolute',
            width: '100%',
            height: '100%',
            border: '0',
        },
        theme: {
            colors: {
                accent: '#7c3aed',
            },
        },
    });

    callFrame.join({
        url: '{{ $session->daily_room_url }}',
        token: '{{ $dailyToken }}',
    }).then(() => {
        console.log('Joined session successfully');
    }).catch((err) => {
        console.error('Failed to join session:', err);
    });
});
</script>
@endif
<script>
const sessionId = {{ $session->id }};
const chatMessages = document.getElementById('chat-messages');
const chatForm = document.getElementById('chat-form');
const chatInput = document.getElementById('chat-input');
const viewerCount = document.getElementById('viewer-count');

@if($session->started_at)
const startTime = new Date('{{ $session->started_at->toISOString() }}');
function updateDuration() {
    const now = new Date();
    const diff = Math.floor((now - startTime) / 1000);
    const hours = Math.floor(diff / 3600).toString().padStart(2, '0');
    const minutes = Math.floor((diff % 3600) / 60).toString().padStart(2, '0');
    const seconds = (diff % 60).toString().padStart(2, '0');
    const el = document.getElementById('session-duration');
    if (el) el.textContent = `Watching for ${hours}:${minutes}:${seconds}`;
}
setInterval(updateDuration, 1000);
updateDuration();
@endif

function addChatMessage(data) {
    const wrapper = document.createElement('div');
    wrapper.className = 'animate-fade-in';

    if (data.type === 'chat') {
        const colors = ['bg-blue-100 text-blue-700', 'bg-purple-100 text-purple-700', 'bg-green-100 text-green-700', 'bg-pink-100 text-pink-700', 'bg-yellow-100 text-yellow-700'];
        const color = colors[Math.floor(Math.random() * colors.length)];
        const initial = (data.user.name || '?')[0].toUpperCase();

        wrapper.innerHTML = `
            <div class="flex items-start gap-2">
                <div class="w-7 h-7 rounded-full ${color} flex items-center justify-center text-xs font-bold flex-shrink-0">${initial}</div>
                <div class="flex-1 min-w-0">
                    <span class="text-xs font-semibold text-gray-600">${escapeHtml(data.user.name)}</span>
                    <p class="text-sm text-gray-700 break-words">${escapeHtml(data.content)}</p>
                </div>
            </div>
        `;
    } else if (data.type === 'reaction') {
        wrapper.innerHTML = `
            <div class="text-center py-1">
                <span class="text-sm">${escapeHtml(data.user.name)} reacted ${escapeHtml(data.emoji)}</span>
            </div>
        `;
        showFloatingReaction(data.emoji);
    }

    chatMessages.appendChild(wrapper);
    chatMessages.scrollTop = chatMessages.scrollHeight;

    if (chatMessages.children.length > 100) {
        chatMessages.removeChild(chatMessages.children[1]);
    }
}

function showFloatingReaction(emoji) {
    const container = document.getElementById('floating-reactions');
    const el = document.createElement('div');
    el.className = 'text-2xl absolute bottom-0';
    el.textContent = emoji;
    el.style.right = Math.random() * 40 + 'px';
    container.appendChild(el);

    el.animate([
        { transform: 'translateY(0) scale(1)', opacity: 1 },
        { transform: 'translateY(-120px) scale(1.3)', opacity: 0 }
    ], { duration: 1500, easing: 'ease-out' });

    setTimeout(() => el.remove(), 1500);
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

if (chatForm && chatInput) {
    chatForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const message = chatInput.value.trim();
        if (!message) return;

        chatInput.value = '';
        chatInput.disabled = true;

        try {
            await fetch(`/customer/live-sessions/${sessionId}/chat`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ message }),
            });
        } catch (err) {
            console.error('Failed to send message:', err);
        }

        chatInput.disabled = false;
        chatInput.focus();
    });
}

document.getElementById('quick-reactions')?.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-emoji]');
    if (!btn) return;

    const emoji = btn.dataset.emoji;
    showFloatingReaction(emoji);

    try {
        await fetch(`/customer/live-sessions/${sessionId}/react`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ emoji }),
        });
    } catch (err) {
        console.error('Failed to send reaction:', err);
    }
});

Echo.join(`live-session.${sessionId}`)
    .here((users) => {
        console.log(`${users.length} users in session`);
    })
    .joining((user) => {
        console.log(`${user.name} joined`);
    })
    .leaving((user) => {
        console.log(`${user.name} left`);
    })
    .listen('LiveSessionUpdated', (e) => {
        if (e.action === 'ended') {
            window.location.reload();
        }
        if (e.viewers_count !== undefined && viewerCount) {
            viewerCount.textContent = e.viewers_count.toLocaleString();
        }
    })
    .listen('LiveSessionViewerJoined', (e) => {
        if (e.viewers_count !== undefined && viewerCount) {
            viewerCount.textContent = e.viewers_count.toLocaleString();
        }
    })
    .listen('LiveSessionChatMessage', (e) => {
        addChatMessage(e);
    });
</script>
@endif
@endpush
@endsection