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

{% block title %}カラーパレットの選択{% endblock %}

{% block content %}
<p>
  次のページでは、カラーサークル上で好きな色の範囲を選んでいただきます。<br>
  その前に、以下の4種類のカラーパレットのうち、<strong>あなたの好きな色を最もよく選びやすいもの</strong>を1つ選んでください。<br>
  （この選択は実験全体を通じて適用されます）
</p>

<div id="palette-container"
     style="display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
            margin: 24px auto; max-width: 100%; box-sizing: border-box; padding: 0 8px;">

  <div class="palette-card" data-value="saturated"
       style="text-align:center; cursor:pointer; border: 3px solid #ccc;
              border-radius: 10px; padding: 12px; background: #fff;
              width: 180px; box-sizing: border-box;">
    <canvas id="wheel_saturated" width="150" height="150"
            style="border-radius: 50%; display:block; margin: 0 auto;"></canvas>
    <p style="font-weight:bold; margin: 8px 0 2px;">鮮やか</p>
    <p style="font-size:0.82em; color:#555; margin:0;">彩度：高　明度：中</p>
  </div>

  <div class="palette-card" data-value="light"
       style="text-align:center; cursor:pointer; border: 3px solid #ccc;
              border-radius: 10px; padding: 12px; background: #fff;
              width: 180px; box-sizing: border-box;">
    <canvas id="wheel_light" width="150" height="150"
            style="border-radius: 50%; display:block; margin: 0 auto;"></canvas>
    <p style="font-weight:bold; margin: 8px 0 2px;">淡い（パステル）</p>
    <p style="font-size:0.82em; color:#555; margin:0;">彩度：中　明度：高</p>
  </div>

  <div class="palette-card" data-value="muted"
       style="text-align:center; cursor:pointer; border: 3px solid #ccc;
              border-radius: 10px; padding: 12px; background: #fff;
              width: 180px; box-sizing: border-box;">
    <canvas id="wheel_muted" width="150" height="150"
            style="border-radius: 50%; display:block; margin: 0 auto;"></canvas>
    <p style="font-weight:bold; margin: 8px 0 2px;">落ち着いた</p>
    <p style="font-size:0.82em; color:#555; margin:0;">彩度：中　明度：中</p>
  </div>

  <div class="palette-card" data-value="dark"
       style="text-align:center; cursor:pointer; border: 3px solid #ccc;
              border-radius: 10px; padding: 12px; background: #fff;
              width: 180px; box-sizing: border-box;">
    <canvas id="wheel_dark" width="150" height="150"
            style="border-radius: 50%; display:block; margin: 0 auto;"></canvas>
    <p style="font-weight:bold; margin: 8px 0 2px;">深い</p>
    <p style="font-size:0.82em; color:#555; margin:0;">彩度：中　明度：低</p>
  </div>

</div>

<p id="selected-label" style="text-align:center; font-size:1em; color:#0066cc; min-height:1.5em;"></p>
<p id="palette-error" style="color:red; text-align:center; display:none;">
  パレットを選択してから次へ進んでください。
</p>

<!-- oTree に送る hidden input（form_fields に対応） -->
<input type="hidden" name="color_palette_type" id="id_color_palette_type" value="">

{{ next_button }}

<script>
(function () {
  // Berkeley Color Project (Palmer & Schloss 2010) の4条件に対応
  // maxSat: 中心から外縁への最大彩度, light: 固定明度
  var palettes = {
    saturated: { maxSat: 1.0,  light: 0.50, label: '鮮やか（彩度：高・明度：中）' },
    light:     { maxSat: 0.60, light: 0.75, label: '淡い（彩度：中・明度：高）' },
    muted:     { maxSat: 0.50, light: 0.50, label: '落ち着いた（彩度：中・明度：中）' },
    dark:      { maxSat: 0.70, light: 0.25, label: '深い（彩度：中・明度：低）' }
  };

  function hslToRgb(h, s, l) {
    var r, g, b;
    if (s === 0) {
      r = g = b = l;
    } else {
      var 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;
      };
      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      var 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 drawWheel(canvasId, maxSat, lightness) {
    var canvas = document.getElementById(canvasId);
    var ctx = canvas.getContext('2d');
    var w = canvas.width, h = canvas.height;
    var cx = w / 2, cy = h / 2;
    var radius = Math.min(w, h) / 2;
    var imageData = ctx.createImageData(w, h);
    var data = imageData.data;

    for (var y = 0; y < h; y++) {
      for (var x = 0; x < w; x++) {
        var dx = x - cx, dy = y - cy;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var idx = (y * w + x) * 4;
        if (dist > radius) {
          data[idx + 3] = 0;
        } else {
          var angle = Math.atan2(dy, dx);
          if (angle < 0) angle += 2 * Math.PI;
          var hue = angle / (2 * Math.PI);
          var sat = (dist / radius) * maxSat;
          var rgb = hslToRgb(hue, sat, lightness);
          data[idx]     = rgb.r;
          data[idx + 1] = rgb.g;
          data[idx + 2] = rgb.b;
          data[idx + 3] = 255;
        }
      }
    }
    ctx.putImageData(imageData, 0, 0);
  }

  // 4つのホイールを描画
  drawWheel('wheel_saturated', palettes.saturated.maxSat, palettes.saturated.light);
  drawWheel('wheel_light',     palettes.light.maxSat,     palettes.light.light);
  drawWheel('wheel_muted',     palettes.muted.maxSat,     palettes.muted.light);
  drawWheel('wheel_dark',      palettes.dark.maxSat,      palettes.dark.light);

  // カード選択ロジック
  var selected = null;
  var cards = document.querySelectorAll('.palette-card');

  cards.forEach(function (card) {
    card.addEventListener('click', function () {
      cards.forEach(function (c) {
        c.style.borderColor = '#ccc';
        c.style.backgroundColor = '#fff';
      });
      card.style.borderColor = '#0066cc';
      card.style.backgroundColor = '#e8f0fe';
      selected = card.dataset.value;
      document.getElementById('id_color_palette_type').value = selected;
      document.getElementById('selected-label').textContent =
        '選択中: ' + palettes[selected].label;
      document.getElementById('palette-error').style.display = 'none';
    });
  });

  // 次へボタン押下時にバリデーション
  var form = document.querySelector('form');
  if (form) {
    form.addEventListener('submit', function (e) {
      if (!selected) {
        e.preventDefault();
        document.getElementById('palette-error').style.display = 'block';
        document.getElementById('palette-error').scrollIntoView({ behavior: 'smooth' });
      }
    });
  }
})();
</script>

{% endblock %}