<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Design System Dashboard</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            line-height: 1.6;
        }
        
        .header {
            background: white;
            border-bottom: 1px solid #e2e8f0;
            padding: 1rem 2rem;
        }
        
        .header h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e293b;
        }
        
        .nav {
            background: white;
            border-bottom: 1px solid #e2e8f0;
            padding: 0 2rem;
        }
        
        .nav-list {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        
        .nav-link {
            display: block;
            padding: 1rem 0;
            text-decoration: none;
            color: #64748b;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: #3b82f6;
            border-bottom-color: #3b82f6;
        }
        
        .main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .metric-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .metric-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .metric-label {
            color: #64748b;
            font-size: 0.875rem;
        }
        
        .metric-score-excellent { color: #059669; }
        .metric-score-good { color: #0891b2; }
        .metric-score-fair { color: #d97706; }
        .metric-score-poor { color: #dc2626; }
        
        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        
        .content-section {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1e293b;
        }
        
        .issue-item {
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 6px;
            border-left: 4px solid;
        }
        
        .issue-high {
            background-color: #fef2f2;
            border-left-color: #dc2626;
        }
        
        .issue-medium {
            background-color: #fffbeb;
            border-left-color: #d97706;
        }
        
        .issue-low {
            background-color: #f0f9ff;
            border-left-color: #0891b2;
        }
        
        .issue-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .issue-description {
            font-size: 0.875rem;
            color: #64748b;
        }
        
        .maturity-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .maturity-basic { background-color: #fef2f2; color: #dc2626; }
        .maturity-emerging { background-color: #fffbeb; color: #d97706; }
        .maturity-developing { background-color: #f0f9ff; color: #0891b2; }
        .maturity-established { background-color: #f0fdf4; color: #059669; }
        .maturity-mature { background-color: #f3f4f6; color: #374151; }
    </style>
</head>
<body>
    <header class="header">
        <h1>Design System Dashboard</h1>
    </header>
    
    <nav class="nav">
        <ul class="nav-list">
            <li><a href="/design-system" class="nav-link active">Dashboard</a></li>
            <li><a href="/design-system/tokens" class="nav-link">Design Tokens</a></li>
            <li><a href="/design-system/colors" class="nav-link">Farben</a></li>
            <li><a href="/design-system/components" class="nav-link">Components</a></li>
            <li><a href="/design-system/conventions" class="nav-link">Conventions</a></li>
            <li><a href="/design-system/roadmap" class="nav-link">Roadmap</a></li>
        </ul>
    </nav>
    
    <main class="main">
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-value metric-score-{{maturity_level}}">{{overall_score}}</div>
                <div class="metric-label">Gesamt-Score</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-value">
                    <span class="maturity-badge maturity-{{maturity_level}}">{{maturity_level}}</span>
                </div>
                <div class="metric-label">Reife-Level</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-value metric-score-poor">{{ count(critical_issues) }}</div>
                <div class="metric-label">Kritische Probleme</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-value metric-score-good">{{ count(quick_wins) }}</div>
                <div class="metric-label">Quick Wins</div>
            </div>
        </div>
        
        <div class="content-grid">
            <section class="content-section">
                <h2 class="section-title">Kritische Probleme</h2>
                
                <for var="issue" in="critical_issues">
                    <div class="issue-item issue-{{issue.severity}}">
                        <div class="issue-title">{{issue.issue}}</div>
                        <div class="issue-description">{{issue.recommendation}}</div>
                    </div>
                </for>
                
                <!-- Fallback wenn keine Issues vorhanden sind -->
                <div class="empty-state" style="display: none;">
                    <p class="issue-description">Keine kritischen Probleme gefunden! 🎉</p>
                </div>
            </section>
            
            <section class="content-section">
                <h2 class="section-title">Quick Wins</h2>
                
                <for var="win" in="quick_wins">
                    <div class="issue-item issue-low">
                        <div class="issue-title">{{win.action}}</div>
                        <div class="issue-description">
                            {{win.benefit}} • Aufwand: {{win.estimated_time}}
                        </div>
                    </div>
                </for>
                
                <!-- Fallback wenn keine Quick Wins vorhanden sind -->
                <div class="empty-state" style="display: none;">
                    <p class="issue-description">Alle Quick Wins bereits umgesetzt!</p>
                </div>
            </section>
        </div>
        
        <div style="margin-top: 2rem; text-align: center;">
            <a href="/api/design-system/export" 
               style="display: inline-block; padding: 0.75rem 1.5rem; background-color: #3b82f6; color: white; text-decoration: none; border-radius: 6px; font-weight: 600;">
                Vollständigen Report exportieren
            </a>
        </div>
    </main>
</body>
</html>