@extends('layouts.app')
@section('title', 'ページ一覧')
@section('page-title', $funnel->name . ' — ページ')
@section('content')
@php
  $importModeLabels = \App\Support\FunnelPageImportParseMode::labels();
  $importModeBadgeClass = [
    \App\Support\FunnelPageImportParseMode::UTAGE_STRUCTURED => 'bg-success',
    \App\Support\FunnelPageImportParseMode::HTML_FALLBACK => 'bg-warning text-dark',
    \App\Support\FunnelPageImportParseMode::EMPTY => 'bg-secondary',
  ];
  $pageTypeLabels = [
    'lp' => 'LP',
    'registration' => '登録',
    'line_registration' => 'LINE登録',
    'sales' => 'セールス',
    'payment' => '決済',
    'upsell' => 'アップセル',
    'downsell' => 'ダウンサル',
    'thanks' => 'サンクス',
    'webinar' => 'ウェビナー',
    'event_booking' => 'イベント予約',
    'member_invitation' => '会員誘導',
  ];
@endphp

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div class="d-flex align-items-center gap-2 flex-wrap">
    <a href="{{ route('funnel.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> ファネル一覧</a>
    @unless($pages->isEmpty())
    <button type="button" class="btn btn-outline-secondary btn-sm" id="funnel-page-reorder-toggle"><i class="bi bi-arrows-move me-1"></i>並び替え</button>
    <div class="align-items-center gap-2 d-none" id="funnel-page-reorder-bar">
      <span class="small text-success d-none" id="funnel-page-order-saved"><i class="bi bi-check-circle-fill me-1"></i>保存しました</span>
      <button type="button" class="btn btn-sm btn-primary" id="funnel-page-order-save"><i class="bi bi-save me-1"></i>並び順を保存</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" id="funnel-page-reorder-done">終了</button>
    </div>
    @endunless
    @isset($builderSession)
    <a href="{{ route('funnel.builder.show', ['session' => $builderSession->id, 'embed' => 0]) }}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-diagram-3 me-1"></i>チャットで作成した構成（マップ）を見る
    </a>
    @endisset
  </div>
  <a href="{{ route('funnel.page.create', $funnel) }}" class="btn btn-primary btn-sm">
    <i class="bi bi-plus-lg me-1"></i>ページを追加
  </a>
</div>
@isset($builderSession)
<div class="small text-muted mb-2"><i class="bi bi-info-circle me-1"></i>「チャットで作成した構成（マップ）」は<strong>作成時点</strong>の設計図です。作成後にページを編集した内容は、各ページの編集画面が最新です。</div>
@endisset
@unless($pages->isEmpty())
<div class="mb-2">
  <x-help-section title="操作ボタンの説明（アイコンの意味）" variant="info">
    <div class="d-flex flex-wrap gap-3">
      <span><i class="bi bi-sticky me-1"></i>メモ</span>
      <span><i class="bi bi-pencil text-primary me-1"></i>編集</span>
      <span><i class="bi bi-eye me-1"></i>プレビュー</span>
      <span><i class="bi bi-box-arrow-up-right text-success me-1"></i>公開ページを開く</span>
      <span><i class="bi bi-arrow-repeat me-1"></i>取込元URLから再取り込み</span>
      <span><i class="bi bi-bar-chart-steps me-1"></i>ABテスト</span>
      <span><i class="bi bi-chat-left-text me-1"></i>コメント返信</span>
      <span><i class="bi bi-trash text-danger me-1"></i>削除</span>
    </div>
  </x-help-section>
</div>
@endunless
<div class="small text-muted mb-2 d-none" id="funnel-page-reorder-hint"><i class="bi bi-info-circle me-1"></i>行の <i class="bi bi-arrow-up"></i> <i class="bi bi-arrow-down"></i> で移動できます。<strong>ドラッグ＆ドロップでの並び替えも可能です。</strong></div>

@if($pages->isEmpty())
<div class="card">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-file-earmark-text" style="font-size:2.5rem;opacity:.4;"></i>
    <p class="mt-3 mb-0">まだページがありません。「ページを追加」から作成してください。</p>
  </div>
