<?php
error_reporting(E_ALL);
ini_set('display_errors', 0);

require __DIR__ . '/config.php';

$tokenUrl = isset($_GET['token']) ? trim($_GET['token']) : '';
$nomeDispositivo = '';
$tokenValido = false;

if ($tokenUrl !== '') {
    try {
        $stmt = $pdo->prepare(
            'SELECT nome, compartilhamento_ativo
             FROM dispositivos
             WHERE token = ?
             LIMIT 1'
        );
        $stmt->execute(array($tokenUrl));
        $d = $stmt->fetch();

        if ($d) {
            $tokenValido = true;
            $nomeDispositivo = $d['nome'];
        }
    } catch (Exception $e) {
        $tokenValido = false;
    }
}

function h($v)
{
    return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}
?>
<!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="#0f2742">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Localização">
<link rel="manifest" href="/manifest_localizacao.json">
<link rel="apple-touch-icon" href="/icons/localizacao-192.png">
<title>Compartilhamento de Localização</title>

<style>
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#f3f6f9;
    color:#1f2937;
}
.wrap{
    max-width:620px;
    margin:0 auto;
    padding:18px 14px 32px;
}
.hero{
    background:#0f2742;
    color:#fff;
    border-radius:16px;
    padding:22px;
    margin-bottom:16px;
}
.hero h1{
    margin:0 0 8px;
    font-size:27px;
}
.hero p{
    margin:0;
    line-height:1.45;
}
.card{
    background:#fff;
    border-radius:16px;
    padding:18px;
    margin-bottom:14px;
    box-shadow:0 3px 16px rgba(15,39,66,.07);
}
.label{
    display:block;
    font-weight:bold;
    margin:0 0 7px;
}
input{
    width:100%;
    padding:13px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:16px;
}
.row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}
button{
    border:0;
    border-radius:10px;
    padding:13px 16px;
    font-size:16px;
    cursor:pointer;
    min-height:46px;
}
.btn-primary{
    background:#0f2742;
    color:#fff;
    flex:1;
}
.btn-secondary{
    background:#e8eef5;
    color:#0f2742;
}
.btn-danger{
    background:#fee2e2;
    color:#991b1b;
}
button:disabled{
    opacity:.55;
    cursor:not-allowed;
}
.status{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:bold;
    margin-bottom:14px;
}
.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#94a3b8;
    flex:0 0 12px;
}
.dot.on{background:#16a34a}
.dot.wait{background:#d97706}
.dot.off{background:#dc2626}
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.info{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:12px;
    min-width:0;
}
.info small{
    display:block;
    color:#64748b;
    margin-bottom:4px;
}
.info strong{
    display:block;
    overflow-wrap:anywhere;
}
.notice{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    border-radius:12px;
    padding:12px;
    line-height:1.45;
}
.okbox{
    background:#ecfdf5;
    border:1px solid #bbf7d0;
    color:#166534;
    border-radius:12px;
    padding:12px;
    line-height:1.45;
}
.install{
    display:none;
}
.log{
    margin-top:12px;
    font-size:13px;
    color:#475569;
    min-height:18px;
}
@media(max-width:440px){
    .grid{grid-template-columns:1fr}
    .hero h1{font-size:24px}
}
</style>
</head>

<body>
<div class="wrap">

<div class="hero">
    <h1>Compartilhamento de localização</h1>
    <p>Este aparelho compartilha a localização somente após autorização do usuário.</p>
</div>

<div class="card" id="cardVinculo">
    <label class="label" for="token">Token do aparelho</label>
    <input
        id="token"
        type="text"
        autocomplete="off"
        placeholder="Informe o token do dispositivo"
        value="<?php echo $tokenValido ? h($tokenUrl) : ''; ?>"
    >

    <?php if ($tokenValido): ?>
    <div class="okbox" style="margin-top:12px">
        Dispositivo identificado: <strong><?php echo h($nomeDispositivo); ?></strong>
    </div>
    <?php endif; ?>

    <div class="row">
        <button type="button" class="btn-primary" id="btnVincular">Vincular aparelho</button>
        <button type="button" class="btn-secondary" id="btnDesvincular">Desvincular</button>
    </div>
</div>

<div class="card">
    <div class="status">
        <span class="dot" id="statusDot"></span>
        <span id="statusTexto">Compartilhamento parado</span>
    </div>

    <div class="grid">
        <div class="info">
            <small>Latitude</small>
            <strong id="lat">—</strong>
        </div>
        <div class="info">
            <small>Longitude</small>
            <strong id="lng">—</strong>
        </div>
        <div class="info">
            <small>Precisão</small>
            <strong id="acc">—</strong>
        </div>
        <div class="info">
            <small>Último envio</small>
            <strong id="ultimo">—</strong>
        </div>
    </div>

    <div class="row">
        <button type="button" class="btn-primary" id="btnIniciar">Iniciar compartilhamento</button>
        <button type="button" class="btn-danger" id="btnParar" disabled>Parar</button>
    </div>

    <div class="log" id="log"></div>
</div>

<div class="card install" id="installCard">
    <strong>Instalar no celular</strong>
    <p style="margin:8px 0 0;line-height:1.45">
        Você pode adicionar esta ferramenta à tela inicial e abrir como aplicativo.
    </p>
    <button type="button" class="btn-primary" id="btnInstalar" style="margin-top:12px;width:100%">
        Instalar na tela inicial
    </button>
</div>

<div class="notice">
    <strong>Importante:</strong> navegadores podem interromper a localização quando a página é fechada
    ou fica muito tempo em segundo plano. Para rastreamento contínuo com a tela bloqueada, será necessário
    um aplicativo Android com serviço de localização visível.
</div>

</div>

<script>
(function(){

    var API_URL = '/api/localizacao.php';
    var MIN_INTERVALO_ENVIO = 30000;

    var tokenInput = document.getElementById('token');
    var btnVincular = document.getElementById('btnVincular');
    var btnDesvincular = document.getElementById('btnDesvincular');
    var btnIniciar = document.getElementById('btnIniciar');
    var btnParar = document.getElementById('btnParar');
    var statusDot = document.getElementById('statusDot');
    var statusTexto = document.getElementById('statusTexto');
    var latEl = document.getElementById('lat');
    var lngEl = document.getElementById('lng');
    var accEl = document.getElementById('acc');
    var ultimoEl = document.getElementById('ultimo');
    var logEl = document.getElementById('log');
    var installCard = document.getElementById('installCard');
    var btnInstalar = document.getElementById('btnInstalar');

    var watchId = null;
    var ultimoEnvioMs = 0;
    var enviando = false;
    var deferredPrompt = null;

    var tokenUrl = <?php echo json_encode($tokenValido ? $tokenUrl : ''); ?>;

    if (tokenUrl) {
        localStorage.setItem('localizacao_token', tokenUrl);
    }

    var salvo = localStorage.getItem('localizacao_token');
    if (salvo && !tokenInput.value) {
        tokenInput.value = salvo;
    }

    function setStatus(tipo, texto) {
        statusDot.className = 'dot ' + tipo;
        statusTexto.textContent = texto;
    }

    function log(texto) {
        logEl.textContent = texto;
    }

    function tokenAtual() {
        return (tokenInput.value || '').replace(/^\s+|\s+$/g, '');
    }

    btnVincular.addEventListener('click', function(){
        var t = tokenAtual();

        if (!t) {
            log('Informe o token do dispositivo.');
            return;
        }

        localStorage.setItem('localizacao_token', t);
        log('Aparelho vinculado neste navegador.');
    });

    btnDesvincular.addEventListener('click', function(){
        parar();
        localStorage.removeItem('localizacao_token');
        tokenInput.value = '';
        log('Aparelho desvinculado.');
    });

    function enviar(pos) {

        var agora = Date.now();

        if (enviando) {
            return;
        }

        if ((agora - ultimoEnvioMs) < MIN_INTERVALO_ENVIO) {
            return;
        }

        var t = tokenAtual();

        if (!t) {
            setStatus('off', 'Token não informado');
            log('Vincule este aparelho antes de iniciar.');
            parar();
            return;
        }

        enviando = true;

        latEl.textContent = pos.coords.latitude.toFixed(7);
        lngEl.textContent = pos.coords.longitude.toFixed(7);
        accEl.textContent = Math.round(pos.coords.accuracy) + ' m';

        var dados = new FormData();
        dados.append('token', t);
        dados.append('latitude', pos.coords.latitude);
        dados.append('longitude', pos.coords.longitude);
        dados.append('precisao', pos.coords.accuracy);

        if (typeof pos.coords.speed === 'number' && !isNaN(pos.coords.speed)) {
            dados.append('velocidade', pos.coords.speed);
        }

        fetch(API_URL, {
            method:'POST',
            body:dados
        })
        .then(function(resp){
            return resp.text().then(function(txt){
                return {
                    ok:resp.ok,
                    status:resp.status,
                    texto:txt
                };
            });
        })
        .then(function(ret){

            var obj = null;

            try {
                obj = JSON.parse(ret.texto);
            } catch(e) {}

            if (obj && obj.ok) {
                ultimoEnvioMs = Date.now();
                ultimoEl.textContent = new Date().toLocaleTimeString();
                setStatus('on', 'Compartilhando localização');
                log('Localização enviada com sucesso.');
            } else {
                var msg = obj && obj.mensagem
                    ? obj.mensagem
                    : ('Falha ao enviar. HTTP ' + ret.status);

                setStatus('off', 'Falha no envio');
                log(msg);

                if (ret.status === 401 || ret.status === 403) {
                    parar();
                }
            }

            enviando = false;
        })
        .catch(function(err){
            enviando = false;
            setStatus('off', 'Erro de comunicação');
            log('Não foi possível comunicar com a API: ' + err.message);
        });
    }

    function erroGps(err) {
        var msg = 'Não foi possível obter a localização.';

        if (err) {
            if (err.code === 1) {
                msg = 'Permissão de localização negada.';
            } else if (err.code === 2) {
                msg = 'Localização indisponível.';
            } else if (err.code === 3) {
                msg = 'Tempo esgotado ao obter o GPS.';
            }
        }

        setStatus('off', 'GPS indisponível');
        log(msg);
    }

    function iniciar() {

        var t = tokenAtual();

        if (!t) {
            log('Informe e vincule o token do aparelho.');
            return;
        }

        localStorage.setItem('localizacao_token', t);

        if (!navigator.geolocation) {
            setStatus('off', 'GPS não suportado');
            log('Este navegador não oferece suporte à geolocalização.');
            return;
        }

        if (watchId !== null) {
            return;
        }

        setStatus('wait', 'Aguardando GPS...');
        log('Autorize o acesso à localização quando o celular solicitar.');

        watchId = navigator.geolocation.watchPosition(
            enviar,
            erroGps,
            {
                enableHighAccuracy:true,
                timeout:20000,
                maximumAge:5000
            }
        );

        btnIniciar.disabled = true;
        btnParar.disabled = false;
    }

    function parar() {

        if (watchId !== null && navigator.geolocation) {
            navigator.geolocation.clearWatch(watchId);
        }

        watchId = null;
        btnIniciar.disabled = false;
        btnParar.disabled = true;
        setStatus('', 'Compartilhamento parado');
    }

    btnIniciar.addEventListener('click', iniciar);
    btnParar.addEventListener('click', parar);

    window.addEventListener('beforeinstallprompt', function(e){
        e.preventDefault();
        deferredPrompt = e;
        installCard.style.display = 'block';
    });

    btnInstalar.addEventListener('click', function(){

        if (!deferredPrompt) {
            log('Use o menu do navegador e escolha "Adicionar à tela inicial".');
            return;
        }

        deferredPrompt.prompt();

        deferredPrompt.userChoice.then(function(){
            deferredPrompt = null;
            installCard.style.display = 'none';
        });
    });

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker-localizacao.js')
            .catch(function(){});
    }

})();
</script>
</body>
</html>
