@extends('layouts.app')
@section('title', '署名位置の設定')
@section('page-title', '契約を締結')
@section('page-subtitle')
文書管理番号 {{ $instance->document_number ?? '—' }} ・下書き
@endsection

@section('content')
<div class="contract-placement-page">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>署名依頼情報へ戻る</a>
  <button type="submit" form="contract-sign-position-form" name="action" value="save" class="btn btn-sm btn-outline-primary">下書き保存</button>
</div>

@include('contract.partials._create_stepper', [
  'activeStep' => 3,
  'stepHint' => '左のパーツを <strong>ドラッグ＆ドロップ</strong> で PDF 上に配置します。枠をクリックして入力ガイド・必須・フォントサイズ等を設定。右下の青い角で枠サイズ調整。ドラッグで位置移動、<kbd>Delete</kbd> で削除。',
])

<form method="POST" action="{{ route('contract.instances.sign-position.update', $instance) }}" id="contract-sign-position-form">
  @csrf @method('PUT')
  <input type="hidden" name="placements_json" id="placements_json" value="">
</form>

<div class="contract-placement-layout">
  <aside class="contract-placement-sidebar" aria-label="配置パーツ">
    <div class="contract-placement-sidebar-inner">
      <div class="placement-palette-intro">
        <div class="placement-palette-intro-title">配置する欄</div>
        <p class="placement-palette-intro-text mb-0">下の欄を契約書 PDF へ<strong>ドラッグ</strong>して、記入・署名の位置を決めます。</p>
      </div>
      <div id="placement-palette" class="placement-palette-list"></div>
    </div>
  </aside>

  <div class="contract-placement-main">
    <ul class="nav nav-tabs contract-placement-doc-tabs mb-2" id="placement-doc-tabs" role="tablist"></ul>

    <div class="contract-placement-workspace">
      <div class="contract-placement-canvas-outer" id="placement-canvas-outer">
        <div class="contract-placement-doc-summary" id="placement-doc-summary">全 1 ページ</div>
        <div class="contract-placement-canvas-wrap" id="placement-canvas-wrap">
          <div id="placement-pages-host"></div>
          <div class="contract-placement-loading" id="placement-loading">PDF を読み込み中…</div>
        </div>
      </div>

      <div id="placement-settings-panel" class="placement-settings-panel d-none" aria-hidden="true">
        <div class="placement-settings-head" id="placement-settings-head">—</div>
        <div id="placement-settings-date-auto-wrap" class="d-none">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="placement-setting-date-auto" value="1">
            <label class="form-check-label" for="placement-setting-date-auto">署名日を自動で埋め込む</label>
          </div>
        </div>
        <div id="placement-settings-date-picker-wrap" class="d-none">
          <label class="form-label" for="placement-setting-date-value">日付を選択</label>
          <input type="date" class="form-control form-control-sm" id="placement-setting-date-value">
          <div class="form-text mb-0">カレンダーから日付を選んでください。</div>
        </div>
        <div id="placement-settings-date-auto-note" class="form-text d-none mb-2">署名した日付が自動で入ります（カレンダー選択は不要）。</div>
        <div id="placement-settings-guide-wrap" class="d-none">
          <label class="form-label" for="placement-setting-input-guide" id="placement-setting-guide-label">入力ガイド</label>
          <input type="text" class="form-control form-control-sm" id="placement-setting-input-guide" maxlength="500" placeholder="氏名">
          <div class="form-text" id="placement-setting-guide-help"></div>
        </div>
        <div id="placement-settings-required-wrap" class="d-none">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="placement-setting-required" value="1">
            <label class="form-check-label" for="placement-setting-required">必須項目にする</label>
          </div>
        </div>
        <div id="placement-settings-date-format-wrap" class="d-none">
          <label class="form-label" for="placement-setting-date-format">日付の表示形式</label>
          <select class="form-select form-select-sm" id="placement-setting-date-format">
            <option value="Y/m/d">YYYY/MM/DD</option>
            <option value="Y-m-d">YYYY-MM-DD</option>
            <option value="Y年n月j日">YYYY年MM月DD日</option>
          </select>
        </div>
        <div id="placement-settings-font-wrap" class="d-none">
          <label class="form-label" for="placement-setting-font-size">フォントサイズ</label>
          <select class="form-select form-select-sm" id="placement-setting-font-size">
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="10.5">10.5</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="14">14</option>
            <option value="16">16</option>
            <option value="18">18</option>
          </select>
        </div>
        <div class="small text-muted mb-0 mt-1" id="placement-settings-part-label"></div>
      </div>
    </div>

    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-2">
      <div class="small text-muted" id="placement-page-label">全 1 ページを表示中</div>
      <div class="small text-muted" id="placement-active-part-hint">左の欄を PDF へドラッグして配置してください</div>
    </div>
  </div>
</div>

