/* ==========================================================================
   6. DYNAMIC MEDIA GALLERY v47 STABLE
   ========================================================================== */
add_shortcode('tag-gallery', function($atts) {
    // UPDATED: Added title parameter (default is 'on')
    $a = shortcode_atts( array(
        'tag'      => '',
        'columns'  => '6', 
        'per_page' => '48',
        'search'   => 'on',
        'index'    => 'on',
        'title'    => 'on'
    ), $atts );

    if ( empty($a['tag']) ) return 'Please specify a tag.';

    $tag_obj = get_term_by('slug', $a['tag'], 'post_tag');
    $initial_name = ($tag_obj) ? $tag_obj->name : ucwords(str_replace('-', ' ', $a['tag']));

    $images = get_posts( array(
        'post_type'      => 'attachment',
        'post_status'    => 'inherit',
        'posts_per_page' => -1,
        'tax_query'      => array(array('taxonomy'=>'post_tag','field'=>'slug','terms'=>'original-photo')),
        'fields'         => 'ids' 
    ) );

    if ( empty($images) ) return 'No images found.';

    $cols = intval($a['columns']);
    $per_page = intval($a['per_page']);

    $gallery_data = [];
    foreach ( $images as $id ) {
        $post = get_post($id);
        if (!$post) continue;
        
        $tags_raw = wp_get_post_terms($id, 'post_tag', array('fields' => 'names'));
        
        $tax_html = '<div>Tags: ';
        foreach($tags_raw as $t) { 
            $tax_html .= '<a class="ag-tax-click" data-term="'.esc_attr($t).'" style="color:#6F898B; text-decoration:underline; cursor:pointer;">'.esc_html($t).'</a>, '; 
        }
        $tax_html = rtrim($tax_html, ', ') . '</div>';

        $gallery_data[] = array(
            'url'         => wp_get_attachment_url($id),
            'thumb'       => wp_get_attachment_image_src($id, 'thumbnail')[0],
            'title'       => esc_attr($post->post_title),
            'cap'         => esc_attr($post->post_excerpt),
            'desc'        => esc_attr(wp_strip_all_tags($post->post_content)), 
            'tax'         => $tax_html,
            'tags'        => $tags_raw,
            'search_blob' => strtolower(esc_attr($post->post_title . ' ' . $post->post_excerpt . ' ' . implode(' ', $tags_raw)))
        );
    }

    $output = '<style>
        .ag-gallery-master-wrap { width: 100% !important; padding: 0 12px !important; box-sizing: border-box !important; }
        #ag-gallery-title { font-size: 24px; color: #1A4548; margin-bottom: 20px; border-bottom: 2px solid #f4f4f4; padding-bottom: 10px; line-height: 1.4; }
        .ag-count-sub { font-size: 16px; color: #888; font-weight: normal; margin-left: 10px; }
        .ag-filter-suite { margin: 20px 0 30px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
        #ag-search-input { flex-grow: 1; min-width: 200px; padding: 10px 15px !important; border: 1px solid #ddd !important; border-radius: 4px !important; background: #f4f4f4 !important; font-size: 16px; }
        .ag-btn-main { padding: 10px 20px; background: #1A4548; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
        #ag-tag-select { display: none !important; } /* Drodown hidden here */
        .ag-grid-wrapper { display: grid !important; gap: 8px !important; grid-template-columns: repeat(' . $cols . ', minmax(0, 1fr)) !important; }
        .ag-grid-item { position: relative !important; overflow: hidden; border-radius: 4px; background: #eee; cursor: pointer !important; aspect-ratio: 1/1 !important; }
        .ag-grid-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 0; transition: opacity 0.3s; }
        .ag-grid-item img.loaded { opacity: 1; }
        #ag-lb { display: none; position: fixed !important; z-index: 2147483647; left: 0; top: 0; width: 100%; height: 100%; background: #000; color: #fff; flex-direction: column; }
        #ag-lb-head { height: 50px; background: #111; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #333; }
        #ag-lb-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        #ag-lb-img { max-height: 90%; max-width: 90%; object-fit: contain; opacity: 0; transition: opacity 0.4s; }
        #ag-lb-img.is-visible { opacity: 1; }
        #ag-lb-foot { width: 100%; padding: 25px; background: #0a0a0a; border-top: 1px solid #222; overflow-y: auto !important; max-height: 140px; flex-shrink: 0; }
        .ag-lb-inner { max-width: 900px; margin: 0 auto; text-align: left; }
        .ag-lb-title { font-size: 26px; font-weight: bold; color: #1A4548 !important; line-height: 1.2; }
        .ag-lb-cap { font-size: 18px; color: #FFF !important; font-style: italic; margin: 10px 0; display: block; }
        .ag-pagination { text-align: center; margin: 30px 0; }
        .ag-page-btn { padding: 8px 14px; margin: 0 4px; background: #f4f4f4; border: 1px solid #ddd; cursor: pointer; border-radius: 4px; color: #1A4548; }
        .ag-page-btn.active { background: #1A4548 !important; color: #fff !important; }

        /* Conditional Visibility Styles */
        ' . ($a['search'] === 'off' ? '.ag-filter-suite { display: none !important; }' : '') . '
        ' . ($a['index'] === 'off' ? '.ag-letter-group { display: none !important; } #ag-js-tag-index { display: none !important; }' : '') . '
        ' . ($a['title'] === 'off' ? '#ag-gallery-title { display: none !important; }' : '') . '

        @media (max-width: 800px) {
            .ag-grid-wrapper { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
        }

        @media (max-width: 600px) {
            .ag-grid-wrapper { 
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
                gap: 4px !important; 
            }
            .ag-grid-item { border-radius: 2px !important; }
            #ag-gallery-title { font-size: 18px !important; }
            .ag-filter-suite { flex-direction: column; gap: 8px; }
            #ag-search-input { width: 100% !important; }
        }
    </style>';

    $output .= '<div class="ag-gallery-master-wrap">
                    <h2 id="ag-gallery-title">Archive: ' . esc_html($initial_name) . ' <span id="ag-header-count" class="ag-count-sub"></span></h2>
                    <form class="ag-filter-suite" onsubmit="return false;">
                        <input type="search" id="ag-search-input" placeholder="Search archive...">
                        <button type="button" id="ag-search-btn" class="ag-btn-main">Search</button>
                        <select id="ag-tag-select"><option value=""></option></select>
                        <button type="button" id="ag-clear-btn" class="ag-btn-main" style="display:none; background:#fff; color:#888; border:1px solid #ddd;">Clear Filters</button>
                    </form>
                    <div id="ag-js-grid" class="ag-grid-wrapper"></div>
                    <div id="ag-js-pagination" class="ag-pagination"></div>
                    <div id="ag-js-tag-index"></div>
                </div>';

    $output .= '<div id="ag-lb">
        <div id="ag-lb-head"><div id="ag-lb-count" style="color:#888;"></div><span id="ag-lb-close" style="font-size:40px; cursor:pointer;">&times;</span></div>
        <div id="ag-lb-main"><img id="ag-lb-img" src=""><div id="ag-lb-prev" style="position:absolute;left:0;font-size:50px;cursor:pointer;padding:40px;opacity:0.3;">&#10094;</div><div id="ag-lb-next" style="position:absolute;right:0;font-size:50px;cursor:pointer;padding:40px;opacity:0.3;">&#10095;</div></div>
        <div id="ag-lb-foot"><div class="ag-lb-inner"><div id="ag-lb-title" class="ag-lb-title"></div><div id="ag-lb-caption" class="ag-lb-cap"></div><div id="ag-lb-desc"></div><div id="ag-lb-tax" class="ag-lb-tax" style="margin-top:30px; border-top:1px solid #222; padding-top:20px;"></div><a id="ag-lb-full" href="#" target="_blank" style="display:inline-block; margin-top:25px; font-size:12px; color:#fff; background:#1A4548; padding:8px 16px; border-radius:4px; text-decoration:none; font-weight:bold; text-transform:uppercase;">View Full Size Image</a></div></div>
    </div>';

    $output .= '<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        const items = ' . json_encode($gallery_data) . ';
        const baseTitle = "' . esc_js($initial_name) . '", per = ' . $per_page . ', homeUrl = "' . get_home_url() . '";
        let filtered = [], lbIdx = 0;

        const grid = document.getElementById("ag-js-grid"), select = document.getElementById("ag-tag-select");
        const sInput = document.getElementById("ag-search-input"), lb = document.getElementById("ag-lb"), lbImg = document.getElementById("ag-lb-img");

        function updateLb() {
            let d = items[filtered[lbIdx]]; 
            lbImg.classList.remove("is-visible");
            let img = new Image(); img.src = d.url; 
            img.onload = () => { lbImg.src = d.url; lbImg.classList.add("is-visible"); };
            document.querySelector(".ag-lb-title").textContent = d.title;
            document.querySelector(".ag-lb-cap").textContent = d.cap;
            document.getElementById("ag-lb-desc").innerHTML = d.desc;
            document.getElementById("ag-lb-tax").innerHTML = d.tax;
            document.getElementById("ag-lb-full").href = d.url;
            document.getElementById("ag-lb-count").textContent = (lbIdx + 1) + " / " + filtered.length;
            document.getElementById("ag-lb-foot").scrollTop = 0;
        }

        function renderGrid(p) {
            grid.innerHTML = "";
            let start = (p - 1) * per, end = Math.min(start + per, filtered.length);
            for (let i = start; i < end; i++) {
                let d = items[filtered[i]], div = document.createElement("div");
                div.className = "ag-grid-item";
                div.innerHTML = `<img src="${d.thumb}" loading="lazy" onload="this.classList.add(\'loaded\')">`;
                div.onclick = () => { lbIdx = i; updateLb(); lb.style.display = "flex"; document.body.style.overflow = "hidden"; };
                grid.appendChild(div);
            }
            renderPagination(p);
        }

        function doSearch(val, isInitial) {
            if(val && val !== "dropdown") { sInput.value = val; select.value = ""; }
            let sV = sInput.value.toLowerCase(), tV = select.value;
            filtered = [];
            items.forEach((item, i) => { 
                let match = false;
                if (tV) match = item.tags.includes(tV);
                else if (sV) match = item.search_blob.indexOf(sV) !== -1;
                else if (isInitial) match = item.tags.some(t => t.toLowerCase() === baseTitle.toLowerCase());
                else match = true;
                if (match) filtered.push(i);
            });

            let resTag = tV || (isInitial ? baseTitle : "");
            let resLink = resTag ? ` <a href="${homeUrl}/tag/${resTag.toLowerCase().replace(/\s+/g, "-")}" target="_blank" style="font-size:14px; font-weight:normal; text-decoration:underline; color:#1A4548; margin-left:10px;">Learn more about ${resTag}</a>` : "";
            let head = document.getElementById("ag-gallery-title");
            
            if (sV && tV) head.innerHTML = `Found ${filtered.length} for "${sInput.value}" in "${tV}" <span id="ag-header-count"></span>`;
            else if (tV) head.innerHTML = `Topic: ${tV} <span id="ag-header-count"></span>`;
            else if (sV) head.innerHTML = `Results for: "${sInput.value}" (${filtered.length} found) <span id="ag-header-count"></span>`;
            else head.innerHTML = `Archive: ${baseTitle} <span id="ag-header-count"></span>`;

            document.getElementById("ag-header-count").innerHTML = `(Displaying ${filtered.length === 0 ? 0 : 1}–${Math.min(per, filtered.length)} of ${filtered.length})${resLink}`;
            
            document.getElementById("ag-clear-btn").style.display = (sV || tV) ? "inline-block" : "none";
            renderGrid(1);
        }

        document.addEventListener("click", e => {
            if (e.target.classList.contains("ag-tax-click")) {
                lb.style.display = "none"; document.body.style.overflow = "auto";
                doSearch(e.target.getAttribute("data-term"));
            }
        });

        let sX = 0, eX = 0;
        lb.addEventListener("touchstart", e => sX = e.changedTouches[0].screenX, {passive: true});
        lb.addEventListener("touchend", e => { eX = e.changedTouches[0].screenX; if(Math.abs(eX - sX) > 50) { if(eX < sX) lbIdx = (lbIdx + 1) % filtered.length; else lbIdx = (lbIdx - 1 + filtered.length) % filtered.length; updateLb(); } }, {passive: true});
        document.addEventListener("keydown", e => { if (lb.style.display === "flex") { if (e.key === "ArrowRight") { lbIdx = (lbIdx + 1) % filtered.length; updateLb(); } if (e.key === "ArrowLeft") { lbIdx = (lbIdx - 1 + filtered.length) % filtered.length; updateLb(); } if (e.key === "Escape") { lb.style.display = "none"; document.body.style.overflow = "auto"; } } });

        function renderPagination(c) {
            const div = document.getElementById("ag-js-pagination"); div.innerHTML = "";
            let tot = Math.ceil(filtered.length / per); if (tot <= 1) return;
            for (let i=1; i<=tot; i++) {
                if (i==1 || i==tot || (i>=c-2 && i<=c+2)) {
                    let b = document.createElement("button"); b.className = "ag-page-btn" + (i==c?" active":""); b.textContent = i;
                    b.onclick = () => { window.scrollTo(0, grid.offsetTop - 120); renderGrid(i); };
                    div.appendChild(b);
                }
            }
        }

        document.getElementById("ag-lb-close").onclick = () => { lb.style.display = "none"; document.body.style.overflow = "auto"; };
        document.getElementById("ag-lb-next").onclick = () => { lbIdx = (lbIdx + 1) % filtered.length; updateLb(); };
        document.getElementById("ag-lb-prev").onclick = () => { lbIdx = (lbIdx - 1 + filtered.length) % filtered.length; updateLb(); };
        document.getElementById("ag-search-btn").onclick = () => doSearch();
        document.getElementById("ag-search-input").onkeydown = (e) => { if(e.key === "Enter") { e.preventDefault(); doSearch(); } };
        select.onchange = () => doSearch("dropdown");
        document.getElementById("ag-clear-btn").onclick = () => { sInput.value = ""; select.value = ""; doSearch(); };

        const tagIndex = document.getElementById("ag-js-tag-index");
        let tagCounts = {}; items.forEach(item => item.tags.forEach(t => tagCounts[t] = (tagCounts[t] || 0) + 1));
        const sortedTags = Object.keys(tagCounts).sort();

        let groups = {};
        sortedTags.forEach(t => {
            let letter = t.charAt(0).toUpperCase();
            if (!groups[letter]) groups[letter] = [];
            groups[letter].push(t);
        });

        Object.keys(groups).sort().forEach(letter => {
            let wrap = document.createElement("div"); wrap.className = "ag-letter-group";
            let head = document.createElement("div"); head.className = "ag-letter-head"; head.textContent = letter; wrap.appendChild(head);
            let p = document.createElement("p"); p.style.lineHeight = "2.4";
            groups[letter].forEach((t, i) => {
                let opt = document.createElement("option"); opt.value = t; opt.textContent = t + " (" + tagCounts[t] + ")"; select.appendChild(opt);
                let a = document.createElement("a"); a.textContent = t; a.style.cssText = "cursor:pointer; font-size:15px;";
                a.onclick = () => { sInput.value = ""; select.value = t; window.scrollTo(0, grid.offsetTop - 120); doSearch("dropdown"); };
                p.appendChild(a);
                if (i < groups[letter].length - 1) p.appendChild(document.createTextNode(" • "));
            });
            wrap.appendChild(p);
            if(tagIndex) tagIndex.appendChild(wrap);
        });

        doSearch(undefined, true);
    });
    </script>';

    return $output;
});