UI/render_cv_matching.py

"""Render CV project matching results in 3-panel tactical layout."""

from __future__ import annotations

import html
from typing import Any, Dict, List


def render_cv_matching_html(
    cv_skills_data: Dict[str, Any],
    matched_projects: List[Dict[str, Any]],
    filename: str = "Unknown"
) -> str:
    """
    Renders CV matching results in a 3-panel tactical layout.
    
    Panel 1: CV Analysis
    Panel 2: Project Matches (ranked)
    Panel 3: Training Costs per Project
    
    Args:
        cv_skills_data: Extracted CV skills
        matched_projects: Projects with match data and training plans
        filename: CV filename
        
    Returns:
        HTML string for display
    """
    
    # CSS for 3-panel layout
    css = """
    <style>
        .cv-matching-wrapper {
            width: 100%;
            min-height: 70vh;
            display: flex;
            flex-direction: column;
        }
        
        .cv-matching-header {
            margin-bottom: 24px;
            padding: 0 4px;
            border-bottom: 1px solid var(--border-dim);
            padding-bottom: 16px;
        }
        
        .cv-matching-panels {
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr;
            gap: 20px;
            min-height: 60vh;
        }
        
        @media (max-width: 1400px) {
            .cv-matching-panels {
                grid-template-columns: 1fr;
            }
        }
        
        .cv-panel {
            background: var(--bg-card);
            border: 1px solid var(--border-dim);
            padding: 20px;
            display: flex;
            flex-direction: column;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .cv-panel::-webkit-scrollbar { width: 8px; }
        .cv-panel::-webkit-scrollbar-track { background: var(--bg-void); }
        .cv-panel::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 4px; }
        
        .panel-header {
            font-size: 14px;
            color: var(--arc-yellow);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 20px;
            font-weight: 700;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--arc-yellow);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .cv-summary-compact {
            background: rgba(255, 127, 0, 0.08);
            border: 1px solid var(--arc-orange);
            border-radius: 4px;
            padding: 12px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--text-main);
            line-height: 1.5;
            opacity: 0.95;
        }
        
        .skill-badge-small {
            display: inline-block;
            background: var(--bg-panel);
            border: 1px solid var(--border-dim);
            padding: 4px 8px;
            margin: 2px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
            font-family: var(--font-mono);
        }
        
        .skill-badge-small.technical { color: var(--arc-green); border-color: var(--arc-green); }
        .skill-badge-small.soft { color: var(--arc-cyan); border-color: var(--arc-cyan); }
        
        .project-match-card {
            background: var(--bg-panel);
            border: 1px solid var(--border-dim);
            border-left: 4px solid var(--arc-orange);
            padding: 16px;
            margin-bottom: 12px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .project-match-card:hover {
            border-left-color: var(--arc-yellow);
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }
        
        .project-match-card.perfect { border-left-color: var(--arc-green); }
        .project-match-card.good { border-left-color: var(--arc-cyan); }
        .project-match-card.partial { border-left-color: var(--arc-yellow); }
        .project-match-card.low { border-left-color: var(--arc-red); }
        
        .match-percentage {
            font-size: 32px;
            font-weight: 800;
            font-family: var(--font-mono);
            color: var(--text-main);
            margin-bottom: 8px;
        }
        
        .match-percentage.perfect { color: var(--arc-green); }
        .match-percentage.good { color: var(--arc-cyan); }
        .match-percentage.partial { color: var(--arc-yellow); }
        .match-percentage.low { color: var(--arc-red); }
        
        .project-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 8px;
        }
        
        .project-meta {
            font-size: 11px;
            color: var(--text-main);
            font-family: var(--font-mono);
            margin-bottom: 12px;
            opacity: 0.9;
        }
        
        .skill-match-bar {
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: 12px;
            color: var(--text-main);
        }
        
        .training-cost-card {
            background: var(--bg-panel);
            border: 1px solid var(--border-dim);
            padding: 12px;
            margin-bottom: 10px;
        }
        
        .training-cost-card.low { border-left: 3px solid var(--arc-green); }
        .training-cost-card.medium { border-left: 3px solid var(--arc-yellow); }
        .training-cost-card.high { border-left: 3px solid var(--arc-red); }
        
        .cost-project-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--arc-orange);
            margin-bottom: 8px;
        }
        
        .cost-summary {
            font-size: 12px;
            color: var(--text-main);
            margin-bottom: 10px;
            opacity: 0.9;
        }
        
        .cost-value {
            font-size: 20px;
            font-weight: 700;
            font-family: var(--font-mono);
            color: var(--text-main);
        }
        
        .cost-breakdown {
            font-size: 11px;
            color: var(--text-main);
            font-family: var(--font-mono);
            opacity: 0.9;
        }
        
        .stat-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.05);
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 11px;
            margin: 2px;
        }
        
        .no-data-message {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-main);
            font-family: var(--font-mono);
            font-size: 13px;
            opacity: 0.9;
        }
    </style>
    """
    
    # Extract data
    tech_skills = cv_skills_data.get("technical_skills", [])
    soft_skills = cv_skills_data.get("soft_skills", [])
    experience_years = cv_skills_data.get("experience_years", "unknown")
    summary = cv_skills_data.get("summary", "")
    
    total_skills = len(tech_skills) + len(soft_skills)
    
    # Build HTML
    html_parts = [css, '<div class="cv-matching-wrapper">']
    
    # Header
    safe_filename = html.escape(filename)
    html_parts.append(f"""
    <div class="cv-matching-header">
        <div style="display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px;">
            <div>
                <h2 style="margin:0; color:white; font-size:24px; letter-spacing: 0.5px;">CV + PROJECT MATCHING REPORT</h2>
                <div style="color:var(--arc-yellow); font-family:var(--font-mono); font-size: 14px; margin-top:6px;">SOURCE: {safe_filename}</div>
            </div>
            <div style="font-family: var(--font-mono); font-size: 12px; color: var(--text-main); text-align: right;">
                <div>PROJECTS ANALYZED: <span style="color:var(--arc-cyan); font-weight:700;">{len(matched_projects)}</span></div>
                <div>CANDIDATE SKILLS: <span style="color:var(--arc-green); font-weight:700;">{total_skills}</span></div>
            </div>
        </div>
    </div>
    """)
    
    # 3-Panel Grid
    html_parts.append('<div class="cv-matching-panels">')
    
    # ============== PANEL 1: CV ANALYSIS ==============
    html_parts.append('<div class="cv-panel">')
    html_parts.append('<div class="panel-header">📄 CANDIDATE PROFILE</div>')
    
    # Summary
    if summary:
        safe_summary = html.escape(summary)
        html_parts.append(f'<div class="cv-summary-compact">{safe_summary}</div>')
    
    # Stats
    html_parts.append(f"""
    <div style="margin-bottom: 20px;">
        <div class="stat-inline"><strong>Experience:</strong> {html.escape(str(experience_years))}</div>
        <div class="stat-inline"><strong>Tech Skills:</strong> {len(tech_skills)}</div>
        <div class="stat-inline"><strong>Soft Skills:</strong> {len(soft_skills)}</div>
    </div>
    """)
    
    # Skills
    if tech_skills:
        html_parts.append('<div style="margin-bottom: 16px;"><div style="font-size:12px; color:var(--arc-yellow); margin-bottom:8px; font-weight:600;">💻 TECHNICAL</div>')
        for skill in tech_skills[:15]:  # Limit display
            html_parts.append(f'<span class="skill-badge-small technical">{html.escape(skill)}</span>')
        if len(tech_skills) > 15:
            html_parts.append(f'<span class="skill-badge-small technical">+{len(tech_skills) - 15} more</span>')
        html_parts.append('</div>')
    
    if soft_skills:
        html_parts.append('<div><div style="font-size:12px; color:var(--arc-cyan); margin-bottom:8px; font-weight:600;">🤝 SOFT SKILLS</div>')
        for skill in soft_skills[:10]:
            html_parts.append(f'<span class="skill-badge-small soft">{html.escape(skill)}</span>')
        if len(soft_skills) > 10:
            html_parts.append(f'<span class="skill-badge-small soft">+{len(soft_skills) - 10} more</span>')
        html_parts.append('</div>')
    
    html_parts.append('</div>')  # Close Panel 1
    
    # ============== PANEL 2: PROJECT MATCHES ==============
    html_parts.append('<div class="cv-panel">')
    html_parts.append('<div class="panel-header">🎯 PROJECT MATCHES (RANKED)</div>')
    
    if matched_projects:
        for project in matched_projects:
            match_pct = project['match_percentage']
            
            # Determine match level
            if match_pct >= 90:
                match_class = "perfect"
            elif match_pct >= 70:
                match_class = "good"
            elif match_pct >= 50:
                match_class = "partial"
            else:
                match_class = "low"
            
            project_name = html.escape(project['project_name'])
            matched_count = project['matched_skills_count']
            required_count = project['required_skills_count']
            missing_count = project['missing_skills_count']
            status = html.escape(project.get('status', 'Unknown'))
            
            # Convert budget to int/float for formatting
            budget = project.get("budget", 0)
            try:
                budget_num = float(budget) if budget else 0
            except (ValueError, TypeError):
                budget_num = 0
            
            html_parts.append(f'<div class="project-match-card {match_class}">')
            html_parts.append(f'<div class="match-percentage {match_class}">{match_pct}%</div>')
            html_parts.append(f'<div class="project-name">{project_name}</div>')
            html_parts.append(f'<div class="project-meta">STATUS: {status} | BUDGET: ${budget_num:,.0f}</div>')
            html_parts.append(f'<div class="skill-match-bar">')
            html_parts.append(f'<span style="color:var(--arc-green);">✓ {matched_count} Match</span>')
            html_parts.append(f'<span style="color:var(--text-main); opacity:0.6;">|</span>')
            html_parts.append(f'<span style="color:var(--arc-red);">✗ {missing_count} Gap</span>')
            html_parts.append(f'<span style="color:var(--text-main); opacity:0.6;">|</span>')
            html_parts.append(f'<span style="color:var(--text-main);">{required_count} Required</span>')
            html_parts.append('</div></div>')
    else:
        html_parts.append('<div class="no-data-message">No projects found for matching.</div>')
    
    html_parts.append('</div>')  # Close Panel 2
    
    # ============== PANEL 3: SKILL GAPS SUMMARY ==============
    html_parts.append('<div class="cv-panel">')
    html_parts.append('<div class="panel-header">⚠️ SKILL GAPS</div>')
    
    if matched_projects:
        # Show missing skills for each project
        has_gaps = False
        for project in matched_projects:
            if project['missing_skills_count'] == 0:
                continue  # Skip projects with 100% match
            
            has_gaps = True
            project_name = html.escape(project['project_name'])
            missing_skills = project.get('missing_skills', [])
            
            html_parts.append('<div class="training-cost-card">')
            html_parts.append(f'<div class="cost-project-name">{project_name}</div>')
            html_parts.append(f'<div class="cost-summary">{project["missing_skills_count"]} skill gap(s)</div>')
            
            # List missing skills
            html_parts.append('<div style="margin-top: 10px;">')
            for skill in missing_skills[:5]:  # Show max 5
                skill_name = html.escape(skill)
                html_parts.append(f'<div style="font-size:12px; color:var(--arc-red); padding:4px 0;">• {skill_name}</div>')
            if len(missing_skills) > 5:
                html_parts.append(f'<div style="font-size:12px; color:var(--text-main); opacity:0.8; padding:4px 0;">... and {len(missing_skills) - 5} more</div>')
            html_parts.append('</div>')
            html_parts.append('</div>')
        
        if not has_gaps:
            html_parts.append('<div class="no-data-message">✅ Candidate is fully qualified for all projects!<br>No skill gaps detected.</div>')
    else:
        html_parts.append('<div class="no-data-message">No data available.</div>')
    
    html_parts.append('</div>')  # Close Panel 3
    
    html_parts.append('</div>')  # Close panels grid
    html_parts.append('</div>')  # Close wrapper
    
    return ''.join(html_parts)