<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AppBot Report - {{ scenario_name }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0f0f0f;
            color: #e0e0e0;
            line-height: 1.6;
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }

        /* Header */
        .header {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 20px;
            border: 1px solid #2a2a4a;
        }
        .header h1 {
            font-size: 24px;
            color: #ffffff;
            margin-bottom: 8px;
        }
        .header .subtitle {
            color: #8888aa;
            font-size: 14px;
        }

        /* Status Badge */
        .status-badge {
            display: inline-block;
            padding: 6px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 16px;
            margin-top: 12px;
        }
        .status-badge.pass {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }
        .status-badge.fail {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        /* Summary Cards */
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        .summary-card {
            background: #1a1a2e;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #2a2a4a;
            text-align: center;
        }
        .summary-card .value {
            font-size: 28px;
            font-weight: 700;
            color: #ffffff;
        }
        .summary-card .label {
            font-size: 12px;
            color: #8888aa;
            text-transform: uppercase;
            margin-top: 4px;
        }
        .summary-card .value.green { color: #22c55e; }
        .summary-card .value.red { color: #ef4444; }
        .summary-card .value.blue { color: #3b82f6; }

        /* Steps Table */
        .steps-section {
            background: #1a1a2e;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #2a2a4a;
        }
        .steps-section h2 {
            padding: 20px 24px;
            font-size: 18px;
            border-bottom: 1px solid #2a2a4a;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th {
            background: #16213e;
            padding: 12px 16px;
            text-align: left;
            font-size: 12px;
            text-transform: uppercase;
            color: #8888aa;
            border-bottom: 1px solid #2a2a4a;
        }
        td {
            padding: 12px 16px;
            border-bottom: 1px solid #1e1e3e;
            font-size: 14px;
        }
        tr:hover { background: rgba(255,255,255,0.02); }

        .step-status {
            display: inline-block;
            padding: 3px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .step-status.pass {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }
        .step-status.fail {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .error-msg {
            color: #ef4444;
            font-size: 12px;
            margin-top: 4px;
            font-family: monospace;
        }

        .action-tag {
            display: inline-block;
            padding: 2px 8px;
            background: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
            border-radius: 6px;
            font-size: 12px;
            font-family: monospace;
        }

        .locator-tag {
            display: inline-block;
            padding: 2px 8px;
            background: rgba(168, 85, 247, 0.15);
            color: #a855f7;
            border-radius: 6px;
            font-size: 12px;
        }

        /* Footer */
        .footer {
            text-align: center;
            padding: 20px;
            color: #555;
            font-size: 12px;
        }

        /* Screenshot thumbnail */
        .screenshot-thumb {
            max-width: 120px;
            max-height: 80px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #2a2a4a;
        }
        .screenshot-thumb:hover {
            border-color: #3b82f6;
        }

        /* Environment info */
        .env-info {
            display: flex;
            gap: 16px;
            margin-top: 8px;
        }
        .env-tag {
            font-size: 11px;
            color: #666;
            background: rgba(255,255,255,0.05);
            padding: 2px 8px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>{{ scenario_name }}</h1>
            <div class="subtitle">{{ start_time }}</div>
            <div class="status-badge {{ 'pass' if status == 'PASSED' else 'fail' }}">
                {{ status }}
            </div>
            {% if environment %}
            <div class="env-info">
                {% for key, val in environment.items() %}
                <span class="env-tag">{{ key }}: {{ val }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <!-- Summary Cards -->
        <div class="summary-grid">
            <div class="summary-card">
                <div class="value blue">{{ total_steps }}</div>
                <div class="label">Total Steps</div>
            </div>
            <div class="summary-card">
                <div class="value green">{{ passed_steps }}</div>
                <div class="label">Passed</div>
            </div>
            <div class="summary-card">
                <div class="value red">{{ failed_steps }}</div>
                <div class="label">Failed</div>
            </div>
            <div class="summary-card">
                <div class="value">{{ duration }}</div>
                <div class="label">Duration</div>
            </div>
            <div class="summary-card">
                <div class="value">{{ pass_rate }}</div>
                <div class="label">Pass Rate</div>
            </div>
        </div>

        <!-- Steps Table -->
        <div class="steps-section">
            <h2>Test Steps</h2>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Step</th>
                        <th>Action</th>
                        <th>Locator</th>
                        <th>Status</th>
                        <th>Duration</th>
                    </tr>
                </thead>
                <tbody>
                    {% for step in steps %}
                    <tr>
                        <td>{{ step.index }}</td>
                        <td>
                            {{ step.name }}
                            {% if step.error %}
                            <div class="error-msg">{{ step.error }}</div>
                            {% endif %}
                        </td>
                        <td><span class="action-tag">{{ step.action }}</span></td>
                        <td><span class="locator-tag">{{ step.locator }}</span></td>
                        <td>
                            <span class="step-status {{ step.status_class }}">
                                {{ step.status }}
                            </span>
                        </td>
                        <td>{{ step.duration }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Footer -->
        <div class="footer">
            Generated by AppBot v{{ version }} | {{ generated_at }}
        </div>
    </div>
</body>
</html>
