// Common Navigation and UI Utilities for ChemiFactory MES/HMI
document.addEventListener("DOMContentLoaded", () => {
    renderNavigation();
    highlightActiveLink();
});

// Navigation configuration
const navItems = [
    { name: "대시보드", icon: "📊", path: "index.html" },
    { name: "생산 계획", icon: "📅", path: "plan.html" },
    { name: "생산 현황", icon: "⚙️", path: "equipment.html" },
    { name: "고객사 관리", icon: "🤝", path: "customer.html" },
    { name: "공급사 관리", icon: "🏭", path: "supplier.html" },
    { name: "기기 관리", icon: "🛠️", path: "device.html" },
    { name: "재고 관리", icon: "📦", path: "inventory.html" },
    { name: "계산/분석", icon: "📐", path: "analysis.html" },
    { name: "설정", icon: "⚙️", path: "setting.html" }
];

function renderNavigation() {
    const sidebar = document.getElementById("sidebar");
    if (!sidebar) return;

    let html = `
        <div class="sidebar-brand" style="display: flex; align-items: center; gap: 10px; padding: 20px 24px;">
            <img src="source/logo.png" alt="Logo" class="brand-icon" style="width: 32px; height: 32px; object-fit: contain; font-size: 0;">
            <img src="source/company_name.png" alt="ChemiFactory" class="brand-name" style="height: 24px; object-fit: contain; max-width: 150px;">
        </div>
        <ul class="nav-links">
    `;

    navItems.forEach(item => {
        html += `
            <li>
                <a href="${item.path}" class="nav-item-link" data-path="${item.path}">
                    <span class="nav-icon">${item.icon}</span>
                    <span class="nav-text">${item.name}</span>
                </a>
            </li>
        `;
    });

    html += `
        </ul>
        <div class="sidebar-footer">
            <div class="user-profile">
                <span class="user-avatar">👤</span>
                <div class="user-info">
                    <span class="user-name">관리자</span>
                    <span class="user-role">SYSTEM ADMIN</span>
                </div>
            </div>
        </div>
    `;

    sidebar.innerHTML = html;
}

function highlightActiveLink() {
    // Current page filename detection
    const path = window.location.pathname;
    const page = path.split("/").pop() || "index.html";

    const links = document.querySelectorAll(".nav-item-link");
    links.forEach(link => {
        const itemPath = link.getAttribute("data-path");
        if (page === itemPath || (page === "" && itemPath === "index.html")) {
            link.classList.add("active");
        } else {
            link.classList.remove("active");
        }
    });
}