<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quality Analysis Dashboard</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .header {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .status {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      font-weight: bold;
      background-color: {{ status_color }};
      margin: 10px 0;
    }
    .metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }
    .metric-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .metric-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    .metric-value {
      font-size: 32px;
      font-weight: bold;
      color: #333;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f8f9fa;
      font-weight: 600;
    }
    .footer {
      text-align: center;
      color: #666;
      margin-top: 40px;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Quality Analysis Dashboard</h1>
    <p><strong>Generated:</strong> {{ generated_at }}</p>
    <p><strong>Project:</strong> {{ project_name }}</p>
    <p><strong>Version:</strong> {{ version }}</p>
    <div class="status">{{ status_text }}</div>
    <p><strong>Overall Score:</strong> {{ overall_score }}/100 (Threshold: {{ overall_threshold }})</p>
  </div>

  <div class="metrics">
    <div class="metric-card">
      <div class="metric-label">Complexity</div>
      <div class="metric-value">{{ complexity_score }}</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Security</div>
      <div class="metric-value">{{ security_score }}</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Maintainability</div>
      <div class="metric-value">{{ maintainability_score }}</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Test Coverage</div>
      <div class="metric-value">{{ test_coverage_score }}</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Performance</div>
      <div class="metric-value">{{ performance_score }}</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Linting</div>
      <div class="metric-value">{{ linting_score }}</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Type Checking</div>
      <div class="metric-value">{{ type_checking_score }}</div>
    </div>
  </div>

  {% if files %}
  <h2>File-Level Analysis</h2>
  <table>
    <thead>
      <tr>
        <th>File</th>
        <th>Overall Score</th>
        <th>Complexity</th>
        <th>Security</th>
        <th>Maintainability</th>
      </tr>
    </thead>
    <tbody>
      {% for f in files %}
      <tr>
        <td>{{ f.file }}</td>
        <td>{{ f.overall_score }}</td>
        <td>{{ f.complexity_score }}</td>
        <td>{{ f.security_score }}</td>
        <td>{{ f.maintainability_score }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  <div class="footer">
    Generated by TappsCodingAgents Quality Analysis System
  </div>
</body>
</html>

