/**
 * Zone editor: canvas-based polygon drawing for camera zones.
 * - Click the canvas to add points to the polygon currently being drawn.
 * - Choose a level (warning/restricted/pinch), then Save -> POST /api/zones.
 * - "Load" fetches existing zones for the camera via GET /api/zones/{camera}
 *   and redraws them; each has a Delete button -> POST /api/zones/{id}/delete.
 * - If a `?snapshot={uuid}` query param is present, that image (served via
 *   the authenticated /snap/{uuid} proxy) is drawn as the canvas background;
 *   otherwise the canvas keeps its plain dark backdrop.
 *
 * XSS-safe: all dynamic text is set via textContent, never innerHTML.
 */
(function () {
  'use strict';

  var canvas = document.getElementById('zone-canvas');
  if (!canvas) return;
  var ctx = canvas.getContext('2d');

  var deviceInput = document.getElementById('device-id');
  var cameraInput = document.getElementById('camera-id');
  var levelSelect = document.getElementById('zone-level');
  var loadBtn = document.getElementById('zone-load-btn');
  var clearBtn = document.getElementById('zone-clear-btn');
  var saveBtn = document.getElementById('zone-save-btn');
  var listEl = document.getElementById('zone-list');
  var statusEl = document.getElementById('zone-status');

  var LEVEL_STYLE = {
    warning:    { stroke: '#eab308', label: '경고' },
    restricted: { stroke: '#dc2626', label: '제한' },
    pinch:      { stroke: '#a855f7', label: '협착' }
  };

  var backgroundImage = null;
  var existingZones = [];   // [{zone_id, level, points: [[x,y],...]}]
  var currentPoints = [];   // in-progress polygon being drawn

  function setStatus(msg) {
    statusEl.textContent = msg;
  }

  function parsePolygon(zone) {
    try {
      var pts = JSON.parse(zone.polygon_json || '[]');
      return Array.isArray(pts) ? pts : [];
    } catch (e) {
      return [];
    }
  }

  function drawPolygon(points, strokeStyle, label, closed) {
    if (points.length === 0) return;
    ctx.strokeStyle = strokeStyle;
    ctx.fillStyle = strokeStyle;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(points[0][0], points[0][1]);
    for (var i = 1; i < points.length; i++) ctx.lineTo(points[i][0], points[i][1]);
    if (closed && points.length > 2) ctx.closePath();
    ctx.stroke();
    points.forEach(function (p) {
      ctx.beginPath();
      ctx.arc(p[0], p[1], 3, 0, Math.PI * 2);
      ctx.fill();
    });
    if (label) {
      ctx.font = '14px sans-serif';
      ctx.fillText(label, points[0][0] + 6, points[0][1] - 6);
    }
  }

  function redraw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (backgroundImage) {
      ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
    }
    existingZones.forEach(function (z) {
      var style = LEVEL_STYLE[z.level] || { stroke: '#9ca3af', label: z.level };
      drawPolygon(z.points, style.stroke, style.label, true);
    });
    var current = LEVEL_STYLE[levelSelect.value] || { stroke: '#38bdf8', label: '' };
    drawPolygon(currentPoints, current.stroke, currentPoints.length ? '편집중' : '', false);
  }

  function renderZoneList() {
    listEl.textContent = '';
    existingZones.forEach(function (z) {
      var li = document.createElement('li');
      var style = LEVEL_STYLE[z.level] || { label: z.level };

      var label = document.createElement('span');
      label.textContent = style.label + ' (' + z.points.length + '점)';
      li.appendChild(label);

      var del = document.createElement('button');
      del.type = 'button';
      del.textContent = '삭제';
      del.addEventListener('click', function () { deleteZone(z.zone_id); });
      li.appendChild(del);

      listEl.appendChild(li);
    });
  }

  function loadBackground(uuid) {
    if (!uuid) { backgroundImage = null; redraw(); return; }
    var img = new Image();
    img.onload = function () { backgroundImage = img; redraw(); };
    img.onerror = function () { backgroundImage = null; redraw(); };
    img.src = '/snap/' + encodeURIComponent(uuid);
  }

  function loadZones() {
    var camera = cameraInput.value.trim();
    if (!camera) { setStatus('카메라 ID를 입력하세요.'); return; }
    setStatus('불러오는 중...');
    fetch('/api/zones/' + encodeURIComponent(camera), { headers: { Accept: 'application/json' } })
      .then(function (res) {
        if (res.status === 401) { window.location.href = '/login'; return null; }
        if (!res.ok) throw new Error('load_failed:' + res.status);
        return res.json();
      })
      .then(function (data) {
        if (!data) return;
        existingZones = (data.zones || []).map(function (z) {
          return { zone_id: z.zone_id, level: z.level, points: parsePolygon(z) };
        });
        currentPoints = [];
        renderZoneList();
        redraw();
        setStatus('구역 ' + existingZones.length + '개를 불러왔습니다.');
      })
      .catch(function () { setStatus('불러오기에 실패했습니다.'); });
  }

  function saveZone() {
    var camera = cameraInput.value.trim();
    var device = deviceInput.value.trim();
    if (!camera) { setStatus('카메라 ID를 입력하세요.'); return; }
    if (currentPoints.length < 3) { setStatus('폴리곤 점을 3개 이상 클릭하세요.'); return; }
    setStatus('저장 중...');
    fetch('/api/zones', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        device_id: device,
        camera_id: camera,
        level: levelSelect.value,
        polygon: currentPoints
      })
    })
      .then(function (res) {
        if (res.status === 401) { window.location.href = '/login'; return null; }
        if (!res.ok) throw new Error('save_failed:' + res.status);
        return res.json();
      })
      .then(function (data) {
        if (!data) return;
        currentPoints = [];
        setStatus('저장되었습니다.');
        loadZones();
      })
      .catch(function () { setStatus('저장에 실패했습니다.'); });
  }

  function deleteZone(zoneId) {
    fetch('/api/zones/' + encodeURIComponent(zoneId) + '/delete', { method: 'POST' })
      .then(function (res) {
        if (res.status === 401) { window.location.href = '/login'; return; }
        if (!res.ok) throw new Error('delete_failed:' + res.status);
        loadZones();
      })
      .catch(function () { setStatus('삭제에 실패했습니다.'); });
  }

  canvas.addEventListener('click', function (evt) {
    var rect = canvas.getBoundingClientRect();
    var scaleX = canvas.width / rect.width;
    var scaleY = canvas.height / rect.height;
    var x = Math.round((evt.clientX - rect.left) * scaleX);
    var y = Math.round((evt.clientY - rect.top) * scaleY);
    currentPoints.push([x, y]);
    redraw();
  });

  levelSelect.addEventListener('change', redraw);
  loadBtn.addEventListener('click', loadZones);
  clearBtn.addEventListener('click', function () { currentPoints = []; redraw(); setStatus('현재 폴리곤을 지웠습니다.'); });
  saveBtn.addEventListener('click', saveZone);

  var params = new URLSearchParams(window.location.search);
  if (params.get('camera')) cameraInput.value = params.get('camera');
  if (params.get('device')) deviceInput.value = params.get('device');
  loadBackground(params.get('snapshot'));
  if (cameraInput.value) loadZones();
})();