<?php
declare(strict_types=1);

require_once 'auth.php';
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();
}

/*
|--------------------------------------------------------------------------
| Funções auxiliares
|--------------------------------------------------------------------------
*/

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

function textoNormalizado(string $texto): string
{
    $texto = trim($texto);

    if (function_exists('mb_strtolower')) {
        $texto = mb_strtolower($texto, 'UTF-8');
    } else {
        $texto = strtolower($texto);
    }

    return strtr($texto, [
        'á' => 'a', 'à' => 'a', 'â' => 'a', 'ã' => 'a', 'ä' => 'a',
        'é' => 'e', 'è' => 'e', 'ê' => 'e', 'ë' => 'e',
        'í' => 'i', 'ì' => 'i', 'î' => 'i', 'ï' => 'i',
        'ó' => 'o', 'ò' => 'o', 'ô' => 'o', 'õ' => 'o', 'ö' => 'o',
        'ú' => 'u', 'ù' => 'u', 'û' => 'u', 'ü' => 'u',
        'ç' => 'c'
    ]);
}

function codigoStatus(string $status): string
{
    $status = textoNormalizado($status);

    if (str_contains($status, 'finaliz')) {
        return 'finalizado';
    }

    if (
        str_contains($status, 'pendente') &&
        str_contains($status, 'retirada')
    ) {
        return 'pendente_retirada';
    }

    return 'em_andamento';
}

function formatarData(?string $data, string $formato = 'd/m/Y H:i'): string
{
    if (!$data) {
        return 'Não informada';
    }

    $timestamp = strtotime($data);

    return $timestamp !== false
        ? date($formato, $timestamp)
        : 'Data inválida';
}

function tamanhoArquivo(int $bytes): string
{
    if ($bytes >= 1024 * 1024) {
        return number_format($bytes / 1024 / 1024, 2, ',', '.') . ' MB';
    }

    return number_format($bytes / 1024, 1, ',', '.') . ' KB';
}

function jsonSeguro(mixed $valor): string
{
    return json_encode(
        $valor,
        JSON_UNESCAPED_UNICODE |
        JSON_UNESCAPED_SLASHES |
        JSON_HEX_TAG |
        JSON_HEX_APOS |
        JSON_HEX_QUOT |
        JSON_HEX_AMP
    ) ?: 'null';
}

function criarDiretorioUploads(): string
{
    $diretorio = __DIR__ . '/uploads';

    if (
        !is_dir($diretorio) &&
        !mkdir($diretorio, 0755, true) &&
        !is_dir($diretorio)
    ) {
        throw new RuntimeException(
            'Não foi possível preparar a pasta de uploads.'
        );
    }

    return $diretorio;
}

