/**
 * ArticleBankSection.js — بانک آرتیکل (فاز ۲)
 * هر آرتیکل = یک جفتِ بدهکار/بستانکارِ معنادار و قابلِ استفادهٔ مجدد.
 * امکانات: مرور/جستجو/فیلتر، CRUD، و استخراجِ خودکار از template‌های فعال.
 */

import SectionBase from "../SectionBase.js";
const BaseView = SectionBase;

const _fmt = v => new Intl.NumberFormat("fa-IR").format(Number(v || 0));

export default class ArticleBankSection extends BaseView {

    static title = "";

    constructor(props = {}) {
        super(props);
        this.api       = props.api;
        this._articles = [];
        this._accounts = [];
        this._search   = "";
        this._category = "";
    }

    async template() {
        return `
            <div class="event-toolbar">
                <button class="acc-btn acc-btn--primary acc-btn--sm" data-ref="addBtn">+ آرتیکل جدید</button>
                <button class="acc-btn acc-btn--secondary acc-btn--sm" data-ref="extractBtn"
                        title="ساختِ آرتیکل از روی template‌های فعال">⚡ استخراج از template‌ها</button>
                <input class="event-type-filter" data-ref="searchInput" type="text"
                       placeholder="جستجوی آرتیکل..." style="min-width:200px;">
                <select class="event-type-filter" data-ref="catFilter" style="min-width:160px;">
                    <option value="">همه دسته‌ها</option>
                </select>
                <span class="acc-count" data-ref="count" style="font-size:12px;color:#94a3b8;margin-right:auto;"></span>
            </div>

            <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;
                        margin-bottom:14px;font-size:12px;color:#1e40af;line-height:1.7;">
                <strong>📌 بانک آرتیکل:</strong> هر آرتیکل یک جفتِ بدهکار→بستانکار است که در یک ردیف ثبت می‌شود
                (توازنِ ساختاری). آرتیکل‌های معتبر اینجا تعریف می‌شوند تا در template‌ها و اسناد استفادهٔ مجدد شوند.
            </div>

            <div class="article-grid" data-ref="grid"></div>
        `;
    }

    async afterRender() {
        this.on(this.ref("addBtn"),     "click", () => this._openForm(null));
        this.on(this.ref("extractBtn"), "click", () => this._extract());
        this.on(this.ref("searchInput"), "input", e => { this._search = e.target.value.trim().toLowerCase(); this._render(); });
        this.on(this.ref("catFilter"),   "change", e => { this._category = e.target.value; this._render(); });
        await this._loadAll();
    }

    async _loadAll() {
        const grid = this.ref("grid");
        grid.innerHTML = `<div class="acc-loading"><div class="acc-spinner"></div>در حال بارگذاری...</div>`;
        try {
            const [artRes, accRes] = await Promise.all([
                this.api.get("/accounting/articles"),
                this.api.get("/accounting/accounts", { flat: 1 }),
            ]);
            this._articles = artRes?.data ?? [];
            this._accounts = accRes?.data ?? [];
            this._fillCategoryFilter();
            this._render();
        } catch (e) {
            grid.innerHTML = `<div class="acc-error">خطا در دریافت آرتیکل‌ها: ${this.escape(e?.message ?? "")}</div>`;
        }
    }

    _fillCategoryFilter() {
        const sel = this.ref("catFilter");
        if (!sel) return;
        const cats = [...new Set(this._articles.map(a => a.category).filter(Boolean))].sort();
        sel.innerHTML = `<option value="">همه دسته‌ها</option>` +
            cats.map(c => `<option value="${this.escape(c)}" ${c === this._category ? "selected" : ""}>${this.escape(c)}</option>`).join("");
    }

    _accName(id) {
        const a = this._accounts.find(x => String(x.id) === String(id));
        return a ? `${a.code} — ${a.name}` : `#${id}`;
    }

