@extends('user.layouts.app')

@section('content')
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
                    <div>
                        <h4 class="mb-3 mb-md-0">AI Prompt Library</h4>
                    </div>
                    <div class="d-flex align-items-center flex-wrap text-nowrap">
                        <button type="button" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
                            <i class="btn-icon-prepend" data-feather="download-cloud"></i>
                            Create Your Own
                        </button>
                    </div>
                </div>

                <ul class="nav nav-tabs" id="promptTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="community-tab" data-bs-toggle="tab" data-bs-target="#community" type="button" role="tab" aria-controls="community" aria-selected="true">
                            <i class="me-1 icon-md" data-feather="users"></i>Community
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="personal-favorites-tab" data-bs-toggle="tab" data-bs-target="#personal-favorites" type="button" role="tab" aria-controls="personal-favorites" aria-selected="false">
                            <i class="me-1 icon-md" data-feather="star"></i>Personal & Favorites
                        </button>
                    </li>
                </ul>

                <div class="tab-content border border-top-0 p-3" id="promptTabsContent">
                    <!-- Community Tab -->
                    <div class="tab-pane fade show active" id="community" role="tabpanel" aria-labelledby="community-tab">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <input type="text" class="form-control w-50" id="community-search" placeholder="Search prompts">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPromptModal">Create your own</button>
                        </div>
                        <div class="card bg-primary text-white mb-4">
                            <div class="card-body">
                                <h4>Explore prompts from the community!</h4>
                                <p>Prompts act as the context given to AI to act upon. With prompts you can create your own AI assistant or text generator. Explore the examples written by our community or publish your own!</p>
                                <div class="d-flex gap-2">
                                    <a href="#" class="btn btn-light">Try the AI</a>
                                    <button class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#createPromptModal">Create your own</button>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="community-prompts">
                            <!-- Prompts will be loaded via API -->
                        </div>
                    </div>

                    <!-- Personal & Favorites Tab -->
                    <div class="tab-pane fade" id="personal-favorites" role="tabpanel" aria-labelledby="personal-favorites-tab">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <input type="text" class="form-control w-50" id="personal-favorites-search" placeholder="Search prompts">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPromptModal">Create your own</button>
                        </div>
                        <h5>Personal Prompts</h5>
                        <div class="row mb-4" id="personal-prompts">
                            <!-- Prompts will be loaded via API -->
                        </div>
                        <h5>Favorite Prompts</h5>
                        <div class="row" id="favorite-prompts">
                            <!-- Prompts will be loaded via API -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Create Prompt Modal -->
        <div class="modal fade" id="createPromptModal" tabindex="-1" aria-labelledby="createPromptModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createPromptModalLabel">Create New Prompt</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createPromptForm" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Prompt Image</label>
                                        <input type="file" name="image" class="form-control" accept="image/*">
                                        <div class="text-danger error-message" id="image-error"></div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="evergreen" id="evergreen">
                                            <label class="form-check-label" for="evergreen">
                                                Evergreen
                                                <span class="text-muted">Will disable the user input field</span>
                                            </label>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="is_shared" id="is_shared">
                                            <label class="form-check-label" for="is_shared">
                                                Share with community
                                                <span class="text-muted">Will get listed publicly for everyone to use</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Name <span class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control" placeholder="Name your prompt for reference">
                                        <div class="text-danger error-message" id="name-error"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Category <span class="text-danger">*</span></label>
                                        <select name="category" class="form-select">
                                            <option value="General">General</option>
                                            <option value="Social Media">Social Media</option>
                                            <option value="Marketing">Marketing</option>
                                            <option value="Education">Education</option>
                                            <option value="Assistant">Assistant</option>
                                        </select>
                                        <div class="text-danger error-message" id="category-error"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Prompt <span class="text-danger">*</span></label>
                                        <textarea name="prompt_text" class="form-control" rows="4" placeholder="Type your actual prompt here"></textarea>
                                        <div class="text-danger error-message" id="prompt_text-error"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Description</label>
                                        <textarea name="description" class="form-control" rows="3" placeholder="Provide a description on what your prompt does"></textarea>
                                        <div class="text-danger error-message" id="description-error"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Conversation Example</label>
                                        <p class="text-muted">Examples increase the stability of your desired outputs and we highly advise providing these</p>
                                        <div id="conversation-examples">
                                            <div class="conversation-example mb-3">
                                                <input type="text" name="conversation_examples[0][prompt]" class="form-control mb-2" placeholder="Prompt">
                                                <textarea name="conversation_examples[0][response]" class="form-control" rows="2" placeholder="Response"></textarea>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-outline-primary mt-2" onclick="addConversationExample()">Add Another Example</button>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Prompt</label>
                                        <textarea class="form-control" rows="5" readonly></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Example</label>
                                        <div class="alert alert-light" role="alert">
                                            No example given
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        let exampleCount = 1;

        function addConversationExample() {
            const container = document.getElementById('conversation-examples');
            const newExample = document.createElement('div');
            newExample.className = 'conversation-example mb-3';
            newExample.innerHTML = `
            <input type="text" name="conversation_examples[${exampleCount}][prompt]" class="form-control mb-2" placeholder="Prompt">
            <textarea name="conversation_examples[${exampleCount}][response]" class="form-control" rows="2" placeholder="Response"></textarea>
        `;
            container.appendChild(newExample);
            exampleCount++;
        }

        document.querySelector('textarea[name="prompt_text"]').addEventListener('input', function() {
            document.querySelector('textarea[readonly]').value = this.value;
        });

        // Function to render prompts
        function renderPrompts(container, prompts, showFavoriteButton = false) {
            container.empty();
            prompts.forEach(prompt => {
                const cardHtml = `
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-body">
                            ${prompt.image ? `<img src="/storage/${prompt.image}" class="card-img-top mb-3" alt="${prompt.name}" style="height: 100px; object-fit: cover;">` : `<img src="{{ asset('assets/images/default-prompt.png') }}" class="card-img-top mb-3" alt="Default Prompt Image" style="height: 100px; object-fit: cover;">`}
                            <h5 class="card-title">${prompt.name}</h5>
                            <p class="card-text text-muted">${prompt.description ? prompt.description.substring(0, 100) : ''}</p>
                            <span class="badge bg-light text-dark">${prompt.category.toUpperCase()}</span>
                            ${showFavoriteButton ? `
                                <button class="btn btn-sm btn-outline-primary mt-2 favorite-btn" data-prompt-id="${prompt.id}">
                                    <i class="link-icon" data-feather="star" style="color: ${prompt.is_favorited ? 'gold' : 'inherit'};"></i>
                                </button>
                            ` : ''}
                        </div>
                    </div>
                </div>
            `;
                container.append(cardHtml);
            });
            feather.replace();
        }

        // Load prompts on page load
        $(document).ready(function() {
            $.ajax({
                url: '{{ route("api.ai-tools.prompts.index") }}',
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + getApiToken(),
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // Add is_favorited property to community prompts
                    const communityPrompts = response.community.map(prompt => {
                        prompt.is_favorited = response.favorites.some(fav => fav.id === prompt.id);
                        return prompt;
                    });

                    // Render prompts
                    renderPrompts($('#community-prompts'), communityPrompts, true);
                    renderPrompts($('#personal-prompts'), response.personal);
                    renderPrompts($('#favorite-prompts'), response.favorites);

                    // Update search placeholders
                    $('#community-search').attr('placeholder', `Search prompts (${communityPrompts.length})`);
                    $('#personal-favorites-search').attr('placeholder', `Search prompts (${response.personal.length + response.favorites.length})`);
                },
                error: function(xhr) {
                    console.error('Error loading prompts:', xhr.responseJSON);
                }
            });
        });

        // Handle favorite button clicks
        $(document).on('click', '.favorite-btn', function() {
            const button = $(this);
            const promptId = button.data('prompt-id');

            $.ajax({
                url: '{{ url("api/ai-tools/prompts-library") }}/' + promptId + '/favorite',
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer ' + getApiToken(),
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // Update the favorite icon
                    const icon = button.find('i');
                    const isFavorited = response.is_favorited;
                    icon.css('color', isFavorited ? 'gold' : 'inherit');

                    // Update the favorites tab
                    $.ajax({
                        url: '{{ route("api.ai-tools.prompts.index") }}',
                        method: 'GET',
                        headers: {
                            'Authorization': 'Bearer ' + getApiToken(),
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            renderPrompts($('#favorite-prompts'), response.favorites);
                            $('#personal-favorites-search').attr('placeholder', `Search prompts (${response.personal.length + response.favorites.length})`);
                        }
                    });
                },
                error: function(xhr) {
                    console.error('Error toggling favorite:', xhr.responseJSON);
                }
            });
        });

        // Search functionality
        $('#community-search').on('input', function() {
            const search = $(this).val().toLowerCase();
            $('#community-prompts').children().each(function() {
                const name = $(this).find('.card-title').text().toLowerCase();
                const description = $(this).find('.card-text').text().toLowerCase();
                $(this).toggle(name.includes(search) || description.includes(search));
            });
        });

        $('#personal-favorites-search').on('input', function() {
            const search = $(this).val().toLowerCase();
            $('#personal-prompts, #favorite-prompts').children().each(function() {
                const name = $(this).find('.card-title').text().toLowerCase();
                const description = $(this).find('.card-text').text().toLowerCase();
                $(this).toggle(name.includes(search) || description.includes(search));
            });
        });

        // Handle form submission for creating a new prompt
        $('#createPromptForm').on('submit', function(e) {
            e.preventDefault();

            // Clear previous error messages
            $('.error-message').text('');

            const formData = new FormData(this);
            $.ajax({
                url: '{{ route("api.ai-tools.prompts.store") }}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'Authorization': 'Bearer ' + getApiToken(),
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#createPromptModal').modal('hide');
                    const prompt = response.prompt;

                    // Add the new prompt to the appropriate tab
                    const cardHtml = `
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                ${prompt.image ? `<img src="/storage/${prompt.image}" class="card-img-top mb-3" alt="${prompt.name}" style="height: 100px; object-fit: cover;">` : `<img src="{{ asset('assets/images/default-prompt.png') }}" class="card-img-top mb-3" alt="Default Prompt Image" style="height: 100px; object-fit: cover;">`}
                                <h5 class="card-title">${prompt.name}</h5>
                                <p class="card-text text-muted">${prompt.description ? prompt.description.substring(0, 100) : ''}</p>
                                <span class="badge bg-light text-dark">${prompt.category.toUpperCase()}</span>
                                ${prompt.is_shared ? `<button class="btn btn-sm btn-outline-primary mt-2 favorite-btn" data-prompt-id="${prompt.id}"><i class="link-icon" data-feather="star"></i></button>` : ''}
                            </div>
                        </div>
                    </div>
                `;

                    if (prompt.is_shared) {
                        $('#community-prompts').prepend(cardHtml);
                    } else {
                        $('#personal-prompts').prepend(cardHtml);
                    }

                    // Update prompt counts
                    const communityCount = $('#community-prompts').children().length;
                    const personalCount = $('#personal-prompts').children().length;
                    const favoriteCount = $('#favorite-prompts').children().length;
                    $('#community-search').attr('placeholder', `Search prompts (${communityCount})`);
                    $('#personal-favorites-search').attr('placeholder', `Search prompts (${personalCount + favoriteCount})`);

                    // Reset the form
                    $('#createPromptForm')[0].reset();
                    document.querySelector('textarea[readonly]').value = '';
                    feather.replace();
                },
                error: function(xhr) {
                    const errors = xhr.responseJSON.errors || {};
                    for (const [field, messages] of Object.entries(errors)) {
                        $(`#${field}-error`).text(messages[0]);
                    }
                }
            });
        });

        // Placeholder function to get API token (implement based on your auth setup)
        function getApiToken() {
            return window.authToken;
        }
    </script>
@endsection