{{-- resources/views/user/social-posts.blade.php --}}
@extends('user.layouts.app')

@section('title', 'Social Posts')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/css/emoji-mart.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <style>
        .modal-full { max-width: 95%; }
        #scheduleDropdownContainer .line-left,
        #scheduleDropdownContainer .line-right {
            position: absolute; top: 50%; height: 1px; background-color: #dee2e6; width: calc(50% - 40px);
        }
        #scheduleDropdownContainer .line-left { left: 0; }
        #scheduleDropdownContainer .line-right { right: 0; }
        #scheduleDropdownContainer .badge.btn-sm { padding: 5px 10px; font-size: 12px; cursor: pointer; }
        #scheduleDropdownContainer .btn-outline-success.btn-sm { font-size: 12px; padding: 5px 8px; }

        /* Post Editor */
        #postCaption { height: 120px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid #dee2e6; padding: 10px; font-size: 14px; outline: none; }
        #postCaption:empty::before { content: "Start writing or use the AI Assistant"; color: #adb5bd; font-size: 14px; }
        #actionButtons { border: 1px solid #dee2e6; border-top: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
        #actionButtons .btn { padding: 0; margin-right: 5px; border: 0; }
        #actionButtons .btn:hover { background-color: transparent; }
        #actionButtons .btn svg { height: 18px; color: #6c757d; }
        #actionButtons .btn-assistant svg { color: #6f42c1; }
        #uploadArea { border: 2px dashed #dee2e6; border-radius: 8px; background-color: #f8f9fa; width: 125px; height: 125px; padding: 20px; position: relative; cursor: pointer; }
        .image-container { position: relative; display: inline-block; margin-right: 10px; margin-bottom: 10px; }
        .uploaded-image { width: 125px; height: 125px; object-fit: cover; border-radius: 8px; }
        .close-btn { position: absolute; top: 5px; right: 5px; background: #fff; border: 1px solid #dee2e6; border-radius: 50%; padding: 2px 6px; cursor: pointer; color: red; font-weight: bold; font-size: 12px; }
        .preview-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
        .preview-image { width: 125px; height: 125px; object-fit: cover; border-radius: 8px; position: relative; }
        .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; border-radius: 8px; }
        .show-more { color: #0d6efd; cursor: pointer; margin-top: 5px; }
        .show-more.hidden { display: none; }
        .emoji-picker { position: absolute; z-index: 1000; top: -300px; left: 0; }
        #loader { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2000; background: rgba(0,0,0,0.5); color: white; padding: 15px 25px; border-radius: 8px; font-weight: 500; }

        /* Media Manager */
        .media-item { position: relative; cursor: pointer; }
        .media-item img, .media-item video { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }
        .media-item .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity .2s; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; border-radius: 6px; }
        .media-item:hover .overlay { opacity: 1; }
        .media-search { max-height: 500px; overflow-y: auto; }

        /* Filerobot */
        #filerobot_container { width: 100%; height: 70vh; background: #f8f9fa; }
    </style>
@endsection

@section('content')
    <div class="page-content container-xxl">
<div class="col-xl-12 main-content ps-xl-4 pe-xl-5">
                <h1 class="page-title">AI Copywriter Dashboard</h1>
                <p class="lead">Manage your folders and projects efficiently to streamline your content creation process. Use the tools below to organize and create new items.</p>
                <hr>
            </div>
                        <div class="col-xl-12 main-content ps-xl-4 pe-xl-5">

<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
    <div><h4 class="mb-3 mb-md-0">Social Posts</h4></div>
    <div class="d-flex align-items-center flex-wrap text-nowrap">
        <button class="btn btn-outline-primary btn-icon-text me-2 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#createPostModal">
            <i class="btn-icon-prepend" data-feather="printer"></i> Create Post
        </button>
        <button class="btn btn-primary btn-icon-text mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#createPostModal">
            <i class="btn-icon-prepend" data-feather="download-cloud"></i> Create with AI
        </button>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body text-center">
                <h4>Create your first post</h4>
                <p class="text-muted mb-4">
                    Easy to get followers when they are most engaged! Design posts and schedule when to post.
                    <br><br>
                    <i class="text-success me-2">Check</i> Choose from different post variations<br>
                    <i class="text-success me-2">Check</i> Pre-design templates<br>
                    <i class="text-success me-2">Check</i> Use AI to create
                </p>
                <button class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#createPostModal">Create new</button>
                <button class="btn btn-outline-primary">Create with AI</button>
            </div>
        </div>
    </div>
