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

<?= $this->section('content') ?>
    <div class="space-y-6">
        <section class="page-header">
            <div>
                <p class="page-kicker"><?= esc($evaluationType['name']) ?></p>
                <h2 class="section-title text-2xl"><?= esc($pageTitle) ?></h2>
                <p class="section-copy mt-2 max-w-3xl"><?= esc($pageDescription) ?></p>
            </div>
            <a href="<?= esc($cancelUrl) ?>" class="btn-ghost">Inapoi la profil</a>
        </section>

        <?php if (! empty($errors['general'])) : ?>
            <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700"><?= esc($errors['general']) ?></div>
        <?php endif; ?>

        <section class="grid gap-6 xl:grid-cols-[0.78fr_1.22fr]">
            <aside class="space-y-6">
                <article class="surface-card p-6">
                    <h3 class="section-title">Context copil</h3>
                    <dl class="info-list mt-5 space-y-5">
                        <div>
                            <dt>Copil</dt>
                            <dd><?= esc($child['full_name']) ?></dd>
                        </div>
                        <div>
                            <dt>Nivel curent</dt>
                            <dd><?= esc($child['level_name'] ?: '-') ?></dd>
                        </div>
                        <div>
                            <dt>Grupa</dt>
                            <dd><?= esc($child['group_name'] ?: '-') ?></dd>
                        </div>
                        <div>
                            <dt>Trainer principal</dt>
                            <dd><?= esc($child['coach_name'] ?: '-') ?></dd>
                        </div>
                    </dl>
                </article>

                <article class="surface-card p-6">
                    <h3 class="section-title">Reguli active</h3>
                    <div class="mt-5 grid gap-3">
                        <div class="surface-muted px-4 py-4">
                            <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Almost Ready</p>
                            <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc(format_score($rules['almost_ready_threshold'])) ?></p>
                        </div>
                        <div class="surface-muted px-4 py-4">
                            <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Ready</p>
                            <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc(format_score($rules['ready_threshold'])) ?></p>
                        </div>
                        <div class="surface-muted px-4 py-4">
                            <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Prag minim criterii critice</p>
                            <p class="mt-2 text-lg font-semibold text-slate-900"><?= esc(format_score($rules['minimum_critical_threshold'])) ?></p>
                        </div>
                    </div>
                    <p class="mt-4 text-sm text-slate-500">
                        <?= esc($evaluationType['slug'] === 'quick-check'
                            ? 'Quick Check-ul genereaza status intern si alerta, dar nu schimba automat nivelul copilului.'
                            : 'Full Evaluation poate genera semnal de promovare daca statusul final devine READY.') ?>
                    </p>
                </article>

                <article class="surface-card p-6">
                    <h3 class="section-title">Ultima evaluare similara</h3>
                    <?php if ($latestEvaluation === null) : ?>
                        <?= view('components/empty_state', ['title' => 'Fara istoric', 'description' => 'Acest copil nu are inca evaluari anterioare de acelasi tip.']) ?>
                    <?php else : ?>
                        <div class="mt-5 space-y-3">
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Data</p>
                                <p class="mt-2 text-sm font-semibold text-slate-900"><?= esc($latestEvaluation['evaluation_date']) ?></p>
                            </div>
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Scor / Status</p>
                                <div class="mt-2 flex items-center gap-3">
                                    <p class="text-sm font-semibold text-slate-900"><?= esc(format_score($latestEvaluation['final_score'])) ?></p>
                                    <?= view('components/status_badge', ['status' => $latestEvaluation['final_status']]) ?>
                                </div>
                            </div>
                            <div class="surface-muted px-4 py-4">
                                <p class="text-xs uppercase tracking-[0.16em] text-slate-400">Evaluator</p>
                                <p class="mt-2 text-sm font-semibold text-slate-900"><?= esc($latestEvaluation['evaluator_name'] ?: '-') ?></p>
                            </div>
                        </div>
                    <?php endif; ?>
                </article>
            </aside>

            <form method="post" action="<?= esc($submitUrl) ?>" class="surface-card p-6">
                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-medium text-slate-700">Data evaluarii</label>
                        <input type="date" name="evaluation_date" class="form-input" value="<?= esc((string) $values['evaluation_date']) ?>">
                        <?php if (! empty($errors['evaluation_date'])) : ?><p class="field-error"><?= esc($errors['evaluation_date']) ?></p><?php endif; ?>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-medium text-slate-700">Evaluator</label>
                        <?php if ($canChooseEvaluator) : ?>
                            <select name="evaluator_coach_id" class="form-select">
                                <option value="">Fara coach asociat</option>
                                <?php foreach ($evaluatorOptions as $coach) : ?>
                                    <option value="<?= esc((string) $coach['id']) ?>" <?= (string) $values['evaluator_coach_id'] === (string) $coach['id'] ? 'selected' : '' ?>>
                                        <?= esc($coach['full_name']) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        <?php else : ?>
                            <input type="hidden" name="evaluator_coach_id" value="<?= esc((string) $values['evaluator_coach_id']) ?>">
                            <div class="surface-muted px-4 py-3 text-sm font-medium text-slate-900">
                                <?php
                                $currentTrainer = array_values(array_filter($evaluatorOptions, static fn (array $coach): bool => (string) $coach['id'] === (string) $values['evaluator_coach_id']))[0] ?? null;
                                ?>
                                <?= esc($currentTrainer['full_name'] ?? $child['coach_name'] ?? '-') ?>
                            </div>
                        <?php endif; ?>
                        <?php if (! empty($errors['evaluator_coach_id'])) : ?><p class="field-error"><?= esc($errors['evaluator_coach_id']) ?></p><?php endif; ?>
                    </div>
                </div>

                <div class="mt-6">
                    <h3 class="section-title">Scoruri pe criterii</h3>
                    <p class="section-copy">Fiecare criteriu foloseste scala configurata in catalogul de evaluare si contribuie ponderat la scorul final.</p>
                    <div class="mt-5 space-y-4">
                        <?php foreach ($criteria as $criterion) : ?>
                            <article class="surface-muted px-4 py-4">
                                <div class="grid gap-4 xl:grid-cols-[1.2fr_120px_280px] xl:items-center">
                                    <div>
                                        <div class="flex flex-wrap items-center gap-2">
                                            <p class="text-sm font-semibold text-slate-900"><?= esc($criterion['name']) ?></p>
                                            <span class="rounded-full bg-slate-200 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-600">
                                                Weight <?= esc(format_score($criterion['weight'], 1)) ?>
                                            </span>
                                            <?php if ((int) $criterion['is_critical'] === 1) : ?>
                                                <span class="rounded-full bg-rose-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-rose-700">Critic</span>
                                            <?php endif; ?>
                                        </div>
                                        <p class="mt-2 text-sm text-slate-500"><?= esc($criterion['description'] ?: 'Scor operational pentru progresul copilului.') ?></p>
                                    </div>
                                    <div class="text-sm text-slate-500">
                                        Scala: <?= esc(format_score($criterion['min_score'], 0)) ?> - <?= esc(format_score($criterion['max_score'], 0)) ?>
                                    </div>
                                    <div>
                                        <?php
                                        $criterionId = (int) $criterion['id'];
                                        $selectedScore = (string) ($values['scores'][$criterionId] ?? '');
                                        $minScore = (int) $criterion['min_score'];
                                        $maxScore = (int) $criterion['max_score'];
                                        ?>
                                        <div class="grid grid-cols-5 gap-2" role="radiogroup" aria-label="Scor <?= esc($criterion['name'], 'attr') ?>">
                                            <?php for ($score = $minScore; $score <= $maxScore; $score++) : ?>
                                                <?php $inputId = 'score-' . $criterionId . '-' . $score; ?>
                                                <label for="<?= esc($inputId, 'attr') ?>" class="relative flex h-11 cursor-pointer items-center justify-center rounded-xl border border-slate-300 bg-white text-sm font-semibold text-slate-700 transition hover:border-sky-400 hover:bg-sky-50 has-[:checked]:border-sky-600 has-[:checked]:bg-sky-600 has-[:checked]:text-white">
                                                    <input
                                                        id="<?= esc($inputId, 'attr') ?>"
                                                        type="radio"
                                                        name="scores[<?= esc((string) $criterionId) ?>]"
                                                        value="<?= esc((string) $score) ?>"
                                                        class="sr-only"
                                                        <?= $selectedScore === (string) $score ? 'checked' : '' ?>
                                                    >
                                                    <span><?= esc((string) $score) ?></span>
                                                </label>
                                            <?php endfor; ?>
                                        </div>
                                        <?php if (! empty($errors['score_' . $criterion['id']])) : ?><p class="field-error"><?= esc($errors['score_' . $criterion['id']]) ?></p><?php endif; ?>
                                    </div>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="mt-6">
                    <label class="mb-2 block text-sm font-medium text-slate-700">Note</label>
                    <textarea name="notes" rows="5" class="form-input"><?= esc((string) $values['notes']) ?></textarea>
                    <?php if (! empty($errors['notes'])) : ?><p class="field-error"><?= esc($errors['notes']) ?></p><?php endif; ?>
                </div>

                <div class="mt-6 flex flex-wrap gap-3">
                    <button type="submit" class="btn-primary">Salveaza evaluarea</button>
                    <a href="<?= esc($cancelUrl) ?>" class="btn-secondary">Renunta</a>
                </div>
            </form>
        </section>
    </div>
<?= $this->endSection() ?>
