/**
 * CartModal.js — سبد خرید + فرم پرداخت
 * استفاده: new CartModal(api).open()
 */
import { cart } from "./CartService.js";

const fmt = v => v ? new Intl.NumberFormat("fa-IR").format(Math.round(+v)) + " تومان" : "رایگان";
const esc = s  => String(s ?? "").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");

export default class CartModal {
    constructor(api) {
        this._api  = api;
        this._step = "cart"; // cart | checkout | paying | result
        this._overlay = null;
    }

    open() {
        if (this._overlay) { this._overlay.remove(); }
        this._overlay = document.createElement("div");
        this._overlay.className = "acc-cart-overlay";
        this._overlay.dir = "rtl";
        document.body.appendChild(this._overlay);
        this._render();
        this._overlay.addEventListener("click", e => {
            if (e.target === this._overlay) this.close();
        });
    }

    close() {
        this._overlay?.remove();
        this._overlay = null;
    }

    /* ══════════════════════════════════════════════
       رندر اصلی
    ══════════════════════════════════════════════ */
    _render() {
        if (!this._overlay) return;
        this._overlay.innerHTML = `<div class="acc-cart-modal">${this._body()}</div>`;
        this._bindEvents();
    }

    _body() {
        if (this._step === "cart")     return this._cartView();
        if (this._step === "checkout") return this._checkoutView();
        if (this._step === "paying")   return this._payingView();
        if (this._step === "result")   return this._resultView();
        return "";
    }

    /* ── سبد خرید ────────────────────────────── */
    _cartView() {
        const items = cart.items;
        const rows  = items.length ? items.map(i => `
        <div class="acc-cart-row" data-id="${i.id}">
            <div class="acc-cart-thumb">
                ${i.image ? `<img src="${esc(i.image)}" alt="">` : `<span>📦</span>`}
            </div>
            <div class="acc-cart-row-info">
                <div class="acc-cart-row-name">${esc(i.name)}</div>
                <div class="acc-cart-row-price">${fmt(i.price)}</div>
            </div>
            <div class="acc-cart-qty-wrap">
                <button class="acc-qty-btn" data-action="dec" data-id="${i.id}">−</button>
                <span class="acc-qty-num">${i.qty}</span>
                <button class="acc-qty-btn" data-action="inc" data-id="${i.id}">+</button>
            </div>
            <div class="acc-cart-row-total">${fmt(i.price * i.qty)}</div>
            <button class="acc-cart-remove" data-action="remove" data-id="${i.id}">✕</button>
        </div>`).join("") : `<div class="acc-cart-empty">🛒<br>سبد خرید خالی است</div>`;

        return `
        <div class="acc-cart-header">
            <h3>🛒 سبد خرید <span class="acc-cart-badge">${cart.count}</span></h3>
            <button class="acc-cart-close-btn" data-action="close">✕</button>
        </div>
        <div class="acc-cart-body">${rows}</div>
        ${items.length ? `
        <div class="acc-cart-footer">
            <div class="acc-cart-total-line">
                <span>جمع کل:</span>
                <strong class="acc-cart-grand">${fmt(cart.total)}</strong>
            </div>
            <button class="acc-btn acc-btn--primary acc-btn--full" data-action="checkout">
                تکمیل خرید ←
            </button>
        </div>` : ""}`;
    }

    /* ── فرم پرداخت ─────────────────────────── */
    _checkoutView() {
        return `
        <div class="acc-cart-header">
            <button class="acc-icon-btn" data-action="back-to-cart">→</button>
            <h3>📋 اطلاعات خریدار</h3>
            <button class="acc-cart-close-btn" data-action="close">✕</button>
        </div>
        <div class="acc-cart-body">
            <div class="acc-checkout-form">
                <div class="acc-form-group">
                    <label>نام و نام خانوادگی <span class="acc-req">*</span></label>
                    <input type="text" id="ck-name" class="acc-input" placeholder="علی محمدی" autocomplete="name">
                </div>
                <div class="acc-form-group">
                    <label>شماره موبایل <span class="acc-req">*</span></label>
                    <input type="tel" id="ck-phone" class="acc-input" placeholder="09123456789" dir="ltr" autocomplete="tel">
                </div>
                <div class="acc-form-group">
                    <label>ایمیل <small style="color:#94a3b8;">(اختیاری)</small></label>
                    <input type="email" id="ck-email" class="acc-input" placeholder="email@example.com" dir="ltr" autocomplete="email">
                </div>
                <div class="acc-form-group">
                    <label>آدرس تحویل <span class="acc-req">*</span></label>
                    <input type="text" id="ck-address" class="acc-input" placeholder="استان، شهر، خیابان، پلاک">
                </div>
                <div class="acc-form-row">
                    <div class="acc-form-group" style="flex:1">
                        <label>شهر <span class="acc-req">*</span></label>
                        <input type="text" id="ck-city" class="acc-input" placeholder="تهران">
                    </div>
                    <div class="acc-form-group" style="flex:1">
                        <label>کد پستی</label>
                        <input type="text" id="ck-postcode" class="acc-input" placeholder="1234567890" dir="ltr">
                    </div>
                </div>
                <div class="acc-form-group">
                    <label>توضیحات سفارش</label>
                    <textarea id="ck-note" class="acc-input" rows="2" placeholder="هر توضیحی برای ارسال..."></textarea>
                </div>
            </div>
        </div>
        <div class="acc-cart-footer">
            <div class="acc-cart-total-line">
                <span>مبلغ قابل پرداخت:</span>
                <strong class="acc-cart-grand">${fmt(cart.total)}</strong>
            </div>
            <div id="ck-error" class="acc-checkout-error" style="display:none;"></div>
            <button class="acc-btn acc-btn--primary acc-btn--full" data-action="pay" id="ck-pay-btn">
                💳 پرداخت از درگاه
            </button>
        </div>`;
    }