function salvarAnexoSeguro(array $arquivo, int $osId): string
{
    if ((int) ($arquivo['error'] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_NO_FILE) {
        return '';
    }

    if ((int) ($arquivo['error'] ?? UPLOAD_ERR_OK) !== UPLOAD_ERR_OK) {
        throw new RuntimeException('Não foi possível receber o anexo.');
    }

    $tamanho = (int) ($arquivo['size'] ?? 0);

    if ($tamanho <= 0 || $tamanho > 8 * 1024 * 1024) {
        throw new RuntimeException(
            'O anexo deve possuir até 8 MB.'
        );
    }

    $mime = '';

    if (function_exists('finfo_open')) {
        $finfo = finfo_open(FILEINFO_MIME_TYPE);

        if ($finfo !== false) {
            $mime = (string) finfo_file(
                $finfo,
                (string) ($arquivo['tmp_name'] ?? '')
            );

            finfo_close($finfo);
        }
    }

    $permitidos = [
        'image/png' => 'png',
        'image/jpeg' => 'jpg',
        'application/pdf' => 'pdf'
    ];

    if (!isset($permitidos[$mime])) {
        throw new RuntimeException(
            'Formato de anexo inválido. Envie PNG, JPG, JPEG ou PDF.'
        );
    }

    $diretorio = criarDiretorioUploads();
    $nome = sprintf(
        'os_%d_finalizacao_%s_%s.%s',
        $osId,
        date('Ymd_His'),
        bin2hex(random_bytes(4)),
        $permitidos[$mime]
    );

    $destino = $diretorio . '/' . $nome;

    if (!move_uploaded_file((string) $arquivo['tmp_name'], $destino)) {
        throw new RuntimeException('Falha ao salvar o anexo enviado.');
    }

    return 'uploads/' . $nome;
}

/*
|--------------------------------------------------------------------------
| Estrutura da timeline
|--------------------------------------------------------------------------
*/

$mysqli->query("
    CREATE TABLE IF NOT EXISTS os_eventos (
        id INT AUTO_INCREMENT PRIMARY KEY,
        os_id INT NOT NULL,
        tipo VARCHAR(80) NOT NULL,
        descricao TEXT NOT NULL,
        usuario VARCHAR(150) DEFAULT NULL,
        criado_em DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
        INDEX idx_os_eventos_os_id (os_id)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
");

/*
|--------------------------------------------------------------------------
| Identificação e carregamento da OS
|--------------------------------------------------------------------------
*/

$id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT) ?: 0;

if ($id <= 0) {
    header('Location: listar_os.php');
    exit;
}

$stmt = $mysqli->prepare("
    SELECT *
    FROM ordens_servico
    WHERE id = ?
    LIMIT 1
");

if (!$stmt) {
    http_response_code(500);
    exit('Não foi possível preparar a consulta da ordem de serviço.');
}

$stmt->bind_param('i', $id);
$stmt->execute();
$os = $stmt->get_result()->fetch_assoc();
$stmt->close();

if (!$os) {
    http_response_code(404);
    exit('Ordem de serviço não encontrada.');
}

$statusCodigo = codigoStatus((string) ($os['status'] ?? ''));
$podeFinalizar = $statusCodigo === 'em_andamento';

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

$csrfToken = (string) $_SESSION['csrf_finalizar_os'];
$erro = '';
$sucesso = '';
$novoAnexoCriado = '';

$tecnicoPadrao = trim(
    (string) (
        $_POST['tecnico'] ??
        $os['tecnico'] ??
        $_SESSION['usuario'] ??
        ''
    )
);

$solucaoPadrao = trim(
    (string) ($_POST['solucao'] ?? $os['solucao'] ?? '')
);


/*
|--------------------------------------------------------------------------
| Finalização
|--------------------------------------------------------------------------
*/

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $csrfRecebido = (string) ($_POST['csrf_token'] ?? '');
    $tecnico = trim((string) ($_POST['tecnico'] ?? ''));
    $solucao = trim((string) ($_POST['solucao'] ?? ''));
    if (
        $csrfRecebido === '' ||
        !hash_equals($csrfToken, $csrfRecebido)
    ) {
        $erro = 'A sessão do formulário expirou. Atualize a página.';
    } elseif (!$podeFinalizar) {
        $erro = 'Esta ordem não está disponível para nova finalização.';
    } elseif ($tecnico === '') {
        $erro = 'Informe o técnico responsável.';
    } elseif (mb_strlen($tecnico, 'UTF-8') > 150) {
        $erro = 'O nome do técnico ultrapassa o limite permitido.';
    } elseif (mb_strlen($solucao, 'UTF-8') < 20) {
        $erro = 'Descreva a solução aplicada com pelo menos 20 caracteres.';
    }

    if ($erro === '') {
        try {
            $anexoFinal = trim((string) ($os['anexo'] ?? ''));

            if (
                isset($_FILES['anexo']) &&
                (int) ($_FILES['anexo']['error'] ?? UPLOAD_ERR_NO_FILE) !== UPLOAD_ERR_NO_FILE
            ) {
                $novoAnexoCriado = salvarAnexoSeguro($_FILES['anexo'], $id);
                $anexoFinal = $novoAnexoCriado;
            }

            $dataSaida = date('Y-m-d H:i:s');

            $mysqli->begin_transaction();

            $upd = $mysqli->prepare("
                UPDATE ordens_servico
                SET
                    tecnico = ?,
                    solucao = ?,
                    data_saida = ?,
                    status = 'PENDENTE RETIRADA',
                    anexo = ?
                WHERE id = ?
                  AND LOWER(TRIM(status)) NOT LIKE '%finaliz%'
                  AND LOWER(TRIM(status)) NOT LIKE '%retirada%'
            ");

            if (!$upd) {
                throw new RuntimeException(
                    'Não foi possível preparar a atualização da ordem.'
                );
            }

            $upd->bind_param(
                'ssssi',
                $tecnico,
                $solucao,
                $dataSaida,
                $anexoFinal,
                $id
            );

            if (!$upd->execute()) {
                $mensagem = $upd->error;
                $upd->close();

                throw new RuntimeException(
                    'Erro ao atualizar a ordem: ' . $mensagem
                );
            }

            if ($upd->affected_rows < 1) {
                $upd->close();

                throw new RuntimeException(
                    'A ordem já foi finalizada ou teve o status alterado por outro usuário.'
                );
            }

            $upd->close();

            $descricaoEvento = sprintf(
                "Atendimento técnico concluído pelo técnico %s. A OS foi encaminhada para a etapa de retirada.",
                $tecnico
            );

            $ins = $mysqli->prepare("
                INSERT INTO os_eventos (
                    os_id,
                    tipo,
                    descricao,
                    usuario
                ) VALUES (?, 'Finalizacao', ?, ?)
            ");

            if (!$ins) {
                throw new RuntimeException(
                    'Não foi possível preparar o registro da timeline.'
                );
            }

            $ins->bind_param(
                'iss',
                $id,
                $descricaoEvento,
                $tecnico
            );

            if (!$ins->execute()) {
                $mensagem = $ins->error;
                $ins->close();

                throw new RuntimeException(
                    'Erro ao registrar a timeline: ' . $mensagem
                );
            }

            $ins->close();

            $mensagemPublica =
                'O serviço técnico foi concluído e o equipamento está disponível para retirada na Gerência de Tecnologia.';

            $updPublico = $mysqli->prepare("
                UPDATE ordens_servico
                SET mensagem_publica = ?
                WHERE id = ?
            ");

            if (!$updPublico) {
                throw new RuntimeException(
                    'Não foi possível atualizar a mensagem pública da ordem.'
                );
            }

            $updPublico->bind_param('si', $mensagemPublica, $id);
            $updPublico->execute();
            $updPublico->close();

            osPublicoGarantirToken($mysqli, $id);

            osPublicoRegistrarAtualizacao(
                $mysqli,
                $id,
                'Equipamento pronto para retirada',
                $mensagemPublica,
                'PRONTO_RETIRADA',
                $tecnico,
                1
            );

            $mysqli->commit();

            $_SESSION['csrf_finalizar_os'] = bin2hex(random_bytes(24));
            $_SESSION['finalizacao_sucesso'] = sprintf(
                'Atendimento técnico da OS %s concluído. Aguardando retirada.',
                (string) ($os['numero_os'] ?? $id)
            );

            header('Location: listar_os.php?finalizada=1&id=' . $id);
            exit;
        } catch (Throwable $excecao) {
            try {
                $mysqli->rollback();
            } catch (Throwable) {
                // A transação pode não ter sido iniciada.
            }

            if (
                $novoAnexoCriado !== '' &&
                is_file(__DIR__ . '/' . $novoAnexoCriado)
            ) {
                @unlink(__DIR__ . '/' . $novoAnexoCriado);
            }

            $erro = $excecao->getMessage();
        }
    }
}

/*
|--------------------------------------------------------------------------
| Timeline
|--------------------------------------------------------------------------
*/

$events = [];

$stmtEventos = $mysqli->prepare("
    SELECT *
    FROM os_eventos
    WHERE os_id = ?
    ORDER BY criado_em ASC, id ASC
");

if ($stmtEventos) {
    $stmtEventos->bind_param('i', $id);
    $stmtEventos->execute();
    $resultadoEventos = $stmtEventos->get_result();

    while ($evento = $resultadoEventos->fetch_assoc()) {
        $events[] = $evento;
    }

    $stmtEventos->close();
}

$numeroOs = trim((string) ($os['numero_os'] ?? $id));
$prioridade = trim((string) ($os['prioridade'] ?? 'Não informada'));
$dataEntradaTimestamp = strtotime((string) ($os['data_entrada'] ?? ''));
$diasEmAberto = $dataEntradaTimestamp !== false
    ? max(0, (int) floor((time() - $dataEntradaTimestamp) / 86400))
    : 0;

$equipamentoResumo = trim(
    implode(
        ' • ',
        array_filter([
            trim((string) ($os['tipo_equipamento'] ?? '')),
            trim((string) ($os['marca'] ?? '')),
            trim((string) ($os['modelo'] ?? ''))
        ])
    )
);

$anexoAtual = trim((string) ($os['anexo'] ?? ''));
?>
<!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">

    <title>Finalizar OS <?= e($numeroOs) ?> | Manutenção TI</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@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
    >

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
        rel="stylesheet"
    >

    <style>
        :root {
            --primary: #08396f;
            --primary-dark: #05294f;
            --primary-light: #145b9f;
            --green: #087f5b;
            --green-dark: #066748;
            --green-soft: #e8f8f1;
            --purple: #6045b8;
            --purple-dark: #493491;
            --purple-soft: #f1edfb;
            --yellow: #d17a00;
            --yellow-soft: #fff7e6;
            --red: #bd263d;
            --red-soft: #fff0f3;
            --cyan: #087f9c;
            --background: #edf3f8;
            --surface: #ffffff;
            --surface-soft: #f6f9fc;
            --text: #152236;
            --muted: #617086;
            --light: #8795a8;
            --border: #dce5ee;
            --border-soft: #e9eff5;
            --shadow-sm: 0 10px 28px rgba(8, 57, 111, 0.06);
            --shadow-md: 0 22px 58px rgba(8, 57, 111, 0.11);
            --shadow-lg: 0 38px 98px rgba(5, 41, 79, 0.2);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden;

            font-family:
                "Inter",
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color: var(--text);

            background:
                radial-gradient(
                    circle at 6% 6%,
                    rgba(20, 91, 159, 0.13),
                    transparent 29rem
                ),
                radial-gradient(
                    circle at 95% 88%,
                    rgba(8, 127, 91, 0.09),
                    transparent 31rem
                ),
                linear-gradient(
                    145deg,
                    #f8fbfd,
                    var(--background) 54%,
                    #e7eff6
                );
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        a {
            text-decoration: none;
        }

        .top-strip {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1100;

            height: 6px;

            background: linear-gradient(
                90deg,
                var(--primary) 0 58%,
                var(--green) 58% 88%,
                #e8ad16 88% 100%
            );
        }

        .background-grid {
            position: fixed;
            inset: 0;
            z-index: 0;

            pointer-events: none;

            background-image:
                linear-gradient(
                    rgba(8, 57, 111, 0.026) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(8, 57, 111, 0.026) 1px,
                    transparent 1px
                );

            background-size: 54px 54px;
        }

        .app {
            position: relative;
            z-index: 2;

            padding-top: 6px;
        }

        /* Cabeçalho */

        .main-header {
            position: relative;
            overflow: hidden;

            margin: 19px 19px 0;
            padding: 20px 23px;

            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 28px;

            color: #ffffff;

            background:
                radial-gradient(
                    circle at 82% 0,
                    rgba(255, 255, 255, 0.13),
                    transparent 23rem
                ),
                radial-gradient(
                    circle at 0 100%,
                    rgba(8, 127, 91, 0.25),
                    transparent 25rem
                ),
                linear-gradient(
                    135deg,
                    var(--primary-dark),
                    var(--primary) 56%,
                    #07547c
                );

            box-shadow:
                var(--shadow-lg),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .main-header::before {
            content: "";
            position: absolute;
            top: -215px;
            right: -115px;

            width: 440px;
            height: 440px;

            border: 42px solid rgba(255, 255, 255, 0.035);
            border-radius: 50%;

            box-shadow:
                0 0 0 44px rgba(255, 255, 255, 0.018),
                0 0 0 88px rgba(255, 255, 255, 0.012);

            animation: headerSpin 31s linear infinite;
        }

        @keyframes headerSpin {
            to {
                transform: rotate(360deg);
            }
        }

        .header-content {
            position: relative;
            z-index: 2;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand-area {
            min-width: 0;

            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-box {
            width: 72px;
            height: 72px;
            flex: 0 0 72px;

            display: grid;
            place-items: center;

            padding: 5px;

            border-radius: 22px;

            background: linear-gradient(145deg, #ffffff, #dceaf5);

            box-shadow: 0 19px 37px rgba(0, 0, 0, 0.18);

            animation: logoFloat 6s ease-in-out infinite;
        }

        .logo-box img {
            max-width: 58px;
            max-height: 58px;

            object-fit: contain;
        }

        @keyframes logoFloat {
            50% {
                transform: translateY(-5px) rotateY(3deg);
            }
        }

        .government-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;

            margin-bottom: 7px;
            padding: 6px 10px;

            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 999px;

            color: rgba(255, 255, 255, 0.84);
            background: rgba(255, 255, 255, 0.08);

            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.65px;
            text-transform: uppercase;
        }

        .government-label i {
            color: #9cebd2;
        }

        .header-title {
            margin: 0;

            font-size: clamp(22px, 2.5vw, 34px);
            line-height: 1.05;
            letter-spacing: -1px;
            font-weight: 900;
        }

        .header-subtitle {
            margin: 7px 0 0;

            color: rgba(255, 255, 255, 0.68);

            font-size: 10px;
            line-height: 1.5;
        }

        .header-actions {
            min-width: 430px;

            display: flex;
            justify-content: flex-end;
            gap: 7px;
            flex-wrap: wrap;
        }

        .header-button {
            min-height: 39px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;

            padding: 0 12px;

            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 13px;

            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);

            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.2px;
            text-transform: uppercase;

            transition: 0.2s ease;
        }

        .header-button:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .header-button.primary {
            color: var(--primary-dark);
            border-color: #ffffff;
            background: #ffffff;
        }

        /* Conteúdo */

        .main-content {
            width: 100%;
            max-width: 1740px;

            margin: 0 auto;
            padding: 17px 19px 34px;
        }

        .alert-error,
        .alert-info-status {
            display: flex;
            align-items: flex-start;
            gap: 11px;

            margin-bottom: 14px;
            padding: 13px 15px;

            border-radius: 18px;

            font-size: 9px;
            line-height: 1.5;

            box-shadow: var(--shadow-sm);
        }

        .alert-error {
            color: #842037;
            border: 1px solid #efcbd2;
            background: var(--red-soft);
        }

        .alert-info-status {
            color: #35536d;
            border: 1px solid #cfe0ee;
            background: #edf7fc;
        }

        .alert-icon {
            width: 39px;
            height: 39px;
            flex: 0 0 39px;

            display: grid;
            place-items: center;

            border-radius: 13px;

            color: #ffffff;
            background: var(--red);

            font-size: 17px;
        }

        .alert-info-status .alert-icon {
            background: var(--primary);
        }

        /* Hero */

        .hero {
            position: relative;

            display: grid;
            grid-template-columns:
                minmax(0, 1.35fr)
                minmax(330px, 0.65fr);
            gap: 15px;

            overflow: hidden;

            padding: 23px;

            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 30px;

            background:
                radial-gradient(
                    circle at 88% 0,
                    rgba(20, 91, 159, 0.08),
                    transparent 23rem
                ),
                rgba(255, 255, 255, 0.85);

            backdrop-filter: blur(20px);

            box-shadow:
                var(--shadow-md),
                inset 0 1px 0 #ffffff;

            transform-style: preserve-3d;
            transition: transform 0.25s ease;
        }

        .hero-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;

            margin-bottom: 10px;

            color: var(--primary);

            font-size: 8px;
            font-weight: 850;
            letter-spacing: 0.65px;
            text-transform: uppercase;
        }

        .hero h2 {
            max-width: 900px;

            margin: 0;

            font-size: clamp(27px, 3vw, 43px);
            line-height: 1.04;
            letter-spacing: -1.7px;
            font-weight: 900;
        }

        .hero h2 span {
            color: var(--primary);
        }

        .hero p {
            max-width: 880px;

            margin: 12px 0 0;

            color: var(--muted);

            font-size: 10px;
            line-height: 1.65;
        }

        .hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;

            margin-top: 16px;
        }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;

            padding: 7px 9px;

            border: 1px solid var(--border);
            border-radius: 999px;

            color: #536378;
            background: #ffffff;

            box-shadow: var(--shadow-sm);

            font-size: 7px;
            font-weight: 750;
        }

        .quality-card {
            position: relative;
            z-index: 2;

            min-height: 220px;
            padding: 19px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            overflow: hidden;

            border-radius: 24px;

            color: #ffffff;

            background:
                radial-gradient(
                    circle at 88% 10%,
                    rgba(255, 255, 255, 0.13),
                    transparent 12rem
                ),
                linear-gradient(145deg, var(--primary-dark), var(--primary));

            box-shadow: 0 23px 47px rgba(8, 57, 111, 0.21);

            transform: translateZ(20px);
        }

        .quality-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .quality-label {
            font-size: 8px;
            font-weight: 850;
            letter-spacing: 0.55px;
            text-transform: uppercase;
        }

        .quality-status {
            padding: 6px 8px;

            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;

            color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.08);

            font-size: 7px;
            font-weight: 800;
        }

        .quality-number {
            display: flex;
            align-items: flex-end;
            gap: 3px;

            margin-top: 18px;
        }

        .quality-number strong {
            font-size: 50px;
            line-height: 0.9;
            letter-spacing: -2px;
            font-weight: 900;
        }

        .quality-number span {
            color: rgba(255, 255, 255, 0.65);

            font-size: 14px;
            font-weight: 700;
        }

        .quality-description {
            margin: 8px 0 0;

            color: rgba(255, 255, 255, 0.67);

            font-size: 8px;
            line-height: 1.5;
        }

        .quality-track {
            height: 8px;

            overflow: hidden;

            margin-top: 16px;

            border-radius: 999px;

            background: rgba(255, 255, 255, 0.13);
        }

        .quality-track span {
            display: block;
            height: 100%;

            border-radius: inherit;

            background: linear-gradient(90deg, #91ebcf, #ffffff);

            transition: width 0.35s ease;
        }

        /* Layout */

        .workspace {
            display: grid;
            grid-template-columns: 330px minmax(0, 1fr);
            gap: 14px;

            margin-top: 14px;
        }

        .panel {
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 28px;

            background: rgba(255, 255, 255, 0.92);

            backdrop-filter: blur(18px);

            box-shadow:
                var(--shadow-md),
                inset 0 1px 0 #ffffff;
        }

        .sticky-panel {
            position: sticky;
            top: 17px;

            align-self: start;

            overflow: hidden;
        }

        .panel-header {
            padding: 18px 19px;

            border-bottom: 1px solid var(--border-soft);

            background: linear-gradient(180deg, #ffffff, #f9fbfd);
        }

        .panel-header h3 {
            margin: 0;

            font-size: 14px;
            font-weight: 850;
        }

        .panel-header p {
            margin: 4px 0 0;

            color: var(--muted);

            font-size: 8px;
            line-height: 1.45;
        }

        .summary-list {
            display: flex;
            flex-direction: column;
            gap: 8px;

            padding: 14px;
        }

        .summary-item {
            padding: 11px;

            border: 1px solid var(--border-soft);
            border-radius: 15px;

            background: var(--surface-soft);
        }

        .summary-item span {
            display: flex;
            align-items: center;
            gap: 6px;

            color: var(--light);

            font-size: 6px;
            font-weight: 850;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .summary-item span i {
            color: var(--primary);
        }

        .summary-item strong {
            display: block;
            margin-top: 6px;

            color: var(--text);

            font-size: 8px;
            line-height: 1.48;
            font-weight: 800;
            word-break: break-word;
        }

        .problem-box {
            max-height: 180px;
            overflow: auto;
        }

        .status-card {
            margin: 0 14px 14px;
            padding: 12px;

            border: 1px solid #edd9aa;
            border-radius: 15px;

            color: #8a5a00;
            background: var(--yellow-soft);

            font-size: 7px;
            line-height: 1.5;
        }

        .status-card strong {
            display: block;
            margin-bottom: 4px;

            font-size: 8px;
            font-weight: 850;
        }

        /* Formulário */

        .form-panel {
            overflow: hidden;
        }

        .form-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            padding: 18px 20px;

            border-bottom: 1px solid var(--border-soft);

            background:
                radial-gradient(
                    circle at 100% 0,
                    rgba(20, 91, 159, 0.06),
                    transparent 18rem
                ),
                linear-gradient(180deg, #ffffff, #f9fbfd);
        }

        .form-title-area {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .form-title-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;

            display: grid;
            place-items: center;

            border-radius: 14px;

            color: #ffffff;
            background: linear-gradient(145deg, var(--green-dark), var(--green));

            box-shadow: 0 12px 24px rgba(8, 127, 91, 0.19);

            font-size: 17px;
        }

        .form-panel-header h3 {
            margin: 0;

            font-size: 15px;
            font-weight: 850;
        }

        .form-panel-header p {
            margin: 4px 0 0;

            color: var(--muted);

            font-size: 8px;
        }

        .draft-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;

            padding: 7px 9px;

            border: 1px solid var(--border);
            border-radius: 999px;

            color: var(--primary);
            background: #ffffff;

            font-size: 7px;
            font-weight: 800;
        }

        .form-body {
            display: flex;
            flex-direction: column;
            gap: 14px;

            padding: 20px;
        }

        .section-card {
            overflow: hidden;

            border: 1px solid var(--border);
            border-radius: 20px;

            background: #ffffff;

            box-shadow: var(--shadow-sm);
        }

        .section-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            padding: 14px 16px;

            border-bottom: 1px solid var(--border-soft);

            background: var(--surface-soft);
        }

        .section-title-area {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .section-icon {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;

            display: grid;
            place-items: center;

            border-radius: 12px;

            color: var(--primary);
            background: #eaf4fc;

            font-size: 15px;
        }

        .section-icon.purple {
            color: var(--purple);
            background: var(--purple-soft);
        }

        .section-icon.green {
            color: var(--green);
            background: var(--green-soft);
        }

        .section-card-header h4 {
            margin: 0;

            font-size: 10px;
            font-weight: 850;
        }

        .section-card-header p {
            margin: 3px 0 0;

            color: var(--light);

            font-size: 7px;
        }

        .section-card-body {
            padding: 16px;
        }

        .form-label {
            display: flex;
            align-items: center;
            gap: 5px;

            margin-bottom: 6px;

            color: #516176;

            font-size: 8px;
            font-weight: 850;
            letter-spacing: 0.45px;
            text-transform: uppercase;
        }

        .required {
            color: var(--red);
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper > i {
            position: absolute;
            top: 50%;
            left: 13px;
            z-index: 2;

            color: var(--primary);

            font-size: 14px;

            transform: translateY(-50%);
            pointer-events: none;
        }

        .form-control,
        .form-select {
            min-height: 49px;

            border: 1px solid var(--border);
            border-radius: 14px;

            color: var(--text);
            background: var(--surface-soft);

            box-shadow: none;

            font-size: 10px;
            font-weight: 650;

            transition: 0.2s ease;
        }

        .input-wrapper .form-control {
            padding-left: 39px;
        }

        textarea.form-control {
            min-height: 210px;
            padding: 13px;

            line-height: 1.6;
            resize: vertical;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-light);
            background: #ffffff;

            box-shadow: 0 0 0 4px rgba(20, 91, 159, 0.1);
        }

        .field-note {
            display: flex;
            align-items: flex-start;
            gap: 5px;

            margin-top: 6px;

            color: var(--light);

            font-size: 7px;
            line-height: 1.45;
        }

        .quick-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;

            margin-top: 9px;
        }

        .quick-chip {
            min-height: 31px;

            display: inline-flex;
            align-items: center;
            gap: 5px;

            padding: 0 9px;

            border: 1px solid var(--border);
            border-radius: 999px;

            color: var(--muted);
            background: #ffffff;

            font-size: 7px;
            font-weight: 750;
        }

        .quick-chip:hover {
            color: var(--primary);
            border-color: #c3d4e2;
        }

        /* Assistente local */

        .assistant-card {
            position: relative;
            overflow: hidden;

            padding: 16px;

            border: 1px solid #d9d1f3;
            border-radius: 18px;

            background:
                radial-gradient(
                    circle at 95% 0,
                    rgba(96, 69, 184, 0.1),
                    transparent 15rem
                ),
                #faf9fe;
        }

        .assistant-card::after {
            content: "";
            position: absolute;
            right: -45px;
            bottom: -55px;

            width: 135px;
            height: 135px;

            border: 19px solid rgba(96, 69, 184, 0.04);
            border-radius: 50%;
        }

        .assistant-top {
            position: relative;
            z-index: 2;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .assistant-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .assistant-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;

            display: grid;
            place-items: center;

            border-radius: 14px;

            color: #ffffff;
            background: linear-gradient(145deg, var(--purple-dark), var(--purple));

            box-shadow: 0 12px 25px rgba(96, 69, 184, 0.2);

            font-size: 18px;
        }

        .assistant-info strong {
            display: block;

            font-size: 10px;
            font-weight: 850;
        }

        .assistant-info span {
            display: block;
            margin-top: 3px;

            color: var(--muted);

            font-size: 7px;
            line-height: 1.45;
        }

        .assistant-button {
            min-height: 40px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;

            padding: 0 12px;

            border: 1px solid var(--purple);
            border-radius: 12px;

            color: #ffffff;
            background: linear-gradient(145deg, var(--purple-dark), var(--purple));

            font-size: 8px;
            font-weight: 850;
            white-space: nowrap;

            box-shadow: 0 12px 23px rgba(96, 69, 184, 0.17);
        }

        .assistant-result {
            position: relative;
            z-index: 2;

            display: none;

            margin-top: 13px;
            padding: 13px;

            border: 1px solid #ddd6f3;
            border-radius: 15px;

            background: #ffffff;
        }

        .assistant-result.visible {
            display: block;
        }

        .diagnosis-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .diagnosis-header strong {
            display: block;

            color: var(--purple-dark);

            font-size: 10px;
            line-height: 1.4;
        }

        .confidence-badge {
            padding: 6px 8px;

            border-radius: 999px;

            color: var(--purple-dark);
            background: var(--purple-soft);

            font-size: 7px;
            font-weight: 850;
            white-space: nowrap;
        }

        .diagnosis-summary {
            margin: 8px 0 0;

            color: var(--muted);

            font-size: 8px;
            line-height: 1.55;
        }

        .diagnosis-steps {
            display: grid;
            gap: 6px;

            margin-top: 10px;
        }

        .diagnosis-step {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 7px;

            padding: 8px;

            border: 1px solid var(--border-soft);
            border-radius: 12px;

            background: var(--surface-soft);

            color: #435267;

            font-size: 7px;
            line-height: 1.45;
        }

        .diagnosis-step span:first-child {
            width: 23px;
            height: 23px;

            display: grid;
            place-items: center;

            border-radius: 8px;

            color: #ffffff;
            background: var(--purple);

            font-size: 7px;
            font-weight: 850;
        }

        .assistant-use-button {
            min-height: 36px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;

            margin-top: 10px;
            padding: 0 10px;

            border: 1px solid #d7cff1;
            border-radius: 11px;

            color: var(--purple-dark);
            background: var(--purple-soft);

            font-size: 7px;
            font-weight: 850;
        }

        /* Anexo opcional */

        .file-zone {
            position: relative;

            min-height: 168px;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 17px;

            border: 2px dashed #c9d7e3;
            border-radius: 16px;

            text-align: center;

            background: var(--surface-soft);

            cursor: pointer;

            transition: 0.2s ease;
        }

        .file-zone:hover,
        .file-zone.dragover {
            border-color: var(--primary-light);
            background: #edf7fc;
            transform: translateY(-2px);
        }

        .file-zone input {
            position: absolute;
            inset: 0;

            width: 100%;
            height: 100%;

            opacity: 0;
            cursor: pointer;
        }

        .file-zone i {
            display: block;
            margin-bottom: 8px;

            color: var(--primary);

            font-size: 28px;
        }

        .file-zone strong {
            display: block;

            font-size: 9px;
            font-weight: 850;
        }

        .file-zone span {
            display: block;
            margin-top: 4px;

            color: var(--light);

            font-size: 7px;
        }

        .file-preview,
        .existing-file {
            display: none;

            margin-top: 9px;
            padding: 10px;

            border: 1px solid var(--border);
            border-radius: 13px;

            background: #ffffff;
        }

        .file-preview.visible,
        .existing-file.visible {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .file-preview-main {
            min-width: 0;

            display: flex;
            align-items: center;
            gap: 9px;
        }

        .file-preview-icon {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;

            display: grid;
            place-items: center;

            border-radius: 11px;

            color: var(--primary);
            background: #eaf4fc;
        }

        .file-preview strong {
            display: block;
            overflow: hidden;

            font-size: 8px;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-preview small {
            display: block;
            margin-top: 3px;

            color: var(--light);

            font-size: 6px;
        }

        .remove-file {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;

            display: grid;
            place-items: center;

            border: 1px solid var(--border);
            border-radius: 10px;

            color: var(--red);
            background: #ffffff;
        }



        /* Timeline */

        .timeline-panel {
            margin-top: 14px;
            padding: 20px;
        }

        .timeline-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            margin-bottom: 15px;
        }

        .timeline-head h3 {
            margin: 0;

            font-size: 14px;
            font-weight: 850;
        }

        .timeline-head p {
            margin: 4px 0 0;

            color: var(--muted);

            font-size: 8px;
        }

        .timeline {
            position: relative;

            display: grid;
            gap: 10px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            top: 18px;
            bottom: 18px;
            left: 18px;

            width: 2px;

            background: #dbe5ee;
        }

        .timeline-item {
            position: relative;
            z-index: 2;

            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: flex-start;
            gap: 10px;

            padding: 11px;

            border: 1px solid var(--border-soft);
            border-radius: 15px;

            background: #ffffff;
        }

        .timeline-icon {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;

            display: grid;
            place-items: center;

            border-radius: 12px;

            color: var(--primary);
            background: #eaf4fc;

            font-size: 14px;
        }

        .timeline-item strong {
            display: block;

            font-size: 8px;
            font-weight: 850;
        }

        .timeline-item span {
            display: block;
            margin-top: 3px;

            color: var(--muted);

            font-size: 7px;
            line-height: 1.45;
        }

        .timeline-time {
            color: var(--light);

            font-size: 6px;
            white-space: nowrap;
        }

        /* Rodapé de ações */

        .form-actions {
            position: sticky;
            bottom: 0;
            z-index: 25;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;

            padding: 14px 18px;

            border-top: 1px solid var(--border-soft);

            background: rgba(249, 251, 253, 0.94);
            backdrop-filter: blur(16px);
        }

        .action-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .action-button {
            min-height: 43px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;

            padding: 0 14px;

            border: 1px solid var(--border);
            border-radius: 13px;

            color: var(--muted);
            background: #ffffff;

            font-size: 8px;
            font-weight: 850;
            text-transform: uppercase;

            transition: 0.18s ease;
        }

        .action-button:hover {
            color: var(--primary);
            border-color: #c3d4e2;
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .action-button.success {
            color: #ffffff;
            border-color: var(--green);
            background: linear-gradient(145deg, var(--green-dark), var(--green));

            box-shadow: 0 14px 29px rgba(8, 127, 91, 0.2);
        }

        .action-button.success:hover {
            color: #ffffff;
        }

        .action-button:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
        }

        .page-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;

            margin-top: 14px;
            padding: 13px 16px;

            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 17px;

            color: var(--light);
            background: rgba(255, 255, 255, 0.72);

            box-shadow: var(--shadow-sm);

            font-size: 7px;
            line-height: 1.5;
        }

        /* Modal */

        .modal-content {
            overflow: hidden;

            border: 0;
            border-radius: 24px;

            box-shadow: 0 35px 100px rgba(5, 41, 79, 0.28);
        }

        .modal-header {
            border: 0;

            color: #ffffff;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        }

        .modal-title {
            font-size: 13px;
            font-weight: 850;
        }

        .review-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .review-item {
            padding: 10px;

            border: 1px solid var(--border);
            border-radius: 13px;

            background: var(--surface-soft);
        }

        .review-item span {
            display: block;

            color: var(--light);

            font-size: 6px;
            font-weight: 850;
            text-transform: uppercase;
        }

        .review-item strong {
            display: block;
            margin-top: 5px;

            font-size: 8px;
            line-height: 1.45;
        }

        /* Responsividade */

        @media (max-width: 1120px) {
            .main-header {
                margin: 13px 11px 0;
            }

            .header-content {
                align-items: flex-start;
                flex-direction: column;
            }

            .header-actions {
                min-width: 0;
                justify-content: flex-start;
            }

            .main-content {
                padding: 14px 11px 28px;
            }

            .hero {
                grid-template-columns: 1fr;
            }

            .workspace {
                grid-template-columns: 1fr;
            }

            .sticky-panel {
                position: static;
            }

            .summary-list {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 760px) {
            .header-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));

                width: 100%;
            }

            .header-button {
                width: 100%;
            }

            .summary-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .assistant-top {
                align-items: flex-start;
                flex-direction: column;
            }

            .assistant-button {
                width: 100%;
            }

            .form-actions {
                align-items: stretch;
                flex-direction: column;
            }

            .action-group {
                width: 100%;
            }

            .action-button {
                flex: 1;
            }
        }

        @media (max-width: 540px) {
            .main-header {
                margin: 7px;
                padding: 15px;
                border-radius: 21px;
            }

            .main-content {
                padding: 12px 7px 28px;
            }

            .brand-area {
                align-items: flex-start;
                gap: 10px;
            }

            .logo-box {
                width: 61px;
                height: 61px;
                flex-basis: 61px;
            }

            .government-label {
                font-size: 7px;
            }

            .hero {
                padding: 17px;
                border-radius: 23px;
            }

            .hero h2 {
                font-size: 28px;
            }

            .summary-list {
                grid-template-columns: 1fr;
            }

            .form-body {
                padding: 13px;
            }

            .section-card-body {
                padding: 13px;
            }

            .timeline-item {
                grid-template-columns: auto 1fr;
            }

            .timeline-time {
                grid-column: 2;
            }

            .review-grid {
                grid-template-columns: 1fr;
            }

            .page-footer {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
    </style>
</head>
<body>

<div class="top-strip"></div>
<div class="background-grid"></div>

<div class="app">

    <header class="main-header">
        <div class="header-content">

            <div class="brand-area">
                <div class="logo-box">
                    <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-3&quot;></i>'"
                    >
                </div>

                <div>
                    <div class="government-label">
                        <i class="bi bi-shield-check"></i>
                        Prefeitura de Extrema • Gerência de Tecnologia
                    </div>

                    <h1 class="header-title">Finalização técnica da OS</h1>

                    <p class="header-subtitle">
                        Registro seguro da solução técnica e das evidências do atendimento.
                    </p>
                </div>
            </div>

            <nav class="header-actions" aria-label="Ações da página">
                <a href="listar_os.php" class="header-button primary">
                    <i class="bi bi-arrow-left-circle-fill"></i>
                    Ordens de serviço
                </a>

                <a href="detalhes_os.php?id=<?= $id ?>" class="header-button">
                    <i class="bi bi-eye-fill"></i>
                    Detalhes
                </a>

                <a href="dashboard.php" class="header-button">
                    <i class="bi bi-grid-1x2-fill"></i>
                    Dashboard
                </a>
            </nav>

        </div>
    </header>

    <main class="main-content">

        <?php if ($erro !== ''): ?>
            <div class="alert-error" role="alert">
                <div class="alert-icon">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                </div>

                <div>
                    <strong>Não foi possível finalizar a ordem.</strong><br>
                    <?= e($erro) ?>
                </div>
            </div>
        <?php endif; ?>

        <?php if (!$podeFinalizar): ?>
            <div class="alert-info-status" role="alert">
                <div class="alert-icon">
                    <i class="bi bi-info-circle-fill"></i>
                </div>

                <div>
                    <strong>Esta ordem não está em andamento.</strong><br>
                    O status atual é “<?= e((string) ($os['status'] ?? 'Não informado')) ?>”.
                    O formulário permanece disponível apenas para consulta.
                </div>
            </div>
        <?php endif; ?>

        <section class="hero" id="hero">
            <div>
                <div class="hero-label">
                    <i class="bi bi-clipboard2-check-fill"></i>
                    Encerramento técnico assistido
                </div>

                <h2>
                    Finalize a OS <span>#<?= e($numeroOs) ?></span>
                    com rastreabilidade completa.
                </h2>

                <p>
                    Registre exatamente o que foi diagnosticado, quais procedimentos foram executados
                    e como o funcionamento foi validado. Após concluir, a OS ficará aguardando retirada.
                </p>

                <div class="hero-tags">
                    <span class="hero-tag">
                        <i class="bi bi-calendar-event-fill"></i>
                        Entrada: <?= e(formatarData($os['data_entrada'] ?? null)) ?>
                    </span>

                    <span class="hero-tag">
                        <i class="bi bi-clock-history"></i>
                        <?= $diasEmAberto ?> dia<?= $diasEmAberto !== 1 ? 's' : '' ?> em aberto
                    </span>

                    <span class="hero-tag">
                        <i class="bi bi-flag-fill"></i>
                        Prioridade: <?= e($prioridade) ?>
                    </span>

                    <span class="hero-tag">
                        <i class="bi bi-upc-scan"></i>
                        Patrimônio: <?= e((string) ($os['patrimonio'] ?? 'Não informado')) ?>
                    </span>
                </div>
            </div>

            <aside class="quality-card">
                <div class="quality-top">
                    <span class="quality-label">
                        <i class="bi bi-check2-circle me-1"></i>
                        Qualidade da finalização
                    </span>

                    <span class="quality-status" id="qualityStatus">Iniciando</span>
                </div>

                <div>
                    <div class="quality-number">
                        <strong id="qualityNumber">0</strong>
                        <span>%</span>
                    </div>

                    <p class="quality-description" id="qualityDescription">
                        Informe o técnico e descreva a solução para concluir.
                    </p>

                    <div class="quality-track">
                        <span id="qualityProgress" style="width:0%;"></span>
                    </div>
                </div>
            </aside>
        </section>

        <div class="workspace">

            <aside class="panel sticky-panel">
                <div class="panel-header">
                    <h3>Resumo da ordem</h3>
                    <p>Contexto disponível para a finalização.</p>
                </div>

                <div class="summary-list">
                    <div class="summary-item">
                        <span>
                            <i class="bi bi-person-fill"></i>
                            Solicitante
                        </span>

                        <strong>
                            <?= e((string) ($os['nome_solicitante'] ?? 'Não informado')) ?><br>
                            <?= e((string) ($os['setor'] ?? 'Setor não informado')) ?>
                        </strong>
                    </div>

                    <div class="summary-item">
                        <span>
                            <i class="bi bi-pc-display"></i>
                            Equipamento
                        </span>

                        <strong><?= e($equipamentoResumo ?: 'Não informado') ?></strong>
                    </div>

                    <div class="summary-item">
                        <span>
                            <i class="bi bi-qr-code"></i>
                            Identificação
                        </span>

                        <strong>
                            Patrimônio: <?= e((string) ($os['patrimonio'] ?? 'Não informado')) ?><br>
                            Série: <?= e((string) ($os['numero_serie'] ?? 'Não informada')) ?>
                        </strong>
                    </div>

                    <div class="summary-item problem-box">
                        <span>
                            <i class="bi bi-exclamation-diamond-fill"></i>
                            Problema informado
                        </span>

                        <strong><?= nl2br(e((string) ($os['problema'] ?? 'Não informado'))) ?></strong>
                    </div>
                </div>

                <div class="status-card">
                    <strong>
                        <i class="bi bi-arrow-repeat me-1"></i>
                        Próximo status
                    </strong>

                    Ao concluir, a ordem será alterada para
                    <b>PENDENTE RETIRADA</b> e ficará aguardando o responsável pelo equipamento.
                </div>
            </aside>

            <section class="panel form-panel">
                <div class="form-panel-header">
                    <div class="form-title-area">
                        <div class="form-title-icon">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>

                        <div>
                            <h3>Registro da solução técnica</h3>
                            <p>Preencha, revise e confirme antes de encerrar.</p>
                        </div>
                    </div>

                    <span class="draft-badge" id="draftBadge">
                        <i class="bi bi-cloud-check-fill"></i>
                        Rascunho automático
                    </span>
                </div>

                <form
                    method="POST"
                    enctype="multipart/form-data"
                    id="finalForm"
                    novalidate
                >
                    <input type="hidden" name="csrf_token" value="<?= e($csrfToken) ?>">

                    <div class="form-body">

                        <section class="section-card">
                            <div class="section-card-header">
                                <div class="section-title-area">
                                    <div class="section-icon">
                                        <i class="bi bi-person-badge-fill"></i>
                                    </div>

                                    <div>
                                        <h4>Responsabilidade técnica</h4>
                                        <p>Identifique o profissional responsável pela solução.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card-body">
                                <div class="row g-3">
                                    <div class="col-md-5">
                                        <label for="tecnico" class="form-label">
                                            Técnico responsável
                                            <span class="required">*</span>
                                        </label>

                                        <div class="input-wrapper">
                                            <i class="bi bi-person-gear"></i>

                                            <input
                                                type="text"
                                                name="tecnico"
                                                id="tecnico"
                                                class="form-control"
                                                value="<?= e($tecnicoPadrao) ?>"
                                                placeholder="Nome completo do técnico"
                                                maxlength="150"
                                                required
                                                <?= !$podeFinalizar ? 'disabled' : '' ?>
                                            >
                                        </div>
                                    </div>

                                    <div class="col-md-7">
                                        <label class="form-label">
                                            Identificação do atendimento
                                        </label>

                                        <div class="input-wrapper">
                                            <i class="bi bi-hash"></i>

                                            <input
                                                type="text"
                                                class="form-control"
                                                value="OS <?= e($numeroOs) ?> • ID interno <?= $id ?>"
                                                readonly
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <section class="section-card">
                            <div class="section-card-header">
                                <div class="section-title-area">
                                    <div class="section-icon purple">
                                        <i class="bi bi-cpu-fill"></i>
                                    </div>

                                    <div>
                                        <h4>Diagnóstico técnico local</h4>
                                        <p>Analisa o problema e cria um roteiro de apoio, sem API externa.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card-body">
                                <div class="assistant-card">
                                    <div class="assistant-top">
                                        <div class="assistant-info">
                                            <div class="assistant-icon">
                                                <i class="bi bi-stars"></i>
                                            </div>

                                            <div>
                                                <strong>Assistente de diagnóstico e correção</strong>
                                                <span>
                                                    Use o resultado como apoio. O técnico continua responsável por confirmar o que realmente foi executado.
                                                </span>
                                            </div>
                                        </div>

                                        <button
                                            type="button"
                                            class="assistant-button"
                                            id="analyzeButton"
                                        >
                                            <i class="bi bi-cpu-fill"></i>
                                            Analisar problema
                                        </button>
                                    </div>

                                    <div class="assistant-result" id="assistantResult"></div>
                                </div>
                            </div>
                        </section>

                        <section class="section-card">
                            <div class="section-card-header">
                                <div class="section-title-area">
                                    <div class="section-icon green">
                                        <i class="bi bi-wrench-adjustable-circle-fill"></i>
                                    </div>

                                    <div>
                                        <h4>Solução aplicada</h4>
                                        <p>Registre causa, procedimento, peças e resultado final.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card-body">
                                <label for="solucao" class="form-label">
                                    Descrição técnica completa
                                    <span class="required">*</span>
                                </label>

                                <textarea
                                    name="solucao"
                                    id="solucao"
                                    class="form-control"
                                    placeholder="Ex.: Diagnóstico confirmado, testes realizados, componente substituído, configurações aplicadas e resultado da validação..."
                                    minlength="20"
                                    maxlength="6000"
                                    required
                                    <?= !$podeFinalizar ? 'disabled' : '' ?>
                                ><?= e($solucaoPadrao) ?></textarea>

                                <div class="field-note">
                                    <i class="bi bi-info-circle-fill"></i>
                                    Não registre apenas “resolvido”. Explique o que foi identificado, feito e validado.
                                </div>

                                <div class="quick-actions">
                                    <button
                                        type="button"
                                        class="quick-chip"
                                        data-template="Diagnóstico confirmado:\n\nProcedimento executado:\n\nResultado obtido:\n\nValidação final:"
                                    >
                                        <i class="bi bi-card-text"></i>
                                        Estrutura completa
                                    </button>

                                    <button
                                        type="button"
                                        class="quick-chip"
                                        data-template="Foi realizada limpeza preventiva interna e externa, inspeção dos componentes, organização dos cabos e testes completos de funcionamento."
                                    >
                                        <i class="bi bi-stars"></i>
                                        Limpeza preventiva
                                    </button>

                                    <button
                                        type="button"
                                        class="quick-chip"
                                        data-template="Após os testes, foi confirmada falha no componente. O item foi substituído por peça compatível e o equipamento foi validado em operação."
                                    >
                                        <i class="bi bi-memory"></i>
                                        Troca de componente
                                    </button>

                                    <button
                                        type="button"
                                        class="quick-chip"
                                        data-template="Foi efetuado ajuste de software, atualização dos componentes necessários, correção das configurações e validação com o sistema utilizado pelo setor."
                                    >
                                        <i class="bi bi-window-stack"></i>
                                        Correção de software
                                    </button>

                                    <button
                                        type="button"
                                        class="quick-chip"
                                        data-template="Foram verificados ponto, cabo, endereço IP, gateway, DNS e comunicação com os serviços internos. A conectividade foi restabelecida e validada."
                                    >
                                        <i class="bi bi-diagram-3-fill"></i>
                                        Correção de rede
                                    </button>
                                </div>
                            </div>
                        </section>

                        <section class="section-card">
                            <div class="section-card-header">
                                <div class="section-title-area">
                                    <div class="section-icon">
                                        <i class="bi bi-paperclip"></i>
                                    </div>

                                    <div>
                                        <h4>Evidência opcional</h4>
                                        <p>Anexe uma imagem ou PDF do procedimento quando necessário.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card-body">
                                <label class="form-label">Anexo da finalização</label>

                                <label class="file-zone" id="fileZone">
                                    <input
                                        type="file"
                                        name="anexo"
                                        id="anexo"
                                        accept=".png,.jpg,.jpeg,.pdf,image/png,image/jpeg,application/pdf"
                                        <?= !$podeFinalizar ? 'disabled' : '' ?>
                                    >

                                    <span>
                                        <i class="bi bi-cloud-arrow-up-fill"></i>
                                        <strong>Clique ou arraste o arquivo</strong>
                                        <span>PNG, JPG, JPEG ou PDF • até 8 MB</span>
                                    </span>
                                </label>

                                <div class="file-preview" id="filePreview">
                                    <div class="file-preview-main">
                                        <div class="file-preview-icon">
                                            <i class="bi bi-paperclip"></i>
                                        </div>

                                        <div style="min-width:0;">
                                            <strong id="fileName"></strong>
                                            <small id="fileSize"></small>
                                        </div>
                                    </div>

                                    <button
                                        type="button"
                                        class="remove-file"
                                        id="removeFile"
                                        title="Remover arquivo"
                                    >
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                </div>

                                <?php if ($anexoAtual !== ''): ?>
                                    <div class="existing-file visible">
                                        <div class="file-preview-main">
                                            <div class="file-preview-icon">
                                                <i class="bi bi-folder-check"></i>
                                            </div>

                                            <div>
                                                <strong style="font-size:8px;">Anexo já registrado</strong>
                                                <small style="font-size:6px;color:var(--light);">
                                                    Será mantido caso um novo arquivo não seja enviado.
                                                </small>
                                            </div>
                                        </div>

                                        <a
                                            href="<?= e($anexoAtual) ?>"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="quick-chip"
                                        >
                                            <i class="bi bi-box-arrow-up-right"></i>
                                            Abrir
                                        </a>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </section>

                    </div>

                    <div class="form-actions">
                        <div class="action-group">
                            <a href="listar_os.php" class="action-button">
                                <i class="bi bi-x-circle"></i>
                                Cancelar
                            </a>

                            <button
                                type="button"
                                class="action-button"
                                id="saveDraftButton"
                                <?= !$podeFinalizar ? 'disabled' : '' ?>
                            >
                                <i class="bi bi-cloud-arrow-up-fill"></i>
                                Salvar rascunho
                            </button>
                        </div>

                        <div class="action-group">
                            <button
                                type="submit"
                                class="action-button success"
                                id="submitButton"
                                <?= !$podeFinalizar ? 'disabled' : '' ?>
                            >
                                <i class="bi bi-check-circle-fill"></i>
                                Finalizar OS
                            </button>
                        </div>
                    </div>
                </form>
            </section>

        </div>

        <section class="panel timeline-panel">
            <div class="timeline-head">
                <div>
                    <h3>Linha do tempo da ordem</h3>
                    <p>Histórico cronológico dos principais registros.</p>
                </div>

                <span class="draft-badge">
                    <i class="bi bi-clock-history"></i>
                    <?= count($events) + 1 ?> evento<?= count($events) + 1 !== 1 ? 's' : '' ?>
                </span>
            </div>

            <div class="timeline">
                <article class="timeline-item">
                    <div class="timeline-icon">
                        <i class="bi bi-file-earmark-plus-fill"></i>
                    </div>

                    <div>
                        <strong>Ordem de serviço registrada</strong>
                        <span>
                            Entrada cadastrada para <?= e((string) ($os['nome_solicitante'] ?? 'solicitante não informado')) ?>.
                        </span>
                    </div>

                    <time class="timeline-time">
                        <?= e(formatarData($os['data_entrada'] ?? null)) ?>
                    </time>
                </article>

                <?php foreach ($events as $evento): ?>
                    <article class="timeline-item">
                        <div class="timeline-icon">
                            <i class="bi bi-check2-circle"></i>
                        </div>

                        <div>
                            <strong><?= e((string) ($evento['tipo'] ?? 'Evento')) ?></strong>
                            <span><?= e((string) ($evento['descricao'] ?? '')) ?></span>
                        </div>

                        <time class="timeline-time">
                            <?= e(formatarData($evento['criado_em'] ?? null)) ?>
                        </time>
                    </article>
                <?php endforeach; ?>

                <?php if (!empty($os['data_saida'])): ?>
                    <article class="timeline-item">
                        <div class="timeline-icon" style="color:var(--green);background:var(--green-soft);">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>

                        <div>
                            <strong>Finalização registrada</strong>
                            <span>
                                Técnico responsável: <?= e((string) ($os['tecnico'] ?? 'Não informado')) ?>.
                            </span>
                        </div>

                        <time class="timeline-time">
                            <?= e(formatarData($os['data_saida'] ?? null)) ?>
                        </time>
                    </article>
                <?php endif; ?>
            </div>
        </section>

        <footer class="page-footer">
            <span>
                Prefeitura de Extrema — Gerência de Tecnologia<br>
                Finalização institucional das ordens de serviço.
            </span>

            <span>
                <i class="bi bi-shield-lock-fill me-1 text-primary"></i>
                Sessão autenticada, validação CSRF e upload protegido
            </span>
        </footer>

    </main>
</div>

<!-- Modal de confirmação -->
<div
    class="modal fade"
    id="confirmModal"
    tabindex="-1"
    aria-labelledby="confirmModalTitle"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalTitle">
                    <i class="bi bi-shield-check me-2"></i>
                    Confirmar finalização
                </h5>

                <button
                    type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"
                    aria-label="Fechar"
                ></button>
            </div>

            <div class="modal-body">
                <div class="review-grid">
                    <div class="review-item">
                        <span>Ordem</span>
                        <strong>OS #<?= e($numeroOs) ?></strong>
                    </div>

                    <div class="review-item">
                        <span>Próximo status</span>
                        <strong>Pendente retirada</strong>
                    </div>

                    <div class="review-item">
                        <span>Técnico</span>
                        <strong id="reviewTechnician">—</strong>
                    </div>

                    <div class="review-item">
                        <span>Próxima etapa</span>
                        <strong>Aguardar retirada do equipamento</strong>
                    </div>
                </div>

                <div class="alert alert-warning border-0 rounded-4 mt-3 mb-0" style="font-size:9px;">
                    <i class="bi bi-info-circle-fill me-1"></i>
                    Após confirmar, a ordem sairá da etapa de manutenção e ficará aguardando retirada.
                </div>
            </div>

            <div class="modal-footer">
                <button
                    type="button"
                    class="action-button"
                    data-bs-dismiss="modal"
                >
                    <i class="bi bi-arrow-left"></i>
                    Revisar
                </button>

                <button
                    type="button"
                    class="action-button success"
                    id="confirmSubmitButton"
                >
                    <i class="bi bi-check-circle-fill"></i>
                    Confirmar finalização
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
(() => {
    'use strict';

    const osId = <?= $id ?>;
    const canFinish = <?= $podeFinalizar ? 'true' : 'false' ?>;

    const form = document.getElementById('finalForm');
    const technicianInput = document.getElementById('tecnico');
    const solutionInput = document.getElementById('solucao');
    const submitButton = document.getElementById('submitButton');
    const saveDraftButton = document.getElementById('saveDraftButton');
    const draftBadge = document.getElementById('draftBadge');

    const qualityNumber = document.getElementById('qualityNumber');
    const qualityProgress = document.getElementById('qualityProgress');
    const qualityStatus = document.getElementById('qualityStatus');
    const qualityDescription = document.getElementById('qualityDescription');

    const fileInput = document.getElementById('anexo');
    const fileZone = document.getElementById('fileZone');
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');

    const analyzeButton = document.getElementById('analyzeButton');
    const assistantResult = document.getElementById('assistantResult');

    const draftKey = `manutencao_ti_finalizar_os_${osId}`;

    let generatedDiagnosis = null;
    let allowSubmit = false;
    let autoSaveTimer = null;

    function escapeHtml(value) {
        const div = document.createElement('div');
        div.textContent = String(value ?? '');
        return div.innerHTML;
    }

    function formatBytes(bytes) {
        const size = Number(bytes);

        if (size >= 1024 * 1024) {
            return `${(size / 1024 / 1024).toFixed(2)} MB`;
        }

        return `${(size / 1024).toFixed(1)} KB`;
    }

    function calculateQuality() {
        let score = 0;

        if ((technicianInput?.value.trim().length ?? 0) >= 3) {
            score += 25;
        }

        const solutionLength = solutionInput?.value.trim().length ?? 0;
        score += Math.round(
            65 * Math.min(1, solutionLength / 220)
        );

        if (fileInput?.files?.length || <?= $anexoAtual !== '' ? 'true' : 'false' ?>) {
            score += 10;
        }

        score = Math.max(0, Math.min(100, score));

        qualityNumber.textContent = String(score);
        qualityProgress.style.width = `${score}%`;

        if (score >= 90) {
            qualityStatus.textContent = 'Pronta para concluir';
            qualityDescription.textContent =
                'A solução está detalhada e a OS está pronta para seguir para retirada.';
        } else if (score >= 65) {
            qualityStatus.textContent = 'Quase completa';
            qualityDescription.textContent =
                'Revise a descrição técnica antes de alterar o status da ordem.';
        } else if (score >= 35) {
            qualityStatus.textContent = 'Em preenchimento';
            qualityDescription.textContent =
                'Continue detalhando o diagnóstico, o procedimento e o resultado.';
        } else {
            qualityStatus.textContent = 'Iniciando';
            qualityDescription.textContent =
                'Informe o técnico responsável e descreva a solução aplicada.';
        }

        return score;
    }

    form?.addEventListener('input', calculateQuality);
    form?.addEventListener('change', calculateQuality);

    /* Templates */

    document.querySelectorAll('[data-template]').forEach(button => {
        button.addEventListener('click', () => {
            if (!solutionInput || !canFinish) {
                return;
            }

            const template = String(button.dataset.template ?? '')
                .replaceAll('\\n', '\n');

            const current = solutionInput.value.trim();

            solutionInput.value = current
                ? `${current}\n\n${template}`
                : template;

            solutionInput.dispatchEvent(
                new Event('input', { bubbles: true })
            );

            solutionInput.focus();
        });
    });

    /* Diagnóstico local */

    function renderDiagnosis(data) {
        generatedDiagnosis = data;

        const steps = Array.isArray(data.passos)
            ? data.passos.slice(0, 8)
            : [];

        assistantResult.innerHTML = `
            <div class="diagnosis-header">
                <div>
                    <span style="font-size:6px;color:var(--light);text-transform:uppercase;font-weight:850;">
                        Diagnóstico sugerido
                    </span>

                    <strong>
                        ${escapeHtml(data.diagnostico_principal ?? 'Diagnóstico inconclusivo')}
                    </strong>
                </div>

                <span class="confidence-badge">
                    ${Number(data.confianca ?? 0)}% de confiança
                </span>
            </div>

            <p class="diagnosis-summary">
                ${escapeHtml(data.resumo ?? '')}
            </p>

            <div class="diagnosis-steps">
                ${steps.map((step, index) => `
                    <div class="diagnosis-step">
                        <span>${index + 1}</span>
                        <div>${escapeHtml(step)}</div>
                    </div>
                `).join('')}
            </div>

            <button type="button" class="assistant-use-button" id="useDiagnosisButton">
                <i class="bi bi-arrow-down-circle-fill"></i>
                Usar como base da solução
            </button>
        `;

        assistantResult.classList.add('visible');

        document
            .getElementById('useDiagnosisButton')
            ?.addEventListener('click', useDiagnosisAsDraft);
    }

    function useDiagnosisAsDraft() {
        if (!generatedDiagnosis || !solutionInput) {
            return;
        }

        const steps = Array.isArray(generatedDiagnosis.passos)
            ? generatedDiagnosis.passos
            : [];

        const validation = Array.isArray(generatedDiagnosis.validacao)
            ? generatedDiagnosis.validacao
            : [];

        const draft = [
            `Diagnóstico considerado: ${generatedDiagnosis.diagnostico_principal ?? 'Não informado'}`,
            '',
            'Procedimentos executados e resultados:',
            ...steps.slice(0, 8).map((step, index) => `${index + 1}. ${step}`),
            '',
            'Correção efetivamente aplicada:',
            '[EDITAR E DESCREVER O QUE REALMENTE FOI REALIZADO]',
            '',
            'Validação final:',
            ...validation.slice(0, 5).map(item => `- ${item}`)
        ].join('\n');

        const current = solutionInput.value.trim();

        solutionInput.value = current
            ? `${current}\n\n${draft}`
            : draft;

        solutionInput.dispatchEvent(
            new Event('input', { bubbles: true })
        );

        solutionInput.focus();
        solutionInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    analyzeButton?.addEventListener('click', () => {
        analyzeButton.disabled = true;
        analyzeButton.innerHTML = `
            <span class="spinner-border spinner-border-sm"></span>
            Analisando...
        `;

        assistantResult.classList.add('visible');
        assistantResult.innerHTML = `
            <div class="d-flex align-items-center gap-2" style="font-size:8px;color:var(--muted);">
                <div class="spinner-border spinner-border-sm text-primary"></div>
                Cruzando sintomas, equipamento e histórico da ordem...
            </div>
        `;

        fetch('ia_analise.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ os_id: osId })
        })
            .then(async response => {
                const data = await response.json().catch(() => ({}));

                if (!response.ok || data.sucesso === false) {
                    throw new Error(
                        data.erro ?? 'Não foi possível executar o diagnóstico.'
                    );
                }

                return data;
            })
            .then(renderDiagnosis)
            .catch(error => {
                assistantResult.innerHTML = `
                    <div class="alert alert-danger border-0 rounded-4 mb-0" style="font-size:8px;">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i>
                        ${escapeHtml(error.message)}
                    </div>
                `;
            })
            .finally(() => {
                analyzeButton.disabled = false;
                analyzeButton.innerHTML = `
                    <i class="bi bi-cpu-fill"></i>
                    Analisar novamente
                `;
            });
    });

    /* Arquivo */

    function updateFilePreview() {
        const file = fileInput?.files?.[0];

        if (!file) {
            filePreview?.classList.remove('visible');
            return;
        }

        const allowed = [
            'image/png',
            'image/jpeg',
            'application/pdf'
        ];

        if (!allowed.includes(file.type)) {
            window.alert('Envie somente PNG, JPG, JPEG ou PDF.');
            fileInput.value = '';
            updateFilePreview();
            return;
        }

        if (file.size > 8 * 1024 * 1024) {
            window.alert('O arquivo deve possuir no máximo 8 MB.');
            fileInput.value = '';
            updateFilePreview();
            return;
        }

        fileName.textContent = file.name;
        fileSize.textContent = `${formatBytes(file.size)} • ${file.type}`;
        filePreview.classList.add('visible');
    }

    fileInput?.addEventListener('change', updateFilePreview);

    ['dragenter', 'dragover'].forEach(eventName => {
        fileZone?.addEventListener(eventName, event => {
            event.preventDefault();
            fileZone.classList.add('dragover');
        });
    });

    ['dragleave', 'drop'].forEach(eventName => {
        fileZone?.addEventListener(eventName, event => {
            event.preventDefault();
            fileZone.classList.remove('dragover');
        });
    });

    removeFile?.addEventListener('click', event => {
        event.preventDefault();
        fileInput.value = '';
        updateFilePreview();
    });

    /* Rascunho */

    function saveDraft(manual = false) {
        if (!canFinish) {
            return;
        }

        const draft = {
            technician: technicianInput?.value ?? '',
            solution: solutionInput?.value ?? '',
            savedAt: new Date().toISOString()
        };

        localStorage.setItem(draftKey, JSON.stringify(draft));

        draftBadge.innerHTML = `
            <i class="bi bi-cloud-check-fill"></i>
            ${manual ? 'Rascunho salvo agora' : 'Rascunho salvo automaticamente'}
        `;
    }

    function restoreDraft() {
        const raw = localStorage.getItem(draftKey);

        if (!raw || !canFinish) {
            return;
        }

        try {
            const draft = JSON.parse(raw);

            if (
                technicianInput &&
                !technicianInput.value.trim() &&
                draft.technician
            ) {
                technicianInput.value = draft.technician;
            }

            if (
                solutionInput &&
                !solutionInput.value.trim() &&
                draft.solution
            ) {
                solutionInput.value = draft.solution;
            }


            draftBadge.innerHTML = `
                <i class="bi bi-cloud-arrow-down-fill"></i>
                Rascunho anterior restaurado
            `;
        } catch {
            localStorage.removeItem(draftKey);
        }
    }

    form?.addEventListener('input', () => {
        clearTimeout(autoSaveTimer);
        autoSaveTimer = setTimeout(() => saveDraft(false), 750);
    });

    saveDraftButton?.addEventListener('click', () => saveDraft(true));

    /* Validação e confirmação */

    function validateForm() {
        let valid = true;
        let message = '';

        if (!technicianInput?.value.trim()) {
            valid = false;
            message = 'Informe o técnico responsável.';
            technicianInput?.focus();
        } else if ((solutionInput?.value.trim().length ?? 0) < 20) {
            valid = false;
            message = 'Descreva a solução com pelo menos 20 caracteres.';
            solutionInput?.focus();
        }

        if (!valid) {
            window.alert(message);
        }

        return valid;
    }

    form?.addEventListener('submit', event => {
        if (allowSubmit) {
            return;
        }

        event.preventDefault();

        if (!canFinish || !validateForm()) {
            return;
        }

        document.getElementById('reviewTechnician').textContent =
            technicianInput.value.trim();

        bootstrap.Modal
            .getOrCreateInstance(document.getElementById('confirmModal'))
            .show();
    });

    document
        .getElementById('confirmSubmitButton')
        ?.addEventListener('click', () => {
            allowSubmit = true;
            localStorage.removeItem(draftKey);

            submitButton.disabled = true;
            submitButton.innerHTML = `
                <span class="spinner-border spinner-border-sm"></span>
                Finalizando...
            `;

            form.submit();
        });

    /* Movimento 3D */

    const hero = document.getElementById('hero');

    if (
        hero &&
        window.matchMedia('(pointer: fine)').matches &&
        !window.matchMedia('(prefers-reduced-motion: reduce)').matches
    ) {
        hero.addEventListener('mousemove', event => {
            const rect = hero.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            const rotateY =
                ((x - rect.width / 2) / (rect.width / 2)) * 0.4;

            const rotateX =
                (((rect.height / 2) - y) / (rect.height / 2)) * 0.26;

            hero.style.transform =
                `perspective(1600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });

        hero.addEventListener('mouseleave', () => {
            hero.style.transform =
                'perspective(1600px) rotateX(0deg) rotateY(0deg)';
        });
    }

    restoreDraft();
    calculateQuality();
})();
</script>

</body>
</html>
