<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculum Report: {{plan_name}}</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #4CAF50;
            --warning-color: #FF9800;
            --danger-color: #F44336;
            --critical-color: #9C27B0;
            --light-bg: #f8f9fa;
            --term-bg: #e8e8e8;
            --border-color: #dee2e6;
            --node-color: #37474f;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.4;
            color: #333;
            background-color: var(--light-bg);
            padding: 1.5rem;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 1.5rem;
        }

        h1 {
            color: var(--primary-color);
            border-bottom: 3px solid var(--secondary-color);
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }

        h2 {
            color: var(--primary-color);
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            border-left: 4px solid var(--secondary-color);
            padding-left: 0.75rem;
            font-size: 1.2rem;
        }

        .overview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .stat-card {
            background: var(--light-bg);
            border-radius: 6px;
            padding: 0.75rem;
            text-align: center;
            border: 1px solid var(--border-color);
        }

        .stat-card .label {
            font-size: 0.7rem;
            color: #666;
            text-transform: uppercase;
        }

        .stat-card .value {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .stat-card .detail {
            font-size: 0.75rem;
            color: #888;
        }

        .critical-path {
            background: linear-gradient(90deg, var(--light-bg), white);
            padding: 0.75rem;
            border-radius: 6px;
            font-family: monospace;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        /* Curriculum Graph - scales to fill width */
        .curriculum-graph-wrapper {
            overflow-x: auto;
            margin: 1rem 0;
            position: relative;
        }

        .curriculum-graph {
            display: flex;
            gap: 0;
            width: 100%;
            position: relative;
        }

        .term-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            min-width: 100px;
            background: var(--term-bg);
            border-radius: 4px;
            margin: 0 16px;
            padding: 10px 6px;
        }

        .term-header {
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--primary-color);
            margin-bottom: 10px;
            padding: 4px 8px;
            background: white;
            border-radius: 4px;
            width: 100%;
            text-align: center;
        }

        .term-courses {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
        }

        .course-node {
            position: relative;
            background: white;
            border-radius: 6px;
            padding: 10px 8px 8px;
            text-align: center;
            border: 2px solid var(--node-color);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            margin-top: 10px;
        }

        .course-node:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .course-node.faded {
            opacity: 0.25;
        }

        .course-node.highlighted {
            border-color: var(--secondary-color);
            border-width: 3px;
            box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
        }

        .course-node.critical-highlight {
            border-color: var(--critical-color);
            border-width: 3px;
            box-shadow: 0 0 8px rgba(156, 39, 176, 0.5);
        }

        .course-node .complexity-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: bold;
            color: white;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .course-node .course-id {
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--primary-color);
            margin-top: 6px;
        }

        .course-node .course-name {
            font-size: 0.65rem;
            color: #666;
            line-height: 1.2;
            max-height: 2.4em;
            overflow: hidden;
        }

        .complexity-low { background-color: var(--success-color); }
        .complexity-medium { background-color: var(--warning-color); }
        .complexity-high { background-color: var(--danger-color); }

        /* SVG for connections */
        .connections-svg {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            width: 100%;
            height: 100%;
            min-height: 600px;
        }

        .prereq-line { stroke: #666; stroke-width: 1.5; fill: none; transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s; }
        .coreq-line { stroke: var(--secondary-color); stroke-width: 1.5; stroke-dasharray: 4,3; fill: none; transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s; }

        .prereq-line.faded, .coreq-line.faded { opacity: 0.15; }
        .prereq-line.highlighted { stroke: var(--secondary-color); stroke-width: 2.5; }
        .coreq-line.highlighted { stroke: var(--secondary-color); stroke-width: 2.5; }
        .prereq-line.critical, .coreq-line.critical { stroke: var(--critical-color); stroke-width: 3; }

        /* Legend */
        .legend {
            display: flex;
            gap: 1.5rem;
            margin: 0.75rem 0;
            flex-wrap: wrap;
            font-size: 0.8rem;
        }

        .legend-item { display: flex; align-items: center; gap: 0.4rem; }
        .legend-color { width: 16px; height: 16px; border-radius: 50%; }
        .legend-line { width: 30px; height: 2px; }
        .legend-line.solid { background: #666; }
        .legend-line.dashed { background: repeating-linear-gradient(90deg, var(--secondary-color), var(--secondary-color) 4px, transparent 4px, transparent 7px); }
        .legend-line.critical { background: var(--critical-color); height: 3px; }

        /* Tables */
        table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.85rem; }
        th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--border-color); }
        th { background-color: var(--primary-color); color: white; font-weight: 600; font-size: 0.75rem; }
        tr:hover { background-color: var(--light-bg); }

        .course-badge {
            display: inline-block;
            background: var(--secondary-color);
            color: white;
            padding: 0.1rem 0.3rem;
            border-radius: 3px;
            font-size: 0.75rem;
        }

        .complexity-row-low td:first-child { border-left: 3px solid var(--success-color); }
        .complexity-row-medium td:first-child { border-left: 3px solid var(--warning-color); }
        .complexity-row-high td:first-child { border-left: 3px solid var(--danger-color); }

        footer { margin-top: 1.5rem; text-align: center; color: #888; font-size: 0.8rem; }

        @media print {
            body {
                background: white;
                padding: 0;
                margin: 0;
            }

            .container {
                box-shadow: none;
                padding: 0;
                margin: 0;
                max-width: 100%;
            }

            h1, h2 {
                page-break-after: avoid;
            }

            .overview-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 0.25rem;
                margin-bottom: 0.5rem;
            }

            .stat-card {
                padding: 0.25rem;
                font-size: 0.65rem;
            }

            .stat-card .label {
                font-size: 0.55rem;
            }

            .stat-card .value {
                font-size: 0.9rem;
            }

            .critical-path {
                padding: 0.5rem;
                margin-bottom: 0.5rem;
                font-size: 0.8rem;
            }

            /* Scale graph to fit page width */
            .curriculum-graph-wrapper {
                overflow: hidden;
                margin: 0.5rem 0;
                page-break-inside: avoid;
            }

            .curriculum-graph {
                display: flex;
                gap: 0;
                width: 100%;
            }

            .term-column {
                min-width: 70px;
                margin: 0 6px;
                padding: 6px 4px;
                flex: 1;
            }

            .term-header {
                font-size: 0.65rem;
                margin-bottom: 6px;
                padding: 2px 4px;
            }

            .term-courses {
                gap: 8px;
            }

            .course-node {
                padding: 5px 3px 3px;
                border: 1.5px solid var(--node-color);
                margin-top: 6px;
                font-size: 0.65rem;
            }

            .course-node .complexity-badge {
                width: 16px;
                height: 16px;
                font-size: 0.55rem;
                top: -8px;
            }

            .course-node .course-id {
                font-size: 0.6rem;
                margin-top: 3px;
            }

            .course-node .course-name {
                font-size: 0.5rem;
            }

            /* Ensure lines render in print */
            .prereq-line, .coreq-line {
                stroke-width: 1.5 !important;
            }

            .prereq-line.critical, .coreq-line.critical {
                stroke-width: 2.5 !important;
            }

            .connections-svg {
                filter: contrast(1.1);
            }

            .legend {
                gap: 1rem;
                margin: 0.5rem 0;
                font-size: 0.7rem;
                page-break-after: avoid;
            }

            table {
                margin: 0.5rem 0;
                font-size: 0.75rem;
                page-break-inside: avoid;
            }

            th, td {
                padding: 0.3rem 0.25rem;
            }

            th {
                font-size: 0.65rem;
            }

            footer {
                margin-top: 1rem;
                font-size: 0.7rem;
                page-break-before: avoid;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📚 Curriculum Report: {{plan_name}}</h1>

        <h2>Overview</h2>
        <div class="overview-grid">
            <div class="stat-card"><div class="label">Institution</div><div class="value" style="font-size:1rem">{{institution}}</div></div>
            <div class="stat-card"><div class="label">Degree</div><div class="value" style="font-size:1rem">{{degree_name}}</div></div>
            <div class="stat-card"><div class="label">System</div><div class="value">{{system_type}}</div></div>
            <div class="stat-card"><div class="label">Years</div><div class="value">{{years}}</div></div>
            <div class="stat-card"><div class="label">CIP Code</div><div class="value">{{cip_code}}</div></div>
            <div class="stat-card"><div class="label">Total Credits</div><div class="value">{{total_credits}}</div></div>
            <div class="stat-card"><div class="label">Total Courses</div><div class="value">{{course_count}}</div></div>
        </div>

        <h2>Complexity Metrics</h2>
        <div class="overview-grid">
            <div class="stat-card"><div class="label">Total Complexity</div><div class="value">{{total_complexity}}</div></div>
            <div class="stat-card"><div class="label">Longest Delay</div><div class="value">{{longest_delay}}</div><div class="detail">{{longest_delay_course}}</div></div>
            <div class="stat-card"><div class="label">Highest Centrality</div><div class="value">{{highest_centrality}}</div><div class="detail">{{highest_centrality_course}}</div></div>
        </div>

        <div class="critical-path"><strong>Critical Path:</strong> {{longest_delay_path}}</div>

        <h2>Curriculum Graph</h2>
        {{curriculum_graph}}

        <h2>Term Schedule</h2>
        <table>
            <thead><tr><th>Term</th><th>Courses</th><th>Credits</th></tr></thead>
            <tbody>{{term_schedule}}</tbody>
        </table>

        <h2>Course Metrics</h2>
        <table>
            <thead><tr><th>Course</th><th>Name</th><th>Cr</th><th>Cplx</th><th>Blk</th><th>Dly</th><th>Ctr</th></tr></thead>
            <tbody>{{course_metrics}}</tbody>
        </table>

        <footer><p>Generated by NuAnalytics</p></footer>
    </div>

</body>
</html>
