<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="utf-8">
    <title><?= esc($report['title'] ?? 'Raport') ?></title>
    <style>
        @page {
            margin: 22px 28px;
        }

        body {
            color: #0f172a;
            font-family: DejaVu Sans, sans-serif;
            font-size: 11px;
            line-height: 1.45;
        }

        .header {
            border-bottom: 1px solid #dbe3ee;
            margin-bottom: 18px;
            padding-bottom: 14px;
        }

        .brand-kicker {
            color: #64748b;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.28em;
            margin: 0 0 4px;
            text-transform: uppercase;
        }

        h1 {
            font-size: 24px;
            margin: 0;
        }

        .subtitle {
            color: #475569;
            margin: 6px 0 0;
        }

        .meta {
            margin-top: 12px;
        }

        .meta-item {
            display: inline-block;
            margin: 0 12px 8px 0;
            padding: 6px 10px;
            border: 1px solid #dbe3ee;
            border-radius: 999px;
            background: #f8fafc;
            color: #334155;
            font-size: 10px;
        }

        .meta-item strong {
            color: #0f172a;
        }

        .summary {
            margin: 18px 0 16px;
        }

        .summary-table,
        .data-table {
            border-collapse: collapse;
            width: 100%;
        }

        .summary-table td {
            border: 1px solid #dbe3ee;
            padding: 10px 12px;
            vertical-align: top;
            width: 33.33%;
        }

        .summary-label {
            color: #64748b;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .summary-value {
            color: #0f172a;
            font-size: 18px;
            font-weight: 700;
            margin-top: 6px;
        }

        .summary-meta {
            color: #475569;
            font-size: 10px;
            margin-top: 6px;
        }

        .section-title {
            font-size: 14px;
            font-weight: 700;
            margin: 18px 0 10px;
        }

        .data-table th,
        .data-table td {
            border: 1px solid #dbe3ee;
            padding: 8px 10px;
            text-align: left;
            vertical-align: top;
        }

        .data-table thead th {
            background: #eff6ff;
            color: #0f172a;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .empty {
            border: 1px solid #dbe3ee;
            border-radius: 12px;
            background: #f8fafc;
            color: #475569;
            padding: 14px 16px;
        }
    </style>
</head>
<body>
    <header class="header">
        <p class="brand-kicker">Splash Academy</p>
        <h1><?= esc($report['title'] ?? 'Raport') ?></h1>
        <p class="subtitle"><?= esc($report['description'] ?? '') ?></p>
        <div class="meta">
            <span class="meta-item"><strong>Generat:</strong> <?= esc($generated_at_label ?? '') ?></span>
            <?php foreach (($applied_filters ?? []) as $filter) : ?>
                <span class="meta-item"><strong><?= esc($filter['label']) ?>:</strong> <?= esc($filter['value']) ?></span>
            <?php endforeach; ?>
        </div>
    </header>

    <?php if (! empty($report['summary'])) : ?>
        <section class="summary">
            <table class="summary-table">
                <tbody>
                    <tr>
                        <?php foreach ($report['summary'] as $item) : ?>
                            <td>
                                <div class="summary-label"><?= esc($item['label']) ?></div>
                                <div class="summary-value"><?= esc((string) $item['value']) ?></div>
                                <div class="summary-meta"><?= esc($item['meta']) ?></div>
                            </td>
                        <?php endforeach; ?>
                    </tr>
                </tbody>
            </table>
        </section>
    <?php endif; ?>

    <section>
        <h2 class="section-title">Date raport</h2>
        <?php if (($report['rows'] ?? []) === []) : ?>
            <div class="empty"><?= esc($report['empty'] ?? 'Nu exista date pentru configuratia selectata.') ?></div>
        <?php else : ?>
            <table class="data-table">
                <thead>
                    <tr>
                        <?php foreach ($report['columns'] as $column) : ?>
                            <th><?= esc($column) ?></th>
                        <?php endforeach; ?>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($report['rows'] as $row) : ?>
                        <tr>
                            <?php foreach ($report['columns'] as $column) : ?>
                                <td><?= esc((string) ($row[$column] ?? '-')) ?></td>
                            <?php endforeach; ?>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </section>
</body>
</html>
