<?php
declare(strict_types=1);

require_once 'conexao.php';
require_once 'os_publico_helpers.php';

date_default_timezone_set('America/Sao_Paulo');

if ($mysqli instanceof mysqli) {
    $mysqli->set_charset('utf8mb4');
}

if (session_status() !== PHP_SESSION_ACTIVE) {
    session_start();
}

function e(mixed $valor): string
{
    return htmlspecialchars((string) $valor, ENT_QUOTES, 'UTF-8');
}

$token = strtolower(trim((string) ($_GET['token'] ?? '')));
$tokenValido = preg_match('/^[a-f0-9]{48,64}$/', $token) === 1;
$os = null;
$atualizacoes = [];
$avaliacao = null;
$cienciaRegistrada = false;
$erro = '';

if (!$tokenValido) {
    $erro = 'O link de acompanhamento é inválido ou está incompleto.';
} else {
    $stmt = $mysqli->prepare("
        SELECT
            id,
            numero_os,
            nome_solicitante,
            setor,
            tipo_equipamento,
            marca,
            modelo,
            patrimonio,
            status,
            data_entrada,
            prazo,
            mensagem_publica,
            acompanhamento_ativo
        FROM ordens_servico
        WHERE token_acompanhamento = ?
        LIMIT 1
    ");

    if (!$stmt) {
        $erro = 'Não foi possível consultar o acompanhamento neste momento.';
    } else {
        $stmt->bind_param('s', $token);
        $stmt->execute();
        $os = $stmt->get_result()->fetch_assoc() ?: null;
        $stmt->close();

        if (!$os) {
            $erro = 'A ordem de serviço não foi encontrada.';
        } elseif ((int) ($os['acompanhamento_ativo'] ?? 0) !== 1) {
            $erro = 'O acompanhamento público desta ordem está temporariamente indisponível.';
            $os = null;
        }
    }
}

if ($os) {
    $osId = (int) $os['id'];

    $stmt = $mysqli->prepare("
        SELECT
            titulo,
            mensagem,
            status_publico,
            criado_em
        FROM os_atualizacoes_publicas
        WHERE os_id = ?
          AND visivel = 1
        ORDER BY criado_em DESC, id DESC
        LIMIT 20
    ");

    if ($stmt) {
        $stmt->bind_param('i', $osId);
        $stmt->execute();
        $atualizacoes = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
        $stmt->close();
    }

    $stmt = $mysqli->prepare("
        SELECT
            nota,
            resolvido,
            comentario,
            criado_em
        FROM os_avaliacoes
        WHERE os_id = ?
        LIMIT 1
    ");

    if ($stmt) {
        $stmt->bind_param('i', $osId);
        $stmt->execute();
        $avaliacao = $stmt->get_result()->fetch_assoc() ?: null;
        $stmt->close();
    }

    $stmt = $mysqli->prepare("
        SELECT id
        FROM os_atualizacoes_publicas
        WHERE os_id = ?
          AND titulo = 'Ciência do solicitante'
          AND visivel = 0
        LIMIT 1
    ");

    if ($stmt) {
        $stmt->bind_param('i', $osId);
        $stmt->execute();
        $cienciaRegistrada = (bool) $stmt->get_result()->fetch_assoc();
        $stmt->close();
    }
}

$tokenHash = hash('sha256', $token);

if (
    !isset($_SESSION['csrf_os_publico']) ||
    !is_array($_SESSION['csrf_os_publico'])
) {
    $_SESSION['csrf_os_publico'] = [];
}

if (empty($_SESSION['csrf_os_publico'][$tokenHash])) {
    $_SESSION['csrf_os_publico'][$tokenHash] = bin2hex(random_bytes(24));
}

$csrf = (string) ($_SESSION['csrf_os_publico'][$tokenHash] ?? '');
$statusDados = $os ? osPublicoStatusDados((string) ($os['status'] ?? '')) : null;
$etapaAtual = (int) ($statusDados['etapa'] ?? 1);
$equipamento = $os
    ? trim(implode(' • ', array_filter([
        trim((string) ($os['tipo_equipamento'] ?? '')),
        trim((string) ($os['marca'] ?? '')),
        trim((string) ($os['modelo'] ?? ''))
    ])))
    : '';

$entradaTs = $os ? strtotime((string) ($os['data_entrada'] ?? '')) : false;
$prazo = $os ? max(0, (int) ($os['prazo'] ?? 0)) : 0;
$prazoReferencia = 'Prazo em análise';

if ($statusDados) {
    if ($statusDados['codigo'] === 'entregue') {
        $prazoReferencia = 'Atendimento concluído';
    } elseif ($statusDados['codigo'] === 'pronto_retirada') {
        $prazoReferencia = 'Disponível para retirada';
    } elseif ($entradaTs !== false && $prazo > 0) {
        $prazoReferencia = 'Previsão de referência: ' . date(
            'd/m/Y',
            strtotime('+' . $prazo . ' days', $entradaTs)
        );
    }
}

$ultimaAtualizacao = $os['data_entrada'] ?? null;

foreach ($atualizacoes as $atualizacao) {
    if (
        empty($ultimaAtualizacao) ||
        strtotime((string) $atualizacao['criado_em']) > strtotime((string) $ultimaAtualizacao)
    ) {
        $ultimaAtualizacao = $atualizacao['criado_em'];
    }
}

$etapas = [
    1 => [
        'titulo' => 'Solicitação recebida',
        'descricao' => 'A ordem foi registrada no sistema da Gerência de Tecnologia.',
        'icone' => 'bi-inbox-fill'
    ],
    2 => [
        'titulo' => 'Análise e manutenção',
        'descricao' => 'A equipe técnica está avaliando e executando o atendimento.',
        'icone' => 'bi-tools'
    ],
    3 => [
        'titulo' => 'Pronto para retirada',
        'descricao' => 'O equipamento foi concluído, testado e está disponível.',
        'icone' => 'bi-box-arrow-up-right'
    ],
    4 => [
        'titulo' => 'Equipamento entregue',
        'descricao' => 'A retirada foi registrada e o atendimento foi encerrado.',
        'icone' => 'bi-check-circle-fill'
    ]
];
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
    <meta name="theme-color" content="#08396f">
    <meta name="robots" content="noindex,nofollow,noarchive">
    <title>Acompanhamento de OS | Prefeitura de Extrema</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    <style>
        :root {
            --blue:#08396f;
            --blue-dark:#05294f;
            --blue-light:#145b9f;
            --green:#087f5b;
            --green-soft:#e8f8f1;
            --gold:#e8ad16;
            --warning:#c97900;
            --warning-soft:#fff7e6;
            --danger:#bd263d;
            --danger-soft:#fff0f3;
            --info:#087f9c;
            --info-soft:#e9f8fb;
            --bg:#edf3f8;
            --surface:#fff;
            --soft:#f6f9fc;
            --text:#152236;
            --muted:#617086;
            --light:#8795a8;
            --border:#dce5ee;
            --shadow-sm:0 10px 28px rgba(8,57,111,.07);
            --shadow-md:0 24px 65px rgba(8,57,111,.12);
            --shadow-lg:0 40px 100px rgba(5,41,79,.22);
        }

        *{box-sizing:border-box}
        html{min-height:100%;scroll-behavior:smooth}
        body{
            min-height:100vh;margin:0;overflow-x:hidden;
            font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);
            background:
                radial-gradient(circle at 4% 4%,rgba(20,91,159,.15),transparent 30rem),
                radial-gradient(circle at 96% 86%,rgba(8,127,91,.11),transparent 33rem),
                linear-gradient(145deg,#f9fbfd,var(--bg) 56%,#e7eff6);
        }
        button,input,textarea{font:inherit}
        .strip{position:fixed;inset:0 0 auto;z-index:100;height:6px;background:linear-gradient(90deg,var(--blue) 0 58%,var(--green) 58% 88%,var(--gold) 88%)}
        .grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(8,57,111,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(8,57,111,.025) 1px,transparent 1px);background-size:55px 55px}
        .app{position:relative;z-index:2;max-width:1280px;margin:auto;padding:22px 18px 40px}
        .header{
            position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;
            margin-top:6px;padding:20px 22px;border:1px solid rgba(255,255,255,.16);border-radius:29px;color:#fff;
            background:radial-gradient(circle at 86% 0,rgba(255,255,255,.13),transparent 22rem),radial-gradient(circle at 0 100%,rgba(8,127,91,.25),transparent 25rem),linear-gradient(135deg,var(--blue-dark),var(--blue) 58%,#07547c);
            box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.12)
        }
        .header::before{content:"";position:absolute;top:-220px;right:-120px;width:450px;height:450px;border:44px solid rgba(255,255,255,.035);border-radius:50%;box-shadow:0 0 0 45px rgba(255,255,255,.018),0 0 0 90px rgba(255,255,255,.012);animation:orbit 32s linear infinite}
        @keyframes orbit{to{transform:rotate(360deg)}}
        .brand{position:relative;z-index:2;display:flex;align-items:center;gap:14px}
        .logo{width:72px;height:72px;display:grid;place-items:center;padding:5px;border-radius:21px;background:linear-gradient(145deg,#fff,#dceaf5);box-shadow:0 18px 38px rgba(0,0,0,.18)}
        .logo img{max-width:58px;max-height:58px;object-fit:contain}
        .eyebrow{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;color:#a9e7d3;font-size:8px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
        .header h1{margin:0;font-size:clamp(21px,3vw,34px);line-height:1.05;letter-spacing:-1px;font-weight:900}
        .header p{margin:7px 0 0;color:rgba(255,255,255,.67);font-size:10px;line-height:1.55}
        .security{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.08);font-size:8px;font-weight:800}
        .security i{font-size:20px;color:#9cebd2}
        .error-card{max-width:760px;margin:70px auto;padding:34px;border:1px solid #edc7cf;border-radius:28px;text-align:center;background:#fff;box-shadow:var(--shadow-md)}
        .error-icon{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 18px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#8d182b,var(--danger));font-size:30px}
        .error-card h2{margin:0;font-size:25px;font-weight:900}.error-card p{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
        .hero{
            display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:15px;margin-top:15px;padding:24px;
            border:1px solid rgba(255,255,255,.9);border-radius:30px;background:radial-gradient(circle at 92% 0,rgba(20,91,159,.08),transparent 22rem),rgba(255,255,255,.92);box-shadow:var(--shadow-md),inset 0 1px 0 #fff
        }
        .status-label{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;color:var(--blue);font-size:9px;font-weight:900;letter-spacing:.65px;text-transform:uppercase}
        .hero h2{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.01;letter-spacing:-2px;font-weight:900}
        .hero h2 span{color:var(--blue)}
        .hero-text{max-width:760px;margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.7}
        .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--border);border-radius:999px;color:#526176;background:#fff;box-shadow:var(--shadow-sm);font-size:8px;font-weight:800}
        .status-card{min-height:240px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border-radius:25px;color:#fff;box-shadow:0 25px 55px rgba(8,57,111,.22)}
        .status-card.progress{background:linear-gradient(145deg,var(--blue-dark),var(--blue))}.status-card.ready{background:linear-gradient(145deg,#075f74,var(--info))}.status-card.success{background:linear-gradient(145deg,#066748,var(--green))}.status-card.warning{background:linear-gradient(145deg,#975b00,var(--warning))}.status-card.danger{background:linear-gradient(145deg,#8d182b,var(--danger))}.status-card.info{background:linear-gradient(145deg,#075f74,var(--info))}
        .status-icon{width:57px;height:57px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.1);font-size:25px}
        .status-card strong{display:block;margin-top:16px;font-size:22px;font-weight:900}.status-card p{margin:7px 0 0;color:rgba(255,255,255,.72);font-size:9px;line-height:1.55}.status-card small{display:block;color:rgba(255,255,255,.62);font-size:7px}
        .info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:14px}
        .info-card{min-height:118px;padding:15px;border:1px solid var(--border);border-radius:21px;background:rgba(255,255,255,.93);box-shadow:var(--shadow-sm)}
        .info-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:var(--blue);background:#eaf4fc;font-size:17px}.info-card span{display:block;margin-top:12px;color:var(--light);font-size:7px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}.info-card strong{display:block;margin-top:5px;font-size:10px;line-height:1.45;font-weight:900}
        .message{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:18px;border:1px solid #c6dce9;border-radius:22px;color:#14546d;background:#edf8fc;box-shadow:var(--shadow-sm)}
        .message-icon{width:47px;height:47px;flex:0 0 47px;display:grid;place-items:center;border-radius:15px;color:#fff;background:var(--info);font-size:20px}.message strong{display:block;font-size:12px;font-weight:900}.message span{display:block;margin-top:5px;font-size:9px;line-height:1.6}
        .panel{margin-top:14px;padding:20px;border:1px solid rgba(255,255,255,.92);border-radius:28px;background:rgba(255,255,255,.93);box-shadow:var(--shadow-md),inset 0 1px 0 #fff}
        .panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.panel-title{display:flex;align-items:center;gap:11px}.panel-title-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(145deg,var(--blue-dark),var(--blue));font-size:19px}.panel-title h3{margin:0;font-size:16px;font-weight:900}.panel-title p{margin:4px 0 0;color:var(--muted);font-size:8px}
        .timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative}.step{position:relative;min-height:175px;padding:16px;border:1px solid var(--border);border-radius:20px;background:var(--soft)}.step::after{content:"";position:absolute;top:38px;left:calc(50% + 26px);width:calc(100% - 42px);height:3px;background:#d9e3ec}.step:last-child::after{display:none}.step-icon{position:relative;z-index:2;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;color:#77879a;background:#e8eef4;font-size:19px}.step.completed .step-icon{color:#fff;background:var(--green)}.step.current{border-color:#bad3e5;background:#edf7fc;box-shadow:0 14px 35px rgba(20,91,159,.1)}.step.current .step-icon{color:#fff;background:var(--blue);animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(20,91,159,0)}0%,100%{box-shadow:0 0 0 0 rgba(20,91,159,.22)}}.step.completed::after{background:var(--green)}.step strong{display:block;margin-top:13px;font-size:10px;font-weight:900}.step span{display:block;margin-top:6px;color:var(--muted);font-size:8px;line-height:1.55}
        .updates{display:flex;flex-direction:column;gap:10px}.update{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--border);border-radius:17px;background:var(--soft)}.update-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:var(--blue);background:#eaf4fc;font-size:16px}.update strong{display:block;font-size:10px;font-weight:900}.update p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.55}.update time{color:var(--light);font-size:7px;white-space:nowrap}
        .action-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.65fr);gap:14px}.callout{padding:18px;border:1px solid #c3e9dc;border-radius:21px;color:#076448;background:var(--green-soft)}.callout h3{margin:0;font-size:15px;font-weight:900}.callout p{margin:7px 0 0;font-size:9px;line-height:1.6}.public-button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;padding:0 17px;border:0;border-radius:15px;color:#fff;background:linear-gradient(145deg,#066748,var(--green));box-shadow:0 15px 30px rgba(8,127,91,.2);font-size:9px;font-weight:900;text-transform:uppercase;cursor:pointer}.public-button:disabled{opacity:.55;cursor:not-allowed}
        .rating{padding:18px;border:1px solid var(--border);border-radius:21px;background:var(--soft)}.rating h3{margin:0;font-size:14px;font-weight:900}.rating p{margin:6px 0 0;color:var(--muted);font-size:8px;line-height:1.5}.faces{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.face input{position:absolute;opacity:0}.face span{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:14px;background:#fff;font-size:22px;cursor:pointer;transition:.16s ease}.face small{margin-top:3px;color:var(--muted);font-size:6px;font-weight:800}.face input:checked+span{border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,91,159,.1);transform:translateY(-2px)}.resolved{display:flex;gap:8px;margin-top:10px}.resolved label{flex:1}.resolved input{position:absolute;opacity:0}.resolved span{min-height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:13px;background:#fff;font-size:8px;font-weight:900;cursor:pointer}.resolved input:checked+span{color:#fff;border-color:var(--blue);background:var(--blue)}.comment{width:100%;min-height:76px;margin-top:10px;padding:11px;border:1px solid var(--border);border-radius:13px;outline:0;background:#fff;font-size:9px;resize:vertical}.comment:focus{border-color:var(--blue-light);box-shadow:0 0 0 4px rgba(20,91,159,.1)}
        .footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:17px;padding:0 5px;color:var(--muted);font-size:7px;line-height:1.6}.footer span:last-child{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:800}
        .completed-banner{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid #c3e9dc;border-radius:16px;color:#076448;background:var(--green-soft)}.banner-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:13px;color:#fff;background:var(--green);font-size:17px}.completed-banner strong{display:block;font-size:10px;font-weight:900}.completed-banner span{display:block;margin-top:4px;font-size:8px;line-height:1.5}.toast{position:fixed;right:18px;bottom:18px;z-index:200;max-width:380px;display:none;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;color:#fff;background:var(--blue-dark);box-shadow:var(--shadow-lg);font-size:9px;font-weight:800}.toast.show{display:flex;animation:toastIn .25s ease}@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
        @media(max-width:980px){.hero,.action-panel{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr 1fr}.step:nth-child(2)::after{display:none}.header{align-items:flex-start;flex-direction:column}.security{width:100%}}
        @media(max-width:600px){.app{padding:13px 7px 28px}.header{padding:15px;border-radius:22px}.brand{align-items:flex-start;gap:10px}.logo{width:60px;height:60px;flex:0 0 60px}.header h1{font-size:21px}.hero{padding:18px;border-radius:24px}.hero h2{font-size:31px}.info-grid,.timeline{grid-template-columns:1fr}.step::after{display:none}.panel{padding:14px;border-radius:22px}.panel-head{align-items:flex-start;flex-direction:column}.update{grid-template-columns:auto 1fr}.update time{grid-column:2}.faces{grid-template-columns:repeat(2,1fr)}.footer{align-items:flex-start;flex-direction:column}}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
    </style>
</head>
<body>
<div class="strip"></div>
<div class="grid"></div>

<div class="app">
    <header class="header">
        <div class="brand">
            <div class="logo">
                <img src="assets/logo_pref.jpg" alt="Prefeitura de Extrema" onerror="this.style.display='none';this.parentElement.innerHTML='<i class=&quot;bi bi-buildings-fill text-primary fs-2&quot;></i>'">
            </div>
            <div>
                <div class="eyebrow"><i class="bi bi-shield-check"></i> Prefeitura Municipal de Extrema</div>
                <h1>Acompanhamento de Ordem de Serviço</h1>
                <p>Gerência de Tecnologia • Consulta segura e sem necessidade de login</p>
            </div>
        </div>
        <div class="security"><i class="bi bi-shield-lock-fill"></i><span>Link exclusivo<br>Informações protegidas</span></div>
    </header>

    <?php if ($erro !== '' || !$os): ?>
        <section class="error-card">
            <div class="error-icon"><i class="bi bi-link-45deg"></i></div>
            <h2>Acompanhamento indisponível</h2>
            <p><?= e($erro ?: 'Não foi possível localizar a ordem de serviço.') ?><br>Solicite um novo link à Gerência de Tecnologia.</p>
        </section>
    <?php else: ?>
        <section class="hero">
            <div>
                <div class="status-label"><i class="bi bi-activity"></i> OS #<?= e((string) $os['numero_os']) ?> • Atualização em tempo real</div>
                <h2>Seu atendimento está <span><?= e(osPublicoTextoMinusculo((string) $statusDados['rotulo'])) ?>.</span></h2>
                <p class="hero-text"><?= e((string) $statusDados['descricao']) ?> Esta página pode ser consultada novamente pelo mesmo link sempre que necessário.</p>
                <div class="chips">
                    <span class="chip"><i class="bi bi-person-fill"></i><?= e(osPublicoNomeSeguro((string) $os['nome_solicitante'])) ?></span>
                    <span class="chip"><i class="bi bi-building-fill"></i><?= e((string) ($os['setor'] ?: 'Setor não informado')) ?></span>
                    <span class="chip"><i class="bi bi-clock-history"></i><?= e($prazoReferencia) ?></span>
                </div>
            </div>
            <aside class="status-card <?= e((string) $statusDados['classe']) ?>">
                <div>
                    <div class="status-icon"><i class="bi <?= e((string) $statusDados['icone']) ?>"></i></div>
                    <strong><?= e((string) $statusDados['rotulo']) ?></strong>
                    <p><?= e((string) $statusDados['descricao']) ?></p>
                </div>
                <small>Última atualização: <?= e(osPublicoDataBr((string) $ultimaAtualizacao)) ?></small>
            </aside>
        </section>

        <section class="info-grid">
            <article class="info-card"><div class="info-icon"><i class="bi bi-pc-display-horizontal"></i></div><span>Equipamento</span><strong><?= e($equipamento !== '' ? $equipamento : 'Equipamento não informado') ?></strong></article>
            <article class="info-card"><div class="info-icon"><i class="bi bi-upc-scan"></i></div><span>Patrimônio protegido</span><strong><?= e(osPublicoPatrimonioSeguro((string) ($os['patrimonio'] ?? ''))) ?></strong></article>
            <article class="info-card"><div class="info-icon"><i class="bi bi-calendar-event-fill"></i></div><span>Entrada na TI</span><strong><?= e(osPublicoDataBr((string) ($os['data_entrada'] ?? ''))) ?></strong></article>
            <article class="info-card"><div class="info-icon"><i class="bi bi-arrow-repeat"></i></div><span>Situação atual</span><strong><?= e((string) $statusDados['rotulo']) ?></strong></article>
        </section>

        <?php if (trim((string) ($os['mensagem_publica'] ?? '')) !== ''): ?>
            <div class="message"><div class="message-icon"><i class="bi bi-megaphone-fill"></i></div><div><strong>Mensagem da Gerência de Tecnologia</strong><span><?= nl2br(e((string) $os['mensagem_publica'])) ?></span></div></div>
        <?php endif; ?>

        <section class="panel">
            <div class="panel-head"><div class="panel-title"><div class="panel-title-icon"><i class="bi bi-signpost-split-fill"></i></div><div><h3>Etapas do atendimento</h3><p>Acompanhe a evolução da ordem de serviço.</p></div></div><span class="chip"><i class="bi bi-arrow-clockwise"></i>Atualize a página para consultar novidades</span></div>
            <div class="timeline">
                <?php foreach ($etapas as $numero => $etapa): ?>
                    <?php $classe = $numero < $etapaAtual ? 'completed' : ($numero === $etapaAtual ? 'current' : ''); ?>
                    <article class="step <?= e($classe) ?>">
                        <div class="step-icon"><i class="bi <?= e($etapa['icone']) ?>"></i></div>
                        <strong><?= e($etapa['titulo']) ?></strong>
                        <span><?= e($etapa['descricao']) ?></span>
                    </article>
                <?php endforeach; ?>
            </div>
        </section>

        <section class="panel">
            <div class="panel-head"><div class="panel-title"><div class="panel-title-icon"><i class="bi bi-clock-history"></i></div><div><h3>Atualizações do atendimento</h3><p>Mensagens publicadas para o solicitante.</p></div></div></div>
            <div class="updates">
                <?php if (!$atualizacoes): ?>
                    <article class="update"><div class="update-icon"><i class="bi bi-inbox-fill"></i></div><div><strong>Solicitação recebida</strong><p>A ordem foi registrada e encaminhada para análise da equipe técnica.</p></div><time><?= e(osPublicoDataBr((string) ($os['data_entrada'] ?? ''))) ?></time></article>
                <?php endif; ?>
                <?php foreach ($atualizacoes as $atualizacao): ?>
                    <article class="update"><div class="update-icon"><i class="bi bi-bell-fill"></i></div><div><strong><?= e((string) $atualizacao['titulo']) ?></strong><?php if (trim((string) ($atualizacao['mensagem'] ?? '')) !== ''): ?><p><?= nl2br(e((string) $atualizacao['mensagem'])) ?></p><?php endif; ?></div><time><?= e(osPublicoDataBr((string) $atualizacao['criado_em'])) ?></time></article>
                <?php endforeach; ?>
            </div>
        </section>

        <?php if ($statusDados['codigo'] === 'pronto_retirada' || $statusDados['codigo'] === 'entregue'): ?>
            <section class="panel action-panel">
                <div class="callout">
                    <?php if ($statusDados['codigo'] === 'pronto_retirada'): ?>
                        <h3><i class="bi bi-box-arrow-up-right me-1"></i> Equipamento disponível para retirada</h3>
                        <p>Dirija-se à Gerência de Tecnologia no horário de atendimento. Informe o número da OS ou o nome do solicitante. Depois de visualizar este aviso, registre sua ciência abaixo.</p>
                        <button type="button" class="public-button" id="scienceButton" <?= $cienciaRegistrada ? 'disabled' : '' ?>><i class="bi <?= $cienciaRegistrada ? 'bi-check-circle-fill' : 'bi-hand-index-thumb-fill' ?>"></i><?= $cienciaRegistrada ? 'Ciência já registrada' : 'Confirmar que fui informado' ?></button>
                    <?php else: ?>
                        <h3><i class="bi bi-check-circle-fill me-1"></i> Atendimento concluído</h3>
                        <p>O equipamento foi entregue e a ordem de serviço está encerrada. Sua avaliação ajuda a Gerência de Tecnologia a melhorar continuamente o atendimento.</p>
                    <?php endif; ?>
                </div>

                <div class="rating">
                    <?php if ($statusDados['codigo'] !== 'entregue'): ?>
                        <h3>A avaliação será liberada após a entrega</h3>
                        <p>Assim que a retirada for registrada, esta área ficará disponível.</p>
                    <?php elseif ($avaliacao): ?>
                        <h3>Avaliação registrada</h3>
                        <p>Obrigado pela sua participação. Nota enviada: <strong><?= (int) $avaliacao['nota'] ?>/4</strong>.</p>
                    <?php else: ?>
                        <h3>Como foi o atendimento?</h3>
                        <p>Selecione uma opção, informe se o problema foi resolvido e envie.</p>
                        <form id="ratingForm">
                            <div class="faces">
                                <label class="face"><input type="radio" name="nota" value="1" required><span>😞<small>Ruim</small></span></label>
                                <label class="face"><input type="radio" name="nota" value="2" required><span>😐<small>Regular</small></span></label>
                                <label class="face"><input type="radio" name="nota" value="3" required><span>🙂<small>Bom</small></span></label>
                                <label class="face"><input type="radio" name="nota" value="4" required><span>🤩<small>Excelente</small></span></label>
                            </div>
                            <div class="resolved">
                                <label><input type="radio" name="resolvido" value="1" required><span>Problema resolvido</span></label>
                                <label><input type="radio" name="resolvido" value="0" required><span>Não foi resolvido</span></label>
                            </div>
                            <textarea class="comment" name="comentario" maxlength="500" placeholder="Comentário opcional..."></textarea>
                            <button type="submit" class="public-button" id="ratingButton"><i class="bi bi-send-fill"></i>Enviar avaliação</button>
                        </form>
                    <?php endif; ?>
                </div>
            </section>
        <?php endif; ?>

        <footer class="footer"><span>Prefeitura Municipal de Extrema — Gerência de Tecnologia<br>Este painel não exibe diagnósticos internos, senhas, anexos ou dados técnicos sensíveis.</span><span><i class="bi bi-shield-lock-fill"></i>Consulta protegida por token exclusivo</span></footer>
    <?php endif; ?>
</div>

<div class="toast" id="toast"><i class="bi bi-check-circle-fill"></i><span id="toastText"></span></div>

<?php if ($os): ?>
<script>
(() => {
    'use strict';

    const token = <?= json_encode($token, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
    const csrf = <?= json_encode($csrf, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;

    function showToast(message, success = true) {
        const toast = document.getElementById('toast');
        const text = document.getElementById('toastText');
        if (!toast || !text) return;
        toast.style.background = success ? '#05294f' : '#8d182b';
        text.textContent = message;
        toast.classList.add('show');
        setTimeout(() => toast.classList.remove('show'), 3500);
    }

    async function post(url, data) {
        const body = new URLSearchParams({token, csrf_token: csrf, ...data});
        const response = await fetch(url, {
            method: 'POST',
            headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8','X-Requested-With':'XMLHttpRequest'},
            body: body.toString()
        });
        const payload = await response.json().catch(() => ({}));
        if (!response.ok || payload.ok === false) {
            throw new Error(payload.message || 'Não foi possível concluir a operação.');
        }
        return payload;
    }

    document.getElementById('scienceButton')?.addEventListener('click', async event => {
        const button = event.currentTarget;
        button.disabled = true;
        const original = button.innerHTML;
        button.innerHTML = '<i class="bi bi-hourglass-split"></i>Registrando...';
        try {
            const payload = await post('registrar_ciencia_os.php', {});
            button.innerHTML = '<i class="bi bi-check-circle-fill"></i>Ciência registrada';
            showToast(payload.message || 'Ciência registrada com sucesso.');
        } catch (error) {
            button.disabled = false;
            button.innerHTML = original;
            showToast(error.message, false);
        }
    });

    document.getElementById('ratingForm')?.addEventListener('submit', async event => {
        event.preventDefault();
        const form = event.currentTarget;
        const button = document.getElementById('ratingButton');
        const formData = new FormData(form);
        const nota = formData.get('nota');
        const resolvido = formData.get('resolvido');
        if (!nota || resolvido === null) {
            showToast('Selecione a nota e informe se o problema foi resolvido.', false);
            return;
        }
        button.disabled = true;
        const original = button.innerHTML;
        button.innerHTML = '<i class="bi bi-hourglass-split"></i>Enviando...';
        try {
            const payload = await post('avaliar_os.php', {
                nota: String(nota),
                resolvido: String(resolvido),
                comentario: String(formData.get('comentario') || '')
            });
            form.innerHTML = '<div class="completed-banner"><div class="banner-icon"><i class="bi bi-heart-fill"></i></div><div><strong>Avaliação enviada</strong><span>Obrigado por ajudar a melhorar o atendimento da Gerência de Tecnologia.</span></div></div>';
            showToast(payload.message || 'Avaliação registrada com sucesso.');
        } catch (error) {
            button.disabled = false;
            button.innerHTML = original;
            showToast(error.message, false);
        }
    });
})();
</script>
<?php endif; ?>
</body>
</html>
