// File: src/ui/layout.js

/**
 * ساختار پایه UI را داخل rootElement ایجاد می‌کند.
 * خروجی: یک آبجکت شامل رفرنس DOMها برای استفاده سایر ماژول‌ها.
 * @param {HTMLElement} rootElement
 * @returns {Object} uiElements
 */
export function createLayout(rootElement) {
    rootElement.classList.add('cpm-ui-root');

    // پاک‌سازی در صورت وجود
    rootElement.innerHTML = '';

    // Header
    const header = document.createElement('div');
    header.className = 'cpm-header';
    header.innerHTML = `
        <div class="cpm-header-title"></div>
        <div class="cpm-header-meta"></div>
    `;

    // Body (sidebar + main)
    const body = document.createElement('div');
    body.className = 'cpm-body';

    const sidebar = document.createElement('div');
    sidebar.className = 'cpm-sidebar';
    sidebar.innerHTML = `
        <div class="cpm-sidebar-section">
            <div class="cpm-sidebar-title">WBS / Filters</div>
            <div class="cpm-sidebar-content">Sidebar content (placeholder)</div>
        </div>
    `;

    const main = document.createElement('div');
    main.className = 'cpm-main';

    // Tabs یا بخش‌های گانت و شبکه
    const ganttContainer = document.createElement('div');
    ganttContainer.className = 'cpm-main-gantt';

    const networkContainer = document.createElement('div');
    networkContainer.className = 'cpm-main-network';

    // عنوان بخش‌ها
    ganttContainer.innerHTML = `
        <div class="cpm-section-title">Gantt Chart</div>
        <div class="cpm-gantt-canvas"></div>
    `;
    networkContainer.innerHTML = `
        <div class="cpm-section-title">Network Diagram</div>
        <div class="cpm-network-canvas"></div>
    `;

    main.appendChild(ganttContainer);
    main.appendChild(networkContainer);

    body.appendChild(sidebar);
    body.appendChild(main);

    rootElement.appendChild(header);
    rootElement.appendChild(body);

    // خروجی رفرنس‌ها
    return {
        root: rootElement,
        header,
        headerTitle: header.querySelector('.cpm-header-title'),
        headerMeta: header.querySelector('.cpm-header-meta'),
        sidebar,
        main,
        ganttContainer,
        ganttCanvas: ganttContainer.querySelector('.cpm-gantt-canvas'),
        networkContainer,
        networkCanvas: networkContainer.querySelector('.cpm-network-canvas')
    };
}

/**
 * به‌روزرسانی بخش‌های header و شاید چیزهای دیگر بر اساس state.project
 * @param {Object} uiElements
 * @param {Object} state
 */
export function updateLayoutForProject(uiElements, state) {
    const project = state.project || {};

    if (uiElements.headerTitle) {
        uiElements.headerTitle.textContent = project.name || '(بدون نام)';
    }

    if (uiElements.headerMeta) {
        const start = project.startDate || '-';
        const end = project.endDate || '-';
        const code = project.code || '';
        uiElements.headerMeta.textContent =
            `کد: ${code} | شروع: ${start} | پایان: ${end}`;
    }
}