    /* ── در حال انتقال ──────────────────────── */
    _payingView() {
        return `
        <div class="acc-cart-header">
            <h3>💳 در حال اتصال به درگاه...</h3>
        </div>
        <div class="acc-cart-body" style="text-align:center;padding:40px 20px;">
            <div class="acc-cart-spinner"></div>
            <p style="margin-top:20px;color:#64748b;">لطفاً صبر کنید، در حال انتقال به درگاه پرداخت زرین‌پال هستید...</p>
        </div>`;
    }

    /* ── نتیجه ──────────────────────────────── */
    _resultView() {
        const { success, ref, msg } = this._resultData || {};
        return `
        <div class="acc-cart-header">
            <h3>${success ? "✅ پرداخت موفق" : "❌ پرداخت ناموفق"}</h3>
            <button class="acc-cart-close-btn" data-action="close">✕</button>
        </div>
        <div class="acc-cart-body" style="text-align:center;padding:40px 20px;">
            <div style="font-size:56px;margin-bottom:16px;">${success ? "🎉" : "😔"}</div>
            ${success
                ? `<p>سفارش شما با موفقیت ثبت شد.<br>کد پیگیری: <strong style="font-family:monospace;font-size:18px;color:#1d4ed8;">${esc(ref)}</strong></p>`
                : `<p style="color:#dc2626;">پرداخت انجام نشد.<br><small>${esc(msg || "لغو توسط کاربر")}</small></p>`}
        </div>
        <div class="acc-cart-footer">
            <button class="acc-btn acc-btn--${success?'primary':'secondary'} acc-btn--full" data-action="close">
                بستن
            </button>
        </div>`;
    }

    /* ══════════════════════════════════════════════
       Events
    ══════════════════════════════════════════════ */
    _bindEvents() {
        if (!this._overlay) return;
        const modal = this._overlay.querySelector(".acc-cart-modal");

        modal.addEventListener("click", e => {
            const btn = e.target.closest("[data-action]");
            if (!btn) return;
            const { action, id } = btn.dataset;

            if (action === "close")         { this.close(); return; }
            if (action === "back-to-cart")  { this._step = "cart"; this._render(); return; }
            if (action === "checkout")      { this._step = "checkout"; this._render(); return; }
            if (action === "pay")           { this._submitPayment(); return; }

            if (action === "inc")    { cart.setQty(+id, (cart.items.find(i=>i.id===+id)?.qty||0) + 1); this._render(); return; }
            if (action === "dec")    { const cur = cart.items.find(i=>i.id===+id)?.qty||0; cart.setQty(+id, cur - 1); this._render(); return; }
            if (action === "remove") { cart.remove(+id); this._render(); return; }
        });
    }

    async _submitPayment() {
        const get  = id => this._overlay?.querySelector(id)?.value?.trim() ?? "";
        const name    = get("#ck-name");
        const phone   = get("#ck-phone");
        const email   = get("#ck-email");
        const address = get("#ck-address");
        const city    = get("#ck-city");
        const note    = get("#ck-note");
        const errEl   = this._overlay?.querySelector("#ck-error");
        const payBtn  = this._overlay?.querySelector("#ck-pay-btn");

        const showErr = msg => {
            if (errEl) { errEl.textContent = msg; errEl.style.display = "block"; }
        };

        if (!name)    return showErr("نام الزامی است");
        if (!phone || !/^09\d{9}$/.test(phone)) return showErr("شماره موبایل صحیح وارد کنید (مثال: 09123456789)");
        if (!address) return showErr("آدرس الزامی است");
        if (!city)    return showErr("شهر الزامی است");

        if (payBtn) { payBtn.disabled = true; payBtn.textContent = "⏳ در حال ارسال..."; }

        try {
            const res = await this._api.post("public/orders/create", {
                items: cart.items.map(i => ({ id: i.id, qty: i.qty })),
                billing: { name, phone, email, address, city },
                note,
            });

            if (res?.data?.payment_url) {
                this._step = "paying";
                this._render();
                /* پاک کردن سبد قبل از redirect */
                cart.clear();
                setTimeout(() => { window.location.href = res.data.payment_url; }, 800);
            } else {
                showErr(res?.message || "خطا در ایجاد سفارش");
                if (payBtn) { payBtn.disabled = false; payBtn.textContent = "💳 پرداخت از درگاه"; }
            }
        } catch (e) {
            showErr(e.message || "خطای شبکه");
            if (payBtn) { payBtn.disabled = false; payBtn.textContent = "💳 پرداخت از درگاه"; }
        }
    }

    /* نمایش نتیجه بازگشت از درگاه */
    showResult(success, ref, msg) {
        this._resultData = { success, ref, msg };
        this._step = "result";
        if (!this._overlay) this.open();
        else this._render();
    }
}
