@extends(session('fb_embed') ? 'layouts.embed' : 'layouts.app')
@section('title', 'チャットでファネル作成')
@section('page-title', 'チャットでファネル作成（ベータ）')
@section('page-subtitle')質問に答えると、右側に「作成予定のファネル構成」が組み上がります。@endsection
@section('content')

<div class="row g-3 fb-wrap">
  {{-- 左: チャット --}}
  <div class="col-lg-7 d-flex">
    <div class="card w-100 d-flex flex-column">
      <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-chat-dots me-2 text-primary"></i>チャット</span>
        <a href="{{ route('funnel.builder.index') }}" class="btn btn-sm btn-outline-secondary">一覧へ</a>
      </div>
      <div id="fb-chat-log" class="fb-chat-log flex-grow-1"></div>
      <div class="border-top p-3">
        <div id="fb-choices" class="d-flex flex-wrap gap-2 mb-2"></div>
        <div id="fb-freetext-wrap" class="input-group mb-2 d-none">
          <input type="text" id="fb-freetext" class="form-control" placeholder="自由に入力できます">
          <button type="button" id="fb-freetext-send" class="btn btn-outline-primary">送信</button>
        </div>
        <div class="d-flex flex-wrap gap-2">
          <button type="button" id="fb-recommend" class="btn btn-primary btn-sm d-none"><i class="bi bi-magic me-1"></i>おすすめで進める</button>
          <button type="button" id="fb-skip" class="btn btn-outline-secondary btn-sm d-none">あとで設定</button>
          <button type="button" id="fb-back" class="btn btn-outline-secondary btn-sm d-none"><i class="bi bi-arrow-left me-1"></i>1つ戻る</button>
        </div>
        <div id="fb-error" class="text-danger small mt-2 d-none"></div>
      </div>
    </div>
  </div>

  {{-- 右: 作成予定のファネル構成 --}}
  <div class="col-lg-5 d-flex">
    <div class="card w-100 d-flex flex-column">
      <div class="card-header fw-semibold">
        <i class="bi bi-diagram-3 me-2 text-primary"></i><span id="fb-map-title">作成予定のファネル構成</span>
      </div>
      <div class="card-body flex-grow-1 overflow-auto">
        <div id="fb-warnings" class="mb-3"></div>
        <div id="fb-map"></div>
        <hr>
        <div class="fw-semibold small mb-2">公開前チェック</div>
        <div id="fb-checklist" class="mb-3"></div>
      </div>
      <div class="border-top p-3">
        <form method="POST" action="{{ route('funnel.builder.apply', $session) }}" id="fb-apply-form">
          @csrf
          <button type="submit" id="fb-apply" class="btn btn-success w-100" disabled>
            <i class="bi bi-check2-circle me-1"></i>この内容で下書きファネルを作成する
          </button>
        </form>
        <div id="fb-apply-hint" class="small text-muted mt-2">すべての質問に答えると作成できます。作成しても公開はされません（下書き）。</div>
        <div id="fb-applied-panel" class="d-none">
          <div class="alert alert-success py-2 px-3 small mb-2"><i class="bi bi-check2-circle me-1"></i>下書きを作成しました。下の導線から各内容を設定できます。</div>
          <div class="d-grid gap-2">
            <a id="fb-pages-link" href="#" class="btn btn-outline-primary btn-sm text-start" @if(session('fb_embed')) target="_top" @endif><i class="bi bi-files me-1"></i>ページ（LP・サンクス等）を編集する</a>
            <a id="fb-email-link" href="#" class="btn btn-outline-primary btn-sm text-start d-none" @if(session('fb_embed')) target="_top" @endif><i class="bi bi-envelope me-1"></i>メール配信（ステップ）の内容を設定する</a>
            <a id="fb-line-link" href="#" class="btn btn-outline-success btn-sm text-start d-none" @if(session('fb_embed')) target="_top" @endif><i class="bi bi-chat-dots me-1"></i>LINE配信の内容を設定する</a>
          </div>
          <hr class="my-3">
          <form method="POST" action="{{ route('funnel.builder.destroy', $session) }}" id="fb-destroy-form"
                @if(session('fb_embed')) target="_top" @endif
                onsubmit="return confirm('作成した下書きファネル（ページ・シナリオ・決済プラン・イベント）を削除します。紐づけた既存の配信、および公開・課金・読者などの実データが付いたものは削除されません。回答は残るので作り直せます。削除しますか？');">
            @csrf
            <button type="submit" class="btn btn-outline-danger btn-sm w-100">
              <i class="bi bi-trash me-1"></i>この下書きを削除して作り直す
            </button>
          </form>
          <div class="small text-muted mt-2">削除しても回答内容は残ります。ページ・シナリオ・決済プラン・イベントの下書きを消して、内容を直してから作り直せます（紐づけた既存の配信は消えません）。</div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('styles')
