{{--
    Gemini AI Image modal — Crypto News listing.

    Flow:
        Generate Image        -> AI banata hai, preview dikhta hai
        Save to Article       -> S3 pe jaata hai, DB update hoti hai
        Share to Graphics     -> request DB me save, hamara kaam khatam

    Coins: editor 1-5 coins chun sakta hai. Un coins ke ASLI logos Gemini ko
    input images ke roop me jaate hain, aur wo unhe 3D coins pe render kar deta
    hai. AI se logo banwane par galat/distorted logo aata hai — Dogecoin ke
    article pe Ethereum jaise coins aa gaye the.

    Blog (is_gabbar = 5): cryptopresalenews me abhi blog type nahi hai (sirf
    News/PR), isliye "Blog heading" / "Blog sub text" fields yahan asar nahi
    karte — future ke liye rakhe hain.

    Listing blade ke sabse neeche ek hi baar include karein:
        @include('livewire.admin.partials.gemini-image-modal')

    Button (Action column me):
        <button type="button" class="btn btn-sm gemini-image-btn"
                data-news-id="{{ $cryptoNews->id }}"
                data-news-title="{{ $cryptoNews->title }}">AI Image</button>
--}}

<div class="modal fade" id="geminiImageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-header justify-content-between">
                <h5 class="modal-title">
                    <i class="fa fa-magic"></i> AI Image Generator
                </h5>
                <button type="button" class="close bg-transparent p-0 border-0" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                    <span class="fs-24" aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="mb-3">
                    <div class="font-weight-bold" id="giTitle"></div>
                    <small class="text-muted" id="giMeta"></small>
                </div>

                <div class="alert alert-danger py-2 d-none" id="giError"></div>
                <div class="alert alert-success py-2 d-none" id="giSuccess"></div>

                {{-- Optional custom title + instructions + coins --}}
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <label class="small mb-1">Custom title (optional — khali chhodenge to article ka title use hoga)</label>
                        <input type="text" class="form-control form-control-sm" id="giCustomTitle" maxlength="300">
                    </div>

                    <div class="col-md-12 mb-2">
                        <label class="small mb-1">Extra instructions for AI (optional)</label>
                        <input type="text" class="form-control form-control-sm" id="giInstructions" maxlength="500"
                               placeholder="e.g. bullish orange theme, city skyline background">
                    </div>

                    <div class="col-md-12 mb-2">
                        <label class="small mb-1">
                            Highlight text (optional — image me bada likha jayega)
                        </label>
                        <input type="text" class="form-control form-control-sm" id="giHighlight" maxlength="40"
                               placeholder="e.g. 2026-2030  ya  $1">
                        <div class="form-text small text-muted">
                            Chhota rakhein. AI kabhi-kabhi lamba text galat likh deta hai —
                            preview dekh kar Regenerate kar sakte hain.
                        </div>
                    </div>

                    <div class="col-md-6 mb-2">
                        <label class="small mb-1">
                            Blog heading <span class="text-muted">(sirf blog articles)</span>
                        </label>
                        <input type="text" class="form-control form-control-sm" id="giBlogHeading" maxlength="60"
                               placeholder="e.g. APTOS PRESALE">
                    </div>

                    <div class="col-md-6 mb-2">
                        <label class="small mb-1">
                            Blog sub text <span class="text-muted">(colored box)</span>
                        </label>
                        <input type="text" class="form-control form-control-sm" id="giBlogSub" maxlength="60"
                               placeholder="e.g. Top APT token">
                        <div class="form-text small text-muted">
                            Box ka rang selected coin ke logo se aata hai.
                        </div>
                    </div>

                    {{-- Coin selector — asli logo image me render hoga --}}
                    <div class="col-md-12 mb-3 position-relative">
                        <label class="small mb-1">
                            Coins (optional — max 5, asli logo image me render hoga)
                        </label>

                        <div id="giCoinChips" class="mb-2 d-flex flex-wrap"></div>

                        <input type="text" class="form-control form-control-sm" id="giCoinSearch"
                               autocomplete="off"
                               placeholder="Coin ka naam type karein — jaise Dogecoin, Pepeto">

                        <div id="giCoinResults" class="list-group position-absolute d-none"
                             style="z-index:1060; max-height:220px; overflow-y:auto; width:calc(100% - 30px);"></div>

                        <div class="form-text small text-muted">
                            Coin na chunein to AI generic coins banayega.
                            Blog me coin sirf box ke rang ke liye use hota hai.
                        </div>
                    </div>
                </div>

                {{-- Preview --}}
                <div class="border rounded d-flex align-items-center justify-content-center mb-3"
                     style="min-height:260px; background:#f6f7fb;">

                    <div class="text-center py-5 d-none" id="giLoader">
                        <div class="spinner-border text-primary mb-2"></div>
                        <div class="text-muted small">Image generate ho rahi hai, 15-40 second lag sakte hain&hellip;</div>
                    </div>

                    <div class="w-100 text-center d-none" id="giPreviewWrap">
                        <img src="" alt="" id="giPreview" class="img-fluid rounded" style="max-height:360px;">
                    </div>

                    <div class="text-center text-muted py-5" id="giEmpty">
                        "Generate Image" dabaiye
                    </div>
                </div>

                {{-- Graphics brief — sirf tab dikhta hai jab graphics pe bhejna ho --}}
                <div class="d-none" id="giGraphicsBox">
                    <div class="form-group mb-2">
                        <label class="small mb-1">Graphics team ke liye note (optional)</label>
                        <input type="text" class="form-control form-control-sm" id="giBrief"
                               placeholder="e.g. SHIB logo left side, bullish theme">
                    </div>
                </div>

            </div>

            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-primary btn-sm" id="giGenerate">
                    <i class="fa fa-magic"></i> Generate Image
                </button>

                <div>
                    <button type="button" class="btn btn-light btn-sm" data-dismiss="modal" data-bs-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-info btn-sm" id="giGraphics">
                        <i class="fa fa-paper-plane"></i> Share to Graphics Team
                    </button>

                    <button type="button" class="btn btn-success btn-sm d-none" id="giSave">
                        <i class="fa fa-check"></i> Save to Article
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

