<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");

if (!isset($_SESSION["level"]) || $_SESSION["level"] > 5) {
    sleep(1);
    header("Location:" . $WebSite . "login/login_form.php");
    exit;
}

include $_SERVER['DOCUMENT_ROOT'] . '/load_header.php';
?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리기 도구 예제</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .tool-button.active {
            background-color: #007bff !important;
            color: white !important;
            border-color: #007bff !important;
        }
        .tool-button:hover {
            background-color: #e9ecef;
        }
        #previewContainer {
            position: relative;
            width: 800px;
            height: 600px;
            border: 1px solid #dee2e6;
        }
        #drawingCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
    </style>
</head>
<body>

<div class="container mt-3">
    <h2 class="text-center mb-4">Drawing Tool Demo</h2>

    <!-- Controls -->
    <div class="d-flex align-items-center mb-2">
        <button id="drawBtn" class="btn btn-outline-dark btn-sm me-2">그리기</button>
        <button id="lineBtn" class="btn btn-outline-primary btn-sm me-2 tool-button">선</button>
        <button id="freeBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">자유곡선</button>
        <button id="polylineBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">폴리라인</button>
        <button id="textBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">문자입력</button>
        <button id="eraserBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">지우개</button>
        <input type="color" id="drawColor" value="#000000" class="form-control form-control-color me-2" />
        <input type="number" id="lineWidth" value="2" min="1" max="20" class="form-control form-control-sm w-auto me-2" />
        <button id="clearDrawingBtn" class="btn btn-primary btn-sm me-2">이미지 초기화</button>
        <button id="saveDrawingBtn" class="btn btn-success btn-sm">그리기 저장</button>
    </div>

    <!-- Preview Container -->
    <div id="previewContainer" class="border" style="position:relative; width:800px; height:600px;">
        <img src="/img/placeholder.png" alt="Preview" id="baseImage" class="img-fluid" style="width:100%; height:100%; object-fit:contain;" />
    </div>

    <!-- Optional file input for saved drawing -->
    <input type="file" id="upfile" name="upfile" style="display:none;">

</div>

<!-- 개선된 그리기 모드 로직 -->
<script>
// 기존 복잡한 다중 캔버스 처리 대신 단일 캔버스를 이용

let canvas, ctx;
let drawMode = null; // 'line', 'free', 'polyline', 'text', 'eraser'
let drawColor = '#000000';
let lineWidth = 2;
let isDrawing = false;
let startX = 0, startY = 0;
let path = [];

// 툴 버튼
const drawBtn     = document.getElementById('drawBtn');
const lineBtn     = document.getElementById('lineBtn');
const freeBtn     = document.getElementById('freeBtn');
const polyBtn     = document.getElementById('polylineBtn');
const textBtn     = document.getElementById('textBtn');
const eraserBtn   = document.getElementById('eraserBtn');
const colorPicker = document.getElementById('drawColor');
const widthInput  = document.getElementById('lineWidth');

// 캔버스 생성 및 초기화
function createCanvas() {
  const preview = document.getElementById('previewContainer');
  // 기존 캔버스 제거
  const old = document.getElementById('drawingCanvas');
  if (old) old.remove();

  canvas = document.createElement('canvas');
  canvas.id = 'drawingCanvas';
  canvas.width = preview.clientWidth;
  canvas.height = preview.clientHeight;
  Object.assign(canvas.style, {
    position: 'absolute', top: 0, left: 0,
    width: '100%', height: '100%', zIndex: 1000,
    cursor: drawMode === 'eraser' ? 'crosshair' : 'default'
  });
  preview.appendChild(canvas);
  ctx = canvas.getContext('2d');
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
}

// 이벤트 해제
function detachEvents() {
  if (!canvas) return;
  canvas.onmousedown = null;
  canvas.onmousemove = null;
  canvas.onmouseup = null;
  canvas.onmouseleave = null;
}

