<?php
/** @var array<string, mixed> $pageData */
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <?php $themeCss = app_tenant_theme_root_css($tenantSettings ?? app_tenant_settings_defaults()); ?>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kaffeeliste - Rollen</title>
    <style>
        :root{
            <?= $themeCss ?>
            --line:rgba(37,24,15,.14);
            --shadow:0 16px 36px rgba(37,24,15,.08);
            --radius:18px;
        }
        *{box-sizing:border-box}
        body{
            margin:0;
            min-height:100vh;
            font-family:"Aptos","Segoe UI",sans-serif;
            color:var(--ink);
            background:linear-gradient(180deg,#f9f6ef 0%,var(--bg) 100%);
        }
        a{color:inherit;text-decoration:none}
        h1,h2,h3{font-family:Georgia,serif;letter-spacing:-.02em}
        .shell{width:min(1240px,calc(100vw - 32px));margin:20px auto 40px}
        .bar,.hero,.card,.table-card,.note{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
        .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;margin-bottom:18px;flex-wrap:wrap}
        .brand{display:grid;gap:4px}
        .brand strong{font-size:1.18rem}
        .brand span,.muted{color:var(--muted)}
        .links,.actions,.context,.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
        .links a,.badge,.pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:#fff;color:var(--brand);font-weight:700;border:1px solid rgba(var(--brand-rgb),.12)}
        .links a.active{background:var(--brand);color:#fff}
        .badge,.pill{padding:7px 12px;font-size:.86rem}
        .badge--solid{background:var(--brand);color:#fff}
        .hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:20px;padding:24px;margin-bottom:18px;background:linear-gradient(180deg,#fffdf8 0%,#f9f4ea 100%)}
        .hero__kicker{margin:0 0 10px;color:var(--accent);text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;font-weight:800}
        .hero__title{margin:0 0 12px;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05}
        .hero__lead{margin:0;color:var(--muted);max-width:70ch;line-height:1.7}
        .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
        .button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid transparent;background:var(--brand);color:#fff;font-weight:700}
        .button--ghost{background:#fff;color:var(--brand);border:1px solid rgba(var(--brand-rgb),.18)}
        .grid{display:grid;gap:18px}
        .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
        .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
        .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
        .metric{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}
        .metric__label{color:var(--muted)}
        .metric__value{font-size:1.9rem;font-weight:800;margin:6px 0 8px}
        .table-card,.card{padding:22px}
        .table-card__header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap}
        table{width:100%;border-collapse:collapse}
        th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
        th{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
        .status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.1);color:var(--brand);font-weight:700;font-size:.84rem}
        .status--warning{background:rgba(var(--accent-rgb),.14);color:#8c6500}
        .status--success{background:rgba(var(--brand-rgb),.12);color:var(--brand)}
        .list-reset{margin:0;padding-left:18px}
        .list-reset li+li{margin-top:10px}
        .note{padding:16px 18px;background:rgba(var(--brand-rgb),.06)}
        .stack{display:grid;gap:12px}
        .chip-list{display:flex;flex-wrap:wrap;gap:8px}
        .chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.08);color:var(--brand);font-size:.84rem;font-weight:700}
        @media(max-width:960px){.hero,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}.bar{align-items:flex-start;flex-direction:column}}
    </style>
</head>
<body>
    <main class="shell">
        <header class="bar">
            <div class="brand">
                <strong>Kaffeeliste</strong>
                <span>Rollen und Rechte im Tenant.</span>
            </div>
            <nav class="links">
                <?php foreach ($tenantNavItems as $item): ?>
                    <a class="<?= (($item['key'] ?? '') === 'roles') ? 'active' : '' ?>" href="<?= tenant_roles_h((string) ($item['href'] ?? '/')) ?>"><?= tenant_roles_h((string) ($item['label'] ?? 'Link')) ?></a>
                <?php endforeach; ?>
                <form method="post" action="/logout/"><button type="submit" class="button button--ghost">Abmelden</button></form>
            </nav>
        </header>

        <section class="hero">
            <div>
                <p class="hero__kicker">Rollen</p>
                <h1 class="hero__title">Rollen und Rechte</h1>
                <p class="hero__lead">
                    Tenant-Admins behalten den Gesamtzugriff. Fachrollen für Finanzen, Support und Umfragen werden gezielt delegiert.
                </p>
                <div class="hero__actions">
                    <a class="button" href="/dashboard/">Zum Dashboard</a>
                    <a class="button button--ghost" href="/members/">Mitglieder</a>
                </div>
                <div class="meta" style="margin-top:16px;">
                    <span class="badge">lokal + ADFS/OIDC</span>
                    <span class="badge">Rollenmatrix</span>
                    <span class="badge">Delegation</span>
                </div>
            </div>

            <div class="stack">
                <?php foreach (array_slice($metrics, 0, 4) as $metric): ?>
                    <article class="metric">
                        <div class="metric__label"><?= tenant_roles_h((string) ($metric['label'] ?? 'Kennzahl')) ?></div>
                        <div class="metric__value"><?= tenant_roles_h((string) ($metric['value'] ?? '-')) ?></div>
                        <div class="muted"><?= tenant_roles_h((string) ($metric['detail'] ?? '')) ?></div>
                    </article>
                <?php endforeach; ?>
            </div>
        </section>

        <section class="grid grid--2">
            <article class="table-card">
                <div class="table-card__header">
                    <div>
                        <p class="hero__kicker">Rollenmatrix</p>
                        <h2>Vollzugriff, Spezialrollen und Leserechte</h2>
                    </div>
                    <span class="pill">tenant scoped</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Rolle</th>
                            <th>Rechte</th>
                            <th>Delegation</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($roles as $role): ?>
                            <tr>
                                <td>
                                    <strong><?= tenant_roles_h((string) ($role['label'] ?? $role['key'] ?? 'Rolle')) ?></strong><br>
                                    <span class="muted"><?= tenant_roles_h((string) ($role['scope'] ?? '')) ?></span>
                                </td>
                                <td>
                                    <div class="chip-list">
                                        <?php foreach (($role['rights'] ?? []) as $right): ?>
                                            <span class="chip"><?= tenant_roles_h((string) $right) ?></span>
                                        <?php endforeach; ?>
                                    </div>
                                </td>
                                <td>
                                    <?= tenant_roles_h((string) ($role['delegation'] ?? '')) ?><br>
                                    <span class="muted"><?= tenant_roles_h((string) ($role['notes'] ?? '')) ?></span>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </article>

            <article class="card">
                <p class="hero__kicker">Delegation</p>
                <h2>Wer Rollen vergeben darf</h2>
                <div class="stack">
                    <?php foreach ($delegationRules as $rule): ?>
                        <div class="note">
                            <strong><?= tenant_roles_h((string) ($rule['from'] ?? '')) ?> → <?= tenant_roles_h((string) ($rule['to'] ?? '')) ?></strong>
                            <div><?= tenant_roles_h((string) ($rule['rule'] ?? '')) ?></div>
                            <div class="muted" style="margin-top:4px;">
                                Freigabe: <?= tenant_roles_h((string) ($rule['approval'] ?? '')) ?>
                            </div>
                            <div class="muted"><?= tenant_roles_h((string) ($rule['note'] ?? '')) ?></div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <div class="note" style="margin-top:16px;">
                    Das Vier-Augen-Prinzip kann tenantweit aktiviert oder deaktiviert werden. Kritische Aktionen werden
                    dadurch kontrolliert, ohne die Facharbeit in jedem Tenant gleich stark zu bremsen.
                </div>
            </article>
        </section>

        <section class="grid grid--2" style="margin-top:18px;">
            <article class="table-card">
                <div class="table-card__header">
                    <div>
                        <p class="hero__kicker">Tenant-Snapshots</p>
                        <h2>Wie die Rollen in den Tenants aussehen</h2>
                    </div>
                    <span class="pill"><?= tenant_roles_h((string) ($tenant['tenant_key'] ?? 'berlin')) ?></span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Mandant</th>
                            <th>Admins</th>
                            <th>Spezialrollen</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($tenantSnapshots as $snapshot): ?>
                            <tr>
                                <td>
                                    <strong><?= tenant_roles_h((string) ($snapshot['name'] ?? 'Tenant')) ?></strong><br>
                                    <span class="muted"><?= tenant_roles_h((string) ($snapshot['tenant_key'] ?? '')) ?> · <?= tenant_roles_h((string) ($snapshot['primary_contact'] ?? '')) ?></span>
                                </td>
                                <td><?= (int) ($snapshot['admin_count'] ?? 0) ?></td>
                                <td><?= tenant_roles_implode((array) ($snapshot['special_roles'] ?? [])) ?></td>
                                <td>
                                    <?php if (($snapshot['status'] ?? 'active') === 'active'): ?>
                                        <span class="status status--success"><?= tenant_roles_h((string) ($snapshot['delegation_state'] ?? 'Aktiv')) ?></span>
                                    <?php else: ?>
                                        <span class="status status--warning"><?= tenant_roles_h((string) ($snapshot['delegation_state'] ?? 'Prüfen')) ?></span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </article>

            <article class="card">
                <p class="hero__kicker">Lesbare Sicht</p>
                <h2>Was Tenant-Admins direkt verstehen sollen</h2>
                <div class="stack">
                    <?php foreach ($permissionGroups as $group): ?>
                        <div class="note">
                            <strong><?= tenant_roles_h((string) ($group['title'] ?? 'Rechtegruppe')) ?></strong>
                            <div class="chip-list" style="margin-top:8px;">
                                <?php foreach (($group['items'] ?? []) as $item): ?>
                                    <span class="chip"><?= tenant_roles_h((string) $item) ?></span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <ul class="list-reset" style="margin-top:16px;">
                    <?php foreach ($notes as $note): ?>
                        <li><?= tenant_roles_h((string) $note) ?></li>
                    <?php endforeach; ?>
                </ul>
            </article>
        </section>
    </main>
</body>
</html>
