import { CardRenderer } from "../../runtime/CardRenderer.js";
import { runtimeStore } from "../../../core/RuntimeStore.js";

export default class ProjectsRenderer {

    constructor({ schema, onEdit, onDelete, onSelect }) {
        this.schema = schema;
        this.container = null;
        this.records = [];
        this.onEdit = onEdit;
        this.onDelete = onDelete;
        this.onSelect = onSelect;
    }

    mount(container) {
        this.container = container;
    }

    render(records = []) {
        if (!this.container) return;
        this.records = records;

        // تعریف آیکون‌ها
        const iconEdit = `<svg viewBox="0 0 24 24" width="18" height="18"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/></svg>`;
        const iconDelete = `<svg viewBox="0 0 24 24" width="18" height="18"><path d="M6 7h12v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7zm3-4h6l1 2H8l1-2z"/></svg>`;

        // نکته مهم: افزودن fill="currentColor" به SVG ستاره برای اینکه رنگ متنی دکمه را بگیرد
        const iconStar = `<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>`;

        if (!records.length) {
            this.container.innerHTML = `<div style="padding:30px;text-align:center;color:#777">هیچ داده‌ای یافت نشد</div>`;
            return;
        }

        const activeProjectId = runtimeStore.get('active_project_id');

        const html = records.map(record => {
            let cardHtml = "";
            const isActive = String(record.id) === String(activeProjectId);

            try {
                cardHtml = CardRenderer.render(this.schema, record);
            } catch (err) {
                console.error("[ProjectsRenderer] render error:", err);
                cardHtml = `<div style="color:red">render error</div>`;
            }

            return `
            <div class="project-card-wrapper ${isActive ? 'active-project' : ''}" data-id="${record.id}" style="${isActive ? 'border: 2px solid #3b82f6;' : 'border: 1px solid #e5e7eb;'} padding: 10px; border-radius: 8px; margin-bottom: 10px;">
              ${cardHtml}
              <div class="project-card-actions" style="display: flex; gap: 10px; margin-top: 10px;">
                <button class="btn-select" data-id="${record.id}" style="color: ${isActive ? '#fbbf24' : '#9ca3af'}; border: none; background: none; cursor: pointer; padding: 0;">${iconStar}</button>
                <button class="btn-edit" data-id="${record.id}" style="border: none; background: none; cursor: pointer; padding: 0;">${iconEdit}</button>
                <button class="btn-delete" data-id="${record.id}" style="border: none; background: none; cursor: pointer; padding: 0;">${iconDelete}</button>
              </div>
            </div>
          `;
        }).join("");

        this.container.innerHTML = html;
        this.bindEvents();
    }

    bindEvents() {
        this.container.querySelectorAll(".btn-edit").forEach(btn => {
            btn.addEventListener("click", e => {
                const id = e.currentTarget.dataset.id;
                if (this.onEdit) this.onEdit(id);
            });
        });

        this.container.querySelectorAll(".btn-delete").forEach(btn => {
            btn.addEventListener("click", e => {
                const id = e.currentTarget.dataset.id;
                if (this.onDelete) this.onDelete(id);
            });
        });

        this.container.querySelectorAll(".btn-select").forEach(btn => {
            btn.addEventListener("click", e => {
                const id = e.currentTarget.dataset.id;
                if (this.onSelect) this.onSelect(id);
            });
        });
    }
}
