<?php
declare(strict_types=1);
date_default_timezone_set('Asia/Seoul'); // ★ PHP 타임존 KST
$BASE_DIR = __DIR__;
$DEVICE_LIST_FILE = $BASE_DIR . '/device_list.txt';
$JSON_DIR = $BASE_DIR . '/command_json';
$MQTT_SCRIPT = $BASE_DIR . '/mqtt/mqtt_pub.sh';
$MQTT_CONFIG_FILE = $BASE_DIR . '/mqtt_connect.inc';

// ───────────────────────────────────────────────────────────────────────────
// 모터 속도 설정값
// - 아래 값만 변경하면 PHP 저장 검증, HTML range UI, JS clamp/표시값에 모두 동일하게 반영됩니다.
// ───────────────────────────────────────────────────────────────────────────
$MOTOR_SPEED_MIN = 150;
$MOTOR_SPEED_MAX = 250;
$MOTOR_SPEED_STEP = 50;
$MOTOR_SPEED_DEFAULT = $MOTOR_SPEED_MIN;

require_once $MQTT_CONFIG_FILE;

function mqttConfig(): array {
    return [
        'host' => defined('MQTT_HOST') ? (string)MQTT_HOST : 'localhost',
        'port' => defined('MQTT_PORT') ? (int)MQTT_PORT : 1883,
        'username' => defined('MQTT_USERNAME') ? (string)MQTT_USERNAME : '',
        'password' => defined('MQTT_PASSWORD') ? (string)MQTT_PASSWORD : '',
        'topic_prefix' => defined('MQTT_TOPIC_PREFIX') ? trim((string)MQTT_TOPIC_PREFIX) : '',
        'topic_suffix' => defined('MQTT_TOPIC_SUFFIX') ? trim((string)MQTT_TOPIC_SUFFIX) : '',
    ];
}

function topicFromFile(string $file): string {
    $cfg = mqttConfig();
    $base = pathinfo($file, PATHINFO_FILENAME);
    return $cfg['topic_prefix'] . $base . $cfg['topic_suffix'];
}

function buildMosquittoAuthArgs(array $cfg): string {
    $parts = [];
    if($cfg['username'] !== '') $parts[] = '-u ' . escapeshellarg($cfg['username']);
    if($cfg['password'] !== '') $parts[] = '-P ' . escapeshellarg($cfg['password']);
    return implode(' ', $parts);
}

function readDeviceList(string $path): array {
    $out = [];
    if(!is_file($path)) return $out;
    $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
    foreach($lines as $line) {
        $line = trim($line);
        if($line === '' || (function_exists('str_starts_with') ? str_starts_with($line, '#') : strpos($line, '#') === 0)) continue;

        // label:file[:lat[:lng]]
        $parts = explode(':', $line);
        if(count($parts) < 2) continue;

        $label = trim($parts[0]);
        $filename = trim($parts[1]);
        $lat = isset($parts[2]) ? trim($parts[2]) : null;
        $lng = isset($parts[3]) ? trim($parts[3]) : null;

        if($lat !== null && !is_numeric($lat)) $lat = null;
        if($lng !== null && !is_numeric($lng)) $lng = null;

        $out[] = [
            'label' => $label,
            'file'  => $filename,
            'lat'   => $lat,
            'lng'   => $lng,
        ];
    }
    return $out;
}

function allowedFilename(string $filename, array $deviceList): bool {
    foreach($deviceList as $d) if($d['file'] === $filename) return true;
    return false;
}

function loadJsonFile(string $fullpath): array {
    if(!is_file($fullpath)) throw new RuntimeException('JSON 파일을 찾을 수 없습니다.');
    $raw = file_get_contents($fullpath);
    if($raw === false) throw new RuntimeException('JSON 파일을 읽을 수 없습니다.');
    return json_decode($raw, true, flags: JSON_THROW_ON_ERROR);
}

function saveJsonFile(string $fullpath, array $data): void {
    $json = json_encode($data, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_THROW_ON_ERROR);
    if(file_put_contents($fullpath, $json) === false) throw new RuntimeException('JSON 파일 저장에 실패했습니다.');
}

$deviceList = readDeviceList($DEVICE_LIST_FILE);

