{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
好きな色を選んでください({{ player.round_number }}／3)
{% endblock %}


{% block content %}
<p style="text-align:center; background:#e8f0fe; border: 1px solid #0066cc;
          border-radius:6px; padding:6px 12px; display:inline-block; margin-bottom:12px;">
  使用パレット: <strong>{{ palette_label }}</strong>
</p>

<p>
  以下ではまずあなたが好きな色を１つ思い浮かべてその名前を書いてください<br>
  （3回繰り返しますが、毎回異なる色を選んでください）</p>

{{ formfield player.color_q0 }}

<p>
  次に，カラーサークルの上にある楕円をドラッグして位置を動かし、<br>
  右下のハンドルで大きさを変更し、上の小さな丸いハンドルで回転させてください。<br>
  （スマホの場合はタップ＆ドラッグで操作できます）<br>
  楕円の面積・位置・回転角度と、楕円で囲まれた範囲の平均色がサーバーに保存されます。
</p>

<div id="color-container"
     style="
       position: relative;
       width: 400px;
       max-width: 100%;
       margin: 0 auto;
       touch-action: none; /* ドラッグ中のスクロール抑制 */
     ">
  <canvas id="colorWheel" width="400" height="400"
          style="width: 100%; height: auto; display: block;"></canvas>

  <!-- 楕円（ドラッグ＆リサイズ＆回転可能） -->
  <div id="ellipse"
       style="
         position: absolute;
         border: 2px solid #000;
         border-radius: 50%;
         box-sizing: border-box;
         cursor: move;
         background-color: rgba(255,255,255,0.0);
         touch-action: none;
       ">
    <!-- 回転用ハンドル（上部中央） -->
    <div id="rotateHandle"
         style="
           position: absolute;
           width: 36px;
           height: 36px;
           top: -46px;
           left: 50%;
           margin-left: -18px;
           border-radius: 50%;
           border: 2px solid #1a6bbf;
           background: #dbeeff;
           cursor: grab;
           touch-action: none;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 2px 5px rgba(0,0,0,0.25);
         ">
      <!-- 回転矢印アイコン（SVG） -->
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"
           fill="none" stroke="#1a6bbf" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"
           style="pointer-events:none;">
        <path d="M21.5 2v6h-6"/>
        <path d="M21.34 15.57a10 10 0 1 1-.57-8.38"/>
      </svg>
    </div>
    <!-- 回転ラベル -->
    <div style="
           position: absolute;
           top: -62px;
           left: 50%;
           transform: translateX(-50%);
           font-size: 10px;
           color: #1a6bbf;
           white-space: nowrap;
           pointer-events: none;
           user-select: none;
         ">回転</div>

    <!-- リサイズ用ハンドル（右下） -->
    <div id="resizeHandle"
         style="
           position: absolute;
           width: 36px;
           height: 36px;
           bottom: -18px;
           right: -18px;
           border-radius: 8px;
           border: 2px solid #2a8a3e;
           background: #d6f5dd;
           cursor: se-resize;
           touch-action: none;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 2px 5px rgba(0,0,0,0.25);
         ">
      <!-- 拡大縮小アイコン（SVG） -->
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"
           fill="none" stroke="#2a8a3e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"
           style="pointer-events:none;">
        <polyline points="15 3 21 3 21 9"/>
        <polyline points="9 21 3 21 3 15"/>
        <line x1="21" y1="3" x2="14" y2="10"/>
        <line x1="3" y1="21" x2="10" y2="14"/>
      </svg>
    </div>
    <!-- リサイズラベル -->
    <div style="
           position: absolute;
           bottom: -30px;
           right: -18px;
           font-size: 10px;
           color: #2a8a3e;
           white-space: nowrap;
           pointer-events: none;
           user-select: none;
         ">大きさ</div>
  </div>
</div>

<!-- oTree に送る hidden input -->
<input type="hidden" name="ellipse_area" id="id_ellipse_area">
<input type="hidden" name="ellipse_center_x" id="id_ellipse_center_x">
<input type="hidden" name="ellipse_center_y" id="id_ellipse_center_y">
<input type="hidden" name="ellipse_width" id="id_ellipse_width">
<input type="hidden" name="ellipse_height" id="id_ellipse_height">
<input type="hidden" name="ellipse_angle" id="id_ellipse_angle">

<!-- 平均色用 hidden input -->
<input type="hidden" name="avg_r" id="id_avg_r">
<input type="hidden" name="avg_g" id="id_avg_g">
<input type="hidden" name="avg_b" id="id_avg_b">
<input type="hidden" name="avg_hex" id="id_avg_hex">

<p style="text-align:center; margin-top: 1em;">
  楕円の面積（ピクセル<sup>2</sup>）:
  <span id="areaDisplay">0</span>
</p>

<p style="text-align:center; margin-top: 0.5em;">
  楕円内の平均色:
  <span id="avgColorBox"
        style="
          display:inline-block;
          width: 40px;
          height: 20px;
          border: 1px solid #000;
          vertical-align: middle;
          background: #ffffff;
        "></span>
  <span id="avgColorText">(R,G,B) = (0,0,0)</span>
</p>

{{ formfield player.color_q1}}
{{ formfield player.color_q2}}

{{ next_button }}

<script>
(function() {
  // ===================== 選択パレットのパラメータ（vars_for_template から注入） =====================
  var PALETTE_MAX_SAT = {{ palette_max_sat }};
  var PALETTE_LIGHT   = {{ palette_light }};

  // ===================== 共通ヘルパー（マウス／タッチ座標取得） =====================
  function getPoint(e) {
    if (e.touches && e.touches.length > 0) {
      return { x: e.touches[0].clientX, y: e.touches[0].clientY };
    } else if (e.changedTouches && e.changedTouches.length > 0) {
      return { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
    } else {
      return { x: e.clientX, y: e.clientY };
    }
  }

  function addStartListener(target, handler) {
    target.addEventListener('mousedown', handler);
    target.addEventListener('touchstart', handler, { passive: false });
  }

  function addMoveListener(handler) {
    document.addEventListener('mousemove', handler);
    document.addEventListener('touchmove', handler, { passive: false });
  }

  function addEndListener(handler) {
    document.addEventListener('mouseup', handler);
    document.addEventListener('touchend', handler);
    document.addEventListener('touchcancel', handler);
  }

  // ===================== レスポンシブ対応: CSS表示サイズ÷canvas論理サイズ =====================
  function getScale() {
    return canvas.getBoundingClientRect().width / canvas.width;
  }

  // ===================== カラーサークル描画 =====================
  const canvas = document.getElementById('colorWheel');
  const ctx = canvas.getContext('2d');
  const w = canvas.width;
  const h = canvas.height;
  const cx = w / 2;
  const cy = h / 2;
  const radius = Math.min(w, h) / 2;

  function hslToRgb(h, s, l) {
    let r, g, b;

    if (s === 0) {
      r = g = b = l;
    } else {
      const hue2rgb = function(p, q, t) {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1/6) return p + (q - p) * 6 * t;
        if (t < 1/2) return q;
        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
      };
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }

    return {
      r: Math.round(r * 255),
      g: Math.round(g * 255),
      b: Math.round(b * 255)
    };
  }

  function drawColorWheel() {
    const imageData = ctx.createImageData(w, h);
    const data = imageData.data;

    for (let y = 0; y < h; y++) {
      for (let x = 0; x < w; x++) {
        const dx = x - cx;
        const dy = y - cy;
        const dist = Math.sqrt(dx * dx + dy * dy);
        const idx = (y * w + x) * 4;

        if (dist > radius) {
          data[idx + 3] = 0;
        } else {
          let angle = Math.atan2(dy, dx);
          if (angle < 0) angle += 2 * Math.PI;
          const hue = angle / (2 * Math.PI);
          const sat = (dist / radius) * PALETTE_MAX_SAT;
          const light = PALETTE_LIGHT;

          const rgb = hslToRgb(hue, sat, light);
          data[idx]     = rgb.r;
          data[idx + 1] = rgb.g;
          data[idx + 2] = rgb.b;
          data[idx + 3] = 255;
        }
      }
    }

    ctx.putImageData(imageData, 0, 0);
  }

  drawColorWheel();

  // ===================== 楕円のドラッグ＆リサイズ＆回転 =====================
  const ellipse = document.getElementById('ellipse');
  const resizeHandle = document.getElementById('resizeHandle');
  const rotateHandle = document.getElementById('rotateHandle');
  const container = document.getElementById('color-container');

  const avgColorBox = document.getElementById('avgColorBox');
  const avgColorText = document.getElementById('avgColorText');

  const state = {
    x: 150,
    y: 150,
    width: 100,
    height: 150,
    rotation: 0,        // ラジアン

    dragging: false,
    resizing: false,
    rotating: false,

    dragOffsetX: 0,
    dragOffsetY: 0,

    startWidth: 0,
    startHeight: 0,
    startMouseX: 0,
    startMouseY: 0,

    startRotation: 0,
    startAngleMouse: 0,
    lastAngleMouse: 0
  };

  function applyEllipseStyle() {
    const scale = getScale();
    ellipse.style.left = (state.x * scale) + 'px';
    ellipse.style.top  = (state.y * scale) + 'px';
    ellipse.style.width  = (state.width  * scale) + 'px';
    ellipse.style.height = (state.height * scale) + 'px';
    ellipse.style.borderRadius = '50%';

    const deg = state.rotation * 180 / Math.PI;
    ellipse.style.transform = 'rotate(' + deg + 'deg)';
    ellipse.style.transformOrigin = '50% 50%';

    updateGeometry();
  }

  function updateGeometry() {
    const a = state.width;
    const b = state.height;
    const area = Math.PI * (a / 2) * (b / 2);

    document.getElementById('areaDisplay').textContent = area.toFixed(1);
    document.getElementById('id_ellipse_area').value = area.toFixed(6);

    const centerX = state.x + state.width / 2;
    const centerY = state.y + state.height / 2;
    document.getElementById('id_ellipse_center_x').value = centerX.toFixed(2);
    document.getElementById('id_ellipse_center_y').value = centerY.toFixed(2);
    document.getElementById('id_ellipse_width').value = state.width.toFixed(2);
    document.getElementById('id_ellipse_height').value = state.height.toFixed(2);

    const deg = state.rotation * 180 / Math.PI;
    document.getElementById('id_ellipse_angle').value = isFinite(deg) ? deg.toFixed(2) : '0.00';
  }

  // ===== 楕円内の平均色を計算 =====
  function computeAverageColorInEllipse() {
    try {
    const rx = state.width / 2;
    const ry = state.height / 2;
    if (rx <= 0 || ry <= 0) return;

    const centerX = state.x + rx;
    const centerY = state.y + ry;
    const angle = state.rotation; // ラジアン

    const cosT = Math.cos(angle);
    const sinT = Math.sin(angle);

    // 楕円のバウンディングボックス内に限定して走査
    const minX = Math.max(0, Math.floor(centerX - rx));
    const maxX = Math.min(w - 1, Math.ceil(centerX + rx));
    const minY = Math.max(0, Math.floor(centerY - ry));
    const maxY = Math.min(h - 1, Math.ceil(centerY + ry));

    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;

    let sumR = 0, sumG = 0, sumB = 0, count = 0;

    for (let y = minY; y <= maxY; y++) {
      for (let x = minX; x <= maxX; x++) {
        const dx = x - centerX;
        const dy = y - centerY;

        // 楕円座標系に回転して変換（逆回転）
        const xPrime =  dx * cosT + dy * sinT;
        const yPrime = -dx * sinT + dy * cosT;

        const norm = (xPrime * xPrime) / (rx * rx) + (yPrime * yPrime) / (ry * ry);
        if (norm <= 1) {
          const idx = (y * w + x) * 4;
          const alpha = data[idx + 3];
          if (alpha === 0) continue; // カラーサークル外はスキップ

          const r = data[idx];
          const g = data[idx + 1];
          const b = data[idx + 2];

          sumR += r;
          sumG += g;
          sumB += b;
          count++;
        }
      }
    }

    if (count > 0) {
      const avgR = sumR / count;
      const avgG = sumG / count;
      const avgB = sumB / count;

      const rInt = Math.round(avgR);
      const gInt = Math.round(avgG);
      const bInt = Math.round(avgB);

      // hidden input に保存
      document.getElementById('id_avg_r').value = avgR.toFixed(4);
      document.getElementById('id_avg_g').value = avgG.toFixed(4);
      document.getElementById('id_avg_b').value = avgB.toFixed(4);

      const hex = "#" +
        rInt.toString(16).padStart(2, '0') +
        gInt.toString(16).padStart(2, '0') +
        bInt.toString(16).padStart(2, '0');
      document.getElementById('id_avg_hex').value = hex;

      // プレビュー表示
      avgColorBox.style.backgroundColor = hex;
      avgColorText.textContent = `(R,G,B) = (${rInt}, ${gInt}, ${bInt})`;
    } else {
      // 楕円が全て円の外にある等で色が取れない場合
      document.getElementById('id_avg_r').value = '';
      document.getElementById('id_avg_g').value = '';
      document.getElementById('id_avg_b').value = '';
      document.getElementById('id_avg_hex').value = '';
      avgColorBox.style.backgroundColor = '#ffffff';
      avgColorText.textContent = '(R,G,B) = (0,0,0)';
    }
    } catch (err) {
      // getImageData がブラウザのプライバシー設定等でブロックされた場合など
      console.warn('computeAverageColorInEllipse error:', err);
    }
  }

  // ドラッグ開始（楕円本体）
  function onEllipseStart(e) {
    // ハンドル自体またはその子要素（SVGアイコン等）をクリックした場合は除外
    if (resizeHandle.contains(e.target) || rotateHandle.contains(e.target)) return;

    const p = getPoint(e);
    const containerRect = container.getBoundingClientRect();
    const scale = getScale();
    state.dragging = true;
    state.dragOffsetX = (p.x - containerRect.left) / scale - state.x;
    state.dragOffsetY = (p.y - containerRect.top)  / scale - state.y;

    e.preventDefault();
  }

  // リサイズ開始
  function onResizeStart(e) {
    const p = getPoint(e);
    state.resizing = true;
    state.startMouseX = p.x;
    state.startMouseY = p.y;
    state.startWidth = state.width;
    state.startHeight = state.height;

    e.stopPropagation();
    e.preventDefault();
  }

  // 回転開始
  function onRotateStart(e) {
    const p = getPoint(e);
    state.rotating = true;

    const containerRect = container.getBoundingClientRect();
    const scale = getScale();
    const centerScreenX = containerRect.left + (state.x + state.width  / 2) * scale;
    const centerScreenY = containerRect.top  + (state.y + state.height / 2) * scale;

    const dx = p.x - centerScreenX;
    const dy = p.y - centerScreenY;
    state.startAngleMouse = Math.atan2(dy, dx);
    state.lastAngleMouse = state.startAngleMouse;
    state.startRotation = state.rotation;

    e.stopPropagation();
    e.preventDefault();
  }

  // 移動・リサイズ・回転中
  function onPointerMove(e) {
    if (!state.dragging && !state.resizing && !state.rotating) return;

    const p = getPoint(e);

    if (state.dragging) {
      const containerRect = container.getBoundingClientRect();
      const scale = getScale();
      state.x = (p.x - containerRect.left) / scale - state.dragOffsetX;
      state.y = (p.y - containerRect.top)  / scale - state.dragOffsetY;

      state.x = Math.max(0, Math.min(w - state.width,  state.x));
      state.y = Math.max(0, Math.min(h - state.height, state.y));

      applyEllipseStyle();
    } else if (state.resizing) {
      const scale = getScale();
      const dx = (p.x - state.startMouseX) / scale;
      const dy = (p.y - state.startMouseY) / scale;
      state.width  = Math.max(20, state.startWidth  + dx);
      state.height = Math.max(20, state.startHeight + dy);

      applyEllipseStyle();
    } else if (state.rotating) {
      const containerRect = container.getBoundingClientRect();
      const scale = getScale();
      const centerScreenX = containerRect.left + (state.x + state.width  / 2) * scale;
      const centerScreenY = containerRect.top  + (state.y + state.height / 2) * scale;

      const dx = p.x - centerScreenX;
      const dy = p.y - centerScreenY;
      const currentAngleMouse = Math.atan2(dy, dx);

      // 増分式: 前フレームとの差を使い、±π境界でのジャンプを補正
      let delta = currentAngleMouse - state.lastAngleMouse;
      if (delta > Math.PI)  delta -= 2 * Math.PI;
      if (delta < -Math.PI) delta += 2 * Math.PI;
      // 時計回りのみ許可（delta > 0 が時計回り）
      if (delta > 0) state.rotation += delta;
      state.lastAngleMouse = currentAngleMouse;

      applyEllipseStyle();
    }

    e.preventDefault();
  }

  // 終了
  function onPointerEnd(e) {
    const wasActive = state.dragging || state.resizing || state.rotating;

    state.dragging = false;
    state.resizing = false;
    state.rotating = false;

    // 操作があった場合のみ平均色を再計算
    if (wasActive) {
      computeAverageColorInEllipse();
    }
  }

  // リスナー登録（マウス＋タッチ両対応）
  addStartListener(ellipse, onEllipseStart);
  addStartListener(resizeHandle, onResizeStart);
  addStartListener(rotateHandle, onRotateStart);
  addMoveListener(onPointerMove);
  addEndListener(onPointerEnd);

  // 初期適用＆初期平均色計算
  applyEllipseStyle();
  computeAverageColorInEllipse();
})();
</script>

{% endblock %}