@extends('layouts.app')
@section('title', 'ファネル作成')
@section('page-title', 'ファネルを作成')
@section('page-subtitle')テンプレートから作成するか、チャットで目的を伝えて作成します。@endsection
@section('content')
<div class="d-flex flex-wrap gap-2 mb-3" role="tablist" aria-label="ファネルの作り方">
  <button type="button" class="btn btn-outline-primary funnel-create-mode-btn active" data-mode="template" id="funnel-create-mode-template" aria-pressed="true">
    <i class="bi bi-layout-text-window-reverse me-1"></i>テンプレートから作成
  </button>
  <button type="button" class="btn btn-outline-primary funnel-create-mode-btn" data-mode="chat" id="funnel-create-mode-chat" aria-pressed="false">
    <i class="bi bi-chat-dots me-1"></i>チャットで作成する
  </button>
</div>

<form method="POST" action="{{ route('funnel.store') }}" id="funnel-create-form">
  @csrf
  <input type="hidden" name="creation_mode" id="creation_mode" value="{{ old('creation_mode', 'template') }}">
  <input type="hidden" name="template_key" id="template_key" value="{{ old('template_key', 'blank') }}">
  <input type="hidden" name="chat_brief" id="chat_brief" value="{{ old('chat_brief', '') }}">

  <div class="row g-4 align-items-stretch funnel-create-main-row">
    <div id="funnel-create-main-col" class="col-lg-8 d-flex">
      <div id="funnel-create-template-pane" class="funnel-create-pane w-100">
        <div class="card funnel-create-main-card h-100 d-flex flex-column">
          <div class="card-header fw-semibold">
            <i class="bi bi-layout-text-window-reverse me-2 text-primary"></i>テンプレートから作成
            <span class="text-muted fw-normal small ms-1">（全{{ count($templates ?? []) }}種）</span>
          </div>
          <div class="card-body flex-grow-1 overflow-auto">
            <p class="small text-muted mb-3">用途に近いテンプレートを選ぶと、ページのたたき台が自動で作られます。あとからページの追加・編集ができます。</p>
            <div class="row g-3">
              @foreach(($templates ?? []) as $tpl)
              <div class="col-md-6 col-lg-4">
                <button type="button" class="w-100 text-start btn btn-outline-secondary template-card" data-template-key="{{ $tpl['key'] }}">
                  <div class="fw-semibold">{{ $tpl['name'] }}</div>
                  <div class="small text-muted mt-1">{{ $tpl['desc'] }}</div>
                </button>
              </div>
              @endforeach
            </div>
            <div class="small text-muted mt-3 mb-0">※ テンプレートは作成後に編集できます。</div>
          </div>
        </div>
      </div>

      <div id="funnel-create-chat-pane" class="funnel-create-pane w-100 d-none">
        <div class="card funnel-create-main-card funnel-create-chat-card h-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>
            <span class="badge rounded-pill {{ config('features.funnel_builder') ? 'bg-primary-subtle text-primary-emphasis' : 'bg-light text-secondary' }} fw-normal" style="font-size:0.72rem;">{{ config('features.funnel_builder') ? 'ベータ' : '準備中' }}</span>
          </div>
          <div class="card-body p-0 d-flex flex-column flex-grow-1">
            @if(config('features.funnel_builder'))
            {{-- 新「チャットでファネル作成（ベータ）」をこのカード内に埋め込み表示（別画面へ遷移しない） --}}
            <iframe src="{{ route('funnel.builder.index', ['embed' => 1]) }}"
                    class="funnel-builder-embed-frame flex-grow-1 w-100"
                    style="border:0;min-height:560px;display:block;background:transparent;"
                    title="チャットでファネル作成"></iframe>
            @else
            <p class="small text-muted px-3 pt-3 mb-0">ファネル名・会社・グループ・ページ構成は、チャットのやり取りで決めていきます（現状は会話を保存して空のファネルを作成。自動提案は順次対応予定）。</p>
            <div id="funnel-create-chat-log" class="dashboard-chat-log flex-grow-1 mx-3 mt-2 rounded border">
              <div id="funnel-create-chat-empty" class="dashboard-chat-empty">
                例：メルマガ登録から3日間のステップメール、その後にオンライン講座の販売LPへ誘導したい
              </div>
            </div>
            <div class="border-top bg-white p-3">
              <label for="funnel-create-chat-input" class="form-label small text-muted mb-1">メッセージ</label>
              <div class="input-group mb-3">
                <textarea class="form-control" id="funnel-create-chat-input" rows="2" placeholder="作りたいファネルを日本語で説明してください" autocomplete="off"></textarea>
                <button type="button" class="btn btn-outline-primary px-4" id="funnel-create-chat-send">
                  <i class="bi bi-send me-1"></i>送信
                </button>
              </div>
              <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center">
                <a href="{{ route('funnel.index') }}" class="btn btn-outline-secondary">キャンセル</a>
                <button type="submit" class="btn btn-primary" id="funnel-create-chat-submit">
                  <i class="bi bi-check2 me-1"></i>この内容でファネルを作成する
                </button>
              </div>
              <div id="funnel-create-chat-error" class="text-danger small mt-2 d-none"></div>
            </div>
            @endif
          </div>
        </div>
      </div>
    </div>

    <div id="funnel-create-info-col" class="col-lg-4 d-flex">
      <div class="card funnel-create-main-card h-100 w-100 d-flex flex-column">
        <div class="card-header">ファネル情報</div>
        <div class="card-body d-flex flex-column flex-grow-1">
          <div class="mb-3">
            <label class="form-label fw-semibold" for="funnel_name">ファネル名 <span class="text-danger">*</span></label>
            <input type="text" name="name" id="funnel_name" class="form-control" value="{{ old('name') }}" placeholder="例：メルマガ登録ファネル" required>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">使用する会社</label>
            <select name="business_setting_id" class="form-select">
              <option value="">未選択</option>
              @foreach(($businessSettings ?? collect()) as $business)
                <option value="{{ $business->id }}" @selected((string) old('business_setting_id', optional(($businessSettings ?? collect())->firstWhere('is_default', true))->id) === (string) $business->id)>
                  {{ $business->displayName() }}{{ $business->is_default ? '（既定）' : '' }}
                </option>
              @endforeach
            </select>
            <div class="form-text">複数会社でこのmonakaアカウントを使う場合、ファネルに紐づける会社を選びます。</div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">グループ</label>
            <select name="group_id" class="form-select">
              <option value="">グループなし</option>
              @foreach($groups as $group)
                <option value="{{ $group->id }}" {{ (string)old('group_id') === (string)$group->id ? 'selected' : '' }}>{{ $group->name }}</option>
              @endforeach
            </select>
          </div>
          <p class="small text-muted mb-3" id="funnel-create-mode-hint">テンプレートを選び、右の情報を入力して「作成する」を押してください。</p>
          <div class="d-flex gap-2 mt-auto pt-2">
            <button type="submit" class="btn btn-primary" id="funnel-create-template-submit">作成する</button>
            <a href="{{ route('funnel.index') }}" class="btn btn-outline-secondary">キャンセル</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