// ───────────────────────────────────────────────────────────────────────────
// AJAX API
// ───────────────────────────────────────────────────────────────────────────
if(isset($_GET['action'])) {
    header('Content-Type: application/json; charset=utf-8');
    try {
        if($_GET['action'] === 'load') {
            $file = $_GET['file'] ?? '';
            if(!$file || !allowedFilename($file, $deviceList)) { http_response_code(400); echo json_encode(['ok'=>false,'msg'=>'허용되지 않은 파일입니다.']); exit; }
            $full = $JSON_DIR . '/' . basename($file);
            $data = loadJsonFile($full);
            echo json_encode(['ok'=>true,'data'=>$data, 'file'=>$file], JSON_UNESCAPED_UNICODE); exit;
        }

        if($_GET['action'] === 'save') {
            $payload = json_decode(file_get_contents('php://input') ?: '', true);
            if(!is_array($payload)) { http_response_code(400); echo json_encode(['ok'=>false,'msg'=>'잘못된 요청 본문']); exit; }
            $file = (string)($payload['file'] ?? ''); $data = $payload['data'] ?? null;
            if(!$file || !allowedFilename($file, $deviceList)) { http_response_code(400); echo json_encode(['ok'=>false,'msg'=>'허용되지 않은 파일']); exit; }
            if(!is_array($data)) { http_response_code(400); echo json_encode(['ok'=>false,'msg'=>'데이터가 비어있음']); exit; }

            $full = $JSON_DIR . '/' . basename($file);
            $original = loadJsonFile($full);
            $data['dev_id'] = $original['dev_id'] ?? ($data['dev_id'] ?? '');

            $errors = [];
            foreach(['reset','echo'] as $k) {
                if(array_key_exists($k, $data)) {
                    $v = (string)$data[$k];
                    if(!in_array($v, ['0','1'], true)) {
                        $errors[] = "$k 은(는) 0 또는 1 이어야 합니다.";
                    } else {
                        $data[$k] = $v;
                    }
                } else {
                    $data[$k] = (string)($original[$k] ?? '0');
                }
            }

            if(!isset($data['motor']) || !is_array($data['motor']) || count($data['motor']) !== 3) {
                $errors[] = 'motor 형식이 올바르지 않습니다.';
            } else {
                [$mode,$speed,$direction] = array_values($data['motor']);
                $mode = (string)$mode; $direction = (string)$direction;
                if(!in_array($mode, ['0','1','2'], true)) $errors[] = 'mode는 0,1,2 중 하나여야 합니다.';
                $speedInt = filter_var($speed, FILTER_VALIDATE_INT, ['options'=>['min_range'=>$MOTOR_SPEED_MIN,'max_range'=>$MOTOR_SPEED_MAX]]);
                if($speedInt === false) {
                    $errors[] = 'speed는 ' . $MOTOR_SPEED_MIN . '~' . $MOTOR_SPEED_MAX . ' 정수여야 합니다.';
                } elseif((($speedInt - $MOTOR_SPEED_MIN) % $MOTOR_SPEED_STEP) !== 0) {
                    $errors[] = 'speed는 ' . $MOTOR_SPEED_STEP . ' 단위로 선택해야 합니다.';
                }
                if(!in_array($direction, ['1','2'], true)) $errors[] = 'direction은 1 또는 2여야 합니다.';
                if(!$errors) $data['motor'] = [$mode, (string)$speedInt, $direction];
            }

            if($errors) { http_response_code(422); echo json_encode(['ok'=>false,'msg'=>implode(' ', $errors)], JSON_UNESCAPED_UNICODE); exit; }

            // ★ 저장 직전 서버시간 기록
            $data['lastupdate'] = date('Y-m-d H:i:s');

            saveJsonFile($full, $data);

            // MQTT 전송
            $topic = topicFromFile($file);
            $cwd = $BASE_DIR;
            $cmd = 'cd ' . escapeshellarg($cwd)
                 . ' && /bin/bash ./mqtt/mqtt_pub.sh ' . escapeshellarg($topic) . ' ' . escapeshellarg('get:0') . ' 2>&1';
            $output = shell_exec($cmd);
            $output = $output === null ? '' : (string)$output;

            echo json_encode(['ok'=>true,'msg'=>'저장 및 전송 완료','shell_output'=>$output], JSON_UNESCAPED_UNICODE); exit;
        }

        if($_GET['action'] === 'level_stream') {
            $file = $_GET['file'] ?? '';
            if(!$file || !allowedFilename($file, $deviceList)) { http_response_code(400); echo json_encode(['ok'=>false,'msg'=>'허용되지 않은 파일입니다.']); exit; }

            $topic = topicFromFile($file);
            $cfg = mqttConfig();

            header('Content-Type: text/event-stream; charset=utf-8');
            header('Cache-Control: no-cache, no-transform');
            header('X-Accel-Buffering: no');
            @ini_set('output_buffering', 'off');
            @ini_set('zlib.output_compression', '0');
            @set_time_limit(0);

            while(ob_get_level() > 0) { @ob_end_flush(); }
            ob_implicit_flush(true);

            echo ": connected\n\n";
            @flush();

            $cmd = 'mosquitto_sub -h ' . escapeshellarg($cfg['host'])
                 . ' -p ' . (int)$cfg['port']
                 . ' ' . buildMosquittoAuthArgs($cfg)
                 . ' -t ' . escapeshellarg($topic)
                 . ' -C 1 2>&1';

            $descriptors = [
                0 => ['pipe', 'r'],
                1 => ['pipe', 'w'],
                2 => ['pipe', 'w'],
            ];

            $proc = @proc_open($cmd, $descriptors, $pipes, $BASE_DIR);
            if(!is_resource($proc)) {
                echo "event: error\n";
                echo 'data: ' . json_encode(['msg'=>'mosquitto_sub 실행 실패'], JSON_UNESCAPED_UNICODE) . "\n\n";
                @flush();
                exit;
            }

            fclose($pipes[0]);
            stream_set_blocking($pipes[1], false);
            stream_set_blocking($pipes[2], false);

            $started = microtime(true);
            $stdoutBuf = '';
            $stderr = '';
            while(true) {
                if(connection_aborted()) break;

                $status = proc_get_status($proc);
                $stdoutBuf .= (string)stream_get_contents($pipes[1]);
                $stderr .= (string)stream_get_contents($pipes[2]);

                if($stdoutBuf !== '') {
                    $lines = preg_split('/\r\n|\r|\n/', $stdoutBuf);
                    $stdoutBuf = array_pop($lines);
                    foreach($lines as $line) {
                        $line = trim($line);
                        if($line === '') continue;
                        if(preg_match('/^(\d{4})\/(\d{2})\/(\d{2})\/(\d{2})\/(\d{2})\/(\d{2})\/cm\s*:\s*(-?\d+(?:\.\d+)?)$/i', $line, $m)) {
                            $timestamp = sprintf('%s-%s-%s %s:%s:%s', $m[1], $m[2], $m[3], $m[4], $m[5], $m[6]);
                            $value = number_format((float)$m[7], 2, '.', '');
                            echo "event: level\n";
                            echo 'data: ' . json_encode([
                                'value'=>$value,
                                'timestamp'=>$timestamp,
                                'timestamp_raw'=>implode('/', array_slice($m, 1, 6)),
                                'raw'=>$line,
                                'topic'=>$topic
                            ], JSON_UNESCAPED_UNICODE) . "\n\n";
                            @flush();
                            foreach([1,2] as $i) { if(isset($pipes[$i]) && is_resource($pipes[$i])) fclose($pipes[$i]); }
                            @proc_terminate($proc);
                            @proc_close($proc);
                            exit;
                        }
                        if(preg_match('/^cm\s*:\s*(-?\d+(?:\.\d+)?)$/i', $line, $m)) {
                            $value = number_format((float)$m[1], 2, '.', '');
                            echo "event: level\n";
                            echo 'data: ' . json_encode([
                                'value'=>$value,
                                'timestamp'=>null,
                                'timestamp_raw'=>null,
                                'raw'=>$line,
                                'topic'=>$topic
                            ], JSON_UNESCAPED_UNICODE) . "\n\n";
                            @flush();
                            foreach([1,2] as $i) { if(isset($pipes[$i]) && is_resource($pipes[$i])) fclose($pipes[$i]); }
                            @proc_terminate($proc);
                            @proc_close($proc);
                            exit;
                        }
                    }
                }

                if(!$status['running']) {
                    $err = trim($stderr);
                    if($err !== '') {
                        echo "event: error\n";
                        echo 'data: ' . json_encode(['msg'=>$err], JSON_UNESCAPED_UNICODE) . "\n\n";
                        @flush();
                    } else {
                        echo "event: timeout\n";
                        echo 'data: ' . json_encode(['msg'=>'수위 수신 대기 중'], JSON_UNESCAPED_UNICODE) . "\n\n";
                        @flush();
                    }
                    break;
                }

                if((microtime(true) - $started) >= 8.0) {
                    echo "event: timeout\n";
                    echo 'data: ' . json_encode(['msg'=>'수위 수신 대기 중'], JSON_UNESCAPED_UNICODE) . "\n\n";
                    @flush();
                    break;
                }

                usleep(200000);
            }

            foreach([1,2] as $i) { if(isset($pipes[$i]) && is_resource($pipes[$i])) fclose($pipes[$i]); }
            if(isset($proc) && is_resource($proc)) { @proc_terminate($proc); @proc_close($proc); }
            exit;
        }
        http_response_code(400); echo json_encode(['ok'=>false,'msg'=>'알 수 없는 action']); exit;
    } catch (Throwable $e) {
        http_response_code(500); echo json_encode(['ok'=>false,'msg'=>$e->getMessage()]); exit;
    }
}
?>
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Nextgreen 수문IoT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark light">
  <link href="./css/style.css" rel="stylesheet">