</div>

<!-- Create Post Modal -->
<div class="modal fade" id="createPostModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-full modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <select class="form-select" disabled><option>Select social profiles (3)</option></select>
                        </div>
                        <div id="postCreationContainer">
                            <div contenteditable="true" class="form-control" id="postCaption"></div>
                            <div id="actionButtons" class="d-flex justify-content-between align-items-center mb-3 p-2">
                                <div class="w-100">
                                    <button class="btn btn-outline-secondary rounded-circle me-2" id="emojiBtn"><i data-feather="smile"></i></button>
                                    <button class="btn btn-outline-secondary rounded-circle me-2" id="hashtagBtn"><i data-feather="hash"></i></button>
                                    <button class="btn btn-assistant" id="aiAssistantBtn"><i data-feather="zap"></i> AI Assistant</button>
                                    <button class="btn btn-outline-secondary rounded-circle me-2" id="mediaManagerBtn"><i data-feather="image"></i></button>
                                </div>
                                <span id="charCounter" class="badge bg-secondary-subtle text-secondary">0</span>
                            </div>
                            <div class="d-flex align-items-start">
                                <div id="uploadArea" class="text-center">
                                    <i data-feather="image"></i>
                                    <p class="text-muted mb-0">Drag & drop or <a href="#" id="uploadLink" class="text-primary text-decoration-none">select a file</a></p>
                                    <input type="file" id="fileInput" style="display: none;" accept="image/*" multiple>
                                </div>
                                <div id="imagePreview" class="d-flex flex-wrap ms-3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#preview">Preview</a></li>
                        </ul>
                        <div class="tab-content mt-3">
                            <div class="tab-pane fade show active p-5 bg-light" id="preview">
                                <div id="postPreview" class="card rounded">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="d-flex align-items-center">
                                                <img class="img-xs rounded-circle" src="{{ auth()->user()->avatar ? Storage::url(auth()->user()->avatar) : asset('assets/images/default-user.png') }}" alt="">
                                                <div class="ms-2">
                                                    <p>{{ auth()->user()->name }}</p>
                                                    <p class="fs-11px text-secondary">5 min ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p class="mb-3 fs-14px"><span class="post-content"></span><span class="show-more text-primary hidden">Show more</span></p>
                                        <div class="preview-images"></div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="d-flex post-actions">
                                            <a href="javascript:;" class="d-flex align-items-center text-primary me-4"><i class="icon-md" data-feather="heart"></i><p class="d-none d-md-block ms-2">Like</p></a>
                                            <a href="javascript:;" class="d-flex align-items-center text-primary me-4"><i class="icon-md" data-feather="message-square"></i><p class="d-none d-md-block ms-2">Comment</p></a>
                                            <a href="javascript:;" class="d-flex align-items-center text-primary"><i class="icon-md" data-feather="share"></i><p class="d-none d-md-block ms-2">Share</p></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-feather="x"></i> Cancel</button>
                <div class="dropdown" id="scheduleDropdownContainer">
                    <button class="btn btn-outline-secondary dropdown-toggle" id="scheduleDropdown" data-bs-toggle="dropdown">
                        <i data-feather="clock"></i> <span id="scheduleButtonText">Schedule for later</span>
                        <span id="resetIcon" style="display: none; margin-left: 5px;"><i data-feather="x" style="color: #dc3545;"></i></span>
                    </button>
                    <div class="dropdown-menu p-3" style="min-width: 200px;">
                        <div class="mb-2">
                            <label class="form-label mb-1">Pick date and time</label>
                            <input type="text" class="form-control datetimepicker" id="scheduleDateTime" placeholder="November 21, 2023" readonly>
                        </div>
                        <div class="d-flex gap-2 mt-2">
                            <button class="btn btn-outline-secondary w-50" id="cancelSchedule">Cancel</button>
                            <button class="btn btn-success w-50" id="confirmSchedule">Done</button>
                        </div>
                    </div>
                </div>
                <button class="btn btn-success" id="postButton"><i data-feather="send"></i> <span id="postButtonText">Post now</span> [1]</button>
            </div>
        </div>
    </div>
</div>

