@php
  $mailRows = $mailRegistrationRoutes ?? collect();
  $lineRows = $lineRegistrationRoutes ?? collect();
  $activeTab = $activeRegistrationRoutesTab ?? 'email';
  if (! $hasMailChannel && $hasLineChannel) {
    $activeTab = 'line';
  } elseif ($hasMailChannel && ! $hasLineChannel) {
    $activeTab = 'email';
  }
  $showMailTab = $hasMailChannel ?? true;
  $showLineTab = $hasLineChannel ?? true;
  $funnelRouteUsagesByToken = $funnelRouteUsagesByToken ?? [];
@endphp

<div class="card scenario-ws-card mb-3">
  <div class="card-body">
    <h2 class="h5 mb-2">登録経路</h2>
    <p class="text-muted small mb-3">
      媒体・LP ごとに<strong>入口 URL を分ける</strong>設定です。読者の <code>registration_route</code> に判別用の値が入ります。
      <strong>メール</strong>は <code>/r/{uid}/register?rt=…</code> からの登録、<strong>LINE</strong>は <code>/line/open/{uid}?rt=…</code> を開いてから友だち追加した流れで付与します。
    </p>

    @if(session('success'))
      <div class="alert alert-success py-2 small mb-3">{{ session('success') }}</div>
    @endif
    @if(session('error'))
      <div class="alert alert-danger py-2 small mb-3">{{ session('error') }}</div>
    @endif
    @if($errors->any())
      <div class="alert alert-danger py-2 small mb-3">
        <ul class="mb-0 ps-3">
          @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    @if($showMailTab && $showLineTab)
      <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link {{ $activeTab === 'email' ? 'active' : '' }}" id="reg-routes-mail-tab" data-bs-toggle="tab" data-bs-target="#reg-routes-mail-pane" type="button" role="tab" aria-controls="reg-routes-mail-pane" aria-selected="{{ $activeTab === 'email' ? 'true' : 'false' }}">
            <i class="bi bi-envelope me-1"></i>メールの登録経路
            <span class="badge text-bg-secondary ms-1">{{ $mailRows->count() }}</span>
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link {{ $activeTab === 'line' ? 'active' : '' }}" id="reg-routes-line-tab" data-bs-toggle="tab" data-bs-target="#reg-routes-line-pane" type="button" role="tab" aria-controls="reg-routes-line-pane" aria-selected="{{ $activeTab === 'line' ? 'true' : 'false' }}">
            <i class="bi bi-chat-dots me-1"></i>LINEの登録経路
            <span class="badge text-bg-secondary ms-1">{{ $lineRows->count() }}</span>
          </button>
        </li>
      </ul>
      <div class="tab-content">
    @endif

    @if($showMailTab)
      <div class="{{ ($showMailTab && $showLineTab) ? 'tab-pane fade'.($activeTab === 'email' ? ' show active' : '') : '' }}" id="reg-routes-mail-pane" role="tabpanel" aria-labelledby="reg-routes-mail-tab" tabindex="0">
        <div class="border rounded-3 p-3 mb-4 bg-light-subtle">
          <div class="fw-semibold small mb-2">メール経路を追加</div>
          <form method="post" action="{{ route('scenario.workspace.registration-routes.store', [$account, $scenario]) }}" class="row g-2 align-items-end">
            @csrf
            <input type="hidden" name="channel_type" value="email">
            <input type="hidden" name="active_tab" value="email">
            <div class="col-12 col-md-8">
              <label class="form-label small mb-1">管理名称</label>
              <input type="text" name="admin_name" class="form-control form-control-sm" value="{{ old('active_tab') === 'email' ? old('admin_name') : '' }}" maxlength="191" placeholder="例: ブログ記事下の登録ボタン" required>
            </div>
            <div class="col-12 col-md-4">
              <button type="submit" class="btn btn-success btn-sm w-100 w-md-auto"><i class="bi bi-plus-lg me-1"></i>追加</button>
            </div>
          </form>
        </div>

        <div class="border rounded-3">
          <div class="px-3 py-2 border-bottom fw-semibold small">メール経路一覧（表示順）</div>
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th style="min-width:10rem;">管理名称</th>
                  <th style="min-width:14rem;">入口 URL</th>
                  <th style="min-width:12rem;">ファネルでの使用</th>
                  <th style="width:7rem;">表示順</th>
                  <th style="width:5rem;"></th>
                </tr>
              </thead>
              <tbody>
                @forelse($mailRows as $row)
                  @php
                    $mailUrl = route('public.scenario.register.show', ['uid' => $scenario->uid, 'rt' => $row->public_token]);
                    $funnelUsages = $funnelRouteUsagesByToken[$row->public_token] ?? [];
                    if ($funnelUsages !== []) {
                      $usageLines = [];
                      foreach ($funnelUsages as $fu) {
                        $usageLines[] = 'ファネル：'.$fu['funnel_name'].'　◀◀'.$fu['page_name'].'にて本経路を使用中です。';
                      }
                      $mailDeleteConfirm = implode("\n", $usageLines)."\n\n削除しますか？\n削除した場合、対象ページの経路は経路なしの設定になります";
                    } else {
                      $mailDeleteConfirm = 'この登録経路を削除しますか？（既存読者の registration_route 文字列は変わりません）';
                    }
                  @endphp
                  <tr>
                    <td>
                      <form method="post" action="{{ route('scenario.workspace.registration-routes.update', [$account, $scenario, $row]) }}" class="d-flex flex-wrap gap-1 align-items-center">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="active_tab" value="email">
                        <input type="text" name="admin_name" class="form-control form-control-sm flex-grow-1" style="min-width:8rem;" value="{{ $row->admin_name }}" maxlength="191" required>
                        <button type="submit" class="btn btn-outline-secondary btn-sm text-nowrap">保存</button>
                      </form>
                    </td>
                    <td class="small">
                      <div class="text-break"><code>{{ $mailUrl }}</code></div>
                      <button type="button" class="btn btn-link btn-sm p-0 align-baseline js-copy-url" data-copy="{{ $mailUrl }}">URLをコピー</button>
                    </td>
                    <td class="small">
                      @if($funnelUsages === [])
                        <span class="text-muted">—</span>
                      @else
                        <ul class="mb-0 ps-3">
                          @foreach($funnelUsages as $fu)
                            <li>ファネル：<strong>{{ $fu['funnel_name'] }}</strong>　◀◀<strong>{{ $fu['page_name'] }}</strong></li>
                          @endforeach
                        </ul>
                      @endif
                    </td>
                    <td>
                      <div class="d-flex gap-1">
                        <form method="post" action="{{ route('scenario.workspace.registration-routes.move', [$account, $scenario, $row]) }}" class="d-inline">
                          @csrf
                          <input type="hidden" name="dir" value="up">
                          <input type="hidden" name="active_tab" value="email">
                          <button type="submit" class="btn btn-light border btn-sm px-2" title="上へ">↑</button>
                        </form>
                        <form method="post" action="{{ route('scenario.workspace.registration-routes.move', [$account, $scenario, $row]) }}" class="d-inline">
                          @csrf
                          <input type="hidden" name="dir" value="down">
                          <input type="hidden" name="active_tab" value="email">
                          <button type="submit" class="btn btn-light border btn-sm px-2" title="下へ">↓</button>
                        </form>
                      </div>
                    </td>
                    <td class="text-end">
                      <form method="post" action="{{ route('scenario.workspace.registration-routes.destroy', [$account, $scenario, $row]) }}" class="d-inline" onsubmit="return confirm({{ json_encode($mailDeleteConfirm, JSON_UNESCAPED_UNICODE) }});">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="active_tab" value="email">
                        <button type="submit" class="btn btn-outline-danger btn-sm">削除</button>
                      </form>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="5" class="text-center text-muted py-4">まだメールの登録経路がありません。上のフォームから追加してください。</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    @endif

    @if($showLineTab)
      <div class="{{ ($showMailTab && $showLineTab) ? 'tab-pane fade'.($activeTab === 'line' ? ' show active' : '') : '' }}" id="reg-routes-line-pane" role="tabpanel" aria-labelledby="reg-routes-line-tab" tabindex="0">
        <div class="border rounded-3 p-3 mb-4 bg-light-subtle">
          <div class="fw-semibold small mb-2">LINE 流入経路を追加</div>
          <form method="post" action="{{ route('scenario.workspace.registration-routes.store', [$account, $scenario]) }}" class="row g-2 align-items-end">
            @csrf
            <input type="hidden" name="channel_type" value="line">
            <input type="hidden" name="active_tab" value="line">
            <div class="col-12 col-md-8">
              <label class="form-label small mb-1">管理名称</label>
              <input type="text" name="admin_name" class="form-control form-control-sm" value="{{ old('active_tab') === 'line' ? old('admin_name') : '' }}" maxlength="191" placeholder="例: Instagramプロフィール" required>
            </div>
            <div class="col-12 col-md-4">
              <button type="submit" class="btn btn-success btn-sm w-100 w-md-auto"><i class="bi bi-plus-lg me-1"></i>追加</button>
            </div>
          </form>
        </div>

        <div class="border rounded-3">
          <div class="px-3 py-2 border-bottom fw-semibold small">LINE 経路一覧（表示順）</div>
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th style="min-width:10rem;">管理名称</th>
                  <th style="min-width:14rem;">入口 URL</th>
                  <th style="min-width:12rem;">ファネルでの使用</th>
                  <th class="text-end" style="min-width:5rem;">ページ表示</th>
                  <th class="text-end" style="min-width:5rem;">友だち紐づけ</th>
                  <th class="text-end" style="min-width:5rem;">読者数</th>
                  <th style="width:7rem;">表示順</th>
                  <th style="width:5rem;"></th>
                </tr>
              </thead>
              <tbody>
                @forelse($lineRows as $row)
                  @php
                    $lineUrl = url('/line/open/'.$scenario->uid.'?rt='.rawurlencode($row->public_token));
                    $storage = $row->registrationRouteStorageValue();
                    $subs = (int) ($lineRouteSubscriberCounts[$storage] ?? 0);
                    $visits = (int) ($lineRouteVisitCounts[$row->public_token] ?? 0);
                    $follows = (int) ($lineRouteFollowCounts[$row->public_token] ?? 0);
                    $funnelUsages = $funnelRouteUsagesByToken[$row->public_token] ?? [];
                    if ($funnelUsages !== []) {
                      $usageLines = [];
                      foreach ($funnelUsages as $fu) {
                        $usageLines[] = 'ファネル：'.$fu['funnel_name'].'　◀◀'.$fu['page_name'].'にて本経路を使用中です。';
                      }
                      $lineDeleteConfirm = implode("\n", $usageLines)."\n\n削除しますか？\n削除した場合、対象ページの経路は経路なしの設定になります";
                    } else {
                      $lineDeleteConfirm = 'この流入経路を削除しますか？（既存読者の registration_route 文字列は変わりません）';
                    }
                  @endphp
                  <tr>
                    <td>
                      <form method="post" action="{{ route('scenario.workspace.registration-routes.update', [$account, $scenario, $row]) }}" class="d-flex flex-wrap gap-1 align-items-center">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="active_tab" value="line">
                        <input type="text" name="admin_name" class="form-control form-control-sm flex-grow-1" style="min-width:8rem;" value="{{ $row->admin_name }}" maxlength="191" required>
                        <button type="submit" class="btn btn-outline-secondary btn-sm text-nowrap">保存</button>
                      </form>
                    </td>
                    <td class="small">
                      <div class="text-break"><code>{{ $lineUrl }}</code></div>
                      <button type="button" class="btn btn-link btn-sm p-0 align-baseline js-copy-url" data-copy="{{ $lineUrl }}">URLをコピー</button>
                      <div class="mt-1 text-muted" style="font-size:0.75rem;">QR: <a href="https://quickchart.io/qr?size=200&amp;margin=2&amp;text={{ rawurlencode($lineUrl) }}" target="_blank" rel="noopener noreferrer">表示</a></div>
                    </td>
                    <td class="small">
                      @if($funnelUsages === [])
                        <span class="text-muted">—</span>
                      @else
                        <ul class="mb-0 ps-3">
                          @foreach($funnelUsages as $fu)
                            <li>ファネル：<strong>{{ $fu['funnel_name'] }}</strong>　◀◀<strong>{{ $fu['page_name'] }}</strong></li>
                          @endforeach
                        </ul>
                      @endif
                    </td>
                    <td class="text-end small" title="/line/open を開いた回数">{{ number_format($visits) }}</td>
                    <td class="text-end small" title="来訪意図が友だち追加で消費された回数">{{ number_format($follows) }}</td>
                    <td class="text-end small" title="この経路ラベルの LINE 読者">{{ number_format($subs) }}</td>
                    <td>
                      <div class="d-flex gap-1">
                        <form method="post" action="{{ route('scenario.workspace.registration-routes.move', [$account, $scenario, $row]) }}" class="d-inline">
                          @csrf
                          <input type="hidden" name="dir" value="up">
                          <input type="hidden" name="active_tab" value="line">
                          <button type="submit" class="btn btn-light border btn-sm px-2" title="上へ">↑</button>
                        </form>
                        <form method="post" action="{{ route('scenario.workspace.registration-routes.move', [$account, $scenario, $row]) }}" class="d-inline">
                          @csrf
                          <input type="hidden" name="dir" value="down">
                          <input type="hidden" name="active_tab" value="line">
                          <button type="submit" class="btn btn-light border btn-sm px-2" title="下へ">↓</button>
                        </form>
                      </div>
                    </td>
                    <td class="text-end">
                      <form method="post" action="{{ route('scenario.workspace.registration-routes.destroy', [$account, $scenario, $row]) }}" class="d-inline" onsubmit="return confirm({{ json_encode($lineDeleteConfirm, JSON_UNESCAPED_UNICODE) }});">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="active_tab" value="line">
                        <button type="submit" class="btn btn-outline-danger btn-sm">削除</button>
                      </form>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="8" class="text-center text-muted py-4">まだ LINE の登録経路がありません。上のフォームから追加してください。</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>

        <p class="text-muted small mt-3 mb-0">
          <strong>ページ表示</strong> は <code>/line/open</code> を開いた回数、<strong>友だち紐づけ</strong> は来訪意図が follow 等で消費された回数、<strong>読者数</strong> はこの経路ラベルが付いた LINE 読者の件数です。
        </p>
      </div>
    @endif

    @if($showMailTab && $showLineTab)
      </div>
    @endif

    <div class="mt-3">
      <a href="{{ route('scenario.workspace.show', [$account, $scenario]) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-house-door me-1"></i>シナリオ概要へ戻る</a>
      @if($showMailTab)
        <a href="{{ route('scenario.workspace.show', [$account, $scenario, 'form-unsubscribe-tags']) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-code-slash me-1"></i>フォームタグ</a>
      @endif
      @if($showLineTab)
        <a href="{{ route('scenario.workspace.show', [$account, $scenario, 'line-friends']) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-person-lines me-1"></i>LINE友だち</a>
      @endif
    </div>
  </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.js-copy-url').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var text = btn.getAttribute('data-copy') || '';
    if (!text) return;
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(function () { alert('コピーしました'); }).catch(function () { window.prompt('コピー用', text); });
    } else {
      window.prompt('コピー用', text);
    }
  });
});
</script>
@endpush