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

<?= $this->section('content') ?>
<?php
$maxTrend = max(array_map(static fn (array $row): int => (int) ($row['intervention_count'] ?? 0), $interventionTrend ?: [['intervention_count' => 0]]));
$maxEvents = max(array_map(static fn (array $row): int => (int) ($row['event_count'] ?? 0), $eventTrend ?: [['event_count' => 0]]));
$maxSites = max(array_map(static fn (array $row): int => (int) ($row['intervention_count'] ?? 0), $siteBreakdown ?: [['intervention_count' => 0]]));
$maxStatuses = max(array_map(static fn (array $row): int => (int) ($row['intervention_count'] ?? 0), $statusBreakdown ?: [['intervention_count' => 0]]));
$maxTypes = max(array_map(static fn (array $row): int => (int) ($row['intervention_count'] ?? 0), $typeBreakdown ?: [['intervention_count' => 0]]));
$maxEventTypes = max(array_map(static fn (array $row): int => (int) ($row['event_count'] ?? 0), $eventBreakdown ?: [['event_count' => 0]]));
?>

<section class="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_360px]">
    <article class="rounded-[30px] border border-white/10 bg-gradient-to-br from-sky-500/20 via-slate-900 to-cyan-500/10 p-6 shadow-glow">
        <div class="inline-flex rounded-full border border-sky-400/30 bg-sky-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-sky-100">Quantum analytics</div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white sm:text-4xl">Operações de manutenção</h1>
        <p class="mt-4 max-w-3xl text-sm leading-7 text-slate-300">Leitura rápida do volume de intervenções, eventos e anchors blockchain dentro do intervalo selecionado.</p>
    </article>

    <form method="get" class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.24em] text-slate-400">Filtros</div>
        <div class="mt-4 grid gap-4">
            <div>
                <label for="date_from" class="mb-2 block text-sm font-semibold text-slate-200">Data inicial</label>
                <input id="date_from" type="date" name="date_from" value="<?= esc($filters['date_from']) ?>" class="block w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white">
            </div>
            <div>
                <label for="date_to" class="mb-2 block text-sm font-semibold text-slate-200">Data final</label>
                <input id="date_to" type="date" name="date_to" value="<?= esc($filters['date_to']) ?>" class="block w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-white">
            </div>
            <div class="flex flex-wrap gap-3">
                <button class="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-sky-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90" type="submit">Aplicar</button>
                <a class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10" href="<?= site_url('analytics') ?>">Reset</a>
            </div>
        </div>
    </form>
</section>

<section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.22em] text-slate-400">Intervenções</div>
        <div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= esc((string) $overview['interventions']) ?></div>
        <p class="mt-3 text-sm text-slate-400"><?= esc((string) $overview['open_interventions']) ?> abertas / <?= esc((string) $overview['completed_interventions']) ?> concluídas</p>
    </article>
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.22em] text-slate-400">Eventos</div>
        <div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= esc((string) $overview['events']) ?></div>
        <p class="mt-3 text-sm text-slate-400">Timeline operacional registada</p>
    </article>
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.22em] text-slate-400">Blockchain</div>
        <div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= esc((string) $overview['blockchain_transactions']) ?></div>
        <p class="mt-3 text-sm text-slate-400"><?= esc((string) $overview['confirmed_transactions']) ?> confirmadas</p>
    </article>
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.22em] text-slate-400">Cobertura</div>
        <div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= esc((string) $overview['sites']) ?></div>
        <p class="mt-3 text-sm text-slate-400"><?= esc((string) $overview['turbines']) ?> turbinas / <?= esc((string) $overview['critical_interventions']) ?> críticas</p>
    </article>
</section>

