/* Simulação interativa do app Nivelio.
Reproduz a tela de detalhe do reservatório com nível em tempo real,
bomba ligando/desligando conforme configuração do usuário. */
const { useState, useEffect, useRef } = React;
// ─── Reservoir widget ──────────────────────────────────────────
function Reservoir({ level, status, color, h = 220, w = 180 }) {
const fillH = Math.max(0, Math.min(100, level));
return (
{/* water fill */}
{/* waves */}
{/* label */}
{level.toFixed(1)}%
{status}
{/* tick marks */}
{[100, 75, 50, 25, 0].map(t => (
))}
);
}
// ─── Stat tile ─────────────────────────────────────────────────
function StatTile({ icon, label, value, valueColor }) {
return (
{icon}
{label}
{value}
);
}
// ─── Pump button ───────────────────────────────────────────────
function PumpBtn({ label, icon, active, color, onClick }) {
return (
);
}
// ─── Main App Simulator ────────────────────────────────────────
function NivelioAppSim({ compact = false }) {
// Configurable thresholds
const [onLevel, setOnLevel] = useState(30); // liga abaixo
const [offLevel, setOffLevel] = useState(95); // desliga acima
const [mode, setMode] = useState('auto'); // auto / on / off
// Live state
const [level, setLevel] = useState(43.8);
const [pumpOn, setPumpOn] = useState(false);
const [sessionTime, setSessionTime] = useState(0);
const [history, setHistory] = useState([]);
const [paused, setPaused] = useState(false);
// Tick simulation — every ~700ms
useEffect(() => {
if (paused) return;
const id = setInterval(() => {
setLevel(prev => {
// Determine pump state
let nextPump = pumpOn;
if (mode === 'on') nextPump = true;
else if (mode === 'off') nextPump = false;
else {
if (prev <= onLevel) nextPump = true;
else if (prev >= offLevel) nextPump = false;
}
// Consumption (always small drain) + pump fill
const drain = 0.4 + Math.random() * 0.3;
const fill = nextPump ? 1.6 + Math.random() * 0.4 : 0;
let next = prev - drain + fill;
next = Math.max(0, Math.min(100, next));
if (nextPump !== pumpOn) {
setPumpOn(nextPump);
if (nextPump) setSessionTime(0);
}
if (nextPump) setSessionTime(s => s + 1);
setHistory(h => [...h.slice(-39), next]);
return next;
});
}, 700);
return () => clearInterval(id);
}, [pumpOn, mode, onLevel, offLevel, paused]);
const status = level >= 70 ? 'CHEIO' : level >= 30 ? 'MÉDIO' : level < 15 ? 'CRÍTICO' : 'BAIXO';
const color = level >= 70 ? '#22C55E' : level >= 30 ? '#F59E0B' : '#EF4444';
const fmtTime = s => {
if (s < 60) return `${s}s`;
const m = Math.floor(s / 60);
const sec = s % 60;
return `${m}m ${sec}s`;
};
return (