    _render() {
        const grid = this.ref("grid");
        if (!grid) return;

        let items = this._articles;
        if (this._category) items = items.filter(a => a.category === this._category);
        if (this._search) items = items.filter(a =>
            (a.label || "").toLowerCase().includes(this._search) ||
            (a.code || "").toLowerCase().includes(this._search));

        const cnt = this.ref("count");
        if (cnt) cnt.textContent = `${_fmt(items.length)} آرتیکل`;

        if (!items.length) {
            grid.innerHTML = `<div class="acc-empty">آرتیکلی یافت نشد. «استخراج از template‌ها» یا «آرتیکل جدید» را بزنید.</div>`;
            return;
        }

        grid.innerHTML = items.map(a => this._cardHtml(a)).join("");

        grid.querySelectorAll("[data-action='edit']").forEach(btn => {
            btn.addEventListener("click", () => {
                const a = this._articles.find(x => String(x.id) === String(btn.dataset.id));
                if (a) this._openForm(a);
            });
        });
        grid.querySelectorAll("[data-action='delete']").forEach(btn => {
            btn.addEventListener("click", () => {
                const a = this._articles.find(x => String(x.id) === String(btn.dataset.id));
                if (a) this._delete(a);
            });
        });
    }

    _cardHtml(a) {
        const dr = a.dr_code ? `${this.escape(a.dr_code)} ${this.escape(a.dr_name || "")}` : this._accName(a.dr_account_id);
        const cr = a.cr_code ? `${this.escape(a.cr_code)} ${this.escape(a.cr_name || "")}` : this._accName(a.cr_account_id);
        const used = Number(a.usage_count || 0);
        return `
            <div class="article-card">
                <div class="article-card__head">
                    <span class="article-card__code">${this.escape(a.code || "")}</span>
                    ${a.category ? `<span class="article-card__cat">${this.escape(a.category)}</span>` : ""}
                    <span class="article-card__usage" title="در چند template استفاده شده">${used ? `★ ${_fmt(used)}` : "بدون استفاده"}</span>
                </div>
                <div class="article-card__label">${this.escape(a.label || "")}</div>
                <div class="article-card__flow">
                    <span class="flow-direction__from">${dr}</span>
                    <span class="article-card__arrow">→</span>
                    <span class="flow-direction__to">${cr}</span>
                </div>
                <div class="article-card__foot">
                    <span class="article-card__src">[${this.escape(a.amount_source || "amount")}]</span>
                    <span style="display:flex;gap:6px;">
                        <button class="acc-btn acc-btn--secondary acc-btn--sm" data-action="edit" data-id="${a.id}">ویرایش</button>
                        <button class="acc-btn acc-btn--danger acc-btn--sm" data-action="delete" data-id="${a.id}">حذف</button>
                    </span>
                </div>
            </div>`;
    }

    /* ---------- Extract ---------- */

    async _extract() {
        const btn = this.ref("extractBtn");
        btn.disabled = true; btn.textContent = "⏳ در حال استخراج...";
        try {
            const res = await this.api.post("/accounting/articles/extract", {});
            const c = res?.created ?? 0, s = res?.skipped ?? 0;
            this._toast(`✅ ${_fmt(c)} آرتیکلِ جدید ساخته شد (${_fmt(s)} تکراری رد شد)`);
            await this._loadAll();
        } catch (e) {
            alert("خطا در استخراج: " + (e?.message ?? ""));
        } finally {
            btn.disabled = false; btn.textContent = "⚡ استخراج از template‌ها";
        }
    }

    /* ---------- Form ---------- */

