<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git Analysis - Code Metrics Dashboard</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" href="images/logo.svg" sizes="any" type="image/svg+xml">
    <style>

.info-card {
    max-height: 730px;
    overflow-y: auto;
}

/* File block styling */
.smell-list {
    list-style: none;
    padding: 12px;
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.smell-list:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Items inside file block */
.smell-item {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    gap: 4px;
}

.smell-item:last-child {
    border-bottom: none;
}

.smell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.smell-type {
    font-weight: bold;
    color: #444;
}

.smell-message {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.smell-severity {
    font-weight: bold;
    text-transform: capitalize;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Detailed view cards */
.detail-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.detail-type {
    font-weight: bold;
    color: #444;
    font-size: 14px;
}

.detail-severity {
    font-weight: bold;
    text-transform: capitalize;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Body styling */
.detail-body p {
    margin: 4px 0;
    font-size: 13px;
    color: #555;
}

.detail-body code {
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
}

/* Severity colors */
/* Apply severity colors to both list and detailed view badges */
.severity-info .smell-severity,
.severity-info .detail-severity {
    background-color: #e3f2fd;
    color: #1565c0;
}

.severity-minor .smell-severity,
.severity-minor .detail-severity {
    background-color: #fff3e0;
    color: #fb8c00;
}

.severity-major .smell-severity,
.severity-major .detail-severity {
    background-color: #fbe9e7;
    color: #d84315;
}

.severity-critical .smell-severity,
.severity-critical .detail-severity {
    background-color: #ffebee;
    color: #b71c1c;
}
.code-block {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 8px;
    font-family: monospace;
    font-size: 13px;
    overflow-x: auto;
}

.code-line {
    display: flex;
    padding: 2px 4px;
}

.line-number {
    width: 40px;
    text-align: right;
    color: #999;
    margin-right: 8px;
    user-select: none;
}

.line-content {
    white-space: pre;
}

.highlight-line {
    background-color: #fff8e1; /* Light yellow highlight */
}

/* not working yet
.highlight-column {
    background-color: rgba(255, 0, 0, 0.3);
    border-radius: 2px;
}*/


    </style>
</head>
<body>
    <div class="dashboard">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <img src="images/logo.svg" alt="Metripy Logo" class="logo-icon">
                    <h2>Metripy</h2>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>Overview</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="files.html" class="nav-link">
                            <i class="fas fa-file-code"></i>
                            <span>Files</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="top_offenders.html" class="nav-link">
                            <i class="fa-solid fa-stethoscope"></i>
                            <span>Top Offenders</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="git_analysis.html" class="nav-link">
                            <i class="fab fa-git-alt"></i>
                            <span>Git Analysis</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="coupling.html" class="nav-link">
                            <i class="fas fa-project-diagram"></i>
                            <span>Coupling</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="dependencies.html" class="nav-link">
                            <i class="fas fa-cubes"></i>
                            <span>Dependencies</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="trends.html" class="nav-link">
                            <i class="fas fa-chart-line"></i>
                            <span>Trends</span>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="code_smells.html" class="nav-link">
                            <i class="fas fa-bug"></i>
                            <span>Code Smells</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="metrics.html" class="nav-link">
                            <i class="fas fa-info-circle"></i>
                            <span>Explanations</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <div class="sidebar-footer">
                <div class="project-info">
                    <h4>Project: {{project_name}}</h4>
                    <p>Last updated: {{last_updated}}</p>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <header class="page-header">
                <div class="header-content">
                    <h1>Code Smells</h1>
                    <p class="subtitle">Code smells analysis</p>
                </div>
            </header>
            
            <section class="two-column-section">
                <div class="info-card">
                    <h4>Code Smells List</h4>
                    <div class="code-smells-list" id="code-smells-list">
                        <!-- filled by JS-->
                    </div>
                </div>
                <div class="info-card">
                    <h4>Detailed View</h4>
                    <div class="code-smells-detailed-view" id="code-smells-detailed-view">
                        <!-- filled by JS-->
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Embed data directly from template engine
        window.FILE_CODE_SMELLS = {{file_code_smells}};
        const container = document.getElementById("code-smells-list");
        const detailedContainer = document.getElementById("code-smells-detailed-view");
        const data = window.FILE_CODE_SMELLS || {};

        Object.entries(data).forEach(([fullname, smells]) => {
            const list = document.createElement("ul");
            list.className = "smell-list";

            const title = document.createElement("h5");
            title.textContent = fullname;
            list.appendChild(title);

            // Add click event on the whole file block
            list.addEventListener("click", () => {
                renderDetailedView(fullname, smells);
            });

            smells.forEach(smell => {
                const item = document.createElement("li");
                item.className = `smell-item severity-${smell.severity.toLowerCase()}`;
                item.innerHTML = `
                    <div class="smell-header">
                        <span class="smell-type">${smell.type}</span>
                        <span class="smell-severity">${smell.severity}</span>
                    </div>
                    <div class="smell-message">${smell.message}</div>
                `;
                list.appendChild(item);
            });

            container.appendChild(list);
        });

        // Function to render detailed view
        function renderDetailedView(fullname, smells) {
    const detailedContainer = document.getElementById("code-smells-detailed-view");
    detailedContainer.innerHTML = ""; // Clear previous content

    // Add file name at the top
    const title = document.createElement("h5");
    title.textContent = fullname;
    detailedContainer.appendChild(title);

    smells.forEach(smell => {
        const detailCard = document.createElement("div");
        detailCard.className = `detail-card severity-${smell.severity.toLowerCase()}`;

        // Header: type + severity
        const header = document.createElement("div");
        header.className = "detail-header";
        header.innerHTML = `
            <span class="detail-type">${smell.type}</span>
            <span class="detail-severity">${smell.severity}</span>
        `;
        detailCard.appendChild(header);

        // Message
        const message = document.createElement("p");
        message.innerHTML = `<strong>Message:</strong> ${smell.message}`;
        detailCard.appendChild(message);

        // Code block with line numbers and highlight
        const codeBlock = document.createElement("pre");
        codeBlock.className = "code-block";

        const lines = smell.code_line.split("\n"); // Multiple lines
        const startLine = smell.line;
        const offendingLine = smell.line;
        const offendingColumn = smell.column;

        lines.forEach((line, index) => {
            const lineNumber = startLine + index;
            const lineElement = document.createElement("div");
            lineElement.className = "code-line";

            // Highlight offending line
            if (lineNumber === offendingLine) {
                lineElement.classList.add("highlight-line");
            }

            // Escape HTML
            const safeLine = escapeHtml(line);

            // If this is the offending line, mark the column
            let lineContentHtml;
            if (lineNumber === offendingLine && offendingColumn > 0 && offendingColumn <= line.length) {
                const before = safeLine.slice(0, offendingColumn - 1);
                const char = safeLine.charAt(offendingColumn - 1);
                const after = safeLine.slice(offendingColumn);
                lineContentHtml = `${before}<span class="highlight-column">${char}</span>${after}`;
            } else {
                lineContentHtml = safeLine;
            }

            lineElement.innerHTML = `
                <span class="line-number">${lineNumber}</span>
                <span class="line-content">${lineContentHtml}</span>
            `;

            codeBlock.appendChild(lineElement);
        });

        detailCard.appendChild(codeBlock);
        detailedContainer.appendChild(detailCard);
    });
}

// Helper to escape HTML
function escapeHtml(str) {
    return str.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

    </script>
</body>
</html>