@extends('layouts.app')
@section('title', 'ステップ配信')
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@section('page-title', $scenario->name . ' - ステップ配信')
@push('styles')
<style>
.delivery-page-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 14px;
}
.delivery-page-tabs .tab-item {
  text-decoration: none;
  color: #5f6d84;
  font-size: 0.92rem;
  padding: 9px 2px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.delivery-page-tabs .tab-item.active {
  color: #2b4f9b;
  border-bottom-color: #4f77cf;
  font-weight: 600;
}
.delivery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
</style>
@endpush
@section('content')
{{-- 成功・エラーのフラッシュは共通レイアウト(layouts.app)で表示されるため、ここでは重複表示しない --}}
<div class="delivery-page-tabs">
  <a href="{{ route('account.index') }}" class="tab-item"><i class="bi bi-list-ul" aria-hidden="true"></i>送信用アカウント一覧</a>
  <a href="{{ route('scenario.index', $account) }}" class="tab-item"><i class="bi bi-diagram-2" aria-hidden="true"></i>{{ $account->name }} / シナリオ一覧</a>
  <a href="{{ route('scenario.workspace.show', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-house-door" aria-hidden="true"></i>{{ $scenario->name }} / 概要</a>
  <a href="{{ route('subscriber.index', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-people" aria-hidden="true"></i>読者一覧</a>
  <a href="{{ route('scenario.broadcast.index', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-send" aria-hidden="true"></i>メール一斉</a>
  <span class="tab-item active d-inline-flex align-items-center gap-1"><i class="bi bi-clock-history" aria-hidden="true"></i>ステップ配信</span>
</div>
<div class="delivery-toolbar">
  <a href="{{ route('scenario.index', $account) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>シナリオ一覧</a>
  <a href="{{ route('step.create', [$account, $scenario]) }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>ステップを追加</a>
  {{-- ステップが0件でも出す。隠すと「機能そのものが無い」と思われる。 --}}
  @include('account.scenario.partials._bulk_preview_offcanvas', [
    'previewUrl' => route('step.preview', [$account, $scenario], false),
    'previewTitle' => '一括プレビュー（メール）',
    'previewCount' => $steps->count(),
  ])
</div>
<div class="alert alert-info border-info py-3 mb-3 small">
  <div class="fw-semibold text-dark mb-1"><i class="bi bi-info-circle me-1"></i>ステップの設定について</div>
  <p class="mb-0"><strong>ステップを追加</strong>は専用ページで、配信条件・送信者・件名・本文・プレビュー・送信タイミング・既存読者ポリシーを入力できます。保存後は<strong>ステップ編集</strong>へ進み、URL 置換・テスト送信など続きを設定できます。</p>
</div>
@if($steps->isEmpty())
<div class="card"><div class="card-body text-center py-5">
  <i class="bi bi-envelope-open" style="font-size:3rem;color:#ddd;"></i>
  <h5 class="mt-3 text-muted">ステップがありません</h5>
  <a href="{{ route('step.create', [$account, $scenario]) }}" class="btn btn-primary btn-sm mt-3"><i class="bi bi-plus-lg me-1"></i>ステップを追加</a>
</div></div>
@else
<div class="position-relative">
  @foreach($steps as $i => $step)
  <div class="d-flex gap-3 mb-3">
    <div class="d-flex flex-column align-items-center">
      <div style="width:40px;height:40px;background:{{ $step->status === 'active' ? '#6c5ce7' : '#ddd' }};border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.85rem;">{{ $i+1 }}</div>
      @if(!$loop->last)<div style="width:2px;flex:1;background:#e0e0e0;margin:4px auto;min-height:20px;"></div>@endif
    </div>
    @if(($step->type ?? '') === 'email')
    @php
      // タイミングの文言はモデルが正本（一覧と一括プレビューで同じ表記にする）
      $schedLabel = $step->timingLabel();
    @endphp
    <div class="card flex-fill mb-0">
      <div class="card-body py-3">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <span class="fw-semibold">{{ $step->name }}</span>
            {{-- 配信されるのは稼働中だけ。下書き・停止は理由が違うので分けて出す
                 （チャットで作成したステップは下書きのまま届かない、を見落とさないため） --}}
            @if(($step->status ?? '') === 'draft')
              <span class="badge bg-warning text-dark ms-2">下書き（未配信）</span>
            @elseif(($step->status ?? '') !== 'active')
              <span class="badge bg-secondary ms-2">停止中</span>
            @endif
            @if(($step->mail_format ?? 'html') === 'text')
              <span class="badge bg-secondary ms-2">テキスト</span>
            @endif
          </div>
          <div class="d-flex align-items-center gap-2 flex-wrap">
            <span class="text-muted small">{{ $schedLabel }}</span>
            <a href="{{ route('step.edit', [$account, $scenario, $step]) }}" class="btn btn-sm btn-outline-primary">編集</a>
          </div>
        </div>
        @if($step->subject)<div class="text-muted small mt-1">件名: {{ $step->subject }}</div>@endif
        <div class="mt-2 pt-2 border-top">
          <a href="{{ route('step.edit', [$account, $scenario, $step]) }}" class="small fw-semibold text-decoration-none">
            詳細設定を開く <span class="text-muted fw-normal">（送信者・配信条件・本文形式・送信タイミングの種類・既存読者…）</span>
            <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>
    @else
    <div class="card flex-fill mb-0 border-warning">
      <div class="card-body py-3">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <span class="fw-semibold">{{ $step->name }}</span>
            <span class="badge bg-warning text-dark ms-2">レガシー（{{ $step->type }}）</span>
            <p class="small text-muted mb-0 mt-2">現在のステップ配信は<strong>メールのみ</strong>のため、このタイプは編集できません。不要なら削除してください。</p>
          </div>
          <form method="post" action="{{ route('step.destroy', [$account, $scenario, $step]) }}" class="d-inline align-self-start"
            onsubmit="return confirm('このステップを削除しますか？');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
          </form>
        </div>
      </div>
    </div>
    @endif
  </div>
  @endforeach
</div>
@endif
@endsection