@extends('layouts.admin', ['title' => 'Embed Code Generator — ESMT Berlin', 'currentPage' => 'embed-generator', 'breadcrumbs' => [
    ['title' => 'Embed Tools', 'url' => null]
]])

@section('content')

    <div class="max-w-6xl mx-auto px-6 py-8">
        <!-- Instructions -->
        <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8 animate-slide-up">
            <div class="flex items-start">
                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-blue-800 mb-2">How to Use This Tool</h3>
                    <ol class="text-blue-700 space-y-1 text-sm">
                        <li>1. Select an activity type and specific activity from the dropdowns below</li>
                        <li>2. Choose your preferred embed size (Small, Medium, or Large)</li>
                        <li>3. Copy the generated embed code</li>
                        <li>4. In Canvas, go to your course page and click "Edit"</li>
                        <li>5. Switch to HTML editor and paste the embed code</li>
                        <li>6. Save your page - the activity will appear embedded!</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Generator Form -->
        <div class="bg-white rounded-2xl shadow-lg p-8 mb-8 animate-slide-up">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Generate Embed Code</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Program (optional)</label>
                    <select id="embedProgram" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">All programs…</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Course</label>
                    <select id="embedCourse" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">Select course…</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Activity Type</label>
                    <select id="activityType" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">Select activity type...</option>
                        <option value="survey">Survey</option>
                        <option value="poll">Poll</option>
                        <option value="readings">Readings</option>
                        <option value="board">Collaborative Board</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Specific Activity</label>
                    <select id="activityId" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" disabled>
                        <option value="">Select an activity...</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Embed Size</label>
                    <select id="embedSize" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="400">Small (400px height)</option>
                        <option value="600" selected>Medium (600px height)</option>
                        <option value="800">Large (800px height)</option>
                    </select>
                </div>
            </div>
            
            <button onclick="generateEmbedCode()" class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                Generate Embed Code
            </button>
        </div>

        <!-- Generated Code -->
        <div id="generatedCode" class="hidden bg-white rounded-2xl shadow-lg p-8 animate-slide-up">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-gray-800">Generated Embed Code</h2>
                <button onclick="copyEmbedCode()" class="copy-btn bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                    <svg class="w-4 h-4 mr-2 inline" 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"></path>
                    </svg>
                    Copy Code
                </button>
            </div>
            
            <div class="code-block mb-4" id="embedCode">
                <!-- Generated code will appear here -->
            </div>
            
            <div class="flex items-center justify-between">
                <a id="previewLink" href="#" target="_blank" class="text-blue-600 hover:text-blue-800 font-medium">
                    <svg class="w-4 h-4 mr-1 inline" 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>
                    Preview Activity
                </a>
                <span class="text-sm text-gray-500">Paste this code into your Canvas page's HTML editor</span>
            </div>
        </div>

        <!-- Tips -->
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6 animate-slide-up">
            <div class="flex items-start">
                <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                    <svg class="w-5 h-5 text-white" 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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-yellow-800 mb-2">Pro Tips for Canvas Integration</h3>
                    <ul class="text-yellow-700 space-y-1 text-sm">
                        <li>• <strong>Mobile-friendly:</strong> All embedded activities automatically adapt to mobile devices</li>
                        <li>• <strong>No authentication needed:</strong> Canvas/LTI handles user identification automatically</li>
                        <li>• <strong>Responsive design:</strong> Activities scale beautifully on all screen sizes</li>
                        <li>• <strong>Real-time updates:</strong> Changes to activities are reflected immediately in Canvas</li>
                        <li>• <strong>Accessibility:</strong> All activities meet WCAG accessibility standards</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Mock data - in a real implementation, this would come from API calls
        const activities = {
            survey: [
                { id: 59, name: "End of Session Survey" },
                { id: 60, name: "Group Work Survey" }
            ],
            poll: [
                { id: 1, name: "Course Feedback Poll" },
                { id: 2, name: "Topic Discussion Poll" }
            ],
            readings: [
                { id: 1, name: "Course Readings" },
                { id: 2, name: "Additional Resources" }
            ],
            board: [
                { id: 1, name: "Discussion Board" },
                { id: 2, name: "Collaborative Workspace" }
            ]
        };

        document.getElementById('activityType').addEventListener('change', function() {
            const type = this.value;
            const activitySelect = document.getElementById('activityId');
            
            // Clear existing options
            activitySelect.innerHTML = '<option value="">Select an activity...</option>';
            
            if (type && activities[type]) {
                activities[type].forEach(activity => {
                    const option = document.createElement('option');
                    option.value = activity.id;
                    option.textContent = activity.name;
                    activitySelect.appendChild(option);
                });
                activitySelect.disabled = false;
            } else {
                activitySelect.disabled = true;
            }
        });

        function generateEmbedCode() {
            const courseId = document.getElementById('embedCourse').value;
            const type = document.getElementById('activityType').value;
            const id = document.getElementById('activityId').value;
            const height = document.getElementById('embedSize').value;
            
            if (!courseId || !type || !id) {
                alert('Please select course, activity type and specific activity.');
                return;
            }
            
            const baseUrl = window.location.origin;
            // Create a course-scoped instance for proper analytics attribution
            fetch('/admin/embed/create-instance', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ course_id: courseId, type }) })
                .then(r=>r.json())
                .then(payload => {
                    const instanceId = payload.id || id; // fallback to selected id
                    const embedUrl = `${baseUrl}/embed/${type}/${instanceId}?course=${courseId}`;
                    const embedCode = `<iframe src="${embedUrl}" width="100%" height="${height}" frameborder="0" allowfullscreen></iframe>`;
            
                    document.getElementById('embedCode').textContent = embedCode;
                    document.getElementById('previewLink').href = `${baseUrl}/preview/embed/${type}/${instanceId}`;
                    document.getElementById('generatedCode').classList.remove('hidden');
                    document.getElementById('generatedCode').scrollIntoView({ behavior: 'smooth' });
                });
        }

        function copyEmbedCode() {
            const code = document.getElementById('embedCode').textContent;
            navigator.clipboard.writeText(code).then(() => {
                const btn = event.target.closest('button');
                const originalText = btn.innerHTML;
                btn.innerHTML = '<svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Copied!';
                btn.classList.remove('bg-green-600', 'hover:bg-green-700');
                btn.classList.add('bg-green-500');
                
                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.classList.remove('bg-green-500');
                    btn.classList.add('bg-green-600', 'hover:bg-green-700');
                }, 2000);
            });
        }
    </script>
    @push('head')
    <script>
    (async function(){
        try {
            const [progRes, courseRes] = await Promise.all([
                fetch('/admin/api/programs', { credentials:'same-origin' }),
                fetch('/admin/api/courses', { credentials:'same-origin' })
            ]);
            const programs = await progRes.json();
            const courses = await courseRes.json();
            const progSel = document.getElementById('embedProgram');
            if (Array.isArray(programs)) {
                progSel.innerHTML = '<option value="">All programs…</option>' + programs.map(p=>`<option value="${p.id}">${p.name}</option>`).join('');
                progSel.addEventListener('change', function(){
                    const pid = this.value;
                    const filtered = pid ? courses.filter(c=> (c.cohort?.program?.id || c.program_id) == pid) : courses;
                    renderCourses(filtered);
                });
            }
            const sel = document.getElementById('embedCourse');
            function renderCourses(list){
                sel.innerHTML = '<option value="">Select course…</option>' + (list||[]).map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
            }
            renderCourses(courses);
        } catch(e) {}
    })();
    </script>
    @endpush
@endsection