<section class="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-xl font-semibold text-white">Tendência de intervenções</h2>
                <p class="mt-1 text-sm text-slate-400">Distribuição por dia com base na data reportada ou planeada.</p>
            </div>
            <div class="rounded-full border border-white/10 bg-slate-950/60 px-4 py-2 text-sm text-slate-300"><?= count($interventionTrend) ?> pontos</div>
        </div>
        <div class="mt-6 space-y-4">
            <?php if ($interventionTrend === []): ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-400">Sem intervenções no intervalo selecionado.</div>
            <?php else: ?>
                <?php foreach ($interventionTrend as $point): ?>
                    <?php $width = $maxTrend > 0 ? max(8, (int) round(((int) $point['intervention_count'] / $maxTrend) * 100)) : 8; ?>
                    <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-sm text-slate-300"><?= esc($point['period_label']) ?></div>
                            <div class="text-lg font-semibold text-white"><?= esc((string) $point['intervention_count']) ?></div>
                        </div>
                        <div class="mt-4 h-3 rounded-full bg-white/5">
                            <div class="h-3 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" style="width: <?= $width ?>%"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </article>

    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <h2 class="text-xl font-semibold text-white">Eventos por dia</h2>
        <p class="mt-1 text-sm text-slate-400">Volume de registos de rastreabilidade operacional.</p>
        <div class="mt-5 space-y-4">
            <?php if ($eventTrend === []): ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-400">Sem eventos no intervalo selecionado.</div>
            <?php else: ?>
                <?php foreach ($eventTrend as $point): ?>
                    <?php $width = $maxEvents > 0 ? max(10, (int) round(((int) $point['event_count'] / $maxEvents) * 100)) : 10; ?>
                    <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-sm text-slate-300"><?= esc($point['period_label']) ?></div>
                            <div class="text-lg font-semibold text-white"><?= esc((string) $point['event_count']) ?></div>
                        </div>
                        <div class="mt-4 h-3 rounded-full bg-white/5">
                            <div class="h-3 rounded-full bg-gradient-to-r from-cyan-400 to-sky-400" style="width: <?= $width ?>%"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </article>
</section>

<section class="grid gap-4 xl:grid-cols-3">
    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <h2 class="text-xl font-semibold text-white">Sites com mais atividade</h2>
        <div class="mt-5 space-y-4">
            <?php if ($siteBreakdown === []): ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-400">Sem dados de sites.</div>
            <?php else: ?>
                <?php foreach ($siteBreakdown as $site): ?>
                    <?php $width = $maxSites > 0 ? max(10, (int) round(((int) $site['intervention_count'] / $maxSites) * 100)) : 10; ?>
                    <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-white"><?= esc($site['site_name']) ?></div>
                            <div class="text-sm text-slate-300"><?= esc((string) $site['intervention_count']) ?></div>
                        </div>
                        <div class="mt-4 h-3 rounded-full bg-white/5">
                            <div class="h-3 rounded-full bg-gradient-to-r from-cyan-300 to-sky-400" style="width: <?= $width ?>%"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </article>

    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <h2 class="text-xl font-semibold text-white">Estados</h2>
        <div class="mt-5 space-y-4">
            <?php if ($statusBreakdown === []): ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-400">Sem estados registados.</div>
            <?php else: ?>
                <?php foreach ($statusBreakdown as $status): ?>
                    <?php $width = $maxStatuses > 0 ? max(10, (int) round(((int) $status['intervention_count'] / $maxStatuses) * 100)) : 10; ?>
                    <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-white"><?= esc($status['status']) ?></div>
                            <div class="text-sm text-slate-300"><?= esc((string) $status['intervention_count']) ?></div>
                        </div>
                        <div class="mt-4 h-3 rounded-full bg-white/5">
                            <div class="h-3 rounded-full bg-gradient-to-r from-rose-400 to-orange-300" style="width: <?= $width ?>%"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </article>

    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <h2 class="text-xl font-semibold text-white">Tipos de intervenção</h2>
        <div class="mt-5 space-y-4">
            <?php if ($typeBreakdown === []): ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-400">Sem tipos registados.</div>
            <?php else: ?>
                <?php foreach ($typeBreakdown as $type): ?>
                    <?php $width = $maxTypes > 0 ? max(10, (int) round(((int) $type['intervention_count'] / $maxTypes) * 100)) : 10; ?>
                    <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-white"><?= esc($type['intervention_type']) ?></div>
                            <div class="text-sm text-slate-300"><?= esc((string) $type['intervention_count']) ?></div>
                        </div>
                        <div class="mt-4 h-3 rounded-full bg-white/5">
                            <div class="h-3 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" style="width: <?= $width ?>%"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </article>
</section>

<section class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
    <h2 class="text-xl font-semibold text-white">Tipos de evento</h2>
    <p class="mt-1 text-sm text-slate-400">Ajuda a perceber que registos de rastreabilidade estão a ser produzidos.</p>
    <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        <?php if ($eventBreakdown === []): ?>
            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-400">Sem eventos registados.</div>
        <?php else: ?>
            <?php foreach ($eventBreakdown as $event): ?>
                <?php $width = $maxEventTypes > 0 ? max(10, (int) round(((int) $event['event_count'] / $maxEventTypes) * 100)) : 10; ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                    <div class="flex items-center justify-between gap-3">
                        <div class="text-white"><?= esc($event['event_type']) ?></div>
                        <div class="text-sm text-slate-300"><?= esc((string) $event['event_count']) ?></div>
                    </div>
                    <div class="mt-4 h-3 rounded-full bg-white/5">
                        <div class="h-3 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" style="width: <?= $width ?>%"></div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</section>
<?= $this->endSection() ?>
