/* Obyektlərin siyahısı — main list with search, quick filters, stats. */
Vue.component('objects-view', {
    name: 'objects-view',
    mixins: [window.ListMixin],
    data: function () {
        return {
            search: '',
            statusFilter: '',
            statuses: window.MOCK.lookups.statuses,
            _t: null
        };
    },
    computed: {
        summary: function () {
            var s = { total: this.total, control: 0, debt: 0, overdue: 0 };
            this.items.forEach(function (o) {
                if (/gedir|istismar|tamamlanma/i.test(o.StatusName || '')) s.control++;  // aktiv tikinti
                if (o.DebtAmount > 0) s.debt++;
                if (o.DueDayDifference < 0) s.overdue++;
            });
            return s;
        }
    },
    created: function () { this.reload(); },
    methods: {
        fmt: function () { return window.fmt; },
        reload: function () {
            this.query = { search: this.search, status: this.statusFilter };
            this.fetchList('objects', true);
        },
        onSearch: function () {
            clearTimeout(this._t);
            var self = this;
            this._t = setTimeout(function () { self.reload(); }, 300);
        },
        setStatus: function (s) { this.statusFilter = this.statusFilter === s ? '' : s; this.reload(); }
    },
    template: `
    <div>
        <div class="searchbar u-mb">
            <i class="fa-solid fa-magnifying-glass"></i>
            <input v-model="search" @input="onSearch" placeholder="№, obyekt, sifarişçi, rayon...">
            <i v-if="search" class="fa-solid fa-circle-xmark cur-pointer" @click="search=''; reload()"></i>
        </div>

        <div class="stats">
            <div class="stat"><div class="stat__label"><i class="fa-light fa-buildings"></i>Cəmi</div><div class="stat__value">{{ summary.total }}</div></div>
            <div class="stat"><div class="stat__label"><i class="fa-light fa-person-digging"></i>Aktiv tikinti</div><div class="stat__value">{{ summary.control }}</div></div>
            <div class="stat"><div class="stat__label"><i class="fa-light fa-coins"></i>Borclu</div><div class="stat__value">{{ summary.debt }}</div></div>
            <div class="stat"><div class="stat__label"><i class="fa-light fa-clock"></i>Gecikən</div><div class="stat__value t-danger">{{ summary.overdue }}</div></div>
        </div>

        <div class="chips u-mb">
            <div class="chip" :class="{active: !statusFilter}" @click="setStatus('')"><i class="fa-solid fa-layer-group"></i>Hamısı</div>
            <div v-for="s in statuses" :key="s.id" class="chip" :class="{active: statusFilter===s.name}" @click="setStatus(s.name)">{{ s.name }}</div>
        </div>

        <ui-skeleton-list v-if="loading" :rows="6"></ui-skeleton-list>

        <ui-empty v-else-if="!items.length" title="Obyekt tapılmadı" hint="Axtarış və ya filtri dəyişin"
                  icon="fa-light fa-buildings"></ui-empty>

        <div v-else class="list list--grid">
            <div v-for="o in items" :key="o.Id" class="list-item" @click="$emit('open-object', o)">
                <div class="list-item__lead"><i class="fa-light fa-building"></i></div>
                <div class="list-item__main">
                    <div class="li-head li-head--pills">
                        <span class="pill pill--num">№ {{ o.Id }}</span>
                        <status-pill :text="o.StatusName" :tone="o.StatusTone" dot></status-pill>
                    </div>
                    <div class="list-item__title mt-6">{{ o.ObjectName }}</div>
                    <div class="list-item__meta">
                        <span><i class="fa-solid fa-user"></i>{{ o.CustomerName }}</span>
                        <span><i class="fa-solid fa-location-dot"></i>{{ o.DistrictName }} r.</span>
                        <span><i class="fa-solid fa-sitemap"></i>{{ o.DestinationName }}</span>
                    </div>
                    <div class="u-row u-wrap g-6 mt-8">
                        <span v-if="o.DebtAmount>0" class="pill pill--danger"><i class="fa-solid fa-coins"></i>Borc {{ fmt().money(o.DebtAmount) }}</span>
                        <span class="pill" :class="o.DueDayDifference<0 ? 'pill--danger' : ''">
                            <i class="fa-solid fa-clock"></i>{{ fmt().days(o.DueDayDifference) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <infinite-loader v-if="!loading" :has-more="hasMore" :loading="loadingMore" :loaded="items.length" :total="total" @load="fetchList('objects')"></infinite-loader>

        <button class="fab" @click="$emit('go','new')" aria-label="Yeni obyekt"><i class="fa-solid fa-plus"></i></button>
    </div>`
});
