{{-- Custom Point Modal --}}
<div class="modal fade" id="customPointModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content comment-modal border-0" style="max-height: 90vh;">

            <div class="comment-modal__header">
                <div class="comment-modal__header-bg"></div>
                <div class="comment-modal__header-content">
                    <div class="comment-modal__icon-wrap">
                        <i class="fa-solid fa-wand-magic-sparkles"></i>
                    </div>
                    <div class="comment-modal__title-wrap">
                        <h5 class="comment-modal__title">{{ t('add-your-own-dot') }}</h5>
                        <p class="comment-modal__subtitle" id="customPointFormulaPreview">
                            {{ t('formula') }}: {{ t('personal-point') }} + {{ t('significator') }} - {{ t('trigger') }}
                        </p>
                    </div>
                </div>
                <button type="button" class="comment-modal__close" data-bs-dismiss="modal"
                    aria-label="{{ t('close') }}">
                    <i class="fa-solid fa-xmark"></i>
                </button>
                <div class="comment-modal__stars">
                    <span class="comment-modal__star" style="top:12%;left:18%;">✦</span>
                    <span class="comment-modal__star" style="top:60%;left:8%;">✦</span>
                    <span class="comment-modal__star" style="top:25%;right:22%;">✦</span>
                    <span class="comment-modal__star" style="top:65%;right:12%;">✦</span>
                </div>
            </div>

          
            <div class="comment-modal__body p-4 d-flex flex-column"
                style="background-color: #f8fafc; overflow-y: auto;">
                <div class="row g-3">
                    <div class="col-md-12">
                        <label class="form-label fw-semibold">{{ t('title') }}</label>
                        <input type="text" class="form-control" id="customPointName"
                            placeholder="{{ t('title') }}" required>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label fw-semibold">Tip</label>
                        <div class="btn-group w-100" role="group" id="customPointTypeGroup">
                            <input type="radio" class="btn-check" name="customPointType" id="customPointTypeClassic"
                                value="classic" autocomplete="off" checked>
                            <label class="btn btn-outline-secondary" for="customPointTypeClassic">
                                Klasik (A + B - C)
                            </label>
                            <input type="radio" class="btn-check" name="customPointType" id="customPointTypeMidpoint"
                                value="midpoint" autocomplete="off">
                            <label class="btn btn-outline-secondary" for="customPointTypeMidpoint">
                                Orta Nokta ((A + B) / 2)
                            </label>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">{{ t('personal-point') }}</label>
                        <select class="form-select" id="customPointPersPoint"></select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">{{ t('significator') }}</label>
                        <select class="form-select" id="customPointSignificator"></select>
                    </div>
                    <div class="col-md-4" id="customPointTriggerWrap">
                        <label class="form-label fw-semibold">{{ t('trigger') }}</label>
                        <select class="form-select" id="customPointTrigger"></select>
                    </div>

                </div>
            </div>

            <div class="modal-footer border-top-0 p-3 bg-white d-flex justify-content-between flex-shrink-0">
                <button type="button" class="btn btn-light text-danger fw-bold rounded-pill px-4"
                    id="btnClearFormula">
                    <i class="fa-solid fa-trash-can me-2"></i> {{ t('clean') }}
                </button>
                <button type="button" class="btn fw-bold rounded-pill px-5" id="btnSaveCustomPoint"
                    style="background-color: #439280; border-color: #439280; color: #fff;">
                    <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
                    <i class="fa-solid fa-flask me-2 cp-btn-icon"></i>
                    <span class="btn-label">{{ t('calculate') }}</span>
                </button>
            </div>
        </div>
    </div>
</div>

@php
    $customPointBaseKeys = [
        'Sun', 'Moon', 'Mercury', 'Venus', 'Mars', 'Jupiter', 'Saturn',
        'Uranus', 'Neptune', 'Pluto',
        'True Node', 'South Node', 'Chiron', 'Lilith',
        'Part of Fortune', 'Vertex',
        'ASC', 'MC', 'DSC', 'IC',
    ];
    $catalogForCustomPoints = app(\App\Services\Chart\PlanetCatalog::class);
    $customPointKeyLabels = [];
    foreach ($customPointBaseKeys as $k) {
        $customPointKeyLabels[$k] = $catalogForCustomPoints->resolveName($k);
    }
@endphp

