@extends('layouts.setup')
@section('title', '通知設定')
@section('page-title', '通知設定')

@push('styles')
<style>
  .notify-chatwork-account { border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; background: #fafbfc; }
  .notify-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
  .notify-room-grid .input-group .btn { padding-left: 0.45rem; padding-right: 0.45rem; }
</style>
@endpush

@section('setup_body')
{{-- フラッシュは layouts.app が全画面共通で表示する（二重表示防止）。 --}}

<div class="alert alert-light border small mb-3">
  申込やエラーなどの通知を <strong>Chatwork</strong> で受け取る設定です（アカウント最大 {{ $maxAccounts }} 件・1アカウントあたりルームID最大 {{ $maxRooms }} 件）。どのタイミングで通知するかは、各機能の画面で設定します。
</div>

<form method="POST" action="{{ route('setting.notification.update') }}" id="notification-settings-form">
  @csrf
  @method('PUT')

  <div class="setup-form-card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
      <span class="fw-semibold">Chatwork 連携</span>
      <button type="button" class="btn btn-sm btn-outline-primary" id="btn-add-chatwork-account" @if(count($chatworkRows) >= $maxAccounts) disabled @endif>
        <i class="bi bi-plus-lg me-1"></i>アカウントを追加
      </button>
    </div>
    <div class="card-body" id="chatwork-accounts-wrap">
      @foreach($chatworkRows as $ai => $row)
        @include('setting.partials._notification_chatwork_account', [
          'accountIndex' => $ai,
          'accountRow' => $row,
          'maxRooms' => $maxRooms,
        ])
      @endforeach
    </div>
  </div>

  <button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-1"></i>保存</button>
</form>

<template id="chatwork-account-template">
  @include('setting.partials._notification_chatwork_account', [
    'accountIndex' => '__INDEX__',
    'accountRow' => \App\Support\OperatorNotificationChatworkNormalizer::emptyRow(),
    'maxRooms' => $maxRooms,
  ])
</template>
@endsection

@push('scripts')
<script>
(function () {
  const maxAccounts = {{ (int) $maxAccounts }};
  const maxRooms = {{ (int) $maxRooms }};
  const wrap = document.getElementById('chatwork-accounts-wrap');
  const addBtn = document.getElementById('btn-add-chatwork-account');
  const tpl = document.getElementById('chatwork-account-template');
  const testUrl = @json(route('setting.notification.test'));
  const csrf = document.querySelector('#notification-settings-form input[name="_token"]')?.value || '';

  function attrEscape(s) {
    return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  function roomSlotLabelEl(block, accountIndex, roomIndex) {
    return block.querySelector('.js-cw-room-slot-label[data-account="' + accountIndex + '"][data-room="' + roomIndex + '"]');
  }

  function setSlotLabelDisplay(block, ai, ri, item) {
    const el = roomSlotLabelEl(block, ai, ri);
    if (!el) return;
    const display = item && item.display ? item.display : '';
    if (!display) {
      el.textContent = '';
      el.style.display = 'none';
      el.className = 'js-cw-room-slot-label small text-muted mt-1';
      return;
    }
    el.textContent = display;
    el.style.display = 'block';
    if (item.status === 'error') {
      el.className = 'js-cw-room-slot-label small text-danger fw-semibold mt-1';
    } else {
      el.className = 'js-cw-room-slot-label small text-success mt-1';
    }
  }

  function applySlotLabels(block, slotLabels) {
    if (!slotLabels || !Array.isArray(slotLabels)) return;
    const ai = block.dataset.accountIndex;
    slotLabels.forEach(function (item, idx) {
      setSlotLabelDisplay(block, ai, String(idx), item);
    });
    refreshTestRoomSelect(block);
  }

  function refreshTestRoomSelect(block) {
    const select = block.querySelector('.js-cw-test-room-select');
    if (!select) return;
    const ai = block.dataset.accountIndex;
    const options = [];
    block.querySelectorAll('.js-cw-room-input[data-account="' + ai + '"]').forEach(function (el) {
      const ri = el.dataset.room;
      const v = (el.value || '').trim();
      if (v !== '') {
        const labelEl = roomSlotLabelEl(block, ai, ri);
        const roomName = labelEl && labelEl.style.display !== 'none' && labelEl.classList.contains('text-success')
          ? (labelEl.textContent || '').trim() : '';
        let text = (parseInt(ri, 10) + 1) + '件目';
        if (roomName) {
          const shortName = roomName.length > 14 ? roomName.slice(0, 14) + '…' : roomName;
          text += '（' + shortName + '）';
        } else {
          const short = v.length > 14 ? v.slice(0, 14) + '…' : v;
          text += '（' + short + '）';
        }
        options.push({
          value: ri,
          roomId: v,
          label: text,
        });
      }
    });
    const prev = select.value;
    if (options.length === 0) {
      select.innerHTML = '<option value="0" data-room-id="">1件目</option>';
      return;
    }
    select.innerHTML = options.map(function (o) {
      return '<option value="' + o.value + '" data-room-id="' + attrEscape(o.roomId) + '">' + o.label + '</option>';
    }).join('');
    if (options.some(function (o) { return o.value === prev; })) {
      select.value = prev;
    }
  }

  function showTestResult(block, data) {
    const el = block.querySelector('.js-chatwork-test-result');
    if (!el) return;
    if (data.ok) {
      let html = 'テスト通知を送信しました。';
      if (data.room_name) {
        html += ' <span class="fw-semibold">ルーム名: ' + attrEscape(data.room_name) + '</span>';
      }
      if (data.room_id) {
        html += ' <span class="text-muted">（ルーム ID: ' + attrEscape(data.room_id) + '）</span>';
      }
      el.className = 'js-chatwork-test-result small mt-2 text-success';
      el.innerHTML = html;
    } else {
      el.className = 'js-chatwork-test-result small mt-2 text-danger';
      el.textContent = data.error || 'テスト送信に失敗しました。';
    }
    el.style.display = 'block';
  }

  function clearTestResult(block) {
    const el = block.querySelector('.js-chatwork-test-result');
    if (!el) return;
    el.style.display = 'none';
    el.textContent = '';
    el.innerHTML = '';
  }

  function selectedTestRoom(block) {
    const select = block.querySelector('.js-cw-test-room-select');
    const opt = select && select.selectedOptions && select.selectedOptions[0];
    if (!opt) {
      return { slot: '0', roomId: '' };
    }
    return {
      slot: opt.value || '0',
      roomId: (opt.getAttribute('data-room-id') || '').trim(),
    };
  }

  function reindexAccounts() {
    const blocks = wrap.querySelectorAll('.notify-chatwork-account');
    blocks.forEach(function (block, i) {
      block.dataset.accountIndex = String(i);
      block.querySelector('.fw-semibold.small').textContent = 'Chatwork アカウント ' + (i + 1);
      block.querySelectorAll('[form="notification-settings-form"], .js-clear-chatwork-room, .js-cw-room-slot-label').forEach(function (el) {
        const name = el.getAttribute('name');
        if (name) {
          el.setAttribute('name', name.replace(/chatwork_accounts\[\d+\]/, 'chatwork_accounts[' + i + ']'));
        }
        if (el.dataset.account !== undefined) {
          el.dataset.account = String(i);
        }
      });
      block.querySelectorAll('.js-chatwork-test-submit').forEach(function (btn) {
        btn.dataset.account = String(i);
      });
      const testBar = block.querySelector('.js-chatwork-test-bar');
      if (testBar) {
        testBar.id = 'chatwork-test-bar-' + i;
      }
      refreshTestRoomSelect(block);
    });
    if (addBtn) addBtn.disabled = blocks.length >= maxAccounts;
  }

  function roomInput(block, accountIndex, roomIndex) {
    return block.querySelector('.js-cw-room-input[data-account="' + accountIndex + '"][data-room="' + roomIndex + '"]');
  }

  function collectAccountPayload(accountIndex) {
    const block = wrap.querySelector('.notify-chatwork-account[data-account-index="' + accountIndex + '"]');
    if (!block) return null;
    const payload = { api_token: '', name: '', room_ids: [], account_id: '' };
    block.querySelectorAll('.js-cw-field[data-account="' + accountIndex + '"]').forEach(function (el) {
      if (el.classList.contains('js-cw-room-input')) return;
      const name = el.getAttribute('name') || '';
      if (name.indexOf('[api_token]') !== -1) payload.api_token = el.value;
      if (name.indexOf('[name]') !== -1) payload.name = el.value;
    });
    for (let ri = 0; ri < maxRooms; ri++) {
      const el = roomInput(block, accountIndex, String(ri));
      payload.room_ids[ri] = el ? el.value : '';
    }
    const idEl = block.querySelector('.js-cw-account-id')
      || block.querySelector('input[name^="chatwork_accounts"][name$="[id]"]');
    if (idEl) payload.account_id = idEl.value;
    return payload;
  }

  wrap?.addEventListener('input', function (e) {
    const field = e.target.closest('.js-cw-room-input');
    if (field) {
      const block = field.closest('.notify-chatwork-account');
      if (block) {
        setSlotLabelDisplay(block, field.dataset.account, field.dataset.room, null);
        refreshTestRoomSelect(block);
        clearTestResult(block);
      }
    }
  });

  wrap?.addEventListener('change', function (e) {
    if (e.target.closest('.js-cw-test-room-select')) {
      const block = e.target.closest('.notify-chatwork-account');
      if (block) clearTestResult(block);
    }
  });

  wrap?.addEventListener('click', function (e) {
    const clearBtn = e.target.closest('.js-clear-chatwork-room');
    if (clearBtn) {
      e.preventDefault();
      const block = clearBtn.closest('.notify-chatwork-account');
      const input = roomInput(block, clearBtn.dataset.account, clearBtn.dataset.room);
      if (input) {
        input.value = '';
        setSlotLabelDisplay(block, clearBtn.dataset.account, clearBtn.dataset.room, null);
        input.dispatchEvent(new Event('input', { bubbles: true }));
      }
      return;
    }

    const testBtn = e.target.closest('.js-chatwork-test-submit');
    if (testBtn) {
      e.preventDefault();
      const ai = testBtn.dataset.account;
      const block = wrap.querySelector('.notify-chatwork-account[data-account-index="' + ai + '"]');
      const payload = collectAccountPayload(ai);
      if (!payload || !block) return;

      clearTestResult(block);
      const picked = selectedTestRoom(block);
      let testRoomId = picked.roomId;
      if (!testRoomId) {
        const roomInputEl = roomInput(block, ai, picked.slot);
        testRoomId = (roomInputEl?.value || '').trim();
      }
      const roomIdx = picked.slot;

      const body = new FormData();
      body.append('_token', csrf);
      body.append('test_room_index', roomIdx || '0');
      body.append('test_room_id', testRoomId);
      body.append('api_token', payload.api_token || '');
      if (payload.account_id) body.append('account_id', payload.account_id);
      for (let idx = 0; idx < maxRooms; idx++) {
        body.append('room_ids[' + idx + ']', (payload.room_ids[idx] || '').trim());
      }

      testBtn.disabled = true;
      fetch(testUrl, {
        method: 'POST',
        body: body,
        credentials: 'same-origin',
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      })
        .then(function (res) {
          const ct = res.headers.get('content-type') || '';
          if (ct.indexOf('application/json') === -1) {
            if (res.status === 419) {
              throw new Error('セッションの有効期限が切れました。画面を再読み込みしてから再度お試しください。');
            }
            throw new Error('テスト送信に失敗しました（HTTP ' + res.status + '）。');
          }
          return res.json().then(function (data) {
            if (!res.ok) {
              const err = data.error || data.message
                || (data.errors && Object.values(data.errors).flat().find(Boolean));
              throw new Error(err || ('テスト送信に失敗しました（HTTP ' + res.status + '）。'));
            }
            return data;
          });
        })
        .then(function (data) {
          if (data.slot_labels) {
            applySlotLabels(block, data.slot_labels);
          }
          showTestResult(block, data);
        })
        .catch(function (err) {
          showTestResult(block, { ok: false, error: err && err.message ? err.message : 'テスト送信に失敗しました。' });
        })
        .finally(function () { testBtn.disabled = false; });
      return;
    }

    const btn = e.target.closest('.js-remove-chatwork-account');
    if (!btn) return;
    const block = btn.closest('.notify-chatwork-account');
    if (block && wrap.querySelectorAll('.notify-chatwork-account').length > 1) {
      block.remove();
      reindexAccounts();
    }
  });

  addBtn?.addEventListener('click', function () {
    const n = wrap.querySelectorAll('.notify-chatwork-account').length;
    if (n >= maxAccounts || !tpl) return;
    const html = tpl.innerHTML.replace(/__INDEX__/g, String(n)).replace(/__NUM__/g, String(n + 1));
    wrap.insertAdjacentHTML('beforeend', html);
    reindexAccounts();
  });

  reindexAccounts();
})();
</script>
@endpush