@once
@push('scripts')
<script>
(function () {
    'use strict';

    // Ek jagah se limit — label, placeholder aur checks sab isi se
    var MAX_COINS = 5;

    var state = { newsId: null, tempPath: null, busy: false, coins: [] };

    var $id = function (x) { return document.getElementById(x); };

    var el = {
        modal:       $id('geminiImageModal'),
        title:       $id('giTitle'),
        meta:        $id('giMeta'),
        error:       $id('giError'),
        success:     $id('giSuccess'),
        customTitle: $id('giCustomTitle'),
        instructions:$id('giInstructions'),
        loader:      $id('giLoader'),
        previewWrap: $id('giPreviewWrap'),
        preview:     $id('giPreview'),
        empty:       $id('giEmpty'),
        graphicsBox: $id('giGraphicsBox'),
        brief:       $id('giBrief'),
        btnGenerate: $id('giGenerate'),
        btnGraphics: $id('giGraphics'),
        btnSave:     $id('giSave'),
        coinSearch:  $id('giCoinSearch'),
        coinResults: $id('giCoinResults'),
        coinChips:   $id('giCoinChips'),
        highlight:   $id('giHighlight'),
        blogHeading: $id('giBlogHeading'),
        blogSub:     $id('giBlogSub')
    };

    var routes = {
        generate: @json(route('crypto-news.generate-ai-image')),
        approve:  @json(route('crypto-news.approve-ai-image')),
        reject:   @json(route('crypto-news.reject-ai-image')),
        graphics: @json(route('crypto-news.share-ai-image-graphics')),
        search:   @json(route('crypto-news.search-coins'))
    };

    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrf = csrfMeta ? csrfMeta.getAttribute('content') : '{{ csrf_token() }}';

    function post(url, payload) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        }).then(function (res) {
            return res.json().then(function (body) {
                // Non-2xx bhi JSON message carry karta hai — wahi dikhana hai,
                // generic network error nahi.
                return { status: res.status, body: body };
            });
        });
    }

    function showError(msg) {
        el.success.classList.add('d-none');
        el.error.textContent = msg;
        el.error.classList.remove('d-none');
    }

    function showSuccess(msg) {
        el.error.classList.add('d-none');
        el.success.textContent = msg;
        el.success.classList.remove('d-none');
    }

    function clearAlerts() {
        el.error.classList.add('d-none');
        el.success.classList.add('d-none');
    }

    function setBusy(busy) {
        state.busy = busy;
        el.btnGenerate.disabled = busy;
        el.btnGraphics.disabled = busy;
        el.btnSave.disabled = busy;
        el.loader.classList.toggle('d-none', !busy);

        if (busy) {
            el.previewWrap.classList.add('d-none');
            el.empty.classList.add('d-none');
        }
    }

    // ── Coin selector ───────────────────────────────────────────────────

    var searchTimer = null;

    function renderChips() {
        el.coinChips.innerHTML = '';

        state.coins.forEach(function (coin, idx) {
            var chip = document.createElement('span');
            chip.className = 'badge badge-secondary bg-secondary d-inline-flex align-items-center mr-1 mb-1';
            chip.style.padding = '6px 10px';
            chip.style.fontSize = '13px';

            if (coin.logo) {
                var img = document.createElement('img');
                img.src = coin.logo;
                img.style.width = '18px';
                img.style.height = '18px';
                img.style.borderRadius = '50%';
                img.style.marginRight = '6px';
                img.style.background = '#fff';
                chip.appendChild(img);
            }

            chip.appendChild(document.createTextNode(
                coin.name + (coin.symbol ? ' (' + coin.symbol + ')' : '')
            ));

            var x = document.createElement('span');
            x.innerHTML = '&times;';
            x.style.cursor = 'pointer';
            x.style.marginLeft = '8px';
            x.style.fontWeight = 'bold';
            x.addEventListener('click', function () {
                state.coins.splice(idx, 1);
                renderChips();
            });
            chip.appendChild(x);

            el.coinChips.appendChild(chip);
        });

        // MAX_COINS se zyada select na ho paye
        el.coinSearch.disabled = state.coins.length >= MAX_COINS;
        el.coinSearch.placeholder = state.coins.length >= MAX_COINS
            ? 'Maximum ' + MAX_COINS + ' coins'
            : 'Coin ka naam type karein — jaise Dogecoin, Pepeto';
    }

    function hideCoinResults() {
        el.coinResults.classList.add('d-none');
        el.coinResults.innerHTML = '';
    }

    function searchCoins(term) {
        fetch(routes.search + '?q=' + encodeURIComponent(term), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(function (res) {
            return res.json();
        }).then(function (body) {
            if (!body.success || !body.data || !body.data.length) {
                el.coinResults.innerHTML =
                    '<div class="list-group-item small text-muted">Koi coin nahi mila</div>';
                el.coinResults.classList.remove('d-none');
                return;
            }

            el.coinResults.innerHTML = '';

            body.data.forEach(function (coin) {
                var item = document.createElement('button');
                item.type = 'button';
                item.className = 'list-group-item list-group-item-action d-flex align-items-center';
                item.style.padding = '6px 10px';

                if (coin.logo) {
                    var img = document.createElement('img');
                    img.src = coin.logo;
                    img.style.width = '24px';
                    img.style.height = '24px';
                    img.style.borderRadius = '50%';
                    img.style.marginRight = '10px';
                    img.style.background = '#fff';
                    item.appendChild(img);
                }

                var label = document.createElement('span');
                label.innerHTML = '<strong>' + coin.name + '</strong>'
                    + (coin.symbol ? ' <span class="text-muted">' + coin.symbol + '</span>' : '')
                    + ' <span class="badge badge-light bg-light text-dark ml-2">' + coin.source + '</span>';
                item.appendChild(label);

                item.addEventListener('click', function () {
                    // Duplicate mat add karein
                    var already = state.coins.some(function (c) { return c.key === coin.key; });

                    if (!already && state.coins.length < MAX_COINS) {
                        state.coins.push(coin);
                        renderChips();
                    }

                    el.coinSearch.value = '';
                    hideCoinResults();
                });

                el.coinResults.appendChild(item);
            });

            el.coinResults.classList.remove('d-none');
        }).catch(function (err) {
            // Search fail hone pe chup-chaap dropdown band mat karein —
            // editor ko pata chale ki request fail hui (dropdown "not
            // working" wala confusion isi se hota tha).
            el.coinResults.innerHTML =
                '<div class="list-group-item small text-danger">Coin search fail: ' + err.message + '</div>';
            el.coinResults.classList.remove('d-none');
        });
    }

    el.coinSearch.addEventListener('input', function () {
        var term = el.coinSearch.value.trim();

        clearTimeout(searchTimer);

        if (term.length < 2) {
            hideCoinResults();
            return;
        }

        // Har keystroke pe request nahi — 350ms rukte hain
        searchTimer = setTimeout(function () { searchCoins(term); }, 350);
    });

    document.addEventListener('click', function (e) {
        if (!el.coinResults.contains(e.target) && e.target !== el.coinSearch) {
            hideCoinResults();
        }
    });

    // ── Modal state ─────────────────────────────────────────────────────

    function resetModal() {
        state.tempPath = null;
        state.coins = [];

        clearAlerts();
        el.previewWrap.classList.add('d-none');
        el.empty.classList.remove('d-none');
        el.graphicsBox.classList.add('d-none');
        el.btnSave.classList.add('d-none');

        el.customTitle.value = '';
        el.instructions.value = '';
        el.brief.value = '';
        el.highlight.value = '';
        el.blogHeading.value = '';
        el.blogSub.value = '';
        el.preview.src = '';

        el.coinSearch.value = '';
        el.coinSearch.disabled = false;
        hideCoinResults();
        renderChips();
    }

    function openModal() {
        // Bootstrap 5 pehle — BS5 jQuery ko extend nahi karta.
        // getOrCreateInstance() BS 5.1+ me aaya, isliye getInstance + new
        // use karte hain — ye 5.0 pe bhi chalta hai.
        if (window.bootstrap && window.bootstrap.Modal) {
            var inst = window.bootstrap.Modal.getInstance
                ? window.bootstrap.Modal.getInstance(el.modal)
                : null;

            if (!inst) {
                inst = new window.bootstrap.Modal(el.modal);
            }

            inst.show();
            return;
        }

        if (window.jQuery && typeof window.jQuery(el.modal).modal === 'function') {
            window.jQuery(el.modal).modal('show');
            return;
        }

        // Dono na milein to manual — kam se kam modal khul to jaye.
        el.modal.classList.add('show');
        el.modal.style.display = 'block';
        el.modal.removeAttribute('aria-hidden');
        document.body.classList.add('modal-open');

        if (!document.getElementById('giBackdrop')) {
            var bd = document.createElement('div');
            bd.id = 'giBackdrop';
            bd.className = 'modal-backdrop fade show';
            document.body.appendChild(bd);
        }
    }

    function closeModal() {
        // Bootstrap se band karne ki koshish
        if (window.bootstrap && window.bootstrap.Modal && window.bootstrap.Modal.getInstance) {
            var inst = window.bootstrap.Modal.getInstance(el.modal);
            if (inst) { inst.hide(); }
        } else if (window.jQuery && typeof window.jQuery(el.modal).modal === 'function') {
            window.jQuery(el.modal).modal('hide');
        }

        // Chahe Bootstrap ne handle kiya ho ya nahi, DOM zaroor saaf karein.
        // Modal manual fallback se khula ho to Bootstrap ka hide() usse
        // nahi hatata, aur backdrop screen pe atka reh jaata hai.
        setTimeout(function () {
            el.modal.classList.remove('show');
            el.modal.style.display = 'none';
            el.modal.setAttribute('aria-hidden', 'true');

            document.body.classList.remove('modal-open');
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';

            // Har atka hua backdrop hatao — apna wala bhi, Bootstrap ka bhi
            document.querySelectorAll('.modal-backdrop').forEach(function (bd) {
                bd.remove();
            });
        }, 300); // Bootstrap ke fade transition ke baad
    }

    // ── Generate ────────────────────────────────────────────────────────
    function generate() {
        setBusy(true);
        clearAlerts();

        post(routes.generate, {
            news_id: state.newsId,
            custom_title: el.customTitle.value,
            user_instructions: el.instructions.value,
            highlight_text: el.highlight.value,
            blog_heading: el.blogHeading.value,
            blog_sub_text: el.blogSub.value,
            coins: state.coins.map(function (c) { return c.key; })
        }).then(function (res) {
            setBusy(false);

            if (!res.body.success) {
                showError(res.body.message || 'Generate fail hua.');
                el.empty.classList.remove('d-none');
                return;
            }

            state.tempPath = res.body.data.temp_path;

            el.preview.src = res.body.data.temp_url + '?t=' + Date.now(); // cache bust
            el.preview.alt = res.body.data.news_title || '';
            el.previewWrap.classList.remove('d-none');
            el.empty.classList.add('d-none');

            el.btnSave.classList.remove('d-none');
            el.btnGenerate.innerHTML = '<i class="fa fa-refresh"></i> Regenerate';

            var msg = 'Image ban gayi. Pasand aaye to "Save to Article" dabaiye.';

            // Coin chuna tha lekin logo fetch nahi hua to editor ko pata chalna
            // chahiye — warna wo soch sakta hai ki logo prompt me gaya hi nahi.
            if (state.coins.length && res.body.data.coins_used === 0) {
                msg += ' (Chune gaye coins ke logo load nahi ho paye.)';
            }

            showSuccess(msg);
        }).catch(function (err) {
            setBusy(false);
            showError('Network error: ' + err.message);
        });
    }

    // ── Save to article ─────────────────────────────────────────────────
    function save() {
        if (!state.tempPath) { return; }

        setBusy(true);
        clearAlerts();

        post(routes.approve, {
            news_id: state.newsId,
            temp_path: state.tempPath
        }).then(function (res) {
            setBusy(false);

            if (!res.body.success) {
                showError(res.body.message || 'Save fail hua.');
                el.previewWrap.classList.remove('d-none');
                return;
            }

            // Ek baar approve ho gaya — listing wala button turant disable kar dein
            var listBtn = document.querySelector('.gemini-image-btn[data-news-id="' + state.newsId + '"]');
            if (listBtn) {
                listBtn.disabled = true;
                listBtn.title = 'AI image already generated';
            }

            closeModal();
            window.location.reload();
        }).catch(function (err) {
            setBusy(false);
            showError('Network error: ' + err.message);
        });
    }

    // ── Share to graphics ───────────────────────────────────────────────
    function shareToGraphics() {
        // Pehli click pe note ka box kholte hain, doosri click pe bhejte hain.
        if (el.graphicsBox.classList.contains('d-none')) {
            el.graphicsBox.classList.remove('d-none');
            el.btnGraphics.innerHTML = '<i class="fa fa-paper-plane"></i> Confirm &amp; Send';
            el.brief.focus();
            return;
        }

        setBusy(true);
        clearAlerts();

        post(routes.graphics, {
            news_id: state.newsId,
            brief: el.brief.value,
            temp_path: state.tempPath // preview bana ho to designer ko reference milega
        }).then(function (res) {
            setBusy(false);

            if (!res.body.success) {
                showError(res.body.message || 'Request bhej nahi paye.');
                return;
            }

            showSuccess(res.body.message || 'Graphics team ko bhej diya gaya.');
            el.graphicsBox.classList.add('d-none');
            el.btnGraphics.disabled = true;

            setTimeout(closeModal, 1200);
        }).catch(function (err) {
            setBusy(false);
            showError('Network error: ' + err.message);
        });
    }

    // Delegated — ajax se aayi nayi rows pe bhi kaam karega.
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.gemini-image-btn');
        if (!btn) { return; }

        e.preventDefault();

        state.newsId = btn.getAttribute('data-news-id');

        resetModal();

        el.title.textContent = btn.getAttribute('data-news-title') || '';
        el.meta.textContent = 'Article #' + state.newsId;
        el.btnGenerate.innerHTML = '<i class="fa fa-magic"></i> Generate Image';
        el.btnGraphics.innerHTML = '<i class="fa fa-paper-plane"></i> Share to Graphics Team';
        el.btnGraphics.disabled = false;

        openModal();
    });

    el.btnGenerate.addEventListener('click', function () { if (!state.busy) { generate(); } });
    el.btnSave.addEventListener('click',     function () { if (!state.busy) { save(); } });
    el.btnGraphics.addEventListener('click', function () { if (!state.busy) { shareToGraphics(); } });
})();
</script>
@endpush
@endonce