@extends('layouts.promoter')

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

@section('content')
<div class="flex justify-between items-center mb-8">
    <div>
        <h2 class="text-2xl font-bold">{{ $session->title }}</h2>
        @if($session->status === 'active')
            <span class="inline-flex items-center gap-2 mt-1 px-3 py-1 bg-red-50 text-red-700 text-sm font-medium rounded-full border border-red-100">
                <span class="w-2 h-2 bg-red-600 rounded-full animate-pulse"></span>
                LIVE
            </span>
        @endif
    </div>
    <div class="flex gap-3">
        @if($session->status === 'scheduled')
            <form action="{{ route('promoter.sessions.start', $session) }}" method="POST">
                @csrf
                <button type="submit" class="px-5 py-2.5 bg-red-600 text-white rounded-xl hover:bg-red-700 text-sm font-medium transition-all shadow-sm">
                    Go Live
                </button>
            </form>
        @endif
        <a href="{{ route('promoter.sessions') }}" class="px-5 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-sm font-medium transition-all shadow-sm">
            Back
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Video & Chat --}}
    <div class="lg:col-span-2 space-y-6">
        {{-- Video Container --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            @if($session->daily_room_url)
                <div id="meeting-container" class="aspect-video bg-gray-900"></div>
            @else
                <div class="aspect-video bg-gray-900 flex items-center justify-center">
                    <div class="text-center text-gray-400">
                        <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                        <p class="text-lg font-medium">Video not configured</p>
                        <p class="text-sm mt-1">Add your Daily.co API key in Settings to enable live video</p>
                    </div>
                </div>
            @endif
        </div>

        {{-- Session Chat --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-base font-semibold text-gray-900">Session Chat</h3>
            </div>
            <div id="session-chat" class="h-64 overflow-y-auto p-4 space-y-3">
                <p class="text-gray-400 text-center text-sm py-8">Chat messages will appear here during the live session</p>
            </div>
            <div class="p-4 border-t border-gray-200">
                <form id="chat-form" class="flex gap-2">
                    <input type="text" id="chat-input" placeholder="Type a message..." class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none">
                    <button type="submit" class="px-6 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium transition-colors">Send</button>
                </form>
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="space-y-6">
        {{-- Product Card --}}
        @if($session->product)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-base font-semibold text-gray-900">Featured Product</h3>
                </div>
                <div class="p-4">
                    <div class="flex gap-4">
                        @if($session->product->primaryImage)
                            <img src="{{ asset('storage/' . $session->product->primaryImage->path) }}" alt="{{ $session->product->name }}" class="w-20 h-20 object-cover rounded-lg">
                        @else
                            <div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center">
                                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                            </div>
                        @endif
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm font-semibold text-gray-900 truncate">{{ $session->product->name }}</h4>
                            <p class="text-purple-600 font-bold mt-1">${{ number_format($session->product->price, 2) }}</p>
                            @if($session->product->compare_price)
                                <span class="text-gray-400 line-through text-xs">${{ number_format($session->product->compare_price, 2) }}</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Session Stats --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-base font-semibold text-gray-900">Session Stats</h3>
            </div>
            <div class="p-4 space-y-3">
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-sm text-gray-500">Status</span>
                    <span class="text-sm font-semibold capitalize">{{ $session->status }}</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-sm text-gray-500">Viewers</span>
                    <span class="text-sm font-semibold">{{ $session->viewers_count }}</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-sm text-gray-500">Sales</span>
                    <span class="text-sm font-semibold">{{ $session->sales_count }}</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-sm text-gray-500">Revenue</span>
                    <span class="text-sm font-semibold">${{ number_format($session->revenue ?? 0, 2) }}</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-sm text-gray-500">Commission</span>
                    <span class="text-sm font-semibold text-green-600">${{ number_format($session->commission ?? 0, 2) }}</span>
                </div>
                <div class="flex justify-between items-center py-2">
                    <span class="text-sm text-gray-500">Started</span>
                    <span class="text-sm font-semibold">{{ $session->started_at?->format('H:i') ?? 'Not started' }}</span>
                </div>
            </div>
        </div>

        @if($session->status === 'active')
            <form action="{{ route('promoter.sessions.end', $session) }}" method="POST">
                @csrf
                <button type="submit" class="w-full py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 text-sm font-semibold transition-colors shadow-sm">
                    End Live Session
                </button>
            </form>
        @endif

        {{-- Description --}}
        @if($session->description)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-base font-semibold text-gray-900">Description</h3>
                </div>
                <div class="p-4">
                    <p class="text-sm text-gray-600">{{ $session->description }}</p>
                </div>
            </div>
        @endif
    </div>
</div>

@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
@endsection