</head>
<body>
  <header class="app-header"><h1>수문IoT설정</h1></header>

  <main class="container">
    <!-- 1) 장치 선택 -->
    <section class="card">
      <h2>장치 선택</h2>
      <div class="form-row">
        <select id="deviceSelect">
          <?php if(!$deviceList): ?>
          <option value="">(장치 목록 없음)</option>
          <?php else: foreach($deviceList as $d): ?>
          <option value="<?= htmlspecialchars($d['file'], ENT_QUOTES, 'UTF-8') ?>"
            <?php if($d['lat'] !== null): ?> data-lat="<?= htmlspecialchars((string)$d['lat'], ENT_QUOTES, 'UTF-8') ?>"<?php endif; ?>
            <?php if($d['lng'] !== null): ?> data-lng="<?= htmlspecialchars((string)$d['lng'], ENT_QUOTES, 'UTF-8') ?>"<?php endif; ?> >
            <?= htmlspecialchars($d['label'], ENT_QUOTES, 'UTF-8') ?>
            (<?= htmlspecialchars($d['file'], ENT_QUOTES, 'UTF-8') ?>)
          </option>
          <?php endforeach; endif; ?>
        </select>
      </div>

      <!-- ▼ 위쪽: 상태 -->
      <div id="statusRow" class="map-meta"></div>

      <!-- ▼ 맨 아래: 지도 -->
      <div id="mapBox" class="map-box is-hidden" aria-live="polite">
        <iframe id="mapFrame" title="장치 위치 지도" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        <div id="mapMeta" class="map-meta"></div> <!-- 위치 안내 전용 -->
      </div>
    </section>

    <!-- 2) JSON 편집 UI -->
    <section class="card">
      <h2>명령값 편집</h2>
      <div id="updateRow" class="update-row"></div>

      <div class="command-panel" id="editor" aria-live="polite">
        <div class="form-row full-row">
          <label>동작 명령</label>
          <div class="mode-buttons" role="group" aria-label="모터 동작 명령 선택">
            <button type="button" class="mode-btn danger" data-mode="0" id="modeEmergency">긴급정지</button>
            <button type="button" class="mode-btn warn" data-mode="1" id="modeCoast">관성정지</button>
            <button type="button" class="mode-btn ok" data-mode="2" id="modeRun">모터구동</button>
          </div>
          <input type="hidden" id="motor_mode" value="0">
          <small class="muted">버튼을 선택한 뒤 아래의 확인 버튼을 누르면 JSON 저장 후 MQTT 명령이 전송됩니다.</small>
        </div>

        <div class="slider-grid">
          <div class="control-card">
            <div class="control-head">
              <label for="motor_speed">속도</label>
              <strong><span id="speedLabel"><?= htmlspecialchars((string)$MOTOR_SPEED_DEFAULT, ENT_QUOTES, 'UTF-8') ?></span> / <?= htmlspecialchars((string)$MOTOR_SPEED_MAX, ENT_QUOTES, 'UTF-8') ?></strong>
            </div>
            <input id="motor_speed" class="range-control" type="range"
                   min="<?= htmlspecialchars((string)$MOTOR_SPEED_MIN, ENT_QUOTES, 'UTF-8') ?>"
                   max="<?= htmlspecialchars((string)$MOTOR_SPEED_MAX, ENT_QUOTES, 'UTF-8') ?>"
                   step="<?= htmlspecialchars((string)$MOTOR_SPEED_STEP, ENT_QUOTES, 'UTF-8') ?>"
                   value="<?= htmlspecialchars((string)$MOTOR_SPEED_DEFAULT, ENT_QUOTES, 'UTF-8') ?>">
            <div class="range-meta"><span><?= htmlspecialchars((string)$MOTOR_SPEED_MIN, ENT_QUOTES, 'UTF-8') ?></span><span><?= htmlspecialchars((string)$MOTOR_SPEED_MAX, ENT_QUOTES, 'UTF-8') ?></span></div>
          </div>

          <div class="control-card">
            <div class="control-head">
              <label for="motor_dir">방향</label>
              <strong id="directionLabel">정회전</strong>
            </div>
            <input id="motor_dir" class="range-control direction-range" type="range" min="1" max="2" step="1" value="1">
            <div class="range-meta"><span>정회전</span><span>역회전</span></div>
          </div>
        </div>
      </div>

      <!-- ▼ JSON 미리보기: 접기/펼치기 헤더 + 내용 (id 중복 제거) -->
      <div class="collapse-header">
        <button id="togglePreview" class="ghost" aria-expanded="false" aria-controls="jsonPreview">
          <span class="chev" aria-hidden="true">▾</span>
          JSON 미리보기
        </button>
      </div>
      <div id="jsonPreview" class="json-preview is-hidden"></div>
    </section>

    <!-- 3) 확인 버튼 -->
    <section class="card actions">
      <button id="btnSave" class="primary">확인</button>
      <span id="status" class="status" role="status" aria-live="polite"></span>
    </section>
  </main>

  <footer class="app-footer"><small>© 넥스트그린</small></footer>

  <script>
  (function(){
    // ── 모터 속도 설정값(PHP 설정값과 동기화) ─────────────────────
    var MOTOR_SPEED_MIN = <?= json_encode($MOTOR_SPEED_MIN, JSON_THROW_ON_ERROR) ?>;
    var MOTOR_SPEED_MAX = <?= json_encode($MOTOR_SPEED_MAX, JSON_THROW_ON_ERROR) ?>;
    var MOTOR_SPEED_STEP = <?= json_encode($MOTOR_SPEED_STEP, JSON_THROW_ON_ERROR) ?>;
    var MOTOR_SPEED_DEFAULT = <?= json_encode($MOTOR_SPEED_DEFAULT, JSON_THROW_ON_ERROR) ?>;

    // ── 요소 참조 ─────────────────────────────────────────────
    var deviceSelect = document.getElementById('deviceSelect');
    var motor_mode   = document.getElementById('motor_mode');
    var motor_speed  = document.getElementById('motor_speed');
    var motor_dir    = document.getElementById('motor_dir');
    var modeButtons  = Array.prototype.slice.call(document.querySelectorAll('.mode-btn'));
    var speedLabel   = document.getElementById('speedLabel');
    var directionLabel = document.getElementById('directionLabel');
    var btnSave      = document.getElementById('btnSave');
    var statusEl     = document.getElementById('status');

    var jsonPreview      = document.getElementById('jsonPreview');
    var togglePreviewBtn = document.getElementById('togglePreview');

    // 지도/메타
    var mapBox   = document.getElementById('mapBox');
    var mapFrame = document.getElementById('mapFrame');
    var mapMeta  = document.getElementById('mapMeta');

    // [NEW] 상태/업데이트 분리 영역
    var statusRow = document.getElementById('statusRow');
    var updateRow = document.getElementById('updateRow');

    // 방금 로드된 JSON 보관
    var lastLoadedData = null;

    // 수위 표시 상태
    var currentLevelText = '-';
    var currentLevelValue = null;
    var currentLevelTimestamp = null;
    var levelStream = null;
    var levelPollTimer = null;
    var currentLevelFile = '';

    // 미리보기 열림 상태 (기본 false → 접힘)
    var previewOpen = JSON.parse(localStorage.getItem('previewOpen') ?? 'false');

    // ── 유틸 ─────────────────────────────────────────────────
    function setStatus(msg, ok){
      if(ok === undefined) ok = true;
      statusEl.textContent = msg || '';
      if(ok) statusEl.classList.remove('error'); else statusEl.classList.add('error');
      if(msg) setTimeout(function(){ statusEl.textContent=''; }, 5000);
    }
    function currentFile(){ return deviceSelect.value || ''; }

    // ── JSON 미리보기 토글/렌더 ───────────────────────────────
    function syncPreviewToggleUI(){
      togglePreviewBtn.setAttribute('aria-expanded', String(previewOpen));
      if(previewOpen) jsonPreview.classList.remove('is-hidden');
      else            jsonPreview.classList.add('is-hidden');
    }
    function renderPreview(data){
      jsonPreview.textContent = JSON.stringify(data, null, 2);
      if(previewOpen) jsonPreview.classList.remove('is-hidden');
    }
    togglePreviewBtn.addEventListener('click', function(){
      previewOpen = !previewOpen;
      localStorage.setItem('previewOpen', JSON.stringify(previewOpen));
      syncPreviewToggleUI();
    });

    // ── 지도 관련 ────────────────────────────────────────────
    function getSelectedLatLng(){
      var opt = deviceSelect.options[deviceSelect.selectedIndex];
      if(!opt) return {lat:null, lng:null};
      return { lat: opt.getAttribute('data-lat'), lng: opt.getAttribute('data-lng') };
    }

    function renderMapLocationMeta(){
      var ll = getSelectedLatLng();
      var locHtml = '';
      if(ll.lat && ll.lng){
        // 필요 시 위치 텍스트 표기 가능
        // locHtml = '<div class="map-line">위치: ' + ll.lat + ', ' + ll.lng + ' (줌: 15)</div>';
      } else {
        locHtml = '<div class="map-line">이 장치에는 위경도 정보가 없습니다.</div>';
      }
      mapMeta.innerHTML = locHtml;
    }

    function updateMapFromSelect(){
      var opt = deviceSelect.options[deviceSelect.selectedIndex];
      if (!opt) { mapBox.classList.add('is-hidden'); return; }

      var lat = opt.getAttribute('data-lat');
      var lng = opt.getAttribute('data-lng');

      if (lat && lng) {
        var q = encodeURIComponent(lat + ',' + lng);
        var src = 'https://maps.google.com/maps?q=' + q + '&z=15&output=embed';
        mapFrame.src = src;
        mapBox.classList.remove('is-hidden');
      } else {
        mapFrame.src = '';
        mapBox.classList.remove('is-hidden'); // 안내 문구 표시 위해 보이기
      }
      // 위치 메타만 표시
      renderMapLocationMeta();
    }

    // ── 상태 텍스트 ─────────────────────────────────────────
    function statusFromMotor(motorArr){
      var safe = Array.isArray(motorArr) ? motorArr : [];
      var mode = String(safe[0] ?? '0');
      var dir  = String(safe[2] ?? '1');

      if(mode === '0') return {text: '수문상태 : 긴급정지', cls: 'danger'};
      if(mode === '1') return {text: '수문상태 : 관성정지', cls: 'warn'};
      if(mode === '2') {
        if(dir === '1') return {text: '수문상태 : 동작중 - 정회전', cls: 'ok'};
        if(dir === '2') return {text: '수문상태 : 동작중 - 역회전', cls: 'ok'};
        return {text: '수문상태 : 동작중', cls: 'ok'};
      }
      return {text: '수문상태 : 알 수 없음', cls: ''};
    }

    function renderStatusAndUpdate(data){
      var lastupdate = (data && data.lastupdate) ? data.lastupdate : '미기록';
      var st = statusFromMotor(data ? data.motor : null);
      var levelHtml = '<span class="level-badge" id="levelBadge">' +
                      '<span class="level-value" id="levelValue">' + currentLevelText + '</span>' +
                      '<span class="level-unit" id="levelUnit">' + (currentLevelValue == null ? '' : ' cm') + '</span>' +
                      '</span>';
      var levelTimeHtml = '<span class="level-time" id="levelTimestamp">' + (currentLevelTimestamp || '-') + '</span>';

      statusRow.innerHTML =
        '<div class="map-line"><span class="label">상태</span>: ' +
        '<span class="status-chip ' + st.cls + '">' + st.text + '</span></div>' +
        '<div class="map-line level-line"><span class="label">수위</span>: ' + levelHtml +
        '<span class="level-sep">|</span>' +
        '<span class="label">수신시간</span>: ' + levelTimeHtml + '</div>';

      updateRow.innerHTML =
        '<div class="map-line"><span class="label">마지막 업데이트</span>: ' +
        lastupdate + '</div>';
    }

    function pulseLevel(){
      var badgeEl = document.getElementById('levelBadge');
      var timeEl = document.getElementById('levelTimestamp');
      if(badgeEl){
        badgeEl.classList.remove('level-pulse');
        void badgeEl.offsetWidth;
        badgeEl.classList.add('level-pulse');
      }
      if(timeEl){
        timeEl.classList.remove('time-pulse');
        void timeEl.offsetWidth;
        timeEl.classList.add('time-pulse');
      }
    }

    function setLevelValue(value, timestamp){
      if(value == null || value === '') {
        currentLevelValue = null;
        currentLevelText = '-';
      } else {
        var n = Number(value);
        if(isNaN(n)) {
          currentLevelValue = null;
          currentLevelText = '-';
        } else {
          currentLevelValue = n;
          currentLevelText = n.toFixed(2);
        }
      }

      currentLevelTimestamp = timestamp || null;

      var levelValueEl = document.getElementById('levelValue');
      var levelUnitEl = document.getElementById('levelUnit');
      var levelTimeEl = document.getElementById('levelTimestamp');
      if(levelValueEl) levelValueEl.textContent = currentLevelText;
      if(levelUnitEl) levelUnitEl.textContent = currentLevelValue == null ? '' : ' cm';
      if(levelTimeEl) levelTimeEl.textContent = currentLevelTimestamp || '-';
      pulseLevel();
    }

    function stopLevelStream(){
      currentLevelFile = '';
      if(levelPollTimer){ clearTimeout(levelPollTimer); levelPollTimer = null; }
      if(levelStream){ levelStream.close(); levelStream = null; }
    }

    function scheduleLevelStream(file, delayMs){
      if(levelPollTimer) clearTimeout(levelPollTimer);
      levelPollTimer = setTimeout(function(){ startLevelStream(file); }, delayMs);
    }

    function startLevelStream(file){
      stopLevelStream();
      if(!file) { setLevelValue(null, null); return; }

      currentLevelFile = file;
      levelStream = new EventSource('?action=level_stream&file=' + encodeURIComponent(file));

      levelStream.addEventListener('level', function(ev){
        try {
          var payload = JSON.parse(ev.data || '{}');
          setLevelValue(payload.value, payload.timestamp || payload.timestamp_raw || null);
        } catch(err) {
          console.error(err);
        }
        if(levelStream){ levelStream.close(); levelStream = null; }
        if(currentLevelFile === file) scheduleLevelStream(file, 4500);
      });

      levelStream.addEventListener('timeout', function(){
        if(levelStream){ levelStream.close(); levelStream = null; }
        if(currentLevelFile === file) scheduleLevelStream(file, 1500);
      });

      levelStream.addEventListener('error', function(ev){
        console.warn('level stream error', ev);
        if(levelStream){ levelStream.close(); levelStream = null; }
        if(currentLevelFile === file) scheduleLevelStream(file, 2500);
      });
    }

    // ── 에디터 값/검증 ───────────────────────────────────────
    function clampSpeed(v){
      var n = parseInt(v, 10);
      if (isNaN(n)) return MOTOR_SPEED_DEFAULT;
      if (n < MOTOR_SPEED_MIN) return MOTOR_SPEED_MIN;
      if (n > MOTOR_SPEED_MAX) return MOTOR_SPEED_MAX;

      var offset = n - MOTOR_SPEED_MIN;
      var stepped = MOTOR_SPEED_MIN + Math.round(offset / MOTOR_SPEED_STEP) * MOTOR_SPEED_STEP;
      if (stepped < MOTOR_SPEED_MIN) stepped = MOTOR_SPEED_MIN;
      if (stepped > MOTOR_SPEED_MAX) stepped = MOTOR_SPEED_MAX;
      return stepped;
    }

    function normalizeDirection(v){
      return String(v) === '2' ? '2' : '1';
    }

    function syncModeButtons(){
      modeButtons.forEach(function(btn){
        var active = btn.getAttribute('data-mode') === motor_mode.value;
        btn.classList.toggle('is-active', active);
        btn.setAttribute('aria-pressed', active ? 'true' : 'false');
      });
    }

    function syncControlState(){
      var speed = clampSpeed(motor_speed.value);
      motor_speed.value = String(speed);
      if(speedLabel) speedLabel.textContent = String(speed);

      var dir = normalizeDirection(motor_dir.value);
      motor_dir.value = dir;
      if(directionLabel) directionLabel.textContent = dir === '2' ? '역회전' : '정회전';

      var isRunMode = motor_mode.value === '2';
      motor_speed.disabled = !isRunMode;
      motor_dir.disabled = !isRunMode;
      if(motor_speed.closest('.control-card')) motor_speed.closest('.control-card').classList.toggle('is-disabled', !isRunMode);
      if(motor_dir.closest('.control-card')) motor_dir.closest('.control-card').classList.toggle('is-disabled', !isRunMode);
    }

    function setMode(mode){
      var normalized = ['0','1','2'].indexOf(String(mode)) >= 0 ? String(mode) : '0';
      motor_mode.value = normalized;
      syncModeButtons();
      syncControlState();
      gatherData();
    }

    function gatherData(){
      var mSpeed = clampSpeed(motor_speed.value);
      var mDir = normalizeDirection(motor_dir.value);
      motor_speed.value = String(mSpeed);
      motor_dir.value = mDir;
      syncModeButtons();
      syncControlState();
      var data = {
        motor: [ motor_mode.value, String(mSpeed), mDir ]
        // lastupdate는 서버 저장 시 갱신
      };
      renderPreview(data);
      return data;
    }

    // ── 통신 ─────────────────────────────────────────────────
    function loadJson(file){
      if (!file) { stopLevelStream(); setLevelValue(null, null); jsonPreview.classList.add('is-hidden'); renderStatusAndUpdate(null); return; }
      setStatus('불러오는 중...');
      fetch('?action=load&file=' + encodeURIComponent(file), {cache:'no-store'})
      .then(function(res){ return res.json(); })
      .then(function(j){
        if (!j.ok) throw new Error(j.msg || '로드 실패');
        var d = j.data || {};
        lastLoadedData = d;

        var m = Array.isArray(d.motor) ? d.motor : ['0', String(MOTOR_SPEED_DEFAULT), '1'];
        motor_mode.value  = ['0','1','2'].indexOf(String(m[0])) >= 0 ? String(m[0]) : '0';
        motor_speed.value = String(clampSpeed(m[1] ?? 0));
        motor_dir.value   = normalizeDirection(m[2] != null ? m[2] : '1');
        syncModeButtons();
        syncControlState();

        renderPreview(d);
        setStatus('불러오기 완료');

        // UI 갱신
        updateMapFromSelect();     // 지도/위치
        renderStatusAndUpdate(d);  // 상태/업데이트
        startLevelStream(file);
      })
      .catch(function(e){
        setStatus(e.message || '로드 중 오류', false);
        lastLoadedData = null;
        jsonPreview.classList.add('is-hidden');
        stopLevelStream();
        setLevelValue(null, null);
        renderStatusAndUpdate(null);
        renderMapLocationMeta();
      });
    }

    function saveJson(){
      var file = currentFile();
      if (!file) { setStatus('저장할 장치가 없습니다.', false); return; }
      setStatus('저장 및 전송 중...');
      fetch('?action=save', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ file: file, data: gatherData() })
      })
      .then(function(res){ return res.json().then(function(j){ return {ok:res.ok && j.ok, j:j}; }); })
      .then(function(r){
        if (!r.ok) throw new Error(r.j.msg || '저장 실패');
        setStatus('저장 및 MQTT 전송 완료 ✅');
        if (r.j.shell_output) console.log('mqtt_pub.sh:', r.j.shell_output);
        // 최신 lastupdate 반영
        loadJson(currentFile());
      })
      .catch(function(e){ setStatus(e.message || '저장 중 오류', false); });
    }

    // ── 이벤트 ──────────────────────────────────────────────
    deviceSelect.addEventListener('change', function(){
      stopLevelStream();
      setLevelValue(null, null);
      updateMapFromSelect();
      loadJson(currentFile());
    });
    modeButtons.forEach(function(btn){
      btn.addEventListener('click', function(){ setMode(btn.getAttribute('data-mode')); });
    });
    [motor_speed, motor_dir].forEach(function(el){
      el.addEventListener('input', function(){ gatherData(); });
      el.addEventListener('change', function(){ gatherData(); });
    });
    btnSave.addEventListener('click', saveJson);
    window.addEventListener('beforeunload', stopLevelStream);

    // 초기화
    syncPreviewToggleUI();
    syncModeButtons();
    syncControlState();
    renderStatusAndUpdate(null); // 첫 화면 기본값
    renderMapLocationMeta();

    if (deviceSelect.options.length > 0) {
      updateMapFromSelect();
      loadJson(currentFile());
    }
  })();
  </script>
</body>
</html>