// 이벤트 연결
function attachEvents() {
  const rectTransform = (e) => {
    const rect = canvas.getBoundingClientRect();
    return {
      x: (e.clientX - rect.left) * (canvas.width / rect.width),
      y: (e.clientY - rect.top) * (canvas.height / rect.height)
    };
  };

  canvas.onmousedown = e => {
    const pt = rectTransform(e);
    isDrawing = true;
    startX = pt.x; startY = pt.y;
    path = [pt];
    ctx.strokeStyle = drawMode === 'eraser' ? '#ffffff' : drawColor;
    ctx.lineWidth = Number(widthInput.value) || lineWidth;
    if (drawMode === 'free') {
      ctx.beginPath(); ctx.moveTo(pt.x, pt.y);
    }
  };

  canvas.onmousemove = e => {
    if (!isDrawing) return;
    const pt = rectTransform(e);
    if (drawMode === 'free') {
      ctx.lineTo(pt.x, pt.y);
      ctx.stroke(); path.push(pt);
    } else if (drawMode === 'eraser') {
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#ffffff';
      ctx.arc(pt.x, pt.y, Number(widthInput.value) || 10, 0, Math.PI*2);
      ctx.fill(); ctx.restore();
    }
  };

  canvas.onmouseup = e => {
    if (!isDrawing) return;
    const pt = rectTransform(e);
    if (drawMode === 'line') {
      ctx.beginPath(); ctx.moveTo(startX, startY);
      ctx.lineTo(pt.x, pt.y); ctx.stroke();
    } else if (drawMode === 'polyline') {
      ctx.beginPath(); const last = path[path.length-1];
      ctx.moveTo(last.x, last.y); ctx.lineTo(pt.x, pt.y); ctx.stroke();
      path.push(pt);
    } else if (drawMode === 'text') {
      const txt = prompt('텍스트 입력:');
      if (txt) {
        ctx.fillStyle = drawColor;
        ctx.font = `${widthInput.value||16}px sans-serif`;
        ctx.fillText(txt, pt.x, pt.y);
      }
    }
    isDrawing = drawMode === 'polyline';
  };

  canvas.onmouseleave = () => { isDrawing = false; };
}

// 모드 설정
function setMode(mode) {
  drawMode = mode;
  document.querySelectorAll('.tool-button').forEach(btn => btn.classList.remove('active'));
  switch(mode) {
    case 'line':    lineBtn.classList.add('active'); break;
    case 'free':    freeBtn.classList.add('active'); break;
    case 'polyline':polyBtn.classList.add('active'); break;
    case 'text':    textBtn.classList.add('active'); break;
    case 'eraser':  eraserBtn.classList.add('active'); break;
  }
  if (canvas) canvas.style.cursor = mode === 'eraser' ? 'crosshair' : 'default';
}

// 버튼 이벤트
drawBtn.onclick = () => {
  if (canvas) {
    detachEvents(); canvas.remove(); canvas=null;
    drawBtn.textContent = '그리기';
  } else {
    createCanvas(); attachEvents();
    drawBtn.textContent = '중지';
  }
};
lineBtn.onclick    = () => setMode('line');
freeBtn.onclick    = () => setMode('free');
polyBtn.onclick    = () => setMode('polyline');
textBtn.onclick    = () => setMode('text');
eraserBtn.onclick  = () => setMode('eraser');
colorPicker.oninput= e => drawColor = e.target.value;
widthInput.oninput = e => lineWidth  = Number(e.target.value);

// 초기화 및 저장 버튼
document.getElementById('clearDrawingBtn').onclick = () => {
  if (canvas) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    path = [];
    isDrawing = false;
  }
};

document.getElementById('saveDrawingBtn').onclick = () => {
  if (canvas) {
    canvas.toBlob(blob => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'drawing.png';
      a.click();
      URL.revokeObjectURL(url);
    });
  }
};

// -------------------------------------------------
// 이 패치를 적용하시면, 그리기 모드는 단일 캔버스에서만 동작하며
// 기존 이미지가 사라졌다가 재출력되는 버그가 사라집니다.
// 버튼별 동작도 일관적으로 처리됩니다.
</script>

<script >
var loader = $('#loadingOverlay');
    if (loader.length) {
        loader.hide();
    }
</script>

</body>
</html>