/**
 * ProjectsManagerView.js — مدیریت پروژه‌های مشتری
 * مثل wp-admin/pages — ایجاد، ویرایش، فعال‌سازی
 */
import BaseView        from "../../core/BaseView.js";
import { viewRegistry } from "../../core/registries.js";

const TYPE_LABELS = {
    shop:        { label: '🛍️ فروشگاه',    color: '#6366f1' },
    realestate:  { label: '🏘️ املاک',       color: '#059669' },
    portal:      { label: '📰 پورتال',      color: '#d97706' },
    custom:      { label: '⚙️ سفارشی',     color: '#64748b' },
};
const STATUS_LABELS = {
    active:   { label: 'فعال',    color: '#22c55e' },
    draft:    { label: 'پیش‌نویس', color: '#94a3b8' },
    archived: { label: 'بایگانی', color: '#f87171' },
};

export default class ProjectsManagerView extends BaseView {

    static title = "📁 پروژه‌ها";
    useContextBadge = false;

    constructor(props = {}) {
        super(props);
        this.api      = props.api;
        this._rows    = [];
        this._pages   = []; // صفحات وردپرس
        this._filter  = { type: '', status: '' };
        this._editing = null; // شیء در حال ویرایش
    }

    async template() {
        return `
        <div class="pm-wrap" dir="rtl">
            <!-- هدر -->
            <div class="pm-header">
                <div class="pm-header-right">
                    <h2 class="pm-title">📁 مدیریت پروژه‌ها</h2>
                    <p class="pm-subtitle">هر پروژه یک سفارش سایت است. فعال‌سازی = اعمال تنظیمات روی سایت</p>
                </div>
                <button class="pm-btn pm-btn--primary" data-ref="newBtn">+ پروژه جدید</button>
            </div>

            <!-- فیلترها -->
            <div class="pm-filters">
                <select class="pm-select" data-ref="typeFilter">
                    <option value="">همه انواع</option>
                    <option value="shop">🛍️ فروشگاه</option>
                    <option value="realestate">🏘️ املاک</option>
                    <option value="portal">📰 پورتال</option>
                    <option value="custom">⚙️ سفارشی</option>
                </select>
                <select class="pm-select" data-ref="statusFilter">
                    <option value="">همه وضعیت‌ها</option>
                    <option value="active">فعال</option>
                    <option value="draft">پیش‌نویس</option>
                    <option value="archived">بایگانی</option>
                </select>
                <span class="pm-count" data-ref="countLbl"></span>
            </div>

            <!-- جدول -->
            <div class="pm-table-wrap" data-ref="tableWrap">
                <div class="pm-loading">⏳ بارگذاری...</div>
            </div>

            <!-- modal فرم -->
            <div class="pm-modal-overlay" data-ref="modal" style="display:none">
                <div class="pm-modal" data-ref="modalBody"></div>
            </div>
        </div>`;
    }

    async afterRender() {
        this._bindTopbar();
        await Promise.all([ this._load(), this._loadPages() ]);
    }

    /* ════════════════════════════════════════
       بارگذاری
    ════════════════════════════════════════ */
    async _load() {
        try {
            const res  = await this.api.get('projects', this._filter);
            this._rows = res?.data ?? [];
            this._renderTable();
        } catch (e) {
            const w = this.ref('tableWrap');
            if (w) w.innerHTML = `<div class="pm-error">❌ ${this.esc(e.message)}</div>`;
        }
    }

    async _loadPages() {
        try {
            const res   = await this.api.get('projects/pages');
            this._pages = res?.data ?? [];
        } catch {}
    }

