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

<?= $this->section('content') ?>
    <div class="space-y-6">
        <section class="page-header">
            <div>
                <p class="page-kicker">Journey Log</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-[1.2fr_220px_220px_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($filters['query']) ?>" placeholder="Copil, titlu sau descriere">
                </div>
                <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 eveniment</label>
                    <select name="event_type" class="form-select">
                        <?php foreach ($filters['event_type_options'] as $key => $label) : ?>
                            <option value="<?= esc($key) ?>" <?= $filters['selected_event_type'] === $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('journey.index') ?>" class="btn-secondary w-full xl:w-auto">Reset</a>
                </div>
            </div>
        </form>

        <section class="grid gap-4 sm:grid-cols-2">
            <?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="surface-card p-6">
            <div class="mb-4">
                <h3 class="section-title">Timeline global</h3>
                <p class="section-copy">Event log real, filtrat dupa perioada si aria de acces a utilizatorului.</p>
            </div>

            <?php if ($events === []) : ?>
                <?= view('components/empty_state', ['title' => 'Nu exista evenimente', 'description' => 'Timeline-ul se populeaza automat din modificarile de profil, evaluari si prezenta.']) ?>
            <?php else : ?>
                <div class="space-y-4">
                    <?php foreach ($events as $event) : ?>
                        <article class="relative pl-8">
                            <span class="absolute left-0 top-1.5 h-3 w-3 rounded-full bg-indigo-600"></span>
                            <span class="absolute left-[5px] top-5 h-[calc(100%-0.5rem)] w-px bg-slate-200"></span>
                            <div 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($event['title']) ?></p>
                                            <?= view('components/status_badge', ['status' => strtoupper((string) $event['event_type'])]) ?>
                                        </div>
                                        <p class="mt-1 text-sm text-slate-600">
                                            <a href="<?= url_to('children.show', $event['child_id']) ?>" class="font-semibold text-slate-900 hover:text-indigo-600"><?= esc($event['child_name']) ?></a>
                                            <?php if (! empty($event['actor_name'])) : ?>
                                                <span class="text-slate-400"> / <?= esc($event['actor_name']) ?></span>
                                            <?php endif; ?>
                                        </p>
                                    </div>
                                    <span class="text-xs uppercase tracking-[0.16em] text-slate-400"><?= esc($event['created_at']) ?></span>
                                </div>
                                <?php if (! empty($event['description'])) : ?>
                                    <p class="mt-3 text-sm text-slate-600"><?= esc($event['description']) ?></p>
                                <?php endif; ?>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </section>
    </div>
<?= $this->endSection() ?>