<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 contract-sign-step-footer mt-3">
  <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-outline-secondary px-4">戻る</a>
  <div class="d-flex gap-2">
    <button type="submit" form="contract-sign-position-form" name="action" value="save" class="btn btn-outline-primary px-4">下書き保存</button>
    <button type="submit" form="contract-sign-position-form" name="action" value="proceed" class="btn btn-gmo-next">確認画面へ</button>
  </div>
</div>
</div>

@include('contract.partials._sign_request_step_styles')
@include('contract.partials._sign_position_styles')
@endsection

@push('scripts')
<script>
(function () {
  const documents = @json($documentsPayload);
  const signers = @json($signersPayload);
  const senderLabel = @json($senderLabel);
  let placements = @json($placementsPayload);
  const form = document.getElementById('contract-sign-position-form');
  const placementsInput = document.getElementById('placements_json');
  const paletteEl = document.getElementById('placement-palette');
  const tabsEl = document.getElementById('placement-doc-tabs');
  const pagesHost = document.getElementById('placement-pages-host');
  const wrap = document.getElementById('placement-canvas-wrap');
  const canvasOuter = document.getElementById('placement-canvas-outer');
  const loadingEl = document.getElementById('placement-loading');
  const pageLabel = document.getElementById('placement-page-label');
  const docSummary = document.getElementById('placement-doc-summary');
  const activeHint = document.getElementById('placement-active-part-hint');
  const settingsPanel = document.getElementById('placement-settings-panel');
  const settingsHead = document.getElementById('placement-settings-head');
  const settingsDateAutoWrap = document.getElementById('placement-settings-date-auto-wrap');
  const settingsDatePickerWrap = document.getElementById('placement-settings-date-picker-wrap');
  const settingsDateAutoNote = document.getElementById('placement-settings-date-auto-note');
  const settingsDateValue = document.getElementById('placement-setting-date-value');
  const settingsGuideWrap = document.getElementById('placement-settings-guide-wrap');
  const settingsRequiredWrap = document.getElementById('placement-settings-required-wrap');
  const settingsDateFormatWrap = document.getElementById('placement-settings-date-format-wrap');
  const settingsFontWrap = document.getElementById('placement-settings-font-wrap');
  const settingsDateAuto = document.getElementById('placement-setting-date-auto');
  const settingsInputGuide = document.getElementById('placement-setting-input-guide');
  const settingsGuideLabel = document.getElementById('placement-setting-guide-label');
  const settingsGuideHelp = document.getElementById('placement-setting-guide-help');
  const settingsRequired = document.getElementById('placement-setting-required');
  const settingsDateFormat = document.getElementById('placement-setting-date-format');
  const settingsFontSize = document.getElementById('placement-setting-font-size');
  const settingsPartLabel = document.getElementById('placement-settings-part-label');
  const workspace = document.querySelector('.contract-placement-workspace');

  if (!documents.length || !pagesHost || !wrap) return;

  let pdfDoc = null;
  let activeDocId = documents[0].id;
  let pageCount = 1;
  let selectedUid = null;
  let dragState = null;
  let resizeState = null;
  let pdfjsLib = null;
  let placementUidSeq = 1;
  const DRAG_MIME = 'application/x-monaka-placement-part';

  const signerPaletteTones = [
    'placement-palette-signer-a',
    'placement-palette-signer-b',
    'placement-palette-signer-c',
  ];

  const partMeta = {
    seal: { label: '署名', w: 8, h: 8, hint: '印鑑（契約印）を配置' },
    text: { label: 'テキスト', icon: 'bi-type', w: 18, h: 2.2, hint: '自由入力欄を配置' },
    date: { label: '日付', icon: 'bi-calendar3', w: 13, h: 2.2, hint: 'カレンダーで日付選択' },
    checkbox: { label: 'チェック', icon: 'bi-check-square', w: 3, h: 2.2, hint: 'チェック欄を配置' },
  };

  function uid() { return 'p' + (placementUidSeq++); }

  function defaultSettings(partType) {
    if (partType === 'date') {
      return { date_format: 'Y/m/d', font_size_pt: 10.5, auto_fill_sign_date: false, selected_date: '' };
    }
    if (partType === 'text') {
      return { font_size_pt: 10.5, input_guide: '' };
    }
    return {};
  }

  function normalizeInputGuide(value) {
    return String(value || '').trim().replace(/^例[：:]\s*/, '');
  }

  function resolveInputGuide(p) {
    const guide = normalizeInputGuide(p.settings && p.settings.input_guide);
    if (guide) return guide;
    return normalizeInputGuide(p.settings && p.settings.default_text);
  }

  function ensurePlacementMeta() {
    placements.forEach(function (p) {
      if (!p._uid) p._uid = uid();
      if (!p.settings || typeof p.settings !== 'object') p.settings = defaultSettings(p.part_type);
      if (p.part_type === 'text' && p.settings.default_text && !p.settings.input_guide) {
        p.settings.input_guide = normalizeInputGuide(p.settings.default_text);
        delete p.settings.default_text;
      }
      if (p.settings.input_guide) {
        p.settings.input_guide = normalizeInputGuide(p.settings.input_guide);
      }
      if (p.part_type === 'date' && p.settings.auto_fill_sign_date === undefined) {
        p.settings.auto_fill_sign_date = false;
      }
      if (p.part_type === 'text' || p.part_type === 'date') {
        if (p.is_required === undefined) p.is_required = false;
      }
    });
  }
  ensurePlacementMeta();

  function signerActionForDoc(signer, docId) {
    const actions = signer.document_actions || {};
    return actions[String(docId)] || actions[docId] || 'sign';
  }

  function partsForSignerOnDoc(signer, docId) {
    const action = signerActionForDoc(signer, docId);
    if (action === 'skip') return [];
    if (action === 'confirm') return ['text', 'date'];
    return ['seal', 'text', 'date'];
  }

  function partPayload(ownerType, signerId, partType, groupLabel) {
    const meta = partMeta[partType];
    return {
      owner_type: ownerType,
      signer_id: signerId,
      part_type: partType,
      label: groupLabel + '・' + meta.label,
      width_pct: meta.w,
      height_pct: meta.h,
    };
  }

  function renderPalette() {
    if (!paletteEl) return;
    paletteEl.innerHTML = '';

    const senderGroup = document.createElement('div');
    senderGroup.className = 'placement-palette-group placement-palette-sender';
    senderGroup.innerHTML = '<div class="placement-palette-head">送信者</div>'
      + '<div class="placement-palette-sub">送信者が記入する欄</div>';
    const senderBody = document.createElement('div');
    senderBody.className = 'placement-palette-parts';
    ['text', 'date'].forEach(function (type) {
      senderBody.appendChild(makePartChip('sender', null, type, senderLabel));
    });
    senderGroup.appendChild(senderBody);
    paletteEl.appendChild(senderGroup);

    signers.forEach(function (signer, signerIndex) {
      const types = partsForSignerOnDoc(signer, activeDocId);
      if (!types.length) return;
      const tone = signerPaletteTones[signerIndex % signerPaletteTones.length];
      const group = document.createElement('div');
      group.className = 'placement-palette-group ' + tone;
      const action = signerActionForDoc(signer, activeDocId);
      const subText = action === 'confirm'
        ? '文書確認時に記入する欄'
        : '署名・記入する欄';
      group.innerHTML = '<div class="placement-palette-head">' + escapeHtml(signer.label) + '</div>'
        + '<div class="placement-palette-sub">' + escapeHtml(subText) + '</div>';
      const body = document.createElement('div');
      body.className = 'placement-palette-parts';
      types.forEach(function (type) {
        body.appendChild(makePartChip('signer', signer.id, type, signer.label));
      });
      group.appendChild(body);
      paletteEl.appendChild(group);
    });
  }

  function makePartChip(ownerType, signerId, partType, groupLabel) {
    const meta = partMeta[partType];
    const chip = document.createElement('div');
    chip.className = 'placement-part-chip placement-part-chip--' + partType;
    chip.draggable = true;
    chip.title = meta.label + ' — ' + meta.hint;
    if (partType === 'seal') {
      chip.innerHTML = '<div class="placement-part-chip-seal-visual">'
        + sealMarkSvg('placement-seal-mark--chip')
        + '</div><div class="placement-part-chip-caption">'
        + '<span class="placement-part-chip-label">' + escapeHtml(meta.label) + '</span>'
        + '<span class="placement-part-chip-hint">' + escapeHtml(meta.hint) + '</span></div>';
    } else if (partType === 'text') {
      chip.innerHTML = '<span class="placement-part-chip-icon placement-part-chip-icon--text" aria-hidden="true">T</span>'
        + '<span class="placement-part-chip-caption">'
        + '<span class="placement-part-chip-label">' + escapeHtml(meta.label) + '</span>'
        + '<span class="placement-part-chip-hint">' + escapeHtml(meta.hint) + '</span></span>';
    } else {
      chip.innerHTML = '<span class="placement-part-chip-icon" aria-hidden="true"><i class="bi ' + meta.icon + '"></i></span>'
        + '<span class="placement-part-chip-caption">'
        + '<span class="placement-part-chip-label">' + escapeHtml(meta.label) + '</span>'
        + '<span class="placement-part-chip-hint">' + escapeHtml(meta.hint) + '</span></span>';
    }
    chip.addEventListener('dragstart', function (e) {
      const payload = partPayload(ownerType, signerId, partType, groupLabel);
      e.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload));
      e.dataTransfer.effectAllowed = 'copy';
      if (activeHint) activeHint.textContent = '「' + meta.label + '」を PDF 上の置きたい位置で離してください';
    });
    chip.addEventListener('dragend', function () {
      canvasOuter?.classList.remove('is-drag-over');
      if (activeHint) activeHint.textContent = '左の欄を PDF へドラッグして配置してください';
    });
    return chip;
  }

  function renderDocTabs() {
    if (!tabsEl) return;
    tabsEl.innerHTML = '';
    documents.forEach(function (doc) {
      const li = document.createElement('li');
      li.className = 'nav-item';
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'nav-link' + (doc.id === activeDocId ? ' active' : '');
      btn.textContent = doc.name;
      btn.addEventListener('click', function () { switchDocument(doc.id); });
      li.appendChild(btn);
      tabsEl.appendChild(li);
    });
  }

  async function initPdfjs() {
    pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.min.mjs');
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.worker.min.mjs';
  }

  function targetCanvasWidth() {
    if (!canvasOuter) return 920;
    const w = canvasOuter.clientWidth - 48;
    return Math.max(880, Math.min(w, 1100));
  }

  function overlayForPlacement(p) {
    if (!pagesHost || !p) return null;
    const stack = pagesHost.querySelector('.contract-placement-page-stack[data-page="' + p.page_number + '"]');
    return stack ? stack.querySelector('.contract-placement-overlay') : null;
  }

  function overlayAtPoint(clientX, clientY) {
    if (!pagesHost) return null;
    const stacks = pagesHost.querySelectorAll('.contract-placement-page-stack');
    for (let i = 0; i < stacks.length; i++) {
      const stack = stacks[i];
      const ov = stack.querySelector('.contract-placement-overlay');
      if (!ov) continue;
      const rect = ov.getBoundingClientRect();
      if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
        return {
          overlay: ov,
          pageNumber: parseInt(stack.getAttribute('data-page'), 10),
        };
      }
    }
    return null;
  }

  function selectedPlacementBox() {
    if (!selectedUid || !pagesHost) return null;
    return pagesHost.querySelector('.placement-box[data-uid="' + selectedUid + '"]');
  }

  async function loadDocument(docId) {
    const doc = documents.find(function (d) { return d.id === docId; });
    if (!doc || !doc.pdf_url) return;
    if (loadingEl) {
      loadingEl.classList.remove('d-none');
      loadingEl.textContent = 'PDF を読み込み中…';
    }
    pdfDoc = null;
    try {
      pdfDoc = await pdfjsLib.getDocument({ url: doc.pdf_url, withCredentials: true }).promise;
      pageCount = pdfDoc.numPages;
      await renderAllPages();
    } catch (e) {
      if (loadingEl) loadingEl.textContent = 'PDF の読み込みに失敗しました';
    }
  }

  async function renderAllPages() {
    if (!pdfDoc || !pagesHost || !wrap) return;
    pagesHost.innerHTML = '';
    const targetW = targetCanvasWidth();
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    for (let pageNum = 1; pageNum <= pageCount; pageNum++) {
      const page = await pdfDoc.getPage(pageNum);
      const base = page.getViewport({ scale: 1 });
      const scale = targetW / base.width;
      const viewport = page.getViewport({ scale });
      const w = Math.floor(viewport.width);
      const h = Math.floor(viewport.height);

      const stack = document.createElement('div');
      stack.className = 'contract-placement-page-stack';
      stack.dataset.page = String(pageNum);

      const badge = document.createElement('div');
      badge.className = 'contract-placement-page-badge';
      badge.textContent = pageNum + ' / ' + pageCount + ' ページ';

      const frame = document.createElement('div');
      frame.className = 'contract-placement-page-frame';

      const cvs = document.createElement('canvas');
      cvs.width = Math.floor(viewport.width * dpr);
      cvs.height = Math.floor(viewport.height * dpr);
      cvs.style.width = w + 'px';
      cvs.style.height = h + 'px';
      cvs.setAttribute('aria-label', '契約書 ' + pageNum + ' ページ目');

      const ctx = cvs.getContext('2d');
      if (ctx) {
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
        await page.render({ canvasContext: ctx, viewport: viewport }).promise;
      }

      const ov = document.createElement('div');
      ov.className = 'contract-placement-overlay';
      ov.style.width = w + 'px';
      ov.style.height = h + 'px';
      ov.dataset.page = String(pageNum);

      frame.appendChild(cvs);
      frame.appendChild(ov);
      stack.appendChild(badge);
      stack.appendChild(frame);
      pagesHost.appendChild(stack);
    }

    if (loadingEl) loadingEl.classList.add('d-none');
    updatePageControls();
    renderOverlayBoxes();
    positionSettingsPanel();
  }

  function updatePageControls() {
    const label = pageCount <= 1 ? '全 1 ページを表示中' : '全 ' + pageCount + ' ページを表示中';
    const summary = pageCount <= 1 ? '全 1 ページ' : '全 ' + pageCount + ' ページ';
    if (pageLabel) pageLabel.textContent = label;
    if (docSummary) docSummary.textContent = summary;
  }

  function sealMarkSvg(extraClass) {
    const cls = 'placement-seal-mark' + (extraClass ? ' ' + extraClass : '');
    return '<svg class="' + cls + '" viewBox="0 0 48 56" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'
      + '<text x="24" y="9" text-anchor="middle" font-size="8" fill="#777" font-family="sans-serif">署名</text>'
      + '<rect x="8" y="14" width="32" height="36" rx="2" fill="#fafafa" stroke="#bbb" stroke-width="1.5"/>'
      + '<circle cx="24" cy="32" r="11" fill="none" stroke="#c9302c" stroke-width="2"/>'
      + '<circle cx="24" cy="32" r="5.5" fill="none" stroke="#c9302c" stroke-width="1.2"/>'
      + '</svg>';
  }

  function todayIsoDate() {
    const d = new Date();
    return d.getFullYear() + '-'
      + String(d.getMonth() + 1).padStart(2, '0') + '-'
      + String(d.getDate()).padStart(2, '0');
  }

  function formatIsoDate(iso, format) {
    if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return '';
    const parts = iso.split('-');
    const y = parts[0];
    const m = parts[1];
    const day = parts[2];
    if (format === 'Y-m-d') return y + '-' + m + '-' + day;
    if (format === 'Y年n月j日') return y + '年' + m + '月' + day + '日';
    return y + '/' + m + '/' + day;
  }

  function datePreview(format) {
    return formatIsoDate(todayIsoDate(), format);
  }

  function resolveSelectedDateIso(p) {
    if (!p || !p.settings) return '';
    if (p.settings.auto_fill_sign_date) return todayIsoDate();
    const iso = String(p.settings.selected_date || '').trim();
    return /^\d{4}-\d{2}-\d{2}$/.test(iso) ? iso : '';
  }

  function resolveDateDisplay(p) {
    const format = (p.settings && p.settings.date_format) || 'Y/m/d';
    const iso = resolveSelectedDateIso(p);
    return iso ? formatIsoDate(iso, format) : '';
  }

  function syncDateSettingFromPicker(p, iso) {
    if (!p.settings) p.settings = defaultSettings('date');
    p.settings.selected_date = iso || '';
  }

  function boxInnerHtml(p, meta, fontPt) {
    if (p.part_type === 'seal') {
      const ownerName = ownerHeadLabel(p);
      return '<div class="placement-box-seal-wrap" aria-hidden="true">'
        + '<div class="placement-box-seal-frame">' + sealMarkSvg('') + '</div>'
        + '<div class="placement-box-seal-name">' + escapeHtml(ownerName) + '</div>'
        + '</div>';
    }
    if (p.part_type === 'text') {
      const guide = resolveInputGuide(p);
      if (guide) {
        return '<span class="placement-box-preview placement-box-text-guide" style="font-size:'
          + fontPt + 'pt" title="入力ガイド（署名画面用・PDFには印字されません）">'
          + escapeHtml(guide) + '</span>';
      }
      return '<span class="placement-box-preview placement-box-text-empty is-empty" data-placeholder="入力ガイド未設定" style="font-size:'
        + fontPt + 'pt" aria-hidden="true"></span>';
    }
    if (p.part_type === 'date') {
      const autoFill = !!(p.settings && p.settings.auto_fill_sign_date);
      const iso = resolveSelectedDateIso(p);
      const isSelected = selectedUid === p._uid;
      let valueHtml;
      if (autoFill) {
        valueHtml = '<span class="placement-box-preview">' + escapeHtml(resolveDateDisplay(p)) + '</span>';
      } else if (isSelected) {
        valueHtml = '<input type="date" class="placement-box-date-input" value="' + escapeHtml(iso) + '" aria-label="日付を選択">';
      } else if (iso) {
        valueHtml = '<span class="placement-box-preview">' + escapeHtml(resolveDateDisplay(p)) + '</span>';
      } else {
        valueHtml = '<span class="placement-box-preview placement-box-date-pick-hint">カレンダーで選択</span>';
      }
      return '<div class="placement-box-date-inner" style="font-size:' + fontPt + 'pt">'
        + '<span class="placement-box-date-prefix">日付：</span>'
        + valueHtml + '</div>';
    }
    return '';
  }

  function renderOverlayBoxes() {
    if (!pagesHost) return;
    pagesHost.querySelectorAll('.contract-placement-overlay').forEach(function (ov) {
      ov.innerHTML = '';
    });
    placements.filter(function (p) {
      return p.document_id === activeDocId;
    }).forEach(function (p) {
      const ov = overlayForPlacement(p);
      if (ov) ov.appendChild(createBoxEl(p));
    });
  }

  function createBoxEl(p) {
    const meta = partMeta[p.part_type] || partMeta.text;
    const fontPt = (p.settings && p.settings.font_size_pt) || 10.5;
    const el = document.createElement('div');
    el.className = 'placement-box placement-box-' + p.part_type
      + (p.part_type === 'seal' ? ' placement-box-seal' : '')
      + (p.owner_type === 'sender' ? ' is-sender' : ' is-signer')
      + (p.is_required ? ' is-required' : '')
      + (selectedUid === p._uid ? ' is-selected' : '');
    if (p.is_required && (p.part_type === 'text' || p.part_type === 'date')) {
      el.title = '必須項目';
    }
    el.dataset.uid = p._uid;
    el.style.left = p.pos_x + '%';
    el.style.top = p.pos_y + '%';
    el.style.width = p.width_pct + '%';
    el.style.height = p.height_pct + '%';
    el.innerHTML = '<button type="button" class="placement-box-remove" title="削除">&times;</button>'
      + boxInnerHtml(p, meta, fontPt)
      + '<span class="placement-box-resize" title="サイズ変更" aria-hidden="true"></span>';
    const dateInput = el.querySelector('.placement-box-date-input');
    if (dateInput) {
      dateInput.addEventListener('mousedown', function (e) { e.stopPropagation(); });
      dateInput.addEventListener('click', function (e) { e.stopPropagation(); });
      dateInput.addEventListener('change', function () {
        syncDateSettingFromPicker(p, dateInput.value);
        if (settingsDateValue && selectedUid === p._uid) settingsDateValue.value = dateInput.value;
        renderOverlayBoxes();
        positionSettingsPanel();
        const nextInput = selectedPlacementBox()?.querySelector('.placement-box-date-input');
        if (nextInput) {
          nextInput.focus();
          try { nextInput.showPicker(); } catch (err) { /* unsupported browser */ }
        }
      });
      requestAnimationFrame(function () {
        dateInput.focus();
        try { dateInput.showPicker(); } catch (err) { /* unsupported browser */ }
      });
    }
    el.addEventListener('mousedown', function (e) {
      if (e.target.closest('.placement-box-remove') || e.target.closest('.placement-box-resize')) return;
      if (e.target.closest('.placement-box-date-input')) return;
      e.preventDefault();
      e.stopPropagation();
      selectPlacement(p._uid);
      dragState = {
        uid: p._uid,
        overlay: overlayForPlacement(p),
        startX: e.clientX,
        startY: e.clientY,
        origX: p.pos_x,
        origY: p.pos_y,
        moved: false,
      };
    });
    el.querySelector('.placement-box-resize').addEventListener('mousedown', function (e) {
      e.preventDefault();
      e.stopPropagation();
      selectPlacement(p._uid);
      resizeState = {
        uid: p._uid,
        overlay: overlayForPlacement(p),
        startX: e.clientX,
        startY: e.clientY,
        origW: p.width_pct,
        origH: p.height_pct,
      };
    });
    el.querySelector('.placement-box-remove').addEventListener('click', function (e) {
      e.stopPropagation();
      placements = placements.filter(function (x) { return x._uid !== p._uid; });
      if (selectedUid === p._uid) {
        selectedUid = null;
        hideSettingsPanel();
      }
      renderOverlayBoxes();
    });
    return el;
  }

  function selectPlacement(placementUid) {
    selectedUid = placementUid;
    renderOverlayBoxes();
    showSettingsPanel();
  }

  function selectedPlacement() {
    return placements.find(function (p) { return p._uid === selectedUid; }) || null;
  }

  function ownerHeadLabel(p) {
    if (p.owner_type === 'sender') return senderLabel;
    const signer = signers.find(function (s) { return s.id === p.signer_id; });
    return signer ? signer.label : '署名者';
  }

  function showSettingsPanel() {
    const p = selectedPlacement();
    if (!p || !settingsPanel) {
      hideSettingsPanel();
      return;
    }
    settingsPanel.classList.remove('d-none');
    settingsPanel.setAttribute('aria-hidden', 'false');
    if (settingsHead) settingsHead.textContent = ownerHeadLabel(p);
    if (settingsPartLabel) {
      const partLabel = p.part_type === 'seal' ? '署名' : (p.part_type === 'date' ? '日付' : 'テキスト');
      settingsPartLabel.textContent = partLabel;
    }
    const isText = p.part_type === 'text';
    const isDate = p.part_type === 'date';
    const isField = isText || isDate;
    const autoFillDate = !!(isDate && p.settings && p.settings.auto_fill_sign_date);
    if (settingsDateAutoWrap) settingsDateAutoWrap.classList.toggle('d-none', !isDate);
    if (settingsDatePickerWrap) settingsDatePickerWrap.classList.toggle('d-none', !isDate || autoFillDate);
    if (settingsDateAutoNote) settingsDateAutoNote.classList.toggle('d-none', !isDate || !autoFillDate);
    if (settingsGuideWrap) settingsGuideWrap.classList.toggle('d-none', !isText);
    if (settingsRequiredWrap) settingsRequiredWrap.classList.toggle('d-none', !isField);
    if (settingsDateFormatWrap) settingsDateFormatWrap.classList.toggle('d-none', !isDate);
    if (settingsFontWrap) settingsFontWrap.classList.toggle('d-none', !isField);
    if (settingsInputGuide && isText) {
      settingsInputGuide.value = resolveInputGuide(p);
    }
    if (settingsGuideLabel && settingsGuideHelp && isText) {
      settingsGuideLabel.textContent = '入力ガイド';
      settingsInputGuide.placeholder = '氏名';
      settingsGuideHelp.textContent = '入力すると左の枠にもプレビュー表示されます。署名画面の入力欄の案内文として使われ、契約書 PDF には印字されません。';
    }
    if (settingsRequired && isField) {
      settingsRequired.checked = !!p.is_required;
    }
    if (settingsDateAuto && isDate) {
      settingsDateAuto.checked = autoFillDate;
    }
    if (settingsDateValue && isDate && !autoFillDate) {
      settingsDateValue.value = resolveSelectedDateIso(p);
    }
    if (settingsDateFormat && isDate) {
      settingsDateFormat.value = (p.settings && p.settings.date_format) || 'Y/m/d';
    }
    if (settingsFontSize && isField) {
      settingsFontSize.value = String((p.settings && p.settings.font_size_pt) || 10.5);
    }
    positionSettingsPanel();
  }

  function hideSettingsPanel() {
    settingsPanel?.classList.add('d-none');
    settingsPanel?.setAttribute('aria-hidden', 'true');
  }

  function positionSettingsPanel() {
    if (!settingsPanel || settingsPanel.classList.contains('d-none') || !selectedUid || !workspace) return;
    const box = selectedPlacementBox();
    if (!box) return;
    const boxRect = box.getBoundingClientRect();
    const wsRect = workspace.getBoundingClientRect();
    let left = boxRect.right - wsRect.left + 8;
    let top = boxRect.top - wsRect.top;
    if (left + 250 > wsRect.width) left = boxRect.left - wsRect.left - 258;
    if (left < 0) left = 8;
    if (top + 300 > wsRect.height) top = wsRect.height - 310;
    settingsPanel.style.left = left + 'px';
    settingsPanel.style.top = Math.max(0, top) + 'px';
  }

  function addPlacementAtPoint(clientX, clientY, partData) {
    const hit = overlayAtPoint(clientX, clientY);
    if (!hit) return;
    const rect = hit.overlay.getBoundingClientRect();
    const xPct = ((clientX - rect.left) / rect.width) * 100;
    const yPct = ((clientY - rect.top) / rect.height) * 100;
    const w = partData.width_pct;
    const h = partData.height_pct;
    const placement = {
      _uid: uid(),
      document_id: activeDocId,
      page_number: hit.pageNumber,
      owner_type: partData.owner_type,
      signer_id: partData.signer_id || null,
      part_type: partData.part_type,
      pos_x: clamp(xPct - w / 2, 0, 100 - w),
      pos_y: clamp(yPct - h / 2, 0, 100 - h),
      width_pct: w,
      height_pct: h,
      label: partData.label,
      is_required: partData.part_type === 'seal' ? true : false,
      settings: defaultSettings(partData.part_type),
    };
    placements.push(placement);
    selectPlacement(placement._uid);
  }

  function clamp(v, min, max) { return Math.min(max, Math.max(min, v)); }
  function escapeHtml(text) {
    return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function switchDocument(docId) {
    activeDocId = docId;
    selectedUid = null;
    hideSettingsPanel();
    renderDocTabs();
    renderPalette();
    loadDocument(docId);
  }

  function serializePlacements() {
    return placements.map(function (p) {
      return {
        document_id: p.document_id,
        page_number: p.page_number,
        owner_type: p.owner_type,
        signer_id: p.signer_id,
        part_type: p.part_type,
        pos_x: p.pos_x,
        pos_y: p.pos_y,
        width_pct: p.width_pct,
        height_pct: p.height_pct,
        label: p.label || null,
        is_required: !!p.is_required,
        settings: p.settings || {},
      };
    });
  }

  canvasOuter?.addEventListener('dragover', function (e) {
    if (!e.dataTransfer.types.includes(DRAG_MIME)) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    canvasOuter.classList.add('is-drag-over');
  });
  canvasOuter?.addEventListener('dragleave', function (e) {
    if (!canvasOuter.contains(e.relatedTarget)) canvasOuter.classList.remove('is-drag-over');
  });
  pagesHost?.addEventListener('dragover', function (e) {
    if (!e.dataTransfer.types.includes(DRAG_MIME)) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    canvasOuter?.classList.add('is-drag-over');
  });
  pagesHost?.addEventListener('drop', function (e) {
    e.preventDefault();
    canvasOuter?.classList.remove('is-drag-over');
    const raw = e.dataTransfer.getData(DRAG_MIME);
    if (!raw) return;
    try {
      addPlacementAtPoint(e.clientX, e.clientY, JSON.parse(raw));
    } catch (err) { /* ignore */ }
  });

  pagesHost?.addEventListener('click', function (e) {
    if (e.target.closest('.placement-box')) return;
    if (!e.target.closest('.contract-placement-overlay')) return;
    selectedUid = null;
    hideSettingsPanel();
    renderOverlayBoxes();
  });

  document.addEventListener('mousemove', function (e) {
    if (resizeState && resizeState.overlay) {
      const rect = resizeState.overlay.getBoundingClientRect();
      const p = placements.find(function (x) { return x._uid === resizeState.uid; });
      if (p) {
        const dw = ((e.clientX - resizeState.startX) / rect.width) * 100;
        const dh = ((e.clientY - resizeState.startY) / rect.height) * 100;
        p.width_pct = clamp(resizeState.origW + dw, 3, 100 - p.pos_x);
        p.height_pct = clamp(resizeState.origH + dh, 1.8, 100 - p.pos_y);
        renderOverlayBoxes();
        positionSettingsPanel();
      }
      return;
    }
    if (!dragState || !dragState.overlay) return;
    const rect = dragState.overlay.getBoundingClientRect();
    const p = placements.find(function (x) { return x._uid === dragState.uid; });
    if (!p) return;
    const dx = ((e.clientX - dragState.startX) / rect.width) * 100;
    const dy = ((e.clientY - dragState.startY) / rect.height) * 100;
    if (Math.abs(dx) > 0.2 || Math.abs(dy) > 0.2) dragState.moved = true;
    p.pos_x = clamp(dragState.origX + dx, 0, 100 - p.width_pct);
    p.pos_y = clamp(dragState.origY + dy, 0, 100 - p.height_pct);
    renderOverlayBoxes();
    positionSettingsPanel();
  });

  document.addEventListener('mouseup', function () {
    dragState = null;
    resizeState = null;
  });

  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Delete' && e.key !== 'Backspace') return;
    if (!selectedUid) return;
    if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT')) return;
    placements = placements.filter(function (p) { return p._uid !== selectedUid; });
    selectedUid = null;
    hideSettingsPanel();
    renderOverlayBoxes();
  });

  settingsInputGuide?.addEventListener('input', function () {
    const p = selectedPlacement();
    if (!p || p.part_type !== 'text') return;
    if (!p.settings) p.settings = defaultSettings('text');
    p.settings.input_guide = settingsInputGuide.value;
    renderOverlayBoxes();
    positionSettingsPanel();
  });
  settingsDateValue?.addEventListener('change', function () {
    const p = selectedPlacement();
    if (!p || p.part_type !== 'date') return;
    if (p.settings && p.settings.auto_fill_sign_date) return;
    syncDateSettingFromPicker(p, settingsDateValue.value);
    renderOverlayBoxes();
    showSettingsPanel();
    positionSettingsPanel();
  });
  settingsRequired?.addEventListener('change', function () {
    const p = selectedPlacement();
    if (!p || (p.part_type !== 'text' && p.part_type !== 'date')) return;
    p.is_required = settingsRequired.checked;
    renderOverlayBoxes();
    positionSettingsPanel();
  });
  settingsDateAuto?.addEventListener('change', function () {
    const p = selectedPlacement();
    if (!p || p.part_type !== 'date') return;
    if (!p.settings) p.settings = defaultSettings('date');
    p.settings.auto_fill_sign_date = settingsDateAuto.checked;
    renderOverlayBoxes();
    showSettingsPanel();
    positionSettingsPanel();
  });
  settingsDateFormat?.addEventListener('change', function () {
    const p = selectedPlacement();
    if (!p || p.part_type !== 'date') return;
    if (!p.settings) p.settings = defaultSettings('date');
    p.settings.date_format = settingsDateFormat.value;
    renderOverlayBoxes();
    positionSettingsPanel();
  });
  settingsFontSize?.addEventListener('change', function () {
    const p = selectedPlacement();
    if (!p) return;
    if (!p.settings) p.settings = defaultSettings(p.part_type);
    p.settings.font_size_pt = parseFloat(settingsFontSize.value) || 10.5;
    renderOverlayBoxes();
    positionSettingsPanel();
  });

  form?.addEventListener('submit', function () {
    if (placementsInput) placementsInput.value = JSON.stringify(serializePlacements());
  });

  let resizeTimer = null;
  window.addEventListener('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
      if (pdfDoc) renderAllPages();
    }, 150);
  });

  (async function boot() {
    renderDocTabs();
    renderPalette();
    try {
      await initPdfjs();
      await loadDocument(activeDocId);
    } catch (e) {
      if (loadingEl) loadingEl.textContent = 'PDF ビューアの初期化に失敗しました';
    }
  })();
})();
</script>
@endpush