    /* ════════════════════════════════════════
       رندر جدول
    ════════════════════════════════════════ */
    _renderTable() {
        const wrap  = this.ref('tableWrap');
        const count = this.ref('countLbl');
        if (!wrap) return;
        if (count) count.textContent = `${this._rows.length} پروژه`;

        if (!this._rows.length) {
            wrap.innerHTML = `
            <div class="pm-empty">
                <div style="font-size:56px">📁</div>
                <p>هنوز پروژه‌ای تعریف نشده</p>
                <button class="pm-btn pm-btn--primary" data-action="new">+ اولین پروژه را بسازید</button>
            </div>`;
            wrap.querySelector('[data-action="new"]')?.addEventListener('click', () => this._openForm(null));
            return;
        }

        wrap.innerHTML = `
        <table class="pm-table">
            <thead>
                <tr>
                    <th style="width:36px"></th>
                    <th>عنوان پروژه</th>
                    <th>نوع</th>
                    <th>شرکت / سایت</th>
                    <th>صفحه اول</th>
                    <th>وضعیت</th>
                    <th>تاریخ</th>
                    <th>عملیات</th>
                </tr>
            </thead>
            <tbody>
                ${this._rows.map(r => this._row(r)).join('')}
            </tbody>
        </table>`;

        /* bind کلیک‌ها */
        wrap.querySelectorAll('[data-action]').forEach(btn => {
            btn.addEventListener('click', e => {
                e.stopPropagation();
                const { action, id } = btn.dataset;
                const row = this._rows.find(r => r.id == id);
                if (action === 'edit')     this._openForm(row);
                if (action === 'activate') this._activate(row);
                if (action === 'delete')   this._delete(row);
            });
        });

        wrap.querySelectorAll('.pm-tr').forEach(tr => {
            tr.addEventListener('click', () => {
                const row = this._rows.find(r => r.id == tr.dataset.id);
                if (row) this._openForm(row);
            });
        });
    }

    _row(r) {
        const type    = TYPE_LABELS[r.type]   || { label: r.type,   color: '#64748b' };
        const status  = STATUS_LABELS[r.status] || { label: r.status, color: '#94a3b8' };
        const running = +r.is_running === 1;
        const date    = r.created_at ? new Date(r.created_at).toLocaleDateString('fa-IR') : '—';
        const logo    = r.company_logo
            ? `<img src="${this.esc(r.company_logo)}" class="pm-logo-thumb" alt="">`
            : `<span class="pm-logo-placeholder">${(r.company_name||r.title||'?').charAt(0)}</span>`;

        return `
        <tr class="pm-tr ${running ? 'pm-tr--running' : ''}" data-id="${r.id}">
            <td>${logo}</td>
            <td>
                <div class="pm-row-title">
                    ${running ? '<span class="pm-running-badge">● فعال</span>' : ''}
                    <strong>${this.esc(r.title)}</strong>
                </div>
                ${r.description ? `<div class="pm-row-desc">${this.esc(r.description.slice(0,60))}${r.description.length>60?'…':''}</div>` : ''}
            </td>
            <td><span class="pm-badge" style="background:${type.color}20;color:${type.color}">${type.label}</span></td>
            <td>
                <div style="font-size:13px;font-weight:600">${this.esc(r.company_name||'—')}</div>
                ${r.domain ? `<div style="font-size:11px;color:#64748b">${this.esc(r.domain)}</div>` : ''}
            </td>
            <td style="font-size:12px;color:#475569">${this.esc(r.front_page_title||'—')}</td>
            <td><span class="pm-badge" style="background:${status.color}20;color:${status.color}">${status.label}</span></td>
            <td style="font-size:11px;color:#94a3b8">${date}</td>
            <td>
                <div class="pm-actions" onclick="event.stopPropagation()">
                    ${!running ? `
                    <button class="pm-act-btn pm-act-btn--activate" data-action="activate" data-id="${r.id}" title="فعال‌سازی">
                        ▶ فعال
                    </button>` : ''}
                    <button class="pm-act-btn" data-action="edit" data-id="${r.id}" title="ویرایش">✏️</button>
                    ${!running ? `<button class="pm-act-btn pm-act-btn--del" data-action="delete" data-id="${r.id}" title="حذف">🗑️</button>` : ''}
                </div>
            </td>
        </tr>`;
    }