<!-- Media Manager Modal -->
<div class="modal fade" id="mediaManagerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Media Manager</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-uploads">Uploads</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-pexels">Pexels</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-uploads">
                        <input type="text" class="form-control mb-3" placeholder="Search uploads..." id="search-uploads">
                        <div class="row g-3 media-search" id="uploads-grid"></div>
                    </div>
                    <div class="tab-pane fade" id="tab-pexels">
                        <input type="text" class="form-control mb-3" placeholder="Search Pexels..." id="search-pexels">
                        <div class="row g-3 media-search" id="pexels-grid"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filerobot Editor Modal -->
<div class="modal fade" id="filerobotModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Image</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div id="filerobot_container"></div>
            </div>
        </div>
    </div>
</div>

<div id="loader">Loading...</div>
    </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>

<!-- Filerobot Editor CDN -->
<script defer src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        feather.replace();

        const { TABS, TOOLS } = FilerobotImageEditor;
        let filerobotInstance = null;
        let uploadedImages = [];
        let currentEditUrl = null;

        // === Media Manager ===
        $('#mediaManagerBtn').on('click', () => $('#mediaManagerModal').modal('show'));

        function loadUploads(query = '') {
            $.get('/api/user/assets/search', { query }, data => {
                $('#uploads-grid').empty();
                data.data.forEach(asset => {
                    if (['image', 'gif'].includes(asset.asset_type)) {
                        $('#uploads-grid').append(`
                            <div class="col-3 media-item">
                                <img src="${asset.asset_url}" class="img-fluid" data-url="${asset.asset_url}" data-id="${asset.id}">
                                <div class="overlay"><i data-feather="edit-3"></i></div>
                            </div>
                        `);
                    }
                });
                feather.replace();
            });
        }

        function loadPexels(query = '') {
            $.get('/api/pexels/photos', { query }, data => {
                $('#pexels-grid').empty();
                data.data.forEach(photo => {
                    $('#pexels-grid').append(`
                        <div class="col-3 media-item">
                            <img src="${photo.asset_url}" class="img-fluid" data-url="${photo.asset_url}">
                            <div class="overlay"><i data-feather="plus"></i></div>
                        </div>
                    `);
                });
            });
        }

        $('#mediaManagerModal').on('shown.bs.modal', function () {
            loadUploads();
            loadPexels();
        });

        $('#search-uploads').on('input', _.debounce(e => loadUploads(e.target.value), 300));
        $('#search-pexels').on('input', _.debounce(e => loadPexels(e.target.value), 300));

        $(document).on('click', '.media-item img', function () {
            const url = $(this).data('url');
            const isUpload = $(this).closest('#tab-uploads').length;
            if (isUpload) {
                openFilerobot(url);
            } else {
                addImageToPost(url);
            }
            $('#mediaManagerModal').modal('hide');
        });

        // === Filerobot Editor ===
        function openFilerobot(imageUrl) {
            currentEditUrl = imageUrl;
            const config = {
                source: imageUrl,
                onSave: (output) => saveEditedImage(output.imageBase64),
                tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK, TABS.FINETUNE, TABS.FILTERS, TABS.RESIZE],
                defaultTabId: TABS.ANNOTATE,
                defaultToolId: TOOLS.TEXT,
            };

            if (filerobotInstance) filerobotInstance.terminate();
            filerobotInstance = new FilerobotImageEditor(document.getElementById('filerobot_container'), config);
            filerobotInstance.render({
                onClose: () => $('#filerobotModal').modal('hide')
            });

            $('#filerobotModal').modal('show');
        }

        function saveEditedImage(base64) {
            const blob = dataURItoBlob(base64);
            const formData = new FormData();
            formData.append('image', blob, `edited_${Date.now()}.png`);

            $.ajax({
                url: '/api/assets/save',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: res => {
                    addImageToPost(res.asset_url);
                    alert('Image saved!');
                },
                error: () => alert('Save failed.')
            });
        }

        function dataURItoBlob(dataURI) {
            const [header, data] = dataURI.split(',');
            const mime = header.match(/:(.*?);/)[1];
            const binary = atob(data);
            const array = [];
            for (let i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
            return new Blob([new Uint8Array(array)], { type: mime });
        }

        // === Upload & Preview ===
        $('#uploadArea, #fileInput').on('dragover dragenter', e => e.preventDefault())
            .on('drop', e => { e.preventDefault(); handleFiles(e.originalEvent.dataTransfer.files); });
        $('#uploadLink').on('click', e => { e.preventDefault(); $('#fileInput').click(); });
        $('#fileInput').on('change', e => handleFiles(e.target.files));

        function handleFiles(files) {
            $('#loader').show();
            const formData = new FormData();
            Array.from(files).forEach(f => formData.append('images[]', f));

            $.ajax({
                url: '/api/upload-assets',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: res => {
                    uploadedImages = uploadedImages.concat(res.data);
                    displayImages();
                    updatePreview();
                    $('#loader').hide();
                }
            });
        }

        function displayImages() {
            $('#imagePreview').empty();
            uploadedImages.forEach((img, i) => {
                const $container = $(`
                    <div class="image-container">
                        <img src="${img.asset_url}" class="uploaded-image">
                        <button class="close-btn">×</button>
                        <div class="action-buttons mt-1">
                            <button class="btn btn-outline-primary btn-sm me-1 preview-btn">Preview</button>
                            <button class="btn btn-outline-secondary btn-sm edit-btn">Edit</button>
                        </div>
                    </div>
                `);
                $container.find('.close-btn').on('click', () => deleteImage(img.id, i));
                $container.find('.edit-btn').on('click', () => openFilerobot(img.asset_url));
                $container.find('.preview-btn').on('click', () => {
                    initSwiper([img]);
                    $('#sliderModal').modal('show');
                });
                $('#imagePreview').append($container);
            });
        }

        function addImageToPost(url) {
            const fakeAsset = { asset_url: url, id: null };
            uploadedImages.push(fakeAsset);
            displayImages();
            updatePreview();
        }

        function deleteImage(id, index) {
            if (!id) { uploadedImages.splice(index, 1); displayImages(); updatePreview(); return; }
            $.ajax({
                url: `/api/upload-assets/${id}`,
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: () => {
                    uploadedImages.splice(index, 1);
                    displayImages();
                    updatePreview();
                }
            });
        }

        function updatePreview() {
            const $preview = $('.preview-images').empty();
            const max = 4;
            uploadedImages.slice(0, max).forEach((img, i) => {
                const $el = $(`<img src="${img.asset_url}" class="preview-image">`);
                if (i === max - 1 && uploadedImages.length > max) {
                    $el.after(`<div class="overlay">+${uploadedImages.length - max}</div>`);
                }
                $preview.append($el);
            });
        }

        // === Emoji & Char Count ===
        let emojiPicker = null;
        $('#emojiBtn').on('click', function () {
            if (!emojiPicker) {
                emojiPicker = new window.EmojiMart.Picker({
                    onEmojiSelect: emoji => {
                        const el = $('#postCaption')[0];
                        const range = window.getSelection().getRangeAt(0);
                        range.deleteContents();
                        range.insertNode(document.createTextNode(emoji.native));
                        updateCharCount();
                    }
                });
                $(this).after($('<div>').addClass('emoji-picker').append(emojiPicker));
            } else {
                $('.emoji-picker').toggle();
            }
        });

        function updateCharCount() {
            const text = $('#postCaption').text();
            $('#charCounter').text(text.length);
            const $content = $('.post-content');
            if (text.length > 50) {
                $content.text(text.substring(0, 50) + '...');
                $('.show-more').removeClass('hidden');
            } else {
                $content.text(text);
                $('.show-more').addClass('hidden');
            }
        }
        $('#postCaption').on('input', updateCharCount);
        updateCharCount();

        // === Swiper ===
        let swiper = null;
        function initSwiper(images) {
            $('.swiper-wrapper').empty();
            images.forEach(img => $('.swiper-wrapper').append(`<div class="swiper-slide"><img src="${img.asset_url}"></div>`));
            swiper = new Swiper('.swiper-container', {
                loop: true,
                pagination: { el: '.swiper-pagination' },
                navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
            });
        }

        // === Schedule (simplified) ===
        let selectedDateTime = null;
        flatpickr("#scheduleDateTime", {
            enableTime: true,
            dateFormat: "F j, Y h:i K",
            minDate: "today",
            onChange: (dates, str) => {
                selectedDateTime = dates[0];
                $('#scheduleButtonText').text(str);
                $('#resetIcon').show();
                $('#postButtonText').text('Schedule');
            }
        });
        $('#resetIcon').on('click', () => {
            selectedDateTime = null;
            $('#scheduleButtonText').text('Schedule for later');
            $('#resetIcon').hide();
            $('#postButtonText').text('Post now');
        });
    });
</script>
@endsection