/**
 * GisView.js — ماژول GIS ثمن
 * سه لایه: مناطق → محلات → پارسل‌ها
 */
import BaseView          from "../../core/BaseView.js";
import { viewRegistry }  from "../../core/registries.js";
import MapSection        from "./sections/MapSection.js";
import ParcelsSection    from "./sections/ParcelsSection.js";
import LayersSection     from "./sections/LayersSection.js";
import UniversalMapSection from "./sections/UniversalMapSection.js";

const SECTIONS = [
    { key: "map",      icon: "🗺️",  title: "نقشه",         Class: MapSection         },
    { key: "parcels",  icon: "📁",  title: "پرونده‌ها",      Class: ParcelsSection     },
    { key: "layers",   icon: "🏙️",  title: "لایه‌ها",        Class: LayersSection      },
    { key: "universal",icon: "🌐",  title: "نقشه عمومی",    Class: UniversalMapSection },
];

export default class GisView extends BaseView {
    static title = "🗺️ نقشه هوشمند";
    useContextBadge = false;

    constructor(props = {}) {
        super(props);
        this.api      = props.api;
        this._active  = "map";
        this._sections = {};
    }

    async template() {
        const tabs = SECTIONS.map(s => `
            <button class="gis-tab-btn ${s.key === this._active ? "gis-tab-btn--active" : ""}"
                    data-section="${s.key}">
                ${s.icon} ${s.title}
            </button>
        `).join("");

        const panels = SECTIONS.map(s => `
            <div class="acc-section ${s.key === this._active ? "acc-section--active" : ""}"
                 data-panel="${s.key}" data-ref="panel-${s.key}"></div>
        `).join("");

        return `
            <div class="gis-tab-nav" data-ref="navBar">${tabs}</div>
            <div>${panels}</div>
        `;
    }

    async afterRender() {
        this.ref("navBar").querySelectorAll(".gis-tab-btn").forEach(c =>
            this.on(c, "click", () => this._switch(c.dataset.section))
        );
        await this._mount(this._active);
        this._updateNavVisibility();
    }

    async _switch(key) {
        if (key === this._active) return;
        this.ref("navBar").querySelectorAll(".gis-tab-btn").forEach(c =>
            c.classList.toggle("gis-tab-btn--active", c.dataset.section === key)
        );
        this.container.querySelectorAll(".acc-section").forEach(p =>
            p.classList.toggle("acc-section--active", p.dataset.panel === key)
        );
        this._active = key;
        await this._mount(key);
        this._updateNavVisibility();
    }

    /** در MapSection navigation اصلی مخفی می‌شود چون داخل toolbar تکرار شده */
    _updateNavVisibility() {
        const nav = this.ref("navBar");
        if (nav) nav.style.display = this._active === 'map' ? 'none' : '';
    }

    async _mount(key) {
        if (this._sections[key]) return;
        const def   = SECTIONS.find(s => s.key === key);
        const panel = this.ref(`panel-${key}`);
        if (!def || !panel) return;
        const sec = new def.Class({
            eventBus: this.eventBus,
            store:    this.store,
            tab:      this.tab,
            api:      this.api,
            gisView:  this,
        });
        await sec.render(panel);
        this._sections[key] = sec;
    }

    destroy() {
        Object.values(this._sections).forEach(s => s?.destroy?.());
        super.destroy();
    }
}

viewRegistry.register("gis", GisView);