    /* ════════════════════════════════════════
       فرم ایجاد/ویرایش
    ════════════════════════════════════════ */
    _openForm(row) {
        this._editing = row;
        const modal = this.ref('modal');
        const body  = this.ref('modalBody');
        if (!modal || !body) return;

        const isNew  = !row;
        const v      = row || {};
        const pageOpts = this._pages.map(p =>
            `<option value="${p.id}" ${+v.front_page_id === p.id ? 'selected' : ''}>${this.esc(p.title)}</option>`
        ).join('');

        body.innerHTML = `
        <div class="pm-form-header">
            <h3>${isNew ? '+ پروژه جدید' : `✏️ ویرایش: ${this.esc(v.title||'')}`}</h3>
            <button class="pm-close-btn" data-ref="closeForm">✕</button>
        </div>
        <div class="pm-form-body">
            <div class="pm-form-cols">
                <!-- ستون چپ -->
                <div class="pm-form-col">
                    <div class="pm-field">
                        <label>عنوان پروژه <span class="pm-req">*</span></label>
                        <input type="text" id="pf-title" class="pm-input" value="${this.esc(v.title||'')}" placeholder="مثال: سایت فروشگاه آقای رضایی">
                    </div>
                    <div class="pm-field">
                        <label>نوع پروژه</label>
                        <select id="pf-type" class="pm-input">
                            <option value="shop"       ${v.type==='shop'       ?'selected':''}>🛍️ فروشگاه اینترنتی</option>
                            <option value="realestate" ${v.type==='realestate' ?'selected':''}>🏘️ سایت املاک</option>
                            <option value="portal"     ${v.type==='portal'     ?'selected':''}>📰 پورتال خبری</option>
                            <option value="custom"     ${v.type==='custom'     ?'selected':''}>⚙️ سفارشی</option>
                        </select>
                    </div>
                    <div class="pm-field">
                        <label>وضعیت</label>
                        <select id="pf-status" class="pm-input">
                            <option value="draft"    ${v.status==='draft'    ?'selected':''}>پیش‌نویس</option>
                            <option value="active"   ${v.status==='active'   ?'selected':''}>فعال</option>
                            <option value="archived" ${v.status==='archived' ?'selected':''}>بایگانی</option>
                        </select>
                    </div>
                    <div class="pm-field">
                        <label>دامنه سایت</label>
                        <input type="text" id="pf-domain" class="pm-input" value="${this.esc(v.domain||'')}" placeholder="example.com" dir="ltr">
                    </div>
                    <div class="pm-field">
                        <label>صفحه اول وردپرس</label>
                        <select id="pf-front-page" class="pm-input">
                            <option value="">— انتخاب نشده —</option>
                            ${pageOpts}
                        </select>
                    </div>
                    <div class="pm-field">
                        <label>توضیحات</label>
                        <textarea id="pf-desc" class="pm-input" rows="3" placeholder="توضیح کوتاه درباره این پروژه...">${this.esc(v.description||'')}</textarea>
                    </div>
                </div>

                <!-- ستون راست: اطلاعات شرکت -->
                <div class="pm-form-col">
                    <div class="pm-section-title">🏢 هویت شرکت / سایت</div>
                    <div class="pm-field">
                        <label>نام شرکت / سایت <span class="pm-req">*</span></label>
                        <input type="text" id="pf-company" class="pm-input" value="${this.esc(v.company_name||'')}" placeholder="فروشگاه نمونه">
                    </div>
                    <div class="pm-field">
                        <label>شعار (tagline)</label>
                        <input type="text" id="pf-tagline" class="pm-input" value="${this.esc(v.company_tagline||'')}" placeholder="بهترین انتخاب برای شما">
                    </div>
                    <div class="pm-field">
                        <label>آدرس لوگو (URL)</label>
                        <input type="text" id="pf-logo" class="pm-input" value="${this.esc(v.company_logo||'')}" placeholder="https://..." dir="ltr">
                        ${v.company_logo ? `<img src="${this.esc(v.company_logo)}" style="height:40px;margin-top:6px;border-radius:6px;" alt="">` : ''}
                    </div>
                    <div class="pm-field">
                        <label>شماره تماس</label>
                        <input type="text" id="pf-phone" class="pm-input" value="${this.esc(v.company_phone||'')}" placeholder="021-..." dir="ltr">
                    </div>
                    <div class="pm-field">
                        <label>ایمیل</label>
                        <input type="email" id="pf-email" class="pm-input" value="${this.esc(v.company_email||'')}" placeholder="info@..." dir="ltr">
                    </div>
                    <div class="pm-field">
                        <label>آدرس</label>
                        <textarea id="pf-address" class="pm-input" rows="2" placeholder="تهران، خ...">${this.esc(v.company_address||'')}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="pm-form-footer">
            <div id="pf-error" class="pm-form-error" style="display:none"></div>
            <div style="display:flex;gap:8px;">
                <button class="pm-btn pm-btn--ghost" data-ref="closeForm2">انصراف</button>
                <button class="pm-btn pm-btn--primary" id="pf-save">
                    ${isNew ? '✅ ایجاد پروژه' : '💾 ذخیره تغییرات'}
                </button>
                ${!isNew && !+v.is_running ? `
                <button class="pm-btn pm-btn--activate" id="pf-activate">▶ فعال‌سازی</button>` : ''}
            </div>
        </div>`;

        modal.style.display = 'flex';
        this._bindRefs();

        this.ref('closeForm')?.addEventListener('click',  () => this._closeForm());
        this.ref('closeForm2')?.addEventListener('click', () => this._closeForm());
        modal.addEventListener('click', e => { if (e.target === modal) this._closeForm(); });

        document.getElementById('pf-save')?.addEventListener('click', () => this._saveForm());
        document.getElementById('pf-activate')?.addEventListener('click', () => {
            this._closeForm();
            this._activate(row);
        });
    }

