@include('whatsappcenter::admin.partials.styles')
<div class="wac-page container-fluid">

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">Bot Flows</h4>
      <p class="wac-subtitle">Multi-step conversation flows — collect info step by step</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('admin.whatsappcenter.flows.import') }}" class="wac-btn-secondary" style="padding:.5rem 1.1rem;font-size:.82rem">
        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Import Flow
      </a>
      <a href="{{ route('admin.whatsappcenter.flows.create') }}" class="wac-btn-primary" style="padding:.5rem 1.1rem;font-size:.82rem">
        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        New Flow
      </a>
    </div>
  </div>

  @if(session('success'))
    <div class="wac-notice suc">{{ session('success') }}</div>
  @endif

  @if($flows->isEmpty())
    <div class="wac-card"><div class="wac-empty">
      <div class="wac-empty-icon">🤖</div>
      <h5>No Bot Flows Yet</h5>
      <p>Create a multi-step flow to collect information from users — like a lead form over WhatsApp.</p>
      <a href="{{ route('admin.whatsappcenter.flows.create') }}" class="wac-btn-primary">
        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Create Your First Flow
      </a>
    </div></div>
  @else
    <div class="row g-3">
      @foreach($flows as $flow)
      <div class="col-xl-4 col-md-6">
        <div class="wac-card h-100" style="border-top: 3px solid {{ $flow->is_active ? 'var(--wac-green-light)' : '#cbd5e1' }}; margin-bottom:0">
          <div class="wac-card-head">
            <div style="flex:1;min-width:0">
              <div style="font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $flow->name }}</div>
              @if($flow->description)
                <div style="font-size:.72rem;color:var(--text-secondary);margin-top:2px">{{ Str::limit($flow->description,55) }}</div>
              @endif
            </div>
            <label class="wac-toggle ms-2">
              <input type="checkbox" {{ $flow->is_active ? 'checked' : '' }} onchange="toggleFlow({{ $flow->id }}, this)">
              <span class="wac-toggle-slider"></span>
            </label>
          </div>

          <div class="wac-card-body" style="padding-bottom:.875rem">
            <div class="d-flex gap-2 flex-wrap mb-3">
              <span class="wac-badge wac-badge-{{ $flow->is_active ? 'teal' : 'grey' }}">
                <svg width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                {{ $flow->trigger_type === 'button_reply' ? 'Button' : 'Keyword' }}: {{ Str::limit($flow->trigger_keyword, 20) }}
              </span>
              <span class="wac-badge wac-badge-grey">
                <svg width="9" height="9" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
                {{ $flow->steps_count }} steps
              </span>
            </div>

            {{-- Step preview --}}
            <div style="background:var(--body-bg);border-radius:.6rem;padding:.625rem .875rem;margin-bottom:1rem">
              @php $steps = $flow->steps ?? collect(); @endphp
              @forelse($steps->take(4) as $step)
                <div style="display:flex;align-items:center;gap:.5rem;padding:2px 0;font-size:.75rem;color:var(--text-secondary)">
                  <span style="width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--wac-green),var(--wac-green-mid));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0">{{ $step->step_order }}</span>
                  <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ Str::limit($step->label, 38) }}</span>
                  <span style="flex-shrink:0;opacity:.6;font-size:.75rem">{{ $step->message_type==='list'?'📋':($step->message_type==='buttons'?'🔘':'✏️') }}</span>
                </div>
              @empty
                <div style="font-size:.75rem;color:var(--text-secondary);font-style:italic">No steps configured</div>
              @endforelse
              @if($flow->steps_count > 4)
                <div style="font-size:.7rem;color:var(--text-secondary);padding-top:.25rem;font-style:italic">+ {{ $flow->steps_count - 4 }} more steps</div>
              @endif
            </div>

            <div class="d-flex gap-2">
              <a href="{{ route('admin.whatsappcenter.flows.edit', $flow->id) }}" class="wac-btn-teal" style="flex:1;justify-content:center;padding:.45rem">
                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Edit Flow
              </a>
              <button class="wac-btn-del" style="padding:.45rem .875rem" onclick="deleteFlow({{ $flow->id }})" title="Delete">
                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  @endif

</div>
<script>
function toggleFlow(id, el) {
  fetch(`/admin/whatsappcenter/flows/${id}/toggle`, {
    method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'}
  }).then(r=>r.json()).then(d=>{ if(!d.success) el.checked=!el.checked; }).catch(()=>el.checked=!el.checked);
}
function deleteFlow(id) {
  if(!confirm('Delete this bot flow? This cannot be undone.')) return;
  const f=document.createElement('form'); f.method='POST'; f.action=`/admin/whatsappcenter/flows/${id}`;
  f.innerHTML='<input type="hidden" name="_token" value="{{ csrf_token() }}"><input type="hidden" name="_method" value="DELETE">';
  document.body.appendChild(f); f.submit();
}
</script>