/**
 * TasksReportView.js
 *
 * نمونه ویویی که از context.project به عنوان فیلتر خودکار استفاده می‌کند.
 * هر ویو دیگری هم می‌تواند همین الگو را داشته باشد.
 */

import BaseView from "../../core/BaseView.js";
import { viewRegistry } from "../../core/registries.js";

export default class TasksReportView extends BaseView {

    static title = "گزارش تسک‌ها";

    useContextBadge = true;

    constructor(props = {}) {
        super(props);
        this.api = props.api;
        this._tasks = [];
    }

    async render(container) {
        await super.render(container);
        await this._load();
        return this;
    }

    async template() {
        return `<div class="tasks-report" data-ref="taskList"></div>`;
    }

    async afterRender() {
        // ۱. بارگذاری اولیه با context فعلی (اگر قبلاً پروژه‌ای انتخاب شده)
        await this._load();

        // ۲. واکنش به تغییر context — بدون نیاز به render مجدد کل ویو
        this.onContextProjectChange(async () => {
            await this._load();
        });
    }

    async _load() {
        const listEl = this.ref("taskList");
        if (!listEl) return;

        const project = this.getContextProject();

        listEl.innerHTML = `<div class="tasks-report__loading">در حال بارگذاری...</div>`;

        try {
            const params = {};
            if (project?.id) {
                params.project_id = project.id;
            }

            const res = await this.api.get("/runtime/tasks/records", params);
            this._tasks = res?.data ?? [];
            this._render(listEl, project);

        } catch (err) {
            listEl.innerHTML = `<div class="tasks-report__error">خطا در دریافت تسک‌ها</div>`;
        }
    }

    _render(listEl, project) {
        if (!this._tasks.length) {
            listEl.innerHTML = `
                <div class="tasks-report__empty">
                    ${project ? `هیچ تسکی برای پروژه «${this.escape(project.title || project.name)}» یافت نشد.` : "ابتدا یک پروژه انتخاب کنید."}
                </div>`;
            return;
        }

        listEl.innerHTML = this._tasks.map(task => `
            <div class="task-row">
                <span class="task-row__title">${this.escape(task.title || "-")}</span>
                <span class="task-row__status">${this.escape(task.status || "-")}</span>
            </div>
        `).join("");
    }
}

viewRegistry.register("tasksReport", TasksReportView);