    _closeForm() {
        const modal = this.ref('modal');
        if (modal) modal.style.display = 'none';
        this._editing = null;
    }

    async _saveForm() {
        const g   = id => document.getElementById(id)?.value?.trim() ?? '';
        const btn = document.getElementById('pf-save');
        const err = document.getElementById('pf-error');

        const title   = g('pf-title');
        const company = g('pf-company');
        if (!title) return this._showFormErr('عنوان پروژه الزامی است');

        if (btn) { btn.disabled = true; btn.textContent = '⏳...'; }

        const payload = {
            title, company_name: company,
            type:             g('pf-type'),
            status:           g('pf-status'),
            domain:           g('pf-domain'),
            front_page_id:    g('pf-front-page') || null,
            description:      g('pf-desc'),
            company_tagline:  g('pf-tagline'),
            company_logo:     g('pf-logo'),
            company_phone:    g('pf-phone'),
            company_email:    g('pf-email'),
            company_address:  g('pf-address'),
        };

        try {
            if (this._editing) {
                await this.api.put(`projects/${this._editing.id}`, payload);
            } else {
                await this.api.post('projects', payload);
            }
            this._closeForm();
            await this._load();
        } catch (e) {
            this._showFormErr(e.message);
            if (btn) { btn.disabled = false; btn.textContent = this._editing ? '💾 ذخیره' : '✅ ایجاد'; }
        }
    }

    _showFormErr(msg) {
        const el = document.getElementById('pf-error');
        if (el) { el.textContent = msg; el.style.display = 'block'; }
    }

    /* ════════════════════════════════════════
       فعال‌سازی
    ════════════════════════════════════════ */
    async _activate(row) {
        if (!row) return;
        if (!confirm(`پروژه «${row.title}» فعال شود؟\nنام سایت و صفحه اول تغییر می‌کند.`)) return;
        try {
            const res = await this.api.post(`projects/${row.id}/activate`, {});
            alert(res?.message || 'فعال شد');
            await this._load();
        } catch (e) { alert('❌ ' + e.message); }
    }

    /* ════════════════════════════════════════
       حذف
    ════════════════════════════════════════ */
    async _delete(row) {
        if (!row) return;
        if (!confirm(`پروژه «${row.title}» حذف شود؟`)) return;
        try {
            await this.api.delete(`projects/${row.id}`);
            await this._load();
        } catch (e) { alert('❌ ' + e.message); }
    }

    /* ════════════════════════════════════════
       رویدادها
    ════════════════════════════════════════ */
    _bindTopbar() {
        this.ref('newBtn')?.addEventListener('click', () => this._openForm(null));
        this.ref('typeFilter')?.addEventListener('change', e => {
            this._filter.type = e.target.value;
            this._load();
        });
        this.ref('statusFilter')?.addEventListener('change', e => {
            this._filter.status = e.target.value;
            this._load();
        });
    }

    esc(s) { return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
    destroy() { super.destroy?.(); }
}

viewRegistry.register('projects-manager', ProjectsManagerView);
