{% extends "base.html" %}
{% block content %}
<div class="card">
  <h2>Summary</h2>
  <p class="muted">Static analysis results for the current project snapshot.</p>
  {% if data.summary %}
    <ul>
      {% for k, v in data.summary.items() %}
        <li><b>{{ k }}</b>: {{ v }}</li>
      {% endfor %}
    </ul>
  {% else %}
    <p>No summary provided.</p>
  {% endif %}
</div>

{# Phase 2.5: Assets & Media Section #}
{% if data.assets and data.assets.summary %}
<div class="card" style="margin-top:12px">
  <h2>📦 Assets &amp; Media</h2>
  <div class="asset-summary-cards">
    <div class="summary-card">
      <div class="card-value">{{ data.assets.summary.total_files or 0 }}</div>
      <div class="card-label">Total Assets</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.assets.summary.images or 0 }}</div>
      <div class="card-label">Images</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.assets.summary.audio or 0 }}</div>
      <div class="card-label">Audio</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.assets.summary.video or 0 }}</div>
      <div class="card-label">Video</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.assets.summary.fonts or 0 }}</div>
      <div class="card-label">Fonts</div>
    </div>
  </div>
  
  {# Group issues by severity #}
  {% set errors = data.assets.issues | selectattr('severity', 'equalto', 'error') | list %}
  {% set warns = data.assets.issues | selectattr('severity', 'equalto', 'warn') | list %}
  {% set infos = data.assets.issues | selectattr('severity', 'equalto', 'info') | list %}
  
  <div class="issues-container">
    {# Errors #}
    <h3>Missing Assets (Errors) ({{ errors | length }})</h3>
    {% if errors %}
    <table class="issues-table error-row">
      <thead><tr><th>Severity</th><th>Rule</th><th>Message</th><th>Location</th></tr></thead>
      <tbody>
        {% for issue in errors %}
        <tr>
          <td class="severity-badge">{{ issue.severity }}</td>
          <td class="rule-id">{{ issue.rule_id }}</td>
          <td class="message">
            {{ issue.message }}
            {% if issue.extra and issue.extra.suggestions %}
              <br><small>Suggestions: {{ issue.extra.suggestions | join(', ') }}</small>
            {% endif %}
            {% if issue.extra and issue.extra.file_size %}
              <br><small>File size: {{ (issue.extra.file_size / 1024) | int }} KB</small>
            {% endif %}
          </td>
          <td class="location">
            <a class="file-link" href="file://{{ issue.file }}">{{ issue.file }}</a>:<span class="line-number">{{ issue.line }}</span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="no-issues">✓ No missing assets (errors) found</p>
    {% endif %}
    
    {# Warnings #}
    <h3>Typo Warnings ({{ warns | length }})</h3>
    {% if warns %}
    <table class="issues-table warning-row">
      <thead><tr><th>Severity</th><th>Rule</th><th>Message</th><th>Location</th></tr></thead>
      <tbody>
        {% for issue in warns %}
        <tr>
          <td class="severity-badge">{{ issue.severity }}</td>
          <td class="rule-id">{{ issue.rule_id }}</td>
          <td class="message">
            {{ issue.message }}
            {% if issue.extra and issue.extra.suggestions %}
              <br><small>Suggestions: {{ issue.extra.suggestions | join(', ') }}</small>
            {% endif %}
            {% if issue.extra and issue.extra.file_size %}
              <br><small>File size: {{ (issue.extra.file_size / 1024) | int }} KB</small>
            {% endif %}
          </td>
          <td class="location">
            <a class="file-link" href="file://{{ issue.file }}">{{ issue.file }}</a>:<span class="line-number">{{ issue.line }}</span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="no-issues">✓ No typo warnings found</p>
    {% endif %}
    
    {# Info #}
    <h3>Unused Assets (Info) ({{ infos | length }})</h3>
    {% if infos %}
    <table class="issues-table info-row">
      <thead><tr><th>Severity</th><th>Rule</th><th>Message</th><th>Location</th></tr></thead>
      <tbody>
        {% for issue in infos %}
        <tr>
          <td class="severity-badge">{{ issue.severity }}</td>
          <td class="rule-id">{{ issue.rule_id }}</td>
          <td class="message">
            {{ issue.message }}
            {% if issue.extra and issue.extra.suggestions %}
              <br><small>Suggestions: {{ issue.extra.suggestions | join(', ') }}</small>
            {% endif %}
            {% if issue.extra and issue.extra.file_size %}
              <br><small>File size: {{ (issue.extra.file_size / 1024) | int }} KB</small>
            {% endif %}
          </td>
          <td class="location">
            <a class="file-link" href="file://{{ issue.file }}">{{ issue.file }}</a>:<span class="line-number">{{ issue.line }}</span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="no-issues">✓ No unused assets (info) found</p>
    {% endif %}
  </div>
</div>

<style>
  .asset-summary-cards { display:flex; gap:15px; margin:20px 0; flex-wrap:wrap; }
  .summary-card { background: var(--vscode-editor-background); border:1px solid var(--vscode-panel-border);
                   border-radius:8px; padding:15px 20px; text-align:center; min-width:120px; }
  .card-value { font-size:32px; font-weight:bold; color: var(--vscode-textLink-foreground); }
  .card-label { font-size:12px; color: var(--vscode-descriptionForeground); margin-top:5px; }
  .issues-table { width:100%; border-collapse:collapse; margin:15px 0; }
  .issues-table th { background: var(--vscode-editor-background); padding:10px; text-align:left;
                      border-bottom:2px solid var(--vscode-panel-border); }
  .issues-table td { padding:10px; border-bottom:1px solid var(--vscode-panel-border); }
  .error-row { background: rgba(244, 67, 54, 0.08); }
  .warning-row { background: rgba(255, 152, 0, 0.10); }
  .info-row { background: rgba(33, 150, 243, 0.08); }
  .severity-badge { font-weight:bold; padding:4px 8px; border-radius:4px; font-size:11px; color:#fff; }
  .error-row .severity-badge { background:#f44336; }
  .warning-row .severity-badge { background:#ff9800; }
  .info-row .severity-badge { background:#2196f3; }
  .file-link { color: var(--vscode-textLink-foreground); text-decoration:none; }
  .file-link:hover { text-decoration:underline; }
  .line-number { color: var(--vscode-descriptionForeground); font-size:11px; }
  .no-issues { color:#4caf50; padding:15px; text-align:center; font-weight:bold; }
</style>
{% endif %}

{# Phase 7: Localization Coverage (v0.7.7) #}
{% if data.localization and data.localization.enabled %}
<div class="card" style="margin-top:12px">
  <h2>🌐 Localization Coverage</h2>
  <p class="muted">Translation completeness across {{ data.localization.total_languages }} language(s)</p>
  
  <div class="locale-summary-cards">
    <div class="summary-card">
      <div class="card-value">{{ data.localization.total_source_strings }}</div>
      <div class="card-label">Source Strings</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.localization.total_languages }}</div>
      <div class="card-label">Languages</div>
    </div>
    <div class="summary-card {% if data.localization.avg_coverage_pct >= 90 %}coverage-excellent{% elif data.localization.avg_coverage_pct >= 70 %}coverage-good{% else %}coverage-poor{% endif %}">
      <div class="card-value">{{ data.localization.avg_coverage_pct | round(1) }}%</div>
      <div class="card-label">Avg Coverage</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.localization.issues.missing }}</div>
      <div class="card-label">Missing</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.localization.issues.orphaned }}</div>
      <div class="card-label">Orphaned</div>
    </div>
    <div class="summary-card">
      <div class="card-value">{{ data.localization.issues.mismatch }}</div>
      <div class="card-label">Mismatches</div>
    </div>
  </div>
  
  {# Per-language coverage breakdown #}
  <h3>Coverage by Language</h3>
  <div class="coverage-bars">
    {% for lang, coverage_pct in data.localization.coverage_by_language.items() %}
    <div class="coverage-item">
      <div class="coverage-label">
        <span class="lang-code">{{ lang }}</span>
        <span class="coverage-percent">{{ coverage_pct | round(1) }}%</span>
      </div>
      <div class="coverage-bar-container">
        <!-- Dynamic width via Jinja2 template variable -->
        <div class="coverage-bar {% if coverage_pct >= 90 %}bar-excellent{% elif coverage_pct >= 70 %}bar-good{% elif coverage_pct >= 50 %}bar-fair{% else %}bar-poor{% endif %}" 
             style="width: {{ coverage_pct }}%"></div>
      </div>
    </div>
    {% endfor %}
  </div>
  
  {# Localization issues breakdown #}
  <h3>Localization Issues Overview</h3>
  <p>Missing translations: <strong>{{ data.localization.issues.missing }}</strong> | 
     Orphaned: <strong>{{ data.localization.issues.orphaned }}</strong> | 
     Length mismatches: <strong>{{ data.localization.issues.mismatch }}</strong></p>
  
  <p class="muted"><small>💡 View detailed locale data in <code>.branchpy/artifacts/locales_index.json</code></small></p>
</div>

<style>
  .locale-summary-cards { display:flex; gap:15px; margin:20px 0; flex-wrap:wrap; }
  .coverage-excellent .card-value { color: #4caf50; }
  .coverage-good .card-value { color: #2196f3; }
  .coverage-poor .card-value { color: #ff9800; }
  
  .coverage-bars { margin:20px 0; }
  .coverage-item { margin-bottom:15px; }
  .coverage-label { display:flex; justify-content:space-between; margin-bottom:5px; }
  .lang-code { font-weight:bold; text-transform:uppercase; font-size:13px; }
  .coverage-percent { color: var(--vscode-descriptionForeground); font-size:12px; }
  .coverage-bar-container { background: var(--vscode-editor-background); 
                            border:1px solid var(--vscode-panel-border);
                            border-radius:4px; height:20px; overflow:hidden; }
  .coverage-bar { height:100%; transition:width 0.3s ease; }
  .bar-excellent { background: linear-gradient(90deg, #4caf50, #66bb6a); }
  .bar-good { background: linear-gradient(90deg, #2196f3, #42a5f5); }
  .bar-fair { background: linear-gradient(90deg, #ff9800, #ffa726); }
  .bar-poor { background: linear-gradient(90deg, #f44336, #ef5350); }
</style>
{% endif %}

{# Phase 8: Custom Rules & Project Policies (v0.7.8) #}
{% if data.customRules and data.customRules.enabled %}
<div class="card" style="margin-top:12px">
  <h2>📋 Custom Rules & Project Policies</h2>
  <p class="muted">User-defined validation rules from <code>.branchpy/rules_custom.yml</code></p>
  
  <div class="locale-summary-cards">
    <div class="summary-card">
      <div class="card-label">Total Violations</div>
      <div class="card-value">{{ data.customRules.total_violations }}</div>
    </div>
    <div class="summary-card">
      <div class="card-label">❌ Errors</div>
      <div class="card-value">{{ data.customRules.by_severity.ERROR | default(0) }}</div>
    </div>
    <div class="summary-card">
      <div class="card-label">⚠️ Warnings</div>
      <div class="card-value">{{ data.customRules.by_severity.WARNING | default(0) }}</div>
    </div>
    <div class="summary-card">
      <div class="card-label">ℹ️ Info</div>
      <div class="card-value">{{ data.customRules.by_severity.INFO | default(0) }}</div>
    </div>
  </div>
  
  {# Violations by category #}
  <h3>Violations by Category</h3>
  <div class="category-breakdown">
    {% for category, count in data.customRules.by_category.items() %}
    <div class="category-item">
      <span class="category-name">{{ category }}</span>
      <span class="category-count">{{ count }}</span>
    </div>
    {% endfor %}
  </div>
  
  {# Top violations preview (first 10) #}
  <h3>Recent Violations</h3>
  <div class="violations-list">
    {% for violation in data.customRules.violations[:10] %}
    <div class="violation-item severity-{{ violation.severity.lower() }}">
      <div class="violation-header">
        <span class="violation-rule">{{ violation.rule_id }}</span>
        <span class="violation-severity badge-{{ violation.severity.lower() }}">{{ violation.severity }}</span>
      </div>
      <div class="violation-message">{{ violation.message }}</div>
      <div class="violation-location">
        <span class="violation-category">{{ violation.category }}</span>
        <span class="violation-line">Line {{ violation.line }}</span>
      </div>
      {% if violation.matched_text %}
      <div class="violation-context"><code>{{ violation.matched_text }}</code></div>
      {% endif %}
    </div>
    {% endfor %}
    
    {% if data.customRules.total_violations > 10 %}
    <p class="muted"><small>... and {{ data.customRules.total_violations - 10 }} more violations</small></p>
    {% endif %}
  </div>
  
  <p class="muted"><small>💡 Configure enforcement levels in <code>.branchpy/policy.toml</code></small></p>
</div>

<style>
  .category-breakdown { display:flex; flex-direction:column; gap:8px; margin:15px 0; }
  .category-item { display:flex; justify-content:space-between; padding:8px 12px; 
                   background: var(--vscode-editor-background); 
                   border:1px solid var(--vscode-panel-border); border-radius:4px; }
  .category-name { font-weight:500; text-transform:capitalize; }
  .category-count { color: var(--vscode-charts-blue); font-weight:bold; }
  
  .violations-list { margin:15px 0; }
  .violation-item { padding:12px; margin-bottom:10px; 
                    border-left:3px solid var(--vscode-panel-border); 
                    background: var(--vscode-editor-background); }
  .violation-item.severity-error { border-left-color: #f44336; }
  .violation-item.severity-warning { border-left-color: #ff9800; }
  .violation-item.severity-info { border-left-color: #2196f3; }
  
  .violation-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .violation-rule { font-family:monospace; font-weight:bold; color: var(--vscode-textLink-foreground); }
  .badge-error { background:#f44336; color:white; padding:2px 8px; border-radius:3px; font-size:11px; }
  .badge-warning { background:#ff9800; color:white; padding:2px 8px; border-radius:3px; font-size:11px; }
  .badge-info { background:#2196f3; color:white; padding:2px 8px; border-radius:3px; font-size:11px; }
  
  .violation-message { margin-bottom:6px; font-size:14px; }
  .violation-location { display:flex; gap:12px; font-size:12px; color: var(--vscode-descriptionForeground); }
  .violation-category { text-transform:capitalize; }
  .violation-context { margin-top:8px; padding:8px; background: var(--vscode-textCodeBlock-background); 
                       border-radius:4px; font-family:monospace; font-size:12px; }
</style>
{% endif %}

<div class="card" style="margin-top:12px">
  <h2>Issues</h2>
  {% if data.issues %}
  <table>
    <thead><tr><th>Level</th><th>Code</th><th>Message</th><th>File:Line</th></tr></thead>
    <tbody>
      {% for it in data.issues %}
      <tr>
        <td>{{ it.level }}</td>
        <td>{{ it.code }}</td>
        <td>{{ it.message }}</td>
        <td class="muted">{{ it.path }}:{{ it.line or "-" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p>No issues found.</p>
  {% endif %}
</div>

{# Phase 7: Localization Coverage #}
{% if data.localization %}
<div class="card" style="margin-top:12px">
  {% include "partials/l10n_coverage.html" %}
</div>
{% endif %}

{% endblock %}