@php
  $rows = $lineFriendsRows ?? collect();
  $scenarioLabelRows = $scenarioLabelRows ?? collect();
  $qName = (string) ($lineFriendsNameQuery ?? '');
  $qLabel = (string) ($lineFriendsLabelQuery ?? '');
  $labelSuggestions = $lineFriendsLabelSuggestions ?? collect();
  $registeredLabelKeysJson = $scenarioLabelRows
    ->map(fn ($r) => mb_strtolower(trim((string) ($r['name'] ?? ''))))
    ->filter()
    ->values();
  $tz = config('app.timezone', 'Asia/Tokyo');
  $chipClasses = [
    'chip-a',
    'chip-b',
    'chip-c',
    'chip-d',
    'chip-e',
    'chip-f',
  ];
@endphp

@push('styles')
<style>
  .line-friends-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 3px 8px;
    font-weight: 600;
  }
  .line-friends-status-pill.is-active { background: #e8f7e3; color: #2b6b2f; }
  .line-friends-status-pill.is-inactive { background: #f1f3f5; color: #5f6d84; }
  .line-friends-label-chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    border: 1px solid transparent;
  }
  .line-friends-label-chip.chip-a { color: #1f4d99; background: #eaf2ff; border-color: #cfdfff; }
  .line-friends-label-chip.chip-b { color: #1c6b56; background: #e9f8f3; border-color: #c4eedf; }
  .line-friends-label-chip.chip-c { color: #7a3e00; background: #fff4e6; border-color: #ffe0ba; }
  .line-friends-label-chip.chip-d { color: #6a1d73; background: #f9eefe; border-color: #eccdfb; }
  .line-friends-label-chip.chip-e { color: #8a2b2b; background: #feeff0; border-color: #f8d0d2; }
  .line-friends-label-chip.chip-f { color: #2f4f4f; background: #edf6f6; border-color: #d2e6e6; }
  .line-friends-suggest-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .line-friends-suggest-btn {
    border: 1px solid #d6deeb;
    border-radius: 999px;
    background: #fff;
    color: #4e5f79;
    font-size: 0.74rem;
    padding: 2px 9px;
    line-height: 1.4;
  }
  .line-friends-suggest-btn:hover {
    background: #f3f7ff;
    color: #2d4f90;
  }
  .lf-tag-editor {
    background: #fff;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    padding: 6px 8px;
  }
  .lf-tag-editor .lf-tag-input {
    flex: 1 0 120px;
    min-width: 8em;
    border: 0;
    outline: 0;
    font-size: 0.9rem;
    padding: 4px 2px;
    background: transparent;
  }
  .lf-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    font-size: 0.8rem;
    padding: 2px 4px 2px 8px;
    line-height: 1.3;
  }
  .lf-tag-pill .lf-tag-remove {
    border: 0;
    background: rgba(0,0,0,0.08);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    font-size: 0.9rem;
    color: #555;
  }
  .lf-tag-pill .lf-tag-remove:hover { background: rgba(0,0,0,0.15); }
  .lf-mode-hint { font-size: 0.8rem; color: #6c757d; }
  .lf-tag-pill.lf-tag-orphan {
    border: 1px dashed #c92a2a;
    background: #fff5f5;
  }
  .lf-tag-chips-only {
    min-height: 48px;
    padding: 8px 10px;
  }
  .line-friends-suggest-btn:disabled,
  .line-friends-suggest-btn.is-active-label {
    opacity: 0.45;
    pointer-events: none;
  }
</style>
@endpush

@include('account.scenario.partials._line_webhook_delivery_alert', ['lineAccount' => $lineAccount ?? null])

<div class="card scenario-ws-card mb-3">
  <div class="card-body">
    <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-2">
      <h2 class="h5 mb-0">LINE友だち</h2>
      <form method="post" action="{{ route('scenario.workspace.line-followers.sync', [$account, $scenario]) }}" class="d-inline">
        @csrf
        <input type="hidden" name="return_slug" value="line-friends">
        <button type="submit" class="btn btn-sm btn-outline-success">LINE公式の友だちを取り込む</button>
      </form>
    </div>
    @php
      $officialFollowers = isset($lineAccount) && $lineAccount instanceof \App\Models\DeliveryAccount
        ? $lineAccount->line_followers_count
        : null;
      $friendsRowCount = ($lineFriendsRows ?? collect())->count();
    @endphp
    @if($officialFollowers !== null && (int) $officialFollowers > 0 && $friendsRowCount === 0)
      <div class="alert alert-warning small py-2 mb-3" role="alert">
        LINE 公式では友だち <strong>{{ number_format((int) $officialFollowers) }}</strong> 人ですが、monaka にはまだ <strong>0 件</strong> です（一覧は Webhook または取り込みで userId が入った人だけ出ます）。上の <strong>取り込む</strong> を試すか、テスト用 LINE から公式へメッセージを送ってください。
      </div>
    @endif
    <p class="text-muted small mb-3">LINE 公式にいる友だちを monaka に取り込めます（上のボタン、または LINE設定の STEP 3 確認時）。Webhook だけ来ていて<strong>読者に未登録</strong>の友だちでも、ラベル編集・配信切替をすると<strong>読者が自動で作成</strong>されます。</p>
    <div class="alert alert-light border small py-2 mb-3">
      ラベル名を毎回思い出さなくてよいよう、<a href="{{ route('scenario.workspace.show', [$account, $scenario, 'label-settings']) }}" class="alert-link">ラベル設定</a>でこのシナリオ用の一覧を登録できます。候補ボタンでは登録名が先頭に出ます。
    </div>

    <div class="border rounded-3 p-3 mb-3 bg-light-subtle">
      <div class="small text-muted mb-2">表示条件</div>
      <form method="get" action="{{ route('scenario.workspace.show', [$account, $scenario, 'line-friends']) }}" class="row g-2 align-items-end">
        <div class="col-12 col-md-4">
          <label class="form-label small mb-1">LINE登録名</label>
          <input type="text" name="q_name" class="form-control form-control-sm" value="{{ $qName }}" placeholder="部分一致で検索">
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label small mb-1">ラベル</label>
          <input type="text" name="q_label" class="form-control form-control-sm" value="{{ $qLabel }}" placeholder="ラベルを検索" list="line-friends-label-filter-suggestions">
          <datalist id="line-friends-label-filter-suggestions">
            @foreach($labelSuggestions as $suggestion)
              <option value="{{ $suggestion }}"></option>
            @endforeach
          </datalist>
        </div>
        <div class="col-12 col-md-4 d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm">絞り込み</button>
          @if($qName !== '' || $qLabel !== '')
            <a href="{{ route('scenario.workspace.show', [$account, $scenario, 'line-friends']) }}" class="btn btn-outline-secondary btn-sm">解除</a>
          @endif
        </div>
      </form>
      @if($labelSuggestions->isNotEmpty())
        <div class="mt-2">
          <div class="small text-muted mb-1">よく使うラベル</div>
          <div class="line-friends-suggest-wrap">
            @foreach($labelSuggestions->take(10) as $suggestion)
              <button type="button" class="line-friends-suggest-btn" data-fill-filter-label="{{ $suggestion }}">{{ $suggestion }}</button>
            @endforeach
          </div>
        </div>
      @endif
    </div>

    <div class="border rounded-3">
      <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
        <div class="fw-semibold">友だち一覧</div>
        <button type="button" class="btn btn-outline-secondary btn-sm" disabled title="準備中">CSV出力</button>
      </div>
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="min-width:220px;">LINE登録名</th>
              <th style="min-width:170px;">ステータス</th>
              <th style="min-width:180px;">ラベル</th>
              <th style="min-width:160px;">登録経路</th>
              <th style="min-width:140px;">登録日</th>
              <th style="width:56px;"></th>
            </tr>
          </thead>
          <tbody>
            @forelse($rows as $row)
              @php
                $isSubscriberActive = ($row['subscriber_status'] ?? null) === 'active';
              @endphp
              <tr>
                <td>
                  <div class="d-flex align-items-center gap-2">
                    @if(!empty($row['avatar_url']))
                      <img src="{{ $row['avatar_url'] }}" alt="" width="28" height="28" class="rounded-circle" loading="lazy" decoding="async" referrerpolicy="no-referrer">
                    @else
                      <span class="rounded-circle bg-secondary-subtle d-inline-flex align-items-center justify-content-center" style="width:28px;height:28px;">👤</span>
                    @endif
                    <div class="min-w-0">
                      <div class="text-truncate">{{ $row['display_name'] }}</div>
                      <div class="text-muted small text-truncate">{{ $row['line_user_id'] }}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="mb-1">
                    <span class="line-friends-status-pill {{ $isSubscriberActive ? 'is-active' : 'is-inactive' }}">
                      {{ $isSubscriberActive ? '配信対象' : '配信除外' }}
                    </span>
                  </div>
                  <div class="text-muted small">{{ $row['status_text'] }}</div>
                </td>
                <td>
                  @if(!empty($row['labels']) && is_array($row['labels']))
                    @foreach($row['labels'] as $label)
                      @php
                        $hash = crc32((string) $label);
                        $class = $chipClasses[abs((int) $hash) % count($chipClasses)];
                      @endphp
                      <span class="line-friends-label-chip {{ $class }}">{{ $label }}</span>
                    @endforeach
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
                <td>{{ $row['registration_route'] }}</td>
                <td>
                  @if($row['registered_at'])
                    {{ $row['registered_at']->timezone($tz)->format('Y-m-d H:i:s') }}
                  @else
                    —
                  @endif
                </td>
                <td class="text-end">
                  <div class="dropdown">
                    <button class="btn btn-sm btn-light border" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="操作">
                      <i class="bi bi-three-dots-vertical"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                      <li>
                        <a class="dropdown-item" href="{{ route('scenario.workspace.show', ['account' => $account, 'scenario' => $scenario, 'slug' => 'line-chat', 'u' => $row['line_user_id']]) }}">チャットを開く</a>
                      </li>
                      <li>
                        <button
                          type="button"
                          class="dropdown-item"
                          data-bs-toggle="modal"
                          data-bs-target="#lineFriendsLabelModal"
                          data-line-user-id="{{ $row['line_user_id'] }}"
                          data-display-name="{{ $row['display_name'] }}"
                          data-labels="{{ implode(', ', (array) ($row['labels'] ?? [])) }}"
                          data-label-mode="replace"
                        >ラベルを編集</button>
                      </li>
                      <li>
                        <button
                          type="button"
                          class="dropdown-item"
                          data-bs-toggle="modal"
                          data-bs-target="#lineFriendsLabelModal"
                          data-line-user-id="{{ $row['line_user_id'] }}"
                          data-display-name="{{ $row['display_name'] }}"
                          data-labels="{{ implode(', ', (array) ($row['labels'] ?? [])) }}"
                          data-label-mode="append"
                        >ラベルを追加</button>
                      </li>
                      <li>
                        <form method="post" action="{{ route('scenario.workspace.line-friends.delivery', [$account, $scenario]) }}">
                          @csrf
                          <input type="hidden" name="line_user_id" value="{{ $row['line_user_id'] }}">
                          <input type="hidden" name="to_status" value="{{ $isSubscriberActive ? 'inactive' : 'active' }}">
                          @if($qName !== '')<input type="hidden" name="q_name" value="{{ $qName }}">@endif
                          @if($qLabel !== '')<input type="hidden" name="q_label" value="{{ $qLabel }}">@endif
                          <button type="submit" class="dropdown-item">
                            {{ $isSubscriberActive ? '配信除外にする' : '配信対象にする' }}
                          </button>
                        </form>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="6" class="text-center text-muted py-4">該当する友だちがありません。</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="lineFriendsLabelModal" tabindex="-1" aria-labelledby="lineFriendsLabelModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{{ route('scenario.workspace.line-friends.labels', [$account, $scenario]) }}">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="lineFriendsLabelModalLabel">ラベルを編集</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="line_user_id" id="line-friends-label-line-user-id" value="">
          <input type="hidden" name="label_edit_mode" id="line-friends-label-edit-mode" value="replace">
          <input type="hidden" name="labels" id="line-friends-labels-hidden" value="">
          @if($qName !== '')<input type="hidden" name="q_name" value="{{ $qName }}">@endif
          @if($qLabel !== '')<input type="hidden" name="q_label" value="{{ $qLabel }}">@endif
          <div class="mb-2 small text-muted">
            対象: <span id="line-friends-label-display-name">—</span>
          </div>
          <div class="btn-group w-100 mb-2" role="group" aria-label="ラベル編集モード">
            <button type="button" class="btn btn-sm btn-outline-primary active" id="lf-mode-replace" data-lf-mode="replace">一覧を編集</button>
            <button type="button" class="btn btn-sm btn-outline-primary" id="lf-mode-append" data-lf-mode="append">追加のみ</button>
          </div>
          <p class="lf-mode-hint mb-2" id="lf-mode-hint-replace">登録ラベルをクリックで付与、チップの × で外します。赤枠は「ラベル設定」未登録の名残です（保存時に外れます）。</p>
          <p class="lf-mode-hint mb-2 d-none" id="lf-mode-hint-append">下の登録ラベルをクリックして、<strong>既存の付与に足します</strong>（最大20件・重複は除外）。</p>
          <div id="lf-orphan-hint" class="alert alert-warning small py-2 d-none mb-2">太枠のラベルは登録一覧にないため、保存すると付与から外れます。外すか、<a href="{{ route('scenario.workspace.show', [$account, $scenario, 'label-settings']) }}" class="alert-link">ラベル設定</a>に同じ名前を登録してから保存してください。</div>
          <label class="form-label">付与するラベル</label>
          <div class="lf-tag-editor lf-tag-chips-only border rounded mb-1" id="lf-tag-editor">
            <div id="lf-tag-chips" class="d-flex flex-wrap align-items-center gap-1"></div>
          </div>
          <div class="form-text">「ラベル設定」に登録したラベルからのみ選べます。最大20件まで。</div>
          @if($scenarioLabelRows->isNotEmpty())
            <div class="mt-3">
              <div class="small text-muted mb-1">このシナリオで登録したラベル</div>
              <div class="line-friends-suggest-wrap" id="lf-registered-palette">
                @foreach($scenarioLabelRows as $reg)
                  <button type="button" class="line-friends-suggest-btn lf-suggest-add" data-add-label="{{ $reg['name'] }}">{{ $reg['name'] }}</button>
                @endforeach
              </div>
            </div>
          @else
            <div class="mt-3 alert alert-light border small mb-0">
              登録ラベルがありません。先に <a href="{{ route('scenario.workspace.show', [$account, $scenario, 'label-settings']) }}">ラベル設定</a> で追加してください。
            </div>
          @endif
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  var chipClasses = @json($chipClasses);
  var registeredKeys = new Set(@json($registeredLabelKeysJson));
  var maxLabels = 20;
  var chips = [];
  var snapshotReplaceLabels = [];

  function labelKey(s) {
    return String(s || '').trim().toLowerCase();
  }

  function chipClassFor(label) {
    var h = 0;
    var str = String(label);
    for (var i = 0; i < str.length; i++) {
      h = ((h << 5) - h) + str.charCodeAt(i);
      h |= 0;
    }
    return chipClasses[Math.abs(h) % chipClasses.length];
  }

  function syncHidden() {
    var el = document.getElementById('line-friends-labels-hidden');
    if (el) {
      el.value = chips.join(', ');
    }
  }

  function updatePaletteButtons() {
    document.querySelectorAll('#lf-registered-palette .lf-suggest-add').forEach(function (btn) {
      var add = btn.getAttribute('data-add-label') || '';
      var on = chips.some(function (c) { return labelKey(c) === labelKey(add); });
      btn.classList.toggle('is-active-label', on);
      btn.disabled = on || chips.length >= maxLabels;
    });
  }

  function renderChips() {
    var wrap = document.getElementById('lf-tag-chips');
    if (!wrap) { return; }
    wrap.innerHTML = '';
    var orphanHint = document.getElementById('lf-orphan-hint');
    var anyOrphan = false;
    chips.forEach(function (text) {
      var pill = document.createElement('span');
      var isOrphan = !registeredKeys.has(labelKey(text));
      if (isOrphan) { anyOrphan = true; }
      pill.className = 'lf-tag-pill line-friends-label-chip ' + chipClassFor(text) + (isOrphan ? ' lf-tag-orphan' : '');
      pill.appendChild(document.createTextNode(text));
      var rm = document.createElement('button');
      rm.type = 'button';
      rm.className = 'lf-tag-remove';
      rm.setAttribute('aria-label', '削除');
      rm.appendChild(document.createTextNode('×'));
      rm.addEventListener('click', function () {
        chips = chips.filter(function (c) { return c !== text; });
        renderChips();
      });
      pill.appendChild(rm);
      wrap.appendChild(pill);
    });
    if (orphanHint) {
      orphanHint.classList.toggle('d-none', !anyOrphan);
    }
    syncHidden();
    updatePaletteButtons();
  }

  function addChip(raw) {
    var t = String(raw || '').trim();
    if (!t) { return; }
    var key = labelKey(t);
    if (!registeredKeys.has(key)) {
      return;
    }
    var exists = chips.some(function (c) { return labelKey(c) === key; });
    if (exists) { return; }
    if (chips.length >= maxLabels) { return; }
    chips.push(t);
    renderChips();
  }

  function setMode(mode) {
    var currentMode = mode || 'replace';
    var hiddenMode = document.getElementById('line-friends-label-edit-mode');
    if (hiddenMode) {
      hiddenMode.value = currentMode === 'append' ? 'append' : 'replace';
    }
    var br = document.getElementById('lf-mode-replace');
    var ba = document.getElementById('lf-mode-append');
    if (br && ba) {
      br.classList.toggle('active', currentMode !== 'append');
      ba.classList.toggle('active', currentMode === 'append');
    }
    var hr = document.getElementById('lf-mode-hint-replace');
    var ha = document.getElementById('lf-mode-hint-append');
    if (hr && ha) {
      hr.classList.toggle('d-none', currentMode === 'append');
      ha.classList.toggle('d-none', currentMode !== 'append');
    }
  }

  function parseInitialLabels(str) {
    if (!str) { return []; }
    return str.split(/[\n,、]+/).map(function (v) { return v.trim(); }).filter(Boolean);
  }

  var modal = document.getElementById('lineFriendsLabelModal');
  var labelForm = modal ? modal.querySelector('form') : null;

  if (modal) {
    modal.addEventListener('show.bs.modal', function (event) {
      var trigger = event.relatedTarget;
      if (!trigger) { return; }
      var uid = trigger.getAttribute('data-line-user-id') || '';
      var displayName = trigger.getAttribute('data-display-name') || '';
      var labelsRaw = trigger.getAttribute('data-labels') || '';
      var mode = trigger.getAttribute('data-label-mode') || 'replace';
      var uidInput = document.getElementById('line-friends-label-line-user-id');
      var display = document.getElementById('line-friends-label-display-name');
      if (uidInput) { uidInput.value = uid; }
      if (display) { display.textContent = displayName; }
      snapshotReplaceLabels = parseInitialLabels(labelsRaw);
      chips = [];
      if (mode === 'append') {
        setMode('append');
        renderChips();
      } else {
        setMode('replace');
        snapshotReplaceLabels.forEach(function (t) {
          var t2 = String(t || '').trim();
          if (!t2) { return; }
          var key = labelKey(t2);
          var exists = chips.some(function (c) { return labelKey(c) === key; });
          if (exists) { return; }
          if (chips.length >= maxLabels) { return; }
          chips.push(t2);
        });
        renderChips();
      }
    });
  }

  if (labelForm) {
    labelForm.addEventListener('submit', function () {
      syncHidden();
    });
  }

  var btnRep = document.getElementById('lf-mode-replace');
  if (btnRep) {
    btnRep.addEventListener('click', function () {
      chips = [];
      snapshotReplaceLabels.forEach(function (t) {
        var t2 = String(t || '').trim();
        if (!t2) { return; }
        var key = labelKey(t2);
        var exists = chips.some(function (c) { return labelKey(c) === key; });
        if (exists) { return; }
        if (chips.length >= maxLabels) { return; }
        chips.push(t2);
      });
      setMode('replace');
      renderChips();
    });
  }
  var btnApp = document.getElementById('lf-mode-append');
  if (btnApp) {
    btnApp.addEventListener('click', function () {
      chips = [];
      renderChips();
      setMode('append');
    });
  }

  document.querySelectorAll('#lf-registered-palette .lf-suggest-add').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var add = btn.getAttribute('data-add-label') || '';
      addChip(add);
    });
  });

  document.querySelectorAll('[data-fill-filter-label]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var input = document.querySelector('input[name="q_label"]');
      if (!input) { return; }
      input.value = btn.getAttribute('data-fill-filter-label') || '';
    });
  });
});
</script>
@endpush