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

<?= $this->section('content') ?>
    <div class="space-y-6">
        <section class="page-header">
            <div>
                <p class="page-kicker">Alerts Hub</p>
                <h2 class="section-title text-2xl"><?= esc($pageTitle) ?></h2>
                <p class="section-copy mt-2 max-w-3xl"><?= esc($pageDescription) ?></p>
            </div>
        </section>

        <form method="get" class="surface-card p-5">
            <div class="grid gap-4 xl:grid-cols-[220px_220px_220px_auto]">
                <div>
                    <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Perioada</label>
                    <select name="period" class="form-select">
                        <?php foreach ($filters['period_options'] as $key => $label) : ?>
                            <option value="<?= esc($key) ?>" <?= $filters['selected_period'] === $key ? 'selected' : '' ?>><?= esc($label) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Tip alerta</label>
                    <select name="type" class="form-select">
                        <?php foreach ($filters['type_options'] as $key => $label) : ?>
                            <option value="<?= esc($key) ?>" <?= $filters['selected_type'] === $key ? 'selected' : '' ?>><?= esc($label) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Notificari</label>
                    <select name="notification_status" class="form-select">
                        <?php foreach ($filters['notification_status_options'] as $key => $label) : ?>
                            <option value="<?= esc($key) ?>" <?= $filters['selected_notification_status'] === $key ? 'selected' : '' ?>><?= esc($label) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="flex items-end gap-3">
                    <button type="submit" class="btn-primary w-full xl:w-auto">Filtreaza</button>
                    <a href="<?= url_to('alerts.index') ?>" class="btn-secondary w-full xl:w-auto">Reset</a>
                </div>
            </div>
        </form>

        <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <?php foreach ($summary as $item) : ?>
                <article class="mini-stat">
                    <p class="text-sm font-medium text-slate-500"><?= esc($item['label']) ?></p>
                    <p class="mt-3 text-3xl font-semibold text-slate-900"><?= esc((string) $item['value']) ?></p>
                    <p class="mt-2 text-sm text-slate-500"><?= esc($item['meta']) ?></p>
                </article>
            <?php endforeach; ?>
        </section>

        <section class="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
            <article class="surface-card p-6">
                <div class="mb-4">
                    <h3 class="section-title">Alerte dinamice</h3>
                    <p class="section-copy">Generate in timp real din evaluari, prezenta si praguri operationale.</p>
                </div>

                <?php if ($dynamicAlerts === []) : ?>
                    <?= view('components/empty_state', ['title' => 'Nu exista alerte dinamice', 'description' => 'Niciun copil nu a declansat reguli active pentru filtrele curente.']) ?>
                <?php else : ?>
                    <div class="space-y-3">
                        <?php foreach ($dynamicAlerts as $alert) : ?>
                            <article class="surface-muted px-4 py-4">
                                <div class="flex flex-wrap items-start justify-between gap-3">
                                    <div>
                                        <div class="flex flex-wrap items-center gap-3">
                                            <p class="text-sm font-semibold text-slate-900"><?= esc($alert['title']) ?></p>
                                            <?= view('components/status_badge', ['status' => $alert['badge']]) ?>
                                        </div>
                                        <p class="mt-2 text-sm text-slate-900"><?= esc($alert['child_name']) ?></p>
                                        <p class="mt-1 text-sm text-slate-500"><?= esc($alert['meta']) ?></p>
                                        <p class="mt-3 text-sm text-slate-600"><?= esc($alert['description']) ?></p>
                                    </div>
                                    <a href="<?= esc($alert['url']) ?>" class="btn-ghost">Profil</a>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </article>

            <article class="surface-card p-6">
                <div class="mb-4">
                    <h3 class="section-title">Notification inbox</h3>
                    <p class="section-copy">Notificarile din DB sunt separate de regulile dinamice si pot fi marcate ca citite.</p>
                </div>

                <?php if ($notifications === []) : ?>
                    <?= view('components/empty_state', ['title' => 'Nu exista notificari', 'description' => 'Inbox-ul este gol pentru utilizatorul curent.']) ?>
                <?php else : ?>
                    <div class="space-y-3">
                        <?php foreach ($notifications as $notification) : ?>
                            <article class="surface-muted px-4 py-4">
                                <div class="flex flex-wrap items-start justify-between gap-3">
                                    <div>
                                        <div class="flex flex-wrap items-center gap-3">
                                            <p class="text-sm font-semibold text-slate-900"><?= esc($notification['title']) ?></p>
                                            <?= view('components/status_badge', ['status' => strtoupper((string) $notification['status'])]) ?>
                                        </div>
                                        <?php if (! empty($notification['child_name'])) : ?>
                                            <p class="mt-2 text-sm font-medium text-slate-900"><?= esc($notification['child_name']) ?></p>
                                        <?php endif; ?>
                                        <p class="mt-2 text-sm text-slate-600"><?= esc($notification['message']) ?></p>
                                        <p class="mt-2 text-xs uppercase tracking-[0.16em] text-slate-400"><?= esc($notification['created_at']) ?></p>
                                    </div>
                                    <div class="flex flex-wrap gap-2">
                                        <a href="<?= esc($notification['resolved_url']) ?>" class="btn-ghost">Deschide</a>
                                        <?php if ($notification['status'] === 'unread') : ?>
                                            <form method="post" action="<?= url_to('alerts.read', $notification['id']) ?>">
                                                <button type="submit" class="btn-secondary">Marcheaza read</button>
                                            </form>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </article>
        </section>
    </div>
<?= $this->endSection() ?>
