@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col items-center justify-center min-h-[60vh]">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-pink-600 mb-4">AI Shopping Assistant</h1>
            <p class="text-gray-600 max-w-lg mx-auto">
                Our AI assistant is here to help you find the perfect gift with videos and images!
            </p>
        </div>
        
        <div class="w-full max-w-2xl bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="bg-pink-600 text-white p-4 flex items-center">
                <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3">
                    <i class="fas fa-robot text-pink-600 text-xl"></i>
                </div>
                <div>
                    <h2 class="font-bold">Needly Assistant</h2>
                    <p class="text-xs opacity-75">Online | Ready to help</p>
                </div>
            </div>
            
            <div id="chat-messages" class="p-4 h-96 overflow-y-auto bg-gray-50">
                <div class="flex mb-4">
                    <div class="w-8 h-8 rounded-full bg-pink-600 flex items-center justify-center mr-2 flex-shrink-0">
                        <i class="fas fa-robot text-white text-sm"></i>
                    </div>
                    <div class="bg-pink-100 rounded-lg rounded-tl-none p-3 max-w-[80%]">
                        <p>Hello! Ask me for gift ideas and I'll show you products with videos and images!</p>
                        <div class="mt-4">
                            <p class="font-semibold">Try asking:</p>
                            <ul class="list-disc pl-5 text-sm">
                                <li>"Show me romantic gift ideas"</li>
                                <li>"What are good anniversary gifts?"</li>
                                <li>"Show me jewelry with videos"</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t p-4 bg-white">
                <form id="chat-form" class="flex">
                    <input type="text" id="user-message" 
                           class="flex-grow border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500" 
                           placeholder="Ask for gift ideas..." 
                           autocomplete="off"
                           autofocus>
                    <button type="submit" class="bg-pink-600 text-white px-4 py-2 rounded-r-lg hover:bg-pink-700 transition-colors">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Predefined media content
    const mediaLibrary = {
        jewelry: {
            images: [
                "https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80",
                "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            ],
            videos: [
                {
                    type: "youtube",
                    url: "https://www.youtube.com/embed/6WQrA3qGQfU",
                    title: "Beautiful Jewelry Collection"
                },
                {
                    type: "tiktok",
                    url: "https://www.tiktok.com/embed/v2/7106716771546623278",
                    title: "Trendy Jewelry Ideas"
                }
            ]
        },
        anniversary: {
            images: [
                "https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80",
                "https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            ],
            videos: [
                {
                    type: "youtube",
                    url: "https://www.youtube.com/embed/5khDGKGv088",
                    title: "10 Perfect Anniversary Gifts"
                },
                {
                    type: "instagram",
                    url: "https://www.instagram.com/p/CrJwMk3JQ7T/embed",
                    title: "Romantic Gift Ideas"
                }
            ]
        },
        valentine: {
            images: [
                "https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80",
                "https://images.unsplash.com/photo-1486427944299-d1955d23e34d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            ],
            videos: [
                {
                    type: "youtube",
                    url: "https://www.youtube.com/embed/8lSbWFQxw3Q",
                    title: "Valentine's Day Gift Guide"
                },
                {
                    type: "tiktok",
                    url: "https://www.tiktok.com/embed/v2/7106716771546623278",
                    title: "Cute Valentine Gifts"
                }
            ]
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        function loadSocialScripts() {
            // TikTok
            if (!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')) {
                const tiktokScript = document.createElement('script');
                tiktokScript.src = "https://www.tiktok.com/embed.js";
                document.body.appendChild(tiktokScript);
            }
            
            // Instagram
            if (!document.querySelector('script[src="https://www.instagram.com/embed.js"]')) {
                const instagramScript = document.createElement('script');
                instagramScript.src = "https://www.instagram.com/embed.js";
                document.body.appendChild(instagramScript);
            }
        }

        function processEmbeds() {
            if (window.instgrm) {
                window.instgrm.Embeds.process();
            }
            if (window.tiktok) {
                window.tiktok?.Embed?.load();
            }
        }

        const chatForm = document.getElementById('chat-form');
        const userMessageInput = document.getElementById('user-message');
        const chatMessages = document.getElementById('chat-messages');

        chatForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const message = userMessageInput.value.trim();
            if (!message) return;
            
            addMessage(message, 'user');
            userMessageInput.value = '';
            showTypingIndicator();
            
            // Simulate AI response with media
            setTimeout(() => {
                removeTypingIndicator();
                
                // Determine which media to show based on keywords
                let mediaType = 'jewelry';
                if (message.toLowerCase().includes('anniversary')) {
                    mediaType = 'anniversary';
                } else if (message.toLowerCase().includes('valentine')) {
                    mediaType = 'valentine';
                }
                
                const media = mediaLibrary[mediaType];
                
                let response = `<div class="media-response">
                    <h3 class="font-bold text-lg mb-2">Here are some ${mediaType} gift ideas:</h3>
                    <div class="grid grid-cols-2 gap-4 mb-4">`;
                
                // Add images
                media.images.forEach(img => {
                    response += `<img src="${img}" alt="${mediaType} gift" class="w-full h-48 object-cover rounded-lg">`;
                });
                
                response += `</div><div class="video-section">`;
                
                // Add videos
                media.videos.forEach(video => {
                    if (video.type === 'youtube') {
                        response += `<div class="mb-4">
                            <h4 class="font-semibold mb-1">${video.title}</h4>
                            <iframe width="100%" height="250" src="${video.url}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>`;
                    } else if (video.type === 'tiktok') {
                        response += `<div class="mb-4">
                            <h4 class="font-semibold mb-1">${video.title}</h4>
                            <blockquote class="tiktok-embed" cite="${video.url}" data-video-id="${video.url.split('/').pop()}">
                                <section></section>
                            </blockquote>
                        </div>`;
                    } else if (video.type === 'instagram') {
                        response += `<div class="mb-4">
                            <h4 class="font-semibold mb-1">${video.title}</h4>
                            <blockquote class="instagram-media" data-instgrm-permalink="${video.url}" data-instgrm-version="13">
                                <div class="flex justify-center items-center h-64 bg-gray-100">
                                    <p>Loading Instagram post...</p>
                                </div>
                            </blockquote>
                        </div>`;
                    }
                });
                
                response += `</div></div>`;
                
                addMessage(response, 'ai', true);
                loadSocialScripts();
                setTimeout(processEmbeds, 1000);
                
            }, 1500); // Simulate AI processing time
        });

        function addMessage(content, sender, isHTML = false) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `flex mb-4 ${sender === 'user' ? 'justify-end' : ''}`;
            
            if (sender === 'user') {
                messageDiv.innerHTML = `
                    <div class="bg-blue-100 rounded-lg rounded-tr-none p-3 max-w-[80%]">
                        <p>${escapeHtml(content)}</p>
                    </div>
                    <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center ml-2 flex-shrink-0">
                        <i class="fas fa-user text-white text-sm"></i>
                    </div>
                `;
            } else {
                messageDiv.innerHTML = `
                    <div class="w-8 h-8 rounded-full bg-pink-600 flex items-center justify-center mr-2 flex-shrink-0">
                        <i class="fas fa-robot text-white text-sm"></i>
                    </div>
                    <div class="bg-pink-100 rounded-lg rounded-tl-none p-3 max-w-[80%]">
                        ${isHTML ? content : `<p>${escapeHtml(content)}</p>`}
                    </div>
                `;
            }
            
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        function showTypingIndicator() {
            const typingDiv = document.createElement('div');
            typingDiv.className = 'flex mb-4 typing-indicator';
            typingDiv.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-pink-600 flex items-center justify-center mr-2 flex-shrink-0">
                    <i class="fas fa-robot text-white text-sm"></i>
                </div>
                <div class="bg-pink-100 rounded-lg rounded-tl-none p-3 max-w-[80%]">
                    <div class="typing">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            `;
            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function removeTypingIndicator() {
            const typingIndicator = document.querySelector('.typing-indicator');
            if (typingIndicator) typingIndicator.remove();
        }

        userMessageInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                chatForm.dispatchEvent(new Event('submit'));
            }
        });

        loadSocialScripts();
    });
</script>

<style>
    .typing {
        display: flex;
        align-items: center;
        padding: 8px 12px;
    }
    .typing span {
        height: 8px;
        width: 8px;
        background: #e91e63;
        display: block;
        border-radius: 50%;
        margin-right: 3px;
        animation: typing 1s infinite;
    }
    .typing span:nth-child(2) { animation-delay: 0.2s; }
    .typing span:nth-child(3) { animation-delay: 0.4s; }

    #chat-messages {
        scroll-behavior: smooth;
    }
    
    .instagram-media, .tiktok-embed {
        margin: 1rem 0;
        min-width: 300px;
        max-width: 100%;
        border-radius: 8px;
        overflow: hidden;
    }
    
    #chat-messages img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 8px 0;
        border: 1px solid #eee;
    }
    
    #chat-messages iframe {
        width: 100%;
        border-radius: 8px;
        margin: 8px 0;
    }
    
    .media-response h3 {
        color: #db2777;
        margin-bottom: 1rem;
    }
    
    .video-section {
        margin-top: 1.5rem;
    }
    
    @keyframes typing {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
</style>
@endsection