<script>
    // Bootstrap bazen bu partial'dan sonra yüklendiği için
    // click handler'ı delegate ediyoruz (her zaman çalışsın).
    (function() {
        const CSRF = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const CUSTOM_POINTS_URL = "{{ route('panel.custom_points.store') }}";

        const KEY_LABELS = @json($customPointKeyLabels);
        const FORMULA_CLASSIC_TEXT = @json(t('formula') . ': ' . t('personal-point') . ' + ' . t('significator') . ' - ' . t('trigger'));
        const FORMULA_MIDPOINT_TEXT = @json(t('formula') . ': (' . t('personal-point') . ' + ' . t('significator') . ') / 2');

        const BASE_KEYS = [
            'Sun', 'Moon', 'Mercury', 'Venus', 'Mars', 'Jupiter', 'Saturn',
            'Uranus', 'Neptune', 'Pluto',
            'True Node', 'South Node', 'Chiron', 'Lilith',
            'Part of Fortune', 'Vertex',
            'ASC', 'MC', 'DSC', 'IC'
        ];

        function ensureBootstrapModal() {
            return (typeof bootstrap !== 'undefined') && bootstrap.Modal;
        }

        function getEls() {
            return {
                modalEl: document.getElementById('customPointModal'),
                selPers: document.getElementById('customPointPersPoint'),
                selSig: document.getElementById('customPointSignificator'),
                selTrig: document.getElementById('customPointTrigger'),
                triggerWrap: document.getElementById('customPointTriggerWrap'),
                typeRadios: document.querySelectorAll('input[name="customPointType"]'),
                previewEl: document.getElementById('customPointFormulaPreview'),
                nameInp: document.getElementById('customPointName'),
                btnClear: document.getElementById('btnClearFormula'),
                btnSave: document.getElementById('btnSaveCustomPoint'),
            };
        }

        let formula = [];
        let formulaType = 'classic';

        function fillKeys(sel) {
            if (!sel) return;
            sel.innerHTML = '';
            BASE_KEYS.forEach(k => {
                const opt = document.createElement('option');
                opt.value = k;
                opt.textContent = KEY_LABELS?.[k] || k;
                sel.appendChild(opt);
            });
        }

        function getSelectedType() {
            const checked = document.querySelector('input[name="customPointType"]:checked');
            return checked?.value === 'midpoint' ? 'midpoint' : 'classic';
        }

        function updateTypeUI(triggerWrap, previewEl) {
            formulaType = getSelectedType();
            if (triggerWrap) triggerWrap.classList.toggle('d-none', formulaType === 'midpoint');
            if (previewEl) {
                previewEl.textContent = formulaType === 'midpoint' ? FORMULA_MIDPOINT_TEXT : FORMULA_CLASSIC_TEXT;
            }
        }

        function buildFormulaFrom3(selPers, selSig, selTrig) {
            const ctx = 'natal';
            const pers = selPers?.value || 'Sun';
            const sig = selSig?.value || 'Moon';
            const trig = selTrig?.value || 'Mars';

            formula = formulaType === 'midpoint' ? [{
                    ctx,
                    key: pers,
                    op: '+'
                }, // A
                {
                    ctx,
                    key: sig,
                    op: '+'
                }, // + B, sonra /2
            ] : [{
                    ctx,
                    key: pers,
                    op: '+'
                }, // Pers.Point
                {
                    ctx,
                    key: sig,
                    op: '+'
                }, // + Significator
                {
                    ctx,
                    key: trig,
                    op: '-'
                }, // - Trigger
            ];
        }

        function setSaveBtnLoading(btnSave, loading) {
            if (!btnSave) return;
            const spinner = btnSave.querySelector('.spinner-border');
            const icon = btnSave.querySelector('.cp-btn-icon');
            const label = btnSave.querySelector('.btn-label');
            btnSave.disabled = loading;
            if (spinner) spinner.classList.toggle('d-none', !loading);
            if (icon) icon.classList.toggle('d-none', loading);
            if (label) label.textContent = loading ? 'Ekleniyor…' : '{{ t('calculate') }}';
        }

        async function save(nameInp, modalEl, btnSave) {
            const name = (nameInp?.value || '').trim();
            if (!name) return alert('Nokta adı gerekli.');
            const minTerms = formulaType === 'midpoint' ? 2 : 3;
            if (formula.length < minTerms) return alert('Formül gerekli.');

            const modalInst = modalEl ? (bootstrap.Modal.getInstance(modalEl) || bootstrap.Modal.getOrCreateInstance(modalEl)) : null;

            try {
                // ✅ Nokta haritaya tam eklenene kadar modal açık kalır,
                // buton spinner + "Ekleniyor…" gösterir.
                setSaveBtnLoading(btnSave, true);

                const payload = {
                    name,
                    formula_type: formulaType,
                    pers_point: formula[0]?.key || 'Sun',
                    significator: formula[1]?.key || 'Moon',
                    is_enabled: true
                };
                if (formulaType !== 'midpoint') {
                    payload.trigger = formula[2]?.key || 'Mars';
                }

                const res = await fetch(CUSTOM_POINTS_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': CSRF
                    },
                    body: JSON.stringify(payload)
                });
                const data = await res.json().catch(() => null);
                if (!data || !data.ok) {
                    const msg = data?.message || (data?.errors ? JSON.stringify(data.errors) :
                        'Kaydedilemedi.');
                    throw new Error(msg);
                }

                // ✅ Sayfayı yenilemeden: yeni noktayı doğru listeye ekle (anahtar önekine göre:
                // UOCP_ => Ortak Noktalar, diğerleri => Arap Noktaları) ve aktif haritayı yeniden çek.
                const item = data.item || {};
                if (item.key) {
                    const isCommon = item.key.startsWith('UOCP_');
                    if (isCommon && typeof window.registerCommonPoint === 'function') {
                        window.registerCommonPoint(item.key, item.name, {
                            checked: true
                        });
                    } else if (!isCommon && typeof window.registerExtraPoint === 'function') {
                        window.registerExtraPoint(item.key, item.name, {
                            checked: true
                        });
                    }
                }
                if (typeof window.forceRefreshActiveChartSvg === 'function') {
                    await window.forceRefreshActiveChartSvg();
                }

                // ✅ Nokta haritada göründükten sonra modal kapanır.
                modalInst?.hide();
            } catch (e) {
                alert(e.message || e);
            } finally {
                setSaveBtnLoading(btnSave, false);
            }
        }

        // Delegate click
        document.addEventListener('click', function(e) {
            const openBtn = e.target.closest('#openCustomPointModal');
            if (!openBtn) return;

            const {
                modalEl,
                selPers,
                selSig,
                selTrig,
                triggerWrap,
                typeRadios,
                previewEl,
                nameInp,
                btnClear,
                btnSave,
            } = getEls();

            if (!modalEl) return;
            if (!ensureBootstrapModal()) {
                alert('Bootstrap yüklenemedi. Sayfayı yenileyip tekrar deneyin.');
                return;
            }

            // ✅ Ekstra Noktalar modalını kapat (üst üste binmesin)
            const extraModalEl = document.getElementById('fixedStarsModal');
            if (extraModalEl) {
                const extraInst = bootstrap.Modal.getInstance(extraModalEl) || bootstrap.Modal
                    .getOrCreateInstance(extraModalEl);
                extraInst.hide();
            }

            // one-time bindings for internal buttons
            if (!modalEl.dataset.bound) {
                const rebuild = () => buildFormulaFrom3(selPers, selSig, selTrig);
                selPers?.addEventListener('change', rebuild);
                selSig?.addEventListener('change', rebuild);
                selTrig?.addEventListener('change', rebuild);
                typeRadios?.forEach(r => r.addEventListener('change', () => {
                    updateTypeUI(triggerWrap, previewEl);
                    rebuild();
                }));
                btnClear?.addEventListener('click', () => {
                    // default selections
                    if (selPers) selPers.value = 'Sun';
                    if (selSig) selSig.value = 'Moon';
                    if (selTrig) selTrig.value = 'Mars';
                    const classicRadio = document.getElementById('customPointTypeClassic');
                    if (classicRadio) classicRadio.checked = true;
                    updateTypeUI(triggerWrap, previewEl);
                    formula = [];
                    rebuild();
                });
                btnSave?.addEventListener('click', () => save(nameInp, modalEl, btnSave));
                modalEl.dataset.bound = '1';
            }

            fillKeys(selPers);
            fillKeys(selSig);
            fillKeys(selTrig);

            if (selPers) selPers.value = 'Sun';
            if (selSig) selSig.value = 'Moon';
            if (selTrig) selTrig.value = 'Mars';
            const classicRadio = document.getElementById('customPointTypeClassic');
            if (classicRadio) classicRadio.checked = true;
            updateTypeUI(triggerWrap, previewEl);
            if (nameInp) nameInp.value = '';
            buildFormulaFrom3(selPers, selSig, selTrig);

            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            // extra modal kapanma animasyonu bitince aç
            setTimeout(() => modal.show(), 200);
        });
    })();
</script>