@push('styles')
<style>
.template-card { border-radius: 12px; padding: 14px 14px; border-color: rgba(0,0,0,0.12); }
.template-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.15); background: rgba(108,92,231,0.06); }
.funnel-create-mode-btn.active { background: var(--primary, #6c5ce7); border-color: var(--primary, #6c5ce7); color: #fff; }
.funnel-create-main-row { align-items: stretch; }
.funnel-create-main-row > [class*="col-"] { min-height: min(72vh, 720px); }
.funnel-create-pane { display: flex; flex-direction: column; min-height: 100%; }
.funnel-create-main-card { margin-bottom: 0; }
.funnel-create-chat-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-soft, #e2e8f0); }
.funnel-create-chat-card .card-header {
  background: linear-gradient(105deg, rgba(94, 234, 212, 0.1), rgba(167, 139, 250, 0.1));
}
.funnel-create-chat-card .dashboard-chat-log {
  min-height: 200px;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}
.dashboard-chat-msg { margin-bottom: 0.85rem; display: flex; flex-direction: column; max-width: 92%; }
.dashboard-chat-msg--user { align-self: flex-end; align-items: flex-end; }
.dashboard-chat-msg--assistant { align-self: flex-start; align-items: flex-start; }
.dashboard-chat-msg-bubble {
  padding: 0.65rem 0.95rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.dashboard-chat-msg--user .dashboard-chat-msg-bubble {
  background: linear-gradient(135deg, #5b6fd8, #6d63ff);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.dashboard-chat-msg--assistant .dashboard-chat-msg-bubble {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  border-bottom-left-radius: 4px;
}
.dashboard-chat-msg-meta { font-size: 0.68rem; color: #94a3b8; margin-top: 0.25rem; }
.dashboard-chat-empty { text-align: center; color: #94a3b8; font-size: 0.88rem; padding: 2rem 1rem; }
#funnel-create-chat-input { resize: none; border-radius: 12px 0 0 12px; }
</style>
@endpush

@push('scripts')
<script>
(function () {
  const modeInput = document.getElementById('creation_mode');
  const templateKeyInput = document.getElementById('template_key');
  const chatBriefInput = document.getElementById('chat_brief');
  const templatePane = document.getElementById('funnel-create-template-pane');
  const chatPane = document.getElementById('funnel-create-chat-pane');
  const mainCol = document.getElementById('funnel-create-main-col');
  const infoCol = document.getElementById('funnel-create-info-col');
  const modeHint = document.getElementById('funnel-create-mode-hint');
  const form = document.getElementById('funnel-create-form');
  const funnelNameInput = document.getElementById('funnel_name');
  const chatError = document.getElementById('funnel-create-chat-error');
  const modeButtons = document.querySelectorAll('.funnel-create-mode-btn');

  const chatLog = document.getElementById('funnel-create-chat-log');
  const chatInput = document.getElementById('funnel-create-chat-input');
  const chatSend = document.getElementById('funnel-create-chat-send');
  const chatLines = [];

  function setMode(mode) {
    const isTemplate = mode === 'template';
    modeInput.value = mode;
    templatePane.classList.toggle('d-none', !isTemplate);
    chatPane.classList.toggle('d-none', isTemplate);
    infoCol.classList.toggle('d-none', !isTemplate);
    mainCol.classList.toggle('col-lg-8', isTemplate);
    mainCol.classList.toggle('col-lg-12', !isTemplate);
    infoCol.querySelectorAll('input, select, textarea, button').forEach(el => {
      if (el.type === 'hidden') return;
      el.disabled = !isTemplate;
    });
    if (funnelNameInput) {
      funnelNameInput.required = isTemplate;
    }
    modeButtons.forEach(btn => {
      const active = btn.dataset.mode === mode;
      btn.classList.toggle('active', active);
      btn.setAttribute('aria-pressed', active ? 'true' : 'false');
    });
    if (modeHint) {
      modeHint.textContent = isTemplate
        ? 'テンプレートを選び、右の情報を入力して「作成する」を押してください。'
        : '';
    }
  }

  modeButtons.forEach(btn => {
    btn.addEventListener('click', () => setMode(btn.dataset.mode || 'template'));
  });

  document.querySelectorAll('.template-card').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.template-card').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      templateKeyInput.value = btn.dataset.templateKey || 'blank';
    });
  });

  function scrollChat() {
    if (chatLog) chatLog.scrollTop = chatLog.scrollHeight;
  }

  function hideChatEmpty() {
    const empty = document.getElementById('funnel-create-chat-empty');
    if (empty) empty.remove();
  }

  function appendChat(role, body) {
    hideChatEmpty();
    const wrap = document.createElement('div');
    wrap.className = 'dashboard-chat-msg dashboard-chat-msg--' + (role === 'assistant' ? 'assistant' : 'user');
    wrap.innerHTML = '<div class="dashboard-chat-msg-bubble"></div><div class="dashboard-chat-msg-meta"></div>';
    wrap.querySelector('.dashboard-chat-msg-bubble').textContent = body;
    const d = new Date();
    wrap.querySelector('.dashboard-chat-msg-meta').textContent =
      (d.getMonth() + 1) + '/' + d.getDate() + ' ' +
      String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
    chatLog.appendChild(wrap);
    scrollChat();
  }

  function pushChatLine(role, text) {
    chatLines.push((role === 'user' ? '【あなた】' : '【monaka】') + text);
    chatBriefInput.value = chatLines.join('\n\n');
  }

  const assistantReply = '承知しました。内容をもとにファネルを組み立てます。準備ができたら下の「この内容でファネルを作成する」を押してください。';

  function sendChat() {
    const text = (chatInput.value || '').trim();
    if (!text) return;
    if (chatError) chatError.classList.add('d-none');
    appendChat('user', text);
    pushChatLine('user', text);
    chatInput.value = '';
    setTimeout(() => {
      appendChat('assistant', assistantReply);
      pushChatLine('assistant', assistantReply);
    }, 400);
  }

  if (chatSend) chatSend.addEventListener('click', sendChat);
  if (chatInput) {
    chatInput.addEventListener('keydown', e => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendChat();
      }
    });
  }

  function hasUserChatContent() {
    return chatLines.some(line => line.startsWith('【あなた】'));
  }

  function syncChatBriefBeforeSubmit() {
    if (!chatInput) return;
    if (chatInput.value.trim()) {
      appendChat('user', chatInput.value.trim());
      pushChatLine('user', chatInput.value.trim());
      chatInput.value = '';
    }
  }

  form.addEventListener('submit', function (e) {
    if (modeInput.value === 'chat') {
      e.preventDefault();
      // ベータ（flag ON）ではチャット作成はカード内 iframe が担うため、旧チャットUIは無い。
      // その場合この外側フォームからの作成処理は行わない（chatInput が無い＝旧UI非表示）。
      if (!chatInput) return;
      syncChatBriefBeforeSubmit();
      templateKeyInput.value = 'blank';
      if (!hasUserChatContent()) {
        if (chatError) {
          chatError.textContent = 'まずチャットで作りたい内容を送信してください。';
          chatError.classList.remove('d-none');
        }
        return;
      }
      if (chatError) chatError.classList.add('d-none');
      form.submit();
      return;
    }
    templateKeyInput.value = templateKeyInput.value || 'blank';
  });

  (() => {
    const initialMode = modeInput.value === 'chat' ? 'chat' : 'template';
    setMode(initialMode);
    const key = templateKeyInput.value || 'blank';
    const el = document.querySelector('.template-card[data-template-key="' + CSS.escape(key) + '"]');
    if (el) el.classList.add('active');
    if (initialMode === 'chat' && chatBriefInput.value.trim()) {
      hideChatEmpty();
      chatBriefInput.value.split('\n\n').forEach(block => {
        const isUser = block.startsWith('【あなた】');
        const body = block.replace(/^【あなた】|^【monaka】/, '').trim();
        if (body) {
          appendChat(isUser ? 'user' : 'assistant', body);
          chatLines.push(block);
        }
      });
    }
  })();
})();
</script>
@endpush
@endsection