@php
    $charts = $myChartsModal['charts'] ?? [];
    $relationships = $myChartsModal['relationships'] ?? [];
    $duals = $myChartsModal['duals'] ?? [];
    $hasAny = !empty($charts) || !empty($relationships) || !empty($duals);
    $totalCount = count($charts) + count($relationships) + count($duals);
@endphp

<div class="modal fade" id="myChartsModal" tabindex="-1" aria-labelledby="myChartsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myChartsModalLabel">
                    <i class="fa-solid fa-bookmark me-2"></i>{{ t('my-maps') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('close') }}"></button>
            </div>
            <div class="modal-body">
                @if (!$hasAny)
                    <div class="alert alert-light border mb-0">
                        <div class="fw-bold">{{ t('no-maps-yet') }}</div>
                        <div class="text-muted small">{{ t('create-first-map-with-new-chart') }}</div>
                    </div>
                @else
                    <div class="mb-3">
                        <div class="input-group input-group-sm mb-2">
                            <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
                            <input
                                type="text"
                                class="form-control"
                                data-role="mycharts-search"
                                placeholder="{{ t('search-placeholder') }}"
                            >
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-sm btn-success" data-role="mycharts-filter" data-filter="all">
                                {{ t('all') }}
                                <span class="badge bg-light text-dark ms-1">{{ $totalCount }}</span>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-success" data-role="mycharts-filter" data-filter="chart">
                                <i class="fa-solid fa-circle-nodes me-1"></i>Düzenle
                                <span class="badge text-bg-light ms-1">{{ count($charts) }}</span>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" data-role="mycharts-filter" data-filter="rel">
                                <i class="fa-solid fa-people-arrows me-1"></i>{{ t('relationship-map') }}
                                <span class="badge text-bg-light ms-1">{{ count($relationships) }}</span>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary" data-role="mycharts-filter" data-filter="dual">
                                <i class="fa-solid fa-people-group me-1"></i>{{ t('multiple-maps') }}
                                <span class="badge text-bg-light ms-1">{{ count($duals) }}</span>
                            </button>
                        </div>
                    </div>

                    <div class="mb-3" data-role="mycharts-group" data-type="chart">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="mb-0 fw-semibold">
                                <i class="fa-solid fa-circle-nodes me-1 text-success"></i>Düzenle
                            </h6>
                            <span class="badge bg-success-subtle text-success">{{ count($charts) }}</span>
                        </div>
                        <div class="list-group">
                            @forelse ($charts as $chart)
                                @php
                                    $chartSearch = strtolower(trim(($chart['title'] ?? '') . ' ' . ($chart['city'] ?? '') . ' ' . ($chart['date'] ?? '') . ' ' . ($chart['time'] ?? '')));
                                @endphp
                                <a
                                    href="{{ $chart['url'] }}"
                                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
                                    data-role="mycharts-item"
                                    data-type="chart"
                                    data-search="{{ $chartSearch }}"
                                    data-gender="{{ $chart['gender'] ?? '' }}"
                                    data-time-display="{{ $chart['time'] ?? '' }}"
                                    data-time-unknown="{{ !empty($chart['is_time_unknown']) ? '1' : '0' }}"
                                >
                                    <div class="me-3">
                                        <div class="fw-semibold">{{ \App\Helpers\UserHelper::decodeTitleForDisplay($chart['title'] ?? '') }}</div>
                                        <div class="small text-muted">
                                            {{ $chart['date'] ?? '' }} • {{ $chart['time'] ?? '' }} • {{ $chart['city'] ?? '' }}
                                        </div>
                                    </div>
                                    <span class="badge text-bg-light">{{ $chart['house_label'] ?? '' }}</span>
                                </a>
                            @empty
                                <div class="alert alert-light border mb-0">
                                    <div class="fw-bold">{{ t('no-maps-yet') }}</div>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <div class="mb-3" data-role="mycharts-group" data-type="rel">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="mb-0 fw-semibold">
                                <i class="fa-solid fa-people-arrows me-1 text-danger"></i>{{ t('relationship-maps') }}
                            </h6>
                            <span class="badge bg-danger-subtle text-danger">{{ count($relationships) }}</span>
                        </div>
                        <div class="list-group">
                            @forelse ($relationships as $rel)
                                @php
                                    $relSearch = strtolower(trim(($rel['title'] ?? '') . ' ' . ($rel['a_title'] ?? '') . ' ' . ($rel['b_title'] ?? '')));
                                @endphp
                                <a
                                    href="{{ $rel['url'] }}"
                                    class="list-group-item list-group-item-action"
                                    data-role="mycharts-item"
                                    data-type="rel"
                                    data-search="{{ $relSearch }}"
                                >
                                    <div class="fw-semibold">{{ \App\Helpers\UserHelper::decodeTitleForDisplay($rel['title'] ?? '') }}</div>
                                    <div class="small text-muted">
                                        {{ \App\Helpers\UserHelper::decodeTitleForDisplay($rel['a_title'] ?? '') }}
                                        •
                                        {{ \App\Helpers\UserHelper::decodeTitleForDisplay($rel['b_title'] ?? '') }}
                                    </div>
                                </a>
                            @empty
                                <div class="alert alert-light border mb-0">
                                    <div class="fw-bold">{{ t('no-relationship-maps-yet') }}</div>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <div data-role="mycharts-group" data-type="dual">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="mb-0 fw-semibold">
                                <i class="fa-solid fa-people-group me-1 text-primary"></i>{{ t('multiple-maps') }}
                            </h6>
                            <span class="badge bg-primary-subtle text-primary">{{ count($duals) }}</span>
                        </div>
                        <div class="list-group">
                            @forelse ($duals as $dual)
                                @php
                                    // ✅ ÇOKLU HARİTA: 3. ve 4. kişi (varsa) isim listesine ve
                                    // aramaya dahil edilir.
                                    $dualNames = array_values(array_filter([
                                        $dual['a_title'] ?? null,
                                        $dual['b_title'] ?? null,
                                        $dual['c_title'] ?? null,
                                        $dual['d_title'] ?? null,
                                    ]));
                                    $dualSearch = strtolower(trim(($dual['title'] ?? '') . ' ' . implode(' ', $dualNames)));
                                @endphp
                                <a
                                    href="{{ $dual['url'] }}"
                                    class="list-group-item list-group-item-action"
                                    data-role="mycharts-item"
                                    data-type="dual"
                                    data-search="{{ $dualSearch }}"
                                >
                                    <div class="fw-semibold">{{ \App\Helpers\UserHelper::decodeTitleForDisplay($dual['title'] ?? '') }}</div>
                                    <div class="small text-muted">
                                        {{ implode(' • ', array_map(fn($n) => \App\Helpers\UserHelper::decodeTitleForDisplay($n), $dualNames)) }}
                                    </div>
                                </a>
                            @empty
                                <div class="alert alert-light border mb-0">
                                    <div class="fw-bold">{{ t('no-dual-maps-yet') }}</div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                @endif
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('close') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
    function initMyChartsModal() {
        const root = document.getElementById('myChartsModal');
        if (!root || root.dataset.filterInit === '1') {
            return;
        }
        root.dataset.filterInit = '1';

        const searchInput = root.querySelector('[data-role="mycharts-search"]');
        const filterButtons = Array.from(root.querySelectorAll('[data-role="mycharts-filter"]'));
        const items = Array.from(root.querySelectorAll('[data-role="mycharts-item"]'));
        const groups = Array.from(root.querySelectorAll('[data-role="mycharts-group"]'));
        let activeFilter = 'all';
        let softSwitchInFlight = false;

        const isPairViewMode = () => !!(window.IS_RELATIONSHIP_VIEW || window.IS_DUAL_VIEW);

        const collectVisibleBaseChartKeys = () => {
            const rawKeys = new Set();
            if (window.activeKey) rawKeys.add(String(window.activeKey));

            document.querySelectorAll('#leftList .thumb-item, #rightList .thumb-item').forEach((el) => {
                if (el && el.dataset && el.dataset.key) {
                    rawKeys.add(String(el.dataset.key));
                }
            });

            const loadables = window.PANEL_LOADABLE_TYPES || {};
            const result = [];

            rawKeys.forEach((raw) => {
                const key = String(raw || '').trim();
                if (!key) return;
                if (key.startsWith('pair_')) return;

                const base = key.replace(/_transit$/, '');
                if (base.startsWith('combo_')) return;

                if (loadables[base] || (window.CHARTS && window.CHARTS[base])) {
                    if (!result.includes(base)) {
                        result.push(base);
                    }
                }
            });

            if (!result.length) {
                result.push('natal');
            }

            return result;
        };

        const setItemsDisabled = (disabled) => {
            items.forEach((item) => {
                item.classList.toggle('disabled', !!disabled);
                item.setAttribute('aria-disabled', disabled ? 'true' : 'false');
            });
        };

        const setModalItemLoadingState = (item, loading) => {
            if (!item) return;

            const titleNode = item.querySelector('.fw-semibold');
            const metaNode = item.querySelector('.small.text-muted');

            if (loading) {
                item.dataset.loading = '1';
                item.classList.add('disabled');

                if (titleNode) {
                    if (!item.dataset.originalTitle) {
                        item.dataset.originalTitle = titleNode.textContent || '';
                    }
                    titleNode.innerHTML = '<span class="spinner-border spinner-border-sm me-2 align-middle" role="status" aria-hidden="true"></span><span class="align-middle">Yükleniyor...</span>';
                }

                if (metaNode) {
                    if (!item.dataset.originalMeta) {
                        item.dataset.originalMeta = metaNode.textContent || '';
                    }
                    metaNode.textContent = 'Seçilen harita hazırlanıyor';
                }

                return;
            }

            item.dataset.loading = '0';
            item.classList.remove('disabled');

            if (titleNode && typeof item.dataset.originalTitle === 'string') {
                titleNode.textContent = item.dataset.originalTitle;
            }
            if (metaNode && typeof item.dataset.originalMeta === 'string') {
                metaNode.textContent = item.dataset.originalMeta;
            }
        };

        const applyChartFormFromUrl = (chartForm, targetUrl) => {
            if (!chartForm) return;

            const ensureHiddenInput = (name) => {
                let input = chartForm.querySelector(`[name="${name}"]`);
                if (input) return input;

                input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                chartForm.appendChild(input);
                return input;
            };

            const setFormValue = (name, value, createIfMissing = false) => {
                if (value == null || value === '') return;
                const input = createIfMissing
                    ? ensureHiddenInput(name)
                    : chartForm.querySelector(`[name="${name}"]`);
                if (input) {
                    input.value = value;
                }
            };

            ['date', 'time', 'lat', 'lon', 'title', 'ayanamsa', 'sidereal_dasha', 'harmonic']
                .forEach((name) => setFormValue(name, targetUrl.searchParams.get(name)));

            ['city', 'country_code', 'timezone', 'is_time_unknown']
                .forEach((name) => setFormValue(name, targetUrl.searchParams.get(name), true));

            // ✅ target_date/target_time/sr_year: panelQuery() (bkz. UserChart::panelQuery())
            // kayıtlı harita linklerinde bu üçünü HİÇ göndermez — bu yüzden burada eskiden
            // kalma bir değere ("başka bir kişi için seçilmiş Solar Return/Secondary
            // Progression/Profection yılı") asla takılı kalınmamalı, aksi halde başka bir
            // kişinin haritasına geçilince bu haritalar hâlâ önceki kişi için seçilmiş yılda
            // çizilmeye devam eder. URL'de yoksa bugüne/şimdiki yıla resetle.
            const nowForReset = new Date();
            const todayYmd = `${nowForReset.getFullYear()}-${String(nowForReset.getMonth() + 1).padStart(2, '0')}-${String(nowForReset.getDate()).padStart(2, '0')}`;
            const nowHm = `${String(nowForReset.getHours()).padStart(2, '0')}:${String(nowForReset.getMinutes()).padStart(2, '0')}`;
            setFormValue('target_date', targetUrl.searchParams.get('target_date') || todayYmd, true);
            setFormValue('target_time', targetUrl.searchParams.get('target_time') || nowHm, true);
            const resetSrYear = targetUrl.searchParams.get('sr_year') || String(nowForReset.getFullYear());
            setFormValue('sr_year', resetSrYear, true);

            // Drawer'daki "Yıl" dropdown'unun görünen değerini de senkronla (bkz.
            // all-chart-modal.js progressionYearSelectDrawer) — aksi halde form alanı
            // doğru sıfırlanır ama dropdown eski kişinin seçtiği yılı göstermeye devam eder.
            const progressionYearDrawerSelectEl = document.getElementById('progressionYearSelectDrawer');
            if (progressionYearDrawerSelectEl) {
                progressionYearDrawerSelectEl.value = resetSrYear;
            }

            const houseSystem = targetUrl.searchParams.get('house_system');
            if (houseSystem) {
                const hsMain = document.getElementById('houseSystemSelect');
                const hsDrawer = document.getElementById('houseSystemSelectDrawer');
                if (hsMain) hsMain.value = houseSystem;
                if (hsDrawer) hsDrawer.value = houseSystem;
            }
        };

        const formatDateForMeta = (value) => {
            const raw = String(value || '').trim();
            if (!raw) return '-';

            const match = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
            if (!match) return raw;
            return `${match[3]}-${match[2]}-${match[1]}`;
        };

        const normalizeTimeForMeta = (value, isUnknown, explicitDisplay) => {
            const explicit = String(explicitDisplay || '').trim();
            if (explicit) return explicit;
            if (String(isUnknown || '') === '1') return 'Bilinmiyor';

            const raw = String(value || '').trim();
            if (!raw) return '-';

            const match = raw.match(/^(\d{2}:\d{2})/);
            return match ? match[1] : raw;
        };

        const updateSingleMetaCardFromUrl = (targetUrl, selectedItem) => {
            // İlişki / çoklu görünümde meta kart farklı; burada yalnızca tekli görünümü güncelleriz.
            if (isPairViewMode()) return;

            const chartMeta = document.getElementById('chartMeta');
            if (!chartMeta) return;

            const ownerNameEl = chartMeta.querySelector('[data-meta-owner-name]');
            const ownerDateEl = chartMeta.querySelector('[data-meta-owner-date]');
            const ownerTimeEl = chartMeta.querySelector('[data-meta-owner-time]');
            const ownerCityEl = chartMeta.querySelector('[data-meta-owner-city]');
            const ownerDotEl = chartMeta.querySelector('.meta-card .rounded-circle');

            const selectedGender = selectedItem ? String(selectedItem.dataset.gender || '').toLowerCase().trim() : '';
            const selectedTimeDisplay = selectedItem ? String(selectedItem.dataset.timeDisplay || '').trim() : '';
            const selectedTimeUnknown = selectedItem ? String(selectedItem.dataset.timeUnknown || '') : '';

            const ownerName = targetUrl.searchParams.get('title') || 'Kişi';
            const ownerDate = formatDateForMeta(targetUrl.searchParams.get('date'));
            const ownerTime = normalizeTimeForMeta(
                targetUrl.searchParams.get('time'),
                selectedTimeUnknown || targetUrl.searchParams.get('is_time_unknown'),
                selectedTimeDisplay
            );
            const ownerCity = targetUrl.searchParams.get('city') || '';

            let dotColor = null;
            if (selectedGender === 'male') dotColor = '#3b82f6';
            if (selectedGender === 'female') dotColor = '#ec4899';

            if (ownerNameEl) ownerNameEl.textContent = ownerName;
            if (ownerDateEl) ownerDateEl.textContent = ownerDate;
            if (ownerTimeEl) ownerTimeEl.textContent = ownerTime;
            if (ownerCityEl) ownerCityEl.textContent = ownerCity;
            if (ownerDotEl && dotColor) ownerDotEl.style.background = dotColor;
        };

        const applyPanelLoadingShimmer = () => {
            const skeletonBuilder = typeof window.buildChartSkeletonSvg === 'function'
                ? window.buildChartSkeletonSvg
                : null;

            if (skeletonBuilder) {
                const mainSvg = document.getElementById('mainSvg');
                if (mainSvg) {
                    mainSvg.innerHTML = skeletonBuilder();
                }

                document.querySelectorAll('#leftList .thumb-item .thumb-svg, #rightList .thumb-item .thumb-svg').forEach((el) => {
                    el.innerHTML = skeletonBuilder();
                });
            }

            if (typeof window.setRightTabsLoadingState === 'function') {
                window.setRightTabsLoadingState();
            }

            document.body.classList.add('panel-soft-switch-loading');
        };

        const clearPanelLoadingShimmer = () => {
            document.body.classList.remove('panel-soft-switch-loading');
        };

        const closeMyChartsModal = () => {
            if (!window.bootstrap || !window.bootstrap.Modal) return;
            const modal = window.bootstrap.Modal.getInstance(root) || window.bootstrap.Modal.getOrCreateInstance(root);
            modal.hide();
        };

        const softSwitchToChartUrl = async (href, selectedItem) => {
            const chartForm = document.getElementById('chartForm');
            const wasPairView = isPairViewMode();
            const canSoftSwitch = chartForm
                && !!window.LOAD_CHART_LAZY_URL
                && typeof window.setActive === 'function'
                && (!wasPairView || typeof window.switchPanelToSingleView === 'function');

            const targetUrl = new URL(href, window.location.origin);

            if (!canSoftSwitch) {
                console.error('MyCharts soft switch unavailable: required APIs are missing.');
                alert('Harita geçişi şu anda tamamlanamıyor. Lütfen tekrar deneyin.');
                return false;
            }

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

            // ✅ PERFORMANS: Birden fazla chart tipi TEK istekte (chart_types[]) çekilir.
            // Eskiden her tip için ayrı bir istek atılıyordu; backend her istekte panelin
            // tüm varsayılan chart setini sıfırdan hesaplıyordu (sadece istenen tek anahtar
            // döndürülüyordu), bu da "Haritalarım"'dan harita yüklemeyi N kat yavaşlatıyordu.
            const loadChartPayloadBatch = async (chartTypes) => {
                const formData = new FormData(chartForm);
                formData.delete('chart_type');
                chartTypes.forEach((chartType) => formData.append('chart_types[]', chartType));
                formData.set('_token', csrfToken);

                if (typeof appendChartStyleToFormData === 'function') {
                    appendChartStyleToFormData(formData);
                }

                const response = await fetch(window.LOAD_CHART_LAZY_URL, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });

                const data = await response.json();
                if (!data || !data.ok || !data.charts) {
                    throw new Error((data && data.message) || 'Harita verisi yüklenemedi.');
                }

                return data.charts;
            };

            applyPanelLoadingShimmer();
            // ✅ Bu her zaman TEKLİ bir haritaya geçiş — önceki ilişki/çoklu harita
            // görünümünden kalmış rel_*/rel2_*/rel3_*/dual_* alanları temizlenmeli, yoksa
            // backend isteği hâlâ ilişki context'i sanıp 'natal' anahtarını döndürmez.
            window.clearPanelFormPairFields?.(chartForm);
            applyChartFormFromUrl(chartForm, targetUrl);
            window.__suppressPanelLayoutAutosave = true;

            // ✅ Kayıtlı haritanın URL'sinde main_chart varsa (örn. uranyen olarak
            // kaydedilmiş tekil harita) açılışta o harita tipi aktif edilir.
            const savedMainKey = (targetUrl.searchParams.get('main_chart') || '').replace(/_transit$/, '');

            try {
                if (wasPairView) {
                    // İlişki/çoklu görünümden tekli görünüme dönüş: ekrandaki mini kartlar
                    // ilişki/çoklu chart key'leri taşıdığından mevcut merge mantığı kullanılamaz.
                    // chartPayload()'ın (IndexController) tekli görünüm için hesapladığı sabit
                    // varsayılan seti baştan çekip switchPanelToSingleView() ile panel sıfırdan
                    // kurulur (relationship-modal/dual-chart-modal'daki pair-mode geçişin aynısı,
                    // ters yönde).
                    const defaultSingleTypes = ['natal', 'solar_arc_biwheel', 'solar_return', 'draconic', 'secondary_progression_naibod'];
                    if (savedMainKey && !defaultSingleTypes.includes(savedMainKey)) {
                        defaultSingleTypes.push(savedMainKey);
                    }
                    const builtCharts = await loadChartPayloadBatch(defaultSingleTypes);
                    if (!builtCharts.natal) {
                        throw new Error('Harita verisi eksik geldi.');
                    }

                    const switched = window.switchPanelToSingleView(builtCharts, {
                        title: targetUrl.searchParams.get('title') || '',
                        date: targetUrl.searchParams.get('date') || '',
                        time: targetUrl.searchParams.get('time') || '',
                        isTimeUnknown: targetUrl.searchParams.get('is_time_unknown') === '1'
                            || String(selectedItem?.dataset?.timeUnknown || '') === '1',
                        city: targetUrl.searchParams.get('city') || '',
                        houseSystemCode: targetUrl.searchParams.get('house_system') || 'P',
                    });
                    if (!switched) {
                        throw new Error('Harita verisi eksik geldi.');
                    }

                    // ✅ Uranyen (veya başka tip) olarak kaydedilmiş harita: tekli görünüm
                    // kurulduktan sonra kayıtlı tipe geç.
                    if (savedMainKey && savedMainKey !== 'natal'
                        && window.CHARTS && window.CHARTS[savedMainKey]
                        && typeof window.setActive === 'function') {
                        window.setActive(savedMainKey);
                    }
                } else {
                    const activeBefore = (window.activeKey && String(window.activeKey).trim()) || 'natal';
                    const refreshKeys = collectVisibleBaseChartKeys();
                    const clickedMainKey = savedMainKey || 'natal';
                    if (!refreshKeys.includes(clickedMainKey)) {
                        refreshKeys.unshift(clickedMainKey);
                    }

                    const incomingCharts = await loadChartPayloadBatch(refreshKeys);
                    Object.keys(incomingCharts).forEach((chartKey) => {
                        const incoming = incomingCharts[chartKey] || {};

                        if (!window.CHARTS[chartKey]) {
                            window.CHARTS[chartKey] = incoming;
                            return;
                        }

                        window.CHARTS[chartKey].title = incoming.title || window.CHARTS[chartKey].title;
                        window.CHARTS[chartKey].svg = incoming.svg || window.CHARTS[chartKey].svg;
                        window.CHARTS[chartKey].tabs = incoming.tabs || window.CHARTS[chartKey].tabs;
                        // ✅ AI Asistan'ın okuduğu alanlar (data/visual) da güncellenmezse,
                        // ekranda yeni harita görünse bile AI önceki haritanın verisiyle
                        // konuşmaya devam eder ("yanlış harita verisi" bug'ı).
                        window.CHARTS[chartKey].data = incoming.data || window.CHARTS[chartKey].data;
                        window.CHARTS[chartKey].visual = incoming.visual || window.CHARTS[chartKey].visual;
                        window.CHARTS[chartKey].lazySvg = false;
                    });

                    document.querySelectorAll('#leftList .thumb-item, #rightList .thumb-item').forEach((thumb) => {
                        const thumbKey = thumb.dataset.key;
                        if (!thumbKey || !window.CHARTS[thumbKey]) return;

                        if (typeof renderThumb === 'function') {
                            renderThumb(thumb, thumbKey);
                            return;
                        }

                        const badge = thumb.querySelector('.chart-badge');
                        if (badge) {
                            badge.textContent = window.CHARTS[thumbKey].title || thumbKey;
                        }
                    });

                    // ✅ Kayıtlı harita tipi (main_chart) öncelikli — yoksa mevcut görünüm korunur.
                    if (savedMainKey && savedMainKey !== 'natal' && window.CHARTS && window.CHARTS[savedMainKey]) {
                        window.setActive(savedMainKey);
                    } else if (window.CHARTS && window.CHARTS[activeBefore]) {
                        window.setActive(activeBefore);
                    } else if (window.CHARTS && window.CHARTS.natal) {
                        window.setActive('natal');
                    }

                    updateSingleMetaCardFromUrl(targetUrl, selectedItem);
                }

                // ✅ Bu zaten KAYITLI bir harita — önceki "Yeni Harita Aç" önizlemesinden
                // kalmış olabilecek "Kaydet" CTA'sını gizle (kaydedilecek yeni bir şey yok).
                window.hideSaveActions?.();

                window.history.replaceState(null, '', targetUrl.toString());
                closeMyChartsModal();
                return true;
            } catch (error) {
                console.error('MyCharts soft switch error:', error);
                const defaultError = (window.I18N && window.I18N.ERROR_CHART_LOAD) || 'Harita yüklenemedi.';
                alert(defaultError);
                return false;
            } finally {
                window.__suppressPanelLayoutAutosave = false;
                clearPanelLoadingShimmer();
            }
        };

        // İlişki/çoklu harita kaydını (Haritalarım'dan) yükler — hangi moddan geliniyorsa
        // gelinsin (tekli, ilişki, çoklu) çalışır, çünkü switchPanelToPairView() paneli her
        // durumda sıfırdan doğru şekilde kuruyor. relationship-modal.blade.php /
        // dual-chart-modal.blade.php'deki "yeni ilişki/çoklu harita" akışıyla aynı backend
        // endpoint'ini (RELATIONSHIP_CHART_LAZY_URL) ve aynı switchPanelToPairView()
        // fonksiyonunu kullanır. Bu zaten kayıtlı bir harita olduğu için kaydet FORMLARINI
        // senkronlamıyoruz (yeni bir kayıt oluşturulmayacak) — ama "Kaydet" BUTONUNU
        // (önceki önizlemeden görünür kalmış olabilir) yine de hideSaveActions() ile gizliyoruz.
        const softSwitchToPairChartUrl = async (href) => {
            const chartForm = document.getElementById('chartForm');
            const canSoftSwitch = chartForm
                && !!window.RELATIONSHIP_CHART_LAZY_URL
                && typeof window.switchPanelToPairView === 'function';

            const targetUrl = new URL(href, window.location.origin);

            if (!canSoftSwitch) {
                console.error('MyCharts pair soft switch unavailable: required APIs are missing.');
                alert('Harita geçişi şu anda tamamlanamıyor. Lütfen tekrar deneyin.');
                return false;
            }

            applyPanelLoadingShimmer();
            window.__suppressPanelLayoutAutosave = true;
            window.__suppressNextLayoutSavedToast = true;

            try {
                // ✅ Önce eski ilişki/çoklu harita alanlarını (örn. bir önceki 4 kişilik
                // haritadan kalmış rel2_*/rel3_*) temizle, sonra sadece bu kaydın URL'sindeki
                // alanları set et. Aksi halde eski C/D (veya farklı bir A/B) verisi kalabilir.
                window.clearPanelFormPairFields?.(chartForm);
                targetUrl.searchParams.forEach((value, key) => {
                    let input = chartForm.querySelector(`[name="${key}"]`);
                    if (!input) {
                        input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = key;
                        chartForm.appendChild(input);
                    }
                    input.value = value;
                });

                const formData = new FormData(chartForm);
                const response = await fetch(window.RELATIONSHIP_CHART_LAZY_URL, {
                    method: 'POST',
                    body: formData,
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                });
                const data = await response.json().catch(() => null);
                if (!response.ok || !data || !data.ok || !data.charts) {
                    throw new Error((data && data.message) || 'Harita verisi yüklenemedi.');
                }

                const switched = window.switchPanelToPairView(data.charts, {
                    relationshipA: data.relationshipA,
                    relationshipB: data.relationshipB,
                    relationshipC: data.relationshipC,
                    relationshipD: data.relationshipD,
                    houseSystemCode: targetUrl.searchParams.get('house_system') || 'P',
                    // ✅ Kayıtlı uranyen ilişki haritası: backend default_key'i
                    // rel_chart_layout'a göre 'uranian_synastry' döner — panel
                    // dial görünümüyle açılsın.
                    defaultKey: data.default_key,
                });
                if (!switched) {
                    throw new Error('Harita verisi eksik geldi.');
                }

                // ✅ Bu zaten KAYITLI bir harita — önceki "Yeni Harita Aç"/"İlişki Haritası"
                // önizlemesinden kalmış olabilecek "Kaydet" CTA'sını gizle.
                window.hideSaveActions?.();

                window.history.replaceState(null, '', targetUrl.toString());
                closeMyChartsModal();
                return true;
            } catch (error) {
                console.error('MyCharts pair soft switch error:', error);
                const defaultError = (window.I18N && window.I18N.ERROR_CHART_LOAD) || 'Harita yüklenemedi.';
                alert(defaultError);
                return false;
            } finally {
                window.__suppressPanelLayoutAutosave = false;
                clearPanelLoadingShimmer();
            }
        };

        const applyFilters = () => {
            const term = (searchInput?.value || '').toLowerCase().trim();

            items.forEach((item) => {
                const type = item.dataset.type || 'chart';
                const search = item.dataset.search || '';
                const matchType = activeFilter === 'all' || type === activeFilter;
                const matchSearch = term === '' || search.includes(term);
                item.style.display = matchType && matchSearch ? '' : 'none';
            });

            groups.forEach((group) => {
                const visibleItems = group.querySelectorAll('[data-role="mycharts-item"]:not([style*="display: none"])').length;
                group.style.display = visibleItems > 0 ? '' : 'none';
            });
        };

        searchInput?.addEventListener('input', applyFilters);

        filterButtons.forEach((button) => {
            button.addEventListener('click', () => {
                activeFilter = button.dataset.filter || 'all';

                filterButtons.forEach((btn) => {
                    if (btn.dataset.filter === 'all') {
                        btn.classList.remove('btn-success');
                        btn.classList.add('btn-outline-success');
                    }
                    btn.classList.remove('active');
                });

                button.classList.add('active');
                if (button.dataset.filter === 'all') {
                    button.classList.remove('btn-outline-success');
                    button.classList.add('btn-success');
                }

                applyFilters();
            });
        });

        root.addEventListener('shown.bs.modal', applyFilters);

        items.forEach((item) => {
            item.addEventListener('click', async (event) => {
                const href = item.getAttribute('href');
                const type = item.dataset.type || 'chart';
                const isPairType = type === 'rel' || type === 'dual';

                if (!href) return;

                if (isPairType) {
                    // İlişki/çoklu harita kaydı: hangi moddan geliniyorsa gelinsin
                    // (tekli, ilişki, çoklu) switchPanelToPairView() ile AJAX dener.
                    if (!window.RELATIONSHIP_CHART_LAZY_URL || typeof window.switchPanelToPairView !== 'function') {
                        return;
                    }
                } else {
                    // Tekli harita: hangi moddan geliniyorsa gelinsin (tekli, ilişki, çoklu)
                    // AJAX dener — softSwitchToChartUrl() ilişki/çoklu görünümden geliniyorsa
                    // switchPanelToSingleView() ile paneli sıfırdan tekli görünüme kurar.
                    // Gerekli API'ler yoksa softSwitchToChartUrl kendi içinde güvenli şekilde
                    // uyarı gösterip false döner.
                    if (isPairViewMode() && !window.LOAD_CHART_LAZY_URL) return;
                }

                // Yeni sekme / sistem davranışlarını bozma.
                if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
                    return;
                }

                event.preventDefault();
                if (softSwitchInFlight) return;

                softSwitchInFlight = true;
                setItemsDisabled(true);
                setModalItemLoadingState(item, true);
                const loadingStartedAt = Date.now();

                try {
                    if (isPairType) {
                        await softSwitchToPairChartUrl(href);
                    } else {
                        await softSwitchToChartUrl(href, item);
                    }
                } finally {
                    const minVisibleLoadingMs = 450;
                    const elapsed = Date.now() - loadingStartedAt;
                    if (elapsed < minVisibleLoadingMs) {
                        await new Promise((resolve) => setTimeout(resolve, minVisibleLoadingMs - elapsed));
                    }

                    setModalItemLoadingState(item, false);
                    setItemsDisabled(false);
                    softSwitchInFlight = false;
                }
            });
        });

        applyFilters();
    }

    window.initMyChartsModal = initMyChartsModal;
    document.addEventListener('DOMContentLoaded', initMyChartsModal);

    // ✅ Yeni harita kaydedildikten sonra sayfa yenilemeden modal içeriğini tazeler
    // (bkz. chart-save.blade.php). Modal o an açıksa dokunmuyoruz — DOM'u modal
    // gösterilirken değiştirmek Bootstrap'in modal instance takibini bozabilir.
    window.refreshMyChartsModal = async function refreshMyChartsModal() {
        const existingRoot = document.getElementById('myChartsModal');
        if (!existingRoot || existingRoot.classList.contains('show')) {
            return;
        }

        try {
            const response = await fetch('{{ route('panel.mycharts_modal') }}', {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin',
            });
            if (!response.ok) return;

            const html = await response.text();
            const template = document.createElement('template');
            template.innerHTML = html;
            const newRoot = template.content.querySelector('#myChartsModal');
            if (!newRoot) return;

            existingRoot.replaceWith(newRoot);
            initMyChartsModal();
        } catch (error) {
            console.error('Haritalarım modalı tazelenemedi:', error);
        }
    };
</script>