    _openForm(article = null) {
        const isEdit = !!article;
        const accOpts = (sel) => this._accounts.map(a =>
            `<option value="${a.id}" ${String(sel) === String(a.id) ? "selected" : ""}>${this.escape(a.code + " — " + a.name)}</option>`
        ).join("");

        const overlay = document.createElement("div");
        overlay.className = "acc-modal-overlay";
        overlay.innerHTML = `
            <div class="acc-modal" style="max-width:560px;">
                <button class="acc-modal__close" type="button">✕</button>
                <div class="acc-modal__title">${isEdit ? "ویرایش آرتیکل" : "آرتیکل جدید"}</div>
                <form id="art-form">
                    <div class="acc-form-group">
                        <label>برچسب معنایی *</label>
                        <input name="label" value="${this.escape(article?.label ?? "")}" placeholder="مثال: شناسایی درآمد فروش" required>
                    </div>
                    <div class="doc-form-row">
                        <div class="acc-form-group">
                            <label>حساب بدهکار (DR) *</label>
                            <select name="dr_account_id" required><option value="">— انتخاب —</option>${accOpts(article?.dr_account_id)}</select>
                        </div>
                        <div class="acc-form-group">
                            <label>حساب بستانکار (CR) *</label>
                            <select name="cr_account_id" required><option value="">— انتخاب —</option>${accOpts(article?.cr_account_id)}</select>
                        </div>
                    </div>
                    <div class="doc-form-row">
                        <div class="acc-form-group">
                            <label>فیلدِ مبلغ (source_field)</label>
                            <input name="amount_source" value="${this.escape(article?.amount_source ?? "amount")}" placeholder="amount">
                        </div>
                        <div class="acc-form-group">
                            <label>دسته‌بندی</label>
                            <input name="category" value="${this.escape(article?.category ?? "")}" placeholder="مثال: SALES_INVOICE">
                        </div>
                    </div>
                    <div class="acc-form-group">
                        <label>توضیحات</label>
                        <input name="description" value="${this.escape(article?.description ?? "")}">
                    </div>
                    <div class="acc-modal__actions">
                        <button type="button" class="acc-btn acc-btn--secondary" data-action="cancel">انصراف</button>
                        <button type="submit" class="acc-btn acc-btn--primary" id="art-submit">${isEdit ? "ذخیره" : "ایجاد"}</button>
                    </div>
                </form>
            </div>`;

        document.body.appendChild(overlay);
        const close = () => overlay.remove();
        overlay.querySelector(".acc-modal__close").addEventListener("click", close);
        overlay.querySelector("[data-action='cancel']").addEventListener("click", close);
        overlay.addEventListener("click", e => { if (e.target === overlay) close(); });

        overlay.querySelector("#art-form").addEventListener("submit", async e => {
            e.preventDefault();
            const fd = new FormData(e.target);
            const body = {
                label:         (fd.get("label") || "").trim(),
                dr_account_id: Number(fd.get("dr_account_id")) || 0,
                cr_account_id: Number(fd.get("cr_account_id")) || 0,
                amount_source: (fd.get("amount_source") || "amount").trim(),
                category:      (fd.get("category") || "").trim(),
                description:   (fd.get("description") || "").trim(),
            };
            if (!body.label || !body.dr_account_id || !body.cr_account_id) {
                alert("برچسب، حساب بدهکار و بستانکار الزامی‌اند."); return;
            }
            if (body.dr_account_id === body.cr_account_id) {
                alert("حساب بدهکار و بستانکار نباید یکی باشند."); return;
            }
            const btn = overlay.querySelector("#art-submit");
            btn.disabled = true; btn.textContent = "در حال ذخیره...";
            try {
                if (isEdit) await this.api.put(`/accounting/articles/${article.id}`, body);
                else        await this.api.post("/accounting/articles", body);
                close();
                await this._loadAll();
            } catch (err) {
                btn.disabled = false; btn.textContent = isEdit ? "ذخیره" : "ایجاد";
                alert("خطا: " + (err?.message ?? ""));
            }
        });
    }

    async _delete(a) {
        if (!confirm(`حذف آرتیکل «${a.label}»؟`)) return;
        try {
            await this.api.delete(`/accounting/articles/${a.id}`);
            await this._loadAll();
        } catch (e) {
            alert("خطا در حذف: " + (e?.message ?? ""));
        }
    }

    /* ---------- Toast ---------- */
    _toast(msg) {
        const t = document.createElement("div");
        t.style.cssText = "position:fixed;bottom:24px;right:24px;background:#059669;color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.15);";
        t.textContent = msg;
        document.body.appendChild(t);
        setTimeout(() => t.remove(), 3200);
    }
}
