/* Generic registry view for the cross-object sections:
   Mərhələlər, Sənədlər, Pozuntular, Texniki baxış, Tədbirlər, Ekspertiza, Lisenziyalar.
   Renders a searchable list; row layout is described per-kind in KINDS. */
Vue.component('registry-view', {
    props: { params: Object },
    mixins: [window.ListMixin],
    data: function () {
        return {
            search: '', _t: null,
            // Sahə adları real Inspector view sütunları ilə eynidir (js/data.js)
            KINDS: {
                stages: { icon: 'fa-timeline', lead: 'fa-timeline', title: 'StageName', status: null,
                    meta: [['fa-calendar', 'StageDate', 'date'], ['fa-note-sticky', 'Text']] },
                documents: { icon: 'fa-file-lines', lead: 'fa-file-lines', title: 'DocumentName', status: ['StatusName', 'StatusTone'],
                    meta: [['fa-note-sticky', 'Text'], ['fa-clock', 'UpdatedAt', 'date']] },
                violations: { icon: 'fa-triangle-exclamation', lead: 'fa-triangle-exclamation', danger: true, title: 'Text', status: ['StatusName', 'StatusTone'],
                    meta: [['fa-calendar', 'ViolationDate', 'date'], ['fa-hourglass-half', 'DueDate', 'date']] },
                inspections: { icon: 'fa-clipboard-check', lead: 'fa-clipboard-check', title: 'Title', status: ['ActiveStatusName', 'StatusTone'],
                    meta: [['fa-user-tie', 'EmployeeName'], ['fa-user-shield', 'InspectorTypeName'], ['fa-calendar', 'CreatedAt', 'date']] },
                measures: { icon: 'fa-gavel', lead: 'fa-gavel', warn: true, title: 'MeasureTypeName', status: null,
                    meta: [['fa-circle-info', 'ReasonName'], ['fa-hashtag', 'Number'], ['fa-calendar', 'MeasureDate', 'date'], ['fa-clock', 'DeadlineDate', 'date']] },
                expertise: { icon: 'fa-microscope', lead: 'fa-microscope', title: 'FolderName', status: ['StatusName', 'StatusTone'],
                    meta: [['fa-layer-group', 'StageNumber'], ['fa-calendar', 'FolderDate', 'date']] },
                licenses: { icon: 'fa-id-card-clip', lead: 'fa-id-card-clip', title: 'CompanyName', status: ['StatusName', 'StatusTone'],
                    meta: [['fa-id-card', 'LicenseNumber'], ['fa-building', 'TaxNumber']] }
            }
        };
    },
    computed: {
        kind: function () { return this.params.kind; },
        conf: function () { return this.KINDS[this.kind] || this.KINDS.stages; },
        leadClass: function () {
            if (this.conf.danger) return 'list-item__lead--danger';
            if (this.conf.warn) return 'list-item__lead--warning';
            return '';
        }
    },
    watch: { 'params.kind': function () { this.reload(); } },
    created: function () { this.reload(); },
    methods: {
        reload: function () { this.query = { search: this.search }; this.fetchList(this.kind, true); },
        onSearch: function () { clearTimeout(this._t); var s = this; this._t = setTimeout(function () { s.reload(); }, 300); },
        metaVal: function (row, m) {
            var v = row[m[1]];
            if (m[2] === 'date') return window.fmt.date(v);
            if (m[2] === 'money') return window.fmt.money(v);
            if (m[2] === 't') return (v || 0) + ' ' + m[3];
            return v || '—';
        },
        show: function (row, m) {
            if (m[2] === 't') return true;                 // counts always shown ("0 foto")
            var v = row[m[1]];
            return v != null && String(v).trim() !== '';   // hide empty meta (no "—" clutter)
        }
    },
    template: `
    <div>
        <div class="searchbar u-mb">
            <i class="fa-solid fa-magnifying-glass"></i>
            <input v-model="search" @input="onSearch" placeholder="Bütün obyektlər üzrə axtar...">
            <i v-if="search" class="fa-solid fa-circle-xmark cur-pointer" @click="search='';reload()"></i>
        </div>

        <div class="section-head"><h3><i class="fa-light" :class="conf.icon"></i> Reyestr</h3><span class="count">{{ total }} qeyd</span></div>

        <ui-skeleton-list v-if="loading" :rows="6"></ui-skeleton-list>
        <ui-empty v-else-if="!items.length" title="Qeyd tapılmadı" :icon="'fa-light '+conf.icon"></ui-empty>

        <div v-else class="list list--grid">
            <div v-for="(row,idx) in items" :key="idx" class="list-item" @click="row.ObjectId && $emit('open-object', {Id: row.ObjectId})">
                <div class="list-item__lead" :class="leadClass"><i class="fa-light" :class="conf.lead"></i></div>
                <div class="list-item__main">
                    <div class="li-head li-head--pills">
                        <span class="list-item__title">{{ row[conf.title] }}</span>
                        <status-pill v-if="conf.status && row[conf.status[0]]" :text="row[conf.status[0]]" :tone="row[conf.status[1]]"></status-pill>
                    </div>
                    <div class="list-item__meta">
                        <span v-if="row.ObjectId" class="pill pill--num fs-11"><i class="fa-solid fa-building"></i>№ {{ row.ObjectId }}</span>
                        <template v-for="(m,i) in conf.meta"><span v-if="show(row,m)" :key="i"><i class="fa-solid" :class="m[0]"></i>{{ metaVal(row,m) }}</span></template>
                    </div>
                </div>
                <i v-if="row.ObjectId" class="fa-solid fa-chevron-right list-item__chev"></i>
            </div>
        </div>

        <infinite-loader v-if="!loading" :has-more="hasMore" :loading="loadingMore" :loaded="items.length" :total="total" @load="fetchList(kind)"></infinite-loader>
    </div>`
});
