<?= $this->extend('layouts/dashboard') ?>

<?= $this->section('content') ?>
    <div class="space-y-6">
        <section class="page-header">
            <div>
                <p class="page-kicker">Niveluri inot</p>
                <h2 class="section-title text-2xl"><?= esc($pageTitle) ?></h2>
                <p class="section-copy mt-2 max-w-3xl"><?= esc($pageDescription) ?></p>
            </div>
            <?php if ($canManage) : ?>
                <a href="<?= url_to('levels.new') ?>" class="btn-primary">Adauga nivel</a>
            <?php endif; ?>
        </section>

        <form method="get" class="surface-card p-5">
            <div class="grid gap-4 lg:grid-cols-[1fr_auto]">
                <div>
                    <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Cautare</label>
                    <input type="text" name="q" class="form-input" value="<?= esc($query) ?>" placeholder="Nume sau slug">
                </div>
                <div class="flex items-end gap-3">
                    <button type="submit" class="btn-primary w-full lg:w-auto">Cauta</button>
                    <a href="<?= url_to('levels.index') ?>" class="btn-secondary w-full lg:w-auto">Reset</a>
                </div>
            </div>
        </form>

        <?php if ($levels === []) : ?>
            <?= view('components/empty_state', ['title' => 'Nu exista nivele', 'description' => 'Adauga un nivel nou pentru a porni configurarea benchmarks-urilor.']) ?>
        <?php else : ?>
            <section class="grid gap-6 xl:grid-cols-2">
                <?php foreach ($levels as $level) : ?>
                    <article class="surface-card p-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <span class="inline-flex rounded-full border px-3 py-1 text-xs font-semibold" style="<?= esc(level_chip_style($level['color_hex']), 'attr') ?>">
                                    <?= esc($level['name']) ?>
                                </span>
                                <p class="mt-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-400"><?= esc($level['slug']) ?></p>
                            </div>
                            <?php if ($canManage) : ?>
                                <a href="<?= url_to('levels.edit', $level['id']) ?>" class="btn-ghost">Edit</a>
                            <?php endif; ?>
                        </div>
                        <div class="mt-5 grid gap-4 sm:grid-cols-3">
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Benchmark minim</p>
                                <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc(format_score($level['benchmark_minimum'])) ?></p>
                            </div>
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Benchmark target</p>
                                <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc(format_score($level['benchmark_target'])) ?></p>
                            </div>
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Ordine</p>
                                <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc((string) $level['sort_order']) ?></p>
                            </div>
                        </div>
                        <div class="mt-5 grid gap-4 sm:grid-cols-2">
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Copii in nivel</p>
                                <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc((string) $level['children_count']) ?></p>
                            </div>
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Grupe asociate</p>
                                <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc((string) $level['groups_count']) ?></p>
                            </div>
                        </div>
                        <div class="mt-5 space-y-4 text-sm text-slate-600">
                            <p><span class="font-semibold text-slate-900">Descriere interna:</span> <?= esc($level['internal_description'] ?: '—') ?></p>
                            <p><span class="font-semibold text-slate-900">Descriere parinte:</span> <?= esc($level['parent_description'] ?: '—') ?></p>
                            <p><span class="font-semibold text-slate-900">Reguli promovare:</span> <?= esc($level['promotion_rules'] ?: '—') ?></p>
                        </div>
                    </article>
                <?php endforeach; ?>
            </section>
        <?php endif; ?>
    </div>
<?= $this->endSection() ?>