</div>
@else
<style>#funnel-page-table .reorder-col{display:none;} #funnel-page-table.reordering .reorder-col{display:table-cell;} #funnel-page-table.reordering tbody tr{cursor:grab;} #funnel-page-table tbody tr.dragging{opacity:.5;background:#eef4ff;}</style>
<div class="card">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0" id="funnel-page-table">
      <thead class="table-light">
        <tr>
          <th class="text-center reorder-col" style="width:5rem;">並び</th>
          <th>ページ名</th>
          <th class="text-nowrap" style="width:8rem;">種別</th>
          <th class="text-nowrap" style="width:7rem;">ステータス</th>
          <th class="text-end text-nowrap">操作</th>
        </tr>
      </thead>
      <tbody id="funnel-page-rows">
        @foreach($pages as $page)
        <tr data-page-id="{{ $page->id }}">
          <td class="text-center text-nowrap reorder-col">
            <button type="button" class="btn btn-sm btn-outline-secondary btn-page-up" title="上へ"><i class="bi bi-arrow-up"></i></button>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-page-down" title="下へ"><i class="bi bi-arrow-down"></i></button>
          </td>
          <td>
            <span class="fw-semibold">{{ $page->name }}</span>
            @if(!empty($page->import_parse_mode))
              <span class="badge {{ $importModeBadgeClass[$page->import_parse_mode] ?? 'bg-light text-dark border' }} ms-1" style="font-size:0.65rem;">
                取込: {{ $importModeLabels[$page->import_parse_mode] ?? $page->import_parse_mode }}
              </span>
            @endif
            @if(!empty($page->import_source_url))
              @include('partials._public_url_inline', [
                'url' => $page->import_source_url,
                'linkPrefix' => '取込元：',
                'showOpenButton' => true,
              ])
            @endif
            @if($page->status === 'public' && !empty($page->uid))
              @include('partials._public_url_inline', ['url' => url('/p/'.$page->uid), 'showOpenButton' => false, 'showCopyButton' => false])
            @endif
          </td>
          <td>
            <span class="badge bg-light text-dark border">{{ $pageTypeLabels[$page->page_type ?? 'lp'] ?? 'LP' }}</span>
          </td>
          <td>
            @if($page->status === 'public')
            <span class="badge bg-success">公開</span>
            @elseif($page->status === 'scheduled')
            <span class="badge bg-warning text-dark">公開予約</span>
            @else
            <span class="badge bg-secondary">非公開</span>
            @endif
          </td>
          <td class="text-end text-nowrap">
            <div class="d-inline-flex flex-nowrap gap-1 align-items-center justify-content-end">
              <button type="button" class="btn btn-sm btn-outline-secondary btn-page-memo" title="メモ"
                data-url="{{ route('funnel.page.memo', [$funnel, $page]) }}"
                data-page-name="{{ $page->name }}"
                data-memo="{{ $page->admin_memo }}">
                <i class="bi {{ filled($page->admin_memo) ? 'bi-sticky-fill text-warning' : 'bi-sticky' }}"></i>
              </button>
              <a href="{{ route('funnel.page.edit', [$funnel, $page]) }}" class="btn btn-sm btn-outline-primary" title="編集"><i class="bi bi-pencil"></i></a>
              <a href="{{ route('funnel.page.preview', [$funnel, $page]) }}" target="_blank" class="btn btn-sm btn-outline-secondary" title="プレビュー"><i class="bi bi-eye"></i></a>
              @if($page->status === 'public' && !empty($page->uid))
              <a href="{{ url('/p/'.$page->uid) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-success" title="公開ページ"><i class="bi bi-box-arrow-up-right"></i></a>
              @endif
              @if(!empty($page->import_source_url))
              <form method="POST" action="{{ route('funnel.page.reimport-url', [$funnel, $page]) }}" class="d-inline-flex m-0"
                onsubmit="return confirm('取込元 URL からページ内容を上書き再取り込みします。編集内容は失われます。続けますか？');">
                @csrf
                <input type="hidden" name="allow_html_fallback" value="1">
                <button type="submit" class="btn btn-sm btn-outline-secondary" title="URLから再取り込み"><i class="bi bi-arrow-repeat"></i></button>
              </form>
              @endif
              <a href="{{ route('funnel.page.abtest', [$funnel, $page]) }}" class="btn btn-sm btn-outline-secondary" title="ABテスト"><i class="bi bi-bar-chart-steps"></i></a>
              @if(!empty($pageCommentFlags[$page->id]))
              <a href="{{ route('funnel.page.comments', [$funnel, $page]) }}" class="btn btn-sm btn-outline-secondary position-relative" title="コメント返信">
                <i class="bi bi-chat-left-text"></i>
                @if(($pageCommentFlags[$page->id]['unreplied_count'] ?? 0) > 0)
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size:0.55rem;">{{ $pageCommentFlags[$page->id]['unreplied_count'] }}</span>
                @endif
              </a>
              @endif
              <form method="POST" action="{{ route('funnel.page.destroy', [$funnel, $page]) }}" class="d-inline-flex m-0" onsubmit="return confirm('「{{ $page->name }}」を削除しますか？');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger" title="削除"><i class="bi bi-trash"></i></button>
              </form>
            </div>
            <div class="page-memo-preview small text-muted mt-2 d-block text-start {{ filled($page->admin_memo) ? '' : 'd-none' }}" style="white-space:normal;">
              <i class="bi bi-sticky me-1"></i><span class="page-memo-preview-text">{{ \Illuminate\Support\Str::limit((string) $page->admin_memo, 120) }}</span>
            </div>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>