<style>
.fb-chat-log { overflow-y:auto; max-height:min(60vh,560px); padding:1rem 1.1rem; background:linear-gradient(180deg,#f8fafc,#f1f5f9); display:flex; flex-direction:column; }
.fb-msg { margin-bottom:.75rem; display:flex; flex-direction:column; max-width:92%; }
.fb-msg--user { align-self:flex-end; align-items:flex-end; }
.fb-msg--assistant { align-self:flex-start; align-items:flex-start; }
.fb-bubble { padding:.6rem .9rem; border-radius:14px; font-size:.9rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.fb-msg--user .fb-bubble { background:linear-gradient(135deg,#5b6fd8,#6d63ff); color:#fff; border-bottom-right-radius:4px; }
.fb-msg--assistant .fb-bubble { background:#fff; border:1px solid #e2e8f0; color:#1e293b; border-bottom-left-radius:4px; }
.fb-node { border:1px solid #e2e8f0; border-radius:10px; padding:.55rem .7rem; margin-bottom:.5rem; background:#fff; }
.fb-node__head { display:flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem; }
.fb-node__note { font-size:.75rem; color:#64748b; margin-top:.15rem; }
.fb-badge { font-size:.68rem; padding:.1rem .4rem; border-radius:6px; }
.fb-badge--basis { background:#eef2ff; color:#4338ca; }
.fb-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.fb-status-ready .fb-dot{background:#22c55e;} .fb-status-warning .fb-dot{background:#f59e0b;}
.fb-status-empty .fb-dot,.fb-status-partial .fb-dot{background:#cbd5e1;} .fb-status-skipped .fb-dot{background:#e2e8f0;}
.fb-status-pending .fb-dot{background:#94a3b8;}
.fb-choice { border-radius:14px; text-align:left; }
.fb-choice__hint { display:block; font-size:.68rem; opacity:.75; margin-top:.05rem; font-weight:400; }
.fb-edge { display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:#64748b; margin:-.25rem 0 .5rem .55rem; }
.fb-edge__arrow { color:#94a3b8; font-weight:700; }
.fb-edge__label { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:.02rem .35rem; }
.fb-edge__to { color:#475569; }
.fb-edge__to::before { content:"→ "; color:#94a3b8; }
.fb-node__edit { display:inline-flex; align-items:center; margin-top:.35rem; font-size:.75rem; font-weight:600; color:#4338ca; text-decoration:none; }
.fb-node__edit:hover { text-decoration:underline; }
.fb-node__hint { font-size:.7rem; color:#94a3b8; margin-top:.25rem; }
</style>
@endpush

@push('scripts')
<script>
(function () {
  const state = @json($snapshot);
  const urls = {
    message: @json(route('funnel.builder.message', $session)),
    back: @json(route('funnel.builder.back', $session)),
  };
  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

  const el = {
    log: document.getElementById('fb-chat-log'),
    choices: document.getElementById('fb-choices'),
    freeWrap: document.getElementById('fb-freetext-wrap'),
    free: document.getElementById('fb-freetext'),
    freeSend: document.getElementById('fb-freetext-send'),
    recommend: document.getElementById('fb-recommend'),
    skip: document.getElementById('fb-skip'),
    back: document.getElementById('fb-back'),
    error: document.getElementById('fb-error'),
    warnings: document.getElementById('fb-warnings'),
    map: document.getElementById('fb-map'),
    checklist: document.getElementById('fb-checklist'),
    apply: document.getElementById('fb-apply'),
    applyForm: document.getElementById('fb-apply-form'),
    applyHint: document.getElementById('fb-apply-hint'),
    appliedPanel: document.getElementById('fb-applied-panel'),
    pagesLink: document.getElementById('fb-pages-link'),
    emailLink: document.getElementById('fb-email-link'),
    lineLink: document.getElementById('fb-line-link'),
    mapTitle: document.getElementById('fb-map-title'),
  };

  const esc = s => (s == null ? '' : String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])));
  let busy = false;

  function renderMessages(messages) {
    el.log.innerHTML = '';
    (messages || []).forEach(m => {
      const wrap = document.createElement('div');
      wrap.className = 'fb-msg fb-msg--' + (m.role === 'user' ? 'user' : 'assistant');
      wrap.innerHTML = '<div class="fb-bubble"></div>';
      wrap.querySelector('.fb-bubble').textContent = m.body;
      el.log.appendChild(wrap);
    });
    el.log.scrollTop = el.log.scrollHeight;
  }

  function renderQuestion(q, canBack) {
    el.choices.innerHTML = '';
    el.error.classList.add('d-none');
    if (!q) {
      el.freeWrap.classList.add('d-none');
      el.recommend.classList.add('d-none');
      el.skip.classList.add('d-none');
      el.back.classList.toggle('d-none', !canBack);
      return;
    }
    (q.choices || []).forEach(c => {
      const b = document.createElement('button');
      b.type = 'button';
      b.className = 'btn btn-outline-primary btn-sm fb-choice';
      const lab = document.createElement('span');
      lab.textContent = c.label;
      b.appendChild(lab);
      if (c.hint) {
        b.title = c.hint;
        const h = document.createElement('small');
        h.className = 'fb-choice__hint';
        h.textContent = c.hint;
        b.appendChild(h);
      }
      b.addEventListener('click', () => send({ choice_key: c.key }));
      el.choices.appendChild(b);
    });
    el.freeWrap.classList.toggle('d-none', !q.allow_free_text);
    if (q.allow_free_text && q.free_text_placeholder) el.free.placeholder = q.free_text_placeholder;
    el.recommend.classList.toggle('d-none', !q.allow_recommend);
    el.skip.classList.toggle('d-none', !q.allow_skip);
    el.back.classList.toggle('d-none', !canBack);
  }

  function statusLabel(s) {
    return { ready:'設定済み', warning:'要確認', empty:'未設定', partial:'一部設定', skipped:'不要', pending:'未実施' }[s] || s;
  }

  function renderMap(map) {
    el.map.innerHTML = '';
    const nodes = (map && map.nodes) || [];
    const edges = (map && map.edges) || [];
    const labelById = {};
    nodes.forEach(n => { labelById[n.id] = n.label; });

    nodes.forEach(n => {
      const div = document.createElement('div');
      div.className = 'fb-node fb-status-' + esc(n.status || 'empty');
      let head = '<div class="fb-node__head"><span class="fb-dot"></span><span>' + esc(n.label) + '</span>';
      if (n.basis) head += '<span class="fb-badge fb-badge--basis ms-1">基準：' + esc(n.basis) + '</span>';
      head += '<span class="text-muted ms-auto" style="font-size:.7rem;">' + esc(statusLabel(n.status)) + '</span></div>';
      let inner = head + (n.note ? '<div class="fb-node__note">' + esc(n.note) + '</div>' : '');
      if (n.edit_url) {
        const editLabel = n.edit_label || 'このページを編集する';
        inner += '<a href="' + esc(n.edit_url) + '" class="fb-node__edit" @if(session('fb_embed')) target="_top" @endif><i class="bi bi-pencil-square me-1"></i>' + esc(editLabel) + '</a>';
      } else if (n.type === 'page') {
        inner += '<div class="fb-node__hint">作成後にここから編集できます</div>';
      }
      div.innerHTML = inner;
      el.map.appendChild(div);

      // このノードから出る流れ（遷移）を矢印＋ラベルで表示。分岐は複数行になる。
      edges.filter(e => e.from === n.id).forEach(e => {
        const conn = document.createElement('div');
        conn.className = 'fb-edge';
        const to = labelById[e.to] || e.to;
        conn.innerHTML = '<span class="fb-edge__arrow">&#8595;</span>'
          + (e.label ? '<span class="fb-edge__label">' + esc(e.label) + '</span>' : '')
          + '<span class="fb-edge__to">' + esc(to) + '</span>';
        el.map.appendChild(conn);
      });
    });

    if (!nodes.length) {
      el.map.innerHTML = '<div class="text-muted small">質問に答えると、ここにファネルの流れが組み上がります。</div>';
    }
  }

  function renderWarnings(warnings) {
    el.warnings.innerHTML = '';
    (warnings || []).forEach(w => {
      const div = document.createElement('div');
      const warn = w.level === 'warning';
      div.className = 'alert ' + (warn ? 'alert-warning' : 'alert-light border') + ' py-2 px-3 mb-2 small';
      div.innerHTML = '<i class="bi ' + (warn ? 'bi-exclamation-triangle' : 'bi-info-circle') + ' me-1"></i>' + esc(w.message);
      el.warnings.appendChild(div);
    });
  }

  function renderChecklist(blueprint) {
    el.checklist.innerHTML = '';
    const items = (blueprint && blueprint.checklist) || [];
    items.forEach(it => {
      const div = document.createElement('div');
      div.className = 'd-flex align-items-start gap-2 small mb-1';
      const icon = it.ok ? '<i class="bi bi-check-circle-fill text-success"></i>' : '<i class="bi bi-circle text-muted"></i>';
      div.innerHTML = icon + '<span>' + esc(it.label) + '</span>';
      el.checklist.appendChild(div);
    });
  }

  function render(s) {
    state.status = s.status;
    renderMessages(s.messages);
    renderQuestion(s.question, s.can_back);
    renderMap(s.map);
    renderWarnings(s.warnings);
    renderChecklist(s.blueprint);
    el.mapTitle.textContent = s.applied ? '下書きファネルとして作成済み' : '作成予定のファネル構成';
    if (s.applied) {
      // 作成後は「作成する」ボタンを隠し、各内容の設定画面への導線に置き換える。
      el.applyForm.classList.add('d-none');
      el.appliedPanel.classList.remove('d-none');
      if (s.funnel_pages_url) el.pagesLink.setAttribute('href', s.funnel_pages_url);
      const actions = (s.map && s.map.actions) || {};
      if (actions.email_steps_url) { el.emailLink.setAttribute('href', actions.email_steps_url); el.emailLink.classList.remove('d-none'); }
      else { el.emailLink.classList.add('d-none'); }
      if (actions.line_manage_url) { el.lineLink.setAttribute('href', actions.line_manage_url); el.lineLink.classList.remove('d-none'); }
      else { el.lineLink.classList.add('d-none'); }
    } else {
      el.applyForm.classList.remove('d-none');
      el.appliedPanel.classList.add('d-none');
      el.apply.disabled = !s.can_apply;
      el.applyHint.textContent = s.can_apply
        ? 'この内容で下書きを作成できます。作成しても公開はされません。'
        : 'すべての質問に答えると作成できます。';
    }
  }

  async function post(url, body) {
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      credentials: 'same-origin',
      body: JSON.stringify(body || {}),
    });
    if (res.status === 429) {
      throw new Error('短時間に操作が続いたため一時的に制限されました。1分ほど待ってから、もう一度お試しください。');
    }
    let data = null;
    try { data = await res.json(); } catch (e) { /* ignore */ }
    if (!res.ok || !data || data.ok === false) {
      throw new Error((data && data.error) || '通信に失敗しました。');
    }
    return data;
  }

  async function send(body) {
    if (busy) return;
    busy = true;
    el.error.classList.add('d-none');
    try {
      const data = await post(urls.message, body);
      render(data.snapshot);
    } catch (e) {
      el.error.textContent = e.message;
      el.error.classList.remove('d-none');
    } finally {
      busy = false;
    }
  }

  async function goBack() {
    if (busy) return;
    busy = true;
    try {
      const data = await post(urls.back, {});
      render(data.snapshot);
    } catch (e) {
      el.error.textContent = e.message;
      el.error.classList.remove('d-none');
    } finally {
      busy = false;
    }
  }

  el.recommend.addEventListener('click', () => send({ choice_key: '__recommend__' }));
  el.skip.addEventListener('click', () => send({ choice_key: '__skip__' }));
  el.back.addEventListener('click', goBack);
  el.freeSend.addEventListener('click', () => {
    const t = (el.free.value || '').trim();
    if (!t) return;
    el.free.value = '';
    send({ free_text: t });
  });
  el.free.addEventListener('keydown', e => {
    if (e.key === 'Enter') { e.preventDefault(); el.freeSend.click(); }
  });

  render(state);
})();
</script>
@endpush
@endsection