@endif

@include('partials._copy_public_url_script')

<div class="modal fade" id="pageMemoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-sticky me-2"></i>メモ <span id="pageMemoTitle" class="text-muted small fw-normal"></span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <p class="small text-muted mb-2">このページの進捗・残タスクなどを自由にメモできます（自分用の管理メモで、公開ページには表示されません）。</p>
        <textarea id="pageMemoText" class="form-control" rows="6" maxlength="5000" placeholder="例：ヘッダー修正済み。次は申込フォーム設置。〇〇さんの確認待ち。"></textarea>
        <div id="pageMemoError" class="text-danger small mt-2 d-none"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary" id="pageMemoSave"><i class="bi bi-save me-1"></i>保存</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
(function () {
  var tbody = document.getElementById('funnel-page-rows');
  if (!tbody) return;
  var saveBtn = document.getElementById('funnel-page-order-save');
  var savedMsg = document.getElementById('funnel-page-order-saved');
  var csrf = document.querySelector('meta[name="csrf-token"]')?.content;
  var reorderUrl = @json(route('funnel.page.reorder', $funnel));
  var table = document.getElementById('funnel-page-table');
  var toggleBtn = document.getElementById('funnel-page-reorder-toggle');
  var reorderBar = document.getElementById('funnel-page-reorder-bar');
  var doneBtn = document.getElementById('funnel-page-reorder-done');
  var hint = document.getElementById('funnel-page-reorder-hint');

  function setReordering(on) {
    if (table) table.classList.toggle('reordering', on);
    if (reorderBar) { reorderBar.classList.toggle('d-none', !on); reorderBar.classList.toggle('d-flex', on); }
    if (toggleBtn) toggleBtn.classList.toggle('d-none', on);
    if (hint) hint.classList.toggle('d-none', !on);
    tbody.querySelectorAll('tr').forEach(function (tr) { tr.draggable = on; });
    if (!on && savedMsg) savedMsg.classList.add('d-none');
  }
  if (toggleBtn) toggleBtn.addEventListener('click', function () { setReordering(true); });
  if (doneBtn) doneBtn.addEventListener('click', function () { setReordering(false); });

  // ドラッグ&ドロップ
  var dragRow = null;
  function getDragAfterRow(y) {
    var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr:not(.dragging)'));
    var closest = { offset: -Infinity, element: null };
    rows.forEach(function (row) {
      var box = row.getBoundingClientRect();
      var offset = y - box.top - box.height / 2;
      if (offset < 0 && offset > closest.offset) closest = { offset: offset, element: row };
    });
    return closest.element;
  }
  tbody.addEventListener('dragstart', function (e) {
    if (!table.classList.contains('reordering')) return;
    dragRow = e.target.closest('tr');
    if (dragRow) dragRow.classList.add('dragging');
  });
  tbody.addEventListener('dragend', function () {
    if (dragRow) dragRow.classList.remove('dragging');
    dragRow = null;
    if (savedMsg) savedMsg.classList.add('d-none');
  });
  tbody.addEventListener('dragover', function (e) {
    if (!dragRow) return;
    e.preventDefault();
    var after = getDragAfterRow(e.clientY);
    if (after == null) tbody.appendChild(dragRow); else tbody.insertBefore(dragRow, after);
  });

  tbody.addEventListener('click', function (e) {
    var up = e.target.closest('.btn-page-up');
    var down = e.target.closest('.btn-page-down');
    if (!up && !down) return;
    var row = e.target.closest('tr');
    if (!row) return;
    if (up && row.previousElementSibling) {
      tbody.insertBefore(row, row.previousElementSibling);
    } else if (down && row.nextElementSibling) {
      tbody.insertBefore(row.nextElementSibling, row);
    }
    if (savedMsg) savedMsg.classList.add('d-none');
  });

  if (saveBtn) {
    saveBtn.addEventListener('click', async function () {
      var order = Array.from(tbody.querySelectorAll('tr')).map(function (tr) { return tr.dataset.pageId; }).filter(Boolean);
      saveBtn.disabled = true;
      try {
        var res = await fetch(reorderUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
          body: JSON.stringify({ order: order }),
        });
        var data = await res.json().catch(function () { return {}; });
        if (res.ok && data.success && savedMsg) {
          savedMsg.classList.remove('d-none');
        } else {
          alert('並び順の保存に失敗しました。');
        }
      } catch (err) {
        alert('並び順の保存に失敗しました。');
      } finally {
        saveBtn.disabled = false;
      }
    });
  }
})();
</script>
<script>
// ページごとの管理メモ
(function () {
  var modalEl = document.getElementById('pageMemoModal');
  if (!modalEl || typeof bootstrap === 'undefined') return;
  var modal = new bootstrap.Modal(modalEl);
  var titleEl = document.getElementById('pageMemoTitle');
  var textEl = document.getElementById('pageMemoText');
  var errEl = document.getElementById('pageMemoError');
  var saveBtn = document.getElementById('pageMemoSave');
  var csrf = document.querySelector('meta[name="csrf-token"]')?.content;
  var currentBtn = null, currentUrl = null;

  document.querySelectorAll('.btn-page-memo').forEach(function (btn) {
    btn.addEventListener('click', function () {
      currentBtn = btn;
      currentUrl = btn.dataset.url;
      titleEl.textContent = btn.dataset.pageName || '';
      textEl.value = btn.dataset.memo || '';
      errEl.classList.add('d-none');
      modal.show();
      setTimeout(function () { textEl.focus(); }, 300);
    });
  });

  saveBtn.addEventListener('click', async function () {
    if (!currentUrl) return;
    var memo = textEl.value;
    saveBtn.disabled = true;
    errEl.classList.add('d-none');
    try {
      var res = await fetch(currentUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({ admin_memo: memo }),
      });
      var data = await res.json().catch(function () { return {}; });
      if (!res.ok || !data.success) throw new Error((data && data.message) || '保存に失敗しました');
      if (currentBtn) {
        currentBtn.dataset.memo = memo;
        var icon = currentBtn.querySelector('i');
        if (icon) icon.className = 'bi ' + (data.has_memo ? 'bi-sticky-fill text-warning' : 'bi-sticky');
        var tr = currentBtn.closest('tr');
        if (tr) {
          var prev = tr.querySelector('.page-memo-preview');
          var prevText = tr.querySelector('.page-memo-preview-text');
          if (prev && prevText) {
            if (data.has_memo) { prevText.textContent = memo.length > 80 ? memo.slice(0, 80) + '…' : memo; prev.classList.remove('d-none'); }
            else { prev.classList.add('d-none'); }
          }
        }
      }
      modal.hide();
    } catch (err) {
      errEl.textContent = err.message || '保存に失敗しました';
      errEl.classList.remove('d-none');
    } finally {
      saveBtn.disabled = false;
    }
  });
})();
</script>
@endpush

@endsection