@extends('layouts.app')
@section('title', $scenario->name . ' - ステップ編集')
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@section('page-title', $scenario->name . ' - ステップ編集')
@php
  $rawT = $step->delay_time;
  $timeInput = '09:00';
  if (is_string($rawT) && strlen($rawT) >= 5) {
    $timeInput = substr($rawT, 0, 5);
  } elseif ($rawT instanceof \Carbon\CarbonInterface) {
    $timeInput = $rawT->format('H:i');
  }
  $sched = old('schedule_mode', $step->schedule_mode ?? 'registration_plus_days');
  $mailFmt = old('mail_format', $step->mail_format ?? 'html');
  $conditionConfig = is_array($step->condition_config ?? null) ? $step->condition_config : [];
  $actionConfig = is_array($step->action_config ?? null) ? $step->action_config : [];
  $requiredLabelsText = old('condition_required_labels', implode("\n", $conditionConfig['required_labels'] ?? []));
  $excludedLabelsText = old('condition_excluded_labels', implode("\n", $conditionConfig['excluded_labels'] ?? []));
  $addLabelsText = old('action_add_labels', implode("\n", $actionConfig['add_labels'] ?? []));
  $removeLabelsText = old('action_remove_labels', implode("\n", $actionConfig['remove_labels'] ?? []));
  $transitionScenarioId = old('action_transition_scenario_id', $actionConfig['transition_scenario_id'] ?? '');
  $deactivateCurrent = old('action_deactivate_current', (bool) ($actionConfig['deactivate_current'] ?? false));
  $deactivateAfterTransition = old('action_deactivate_after_transition', (bool) ($actionConfig['deactivate_after_transition'] ?? false));
@endphp
@push('styles')
<style>
.step-utage-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 1.25rem;
}
.step-utage-card-h {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
}
.step-utage-card-b { padding: 1rem 1rem 1.1rem; }
.ph-mini { max-height: 16rem; overflow-y: auto; font-size: 0.8rem; }
</style>
@endpush
@section('content')
<div class="delivery-page-tabs mb-2">
  <a href="{{ route('account.index') }}" class="text-decoration-none text-muted small">送信用アカウント一覧</a>
  <span class="text-muted px-1">/</span>
  <a href="{{ route('scenario.index', $account) }}" class="text-decoration-none text-muted small">{{ $account->name }}</a>
  <span class="text-muted px-1">/</span>
  <a href="{{ route('step.index', [$account, $scenario]) }}" class="text-decoration-none small">{{ $scenario->name }} · ステップ配信</a>
</div>

{{-- 成功・エラーのフラッシュは共通レイアウト(layouts.app)で表示されるため、ここでは重複表示しない --}}
<div class="alert alert-info d-flex align-items-start gap-2 py-2 small" role="note">
  <i class="bi bi-info-circle-fill mt-1"></i>
  <div>ここは<strong>ステップの詳細設定画面</strong>です。配信タイミング・本文・URL置換などを設定し、最後にページ下部の <strong>「保存」</strong> ボタンで確定してください。保存すると一覧に戻ります。</div>
</div>

<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
  <div>
    <span class="fw-semibold">{{ $step->name }}</span>
  </div>
  <div class="d-flex flex-wrap gap-2 align-items-center justify-content-end">
    <a href="{{ route('step.index', [$account, $scenario]) }}" class="btn btn-outline-secondary btn-sm">一覧へ戻る</a>
    <form method="post" action="{{ route('step.destroy', [$account, $scenario, $step]) }}" class="d-inline"
      onsubmit="return confirm('このステップを削除しますか？\n（取り消しできません）');">
      @csrf
      @method('DELETE')
      <button type="submit" class="btn btn-outline-danger btn-sm">削除</button>
    </form>
    <button type="submit" form="step-edit-form" class="btn btn-success btn-sm">保存</button>
  </div>
</div>

<form method="post" action="{{ route('step.update', [$account, $scenario, $step]) }}" id="step-edit-form">
  @csrf
  @method('PUT')

  <div class="step-utage-card">
    <div class="step-utage-card-h">管理名称</div>
    <div class="step-utage-card-b">
      <label class="form-label fw-semibold small">ステップ名（管理用）</label>
      <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
        value="{{ old('name', $step->name) }}" required maxlength="200">
      @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">配信条件</div>
    <div class="step-utage-card-b">
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="delivery_condition_mode" id="cond_all" value="all"
          {{ old('delivery_condition_mode', $step->delivery_condition_mode ?? 'all') === 'all' ? 'checked' : '' }}>
        <label class="form-check-label" for="cond_all">シナリオ登録者全員に配信（条件を指定しない）</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="delivery_condition_mode" id="cond_filter" value="conditional"
          {{ old('delivery_condition_mode', $step->delivery_condition_mode ?? 'all') === 'conditional' ? 'checked' : '' }}>
        <label class="form-check-label" for="cond_filter">条件に該当する登録者に配信（条件を指定する）</label>
      </div>
      @error('delivery_condition_mode')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
      <div id="cond-conditional-note" class="alert alert-light border small mt-3 mb-0 py-2 {{ old('delivery_condition_mode', $step->delivery_condition_mode ?? 'all') === 'conditional' ? '' : 'd-none' }}">
        下のラベル条件を送信エンジンが判定します。対象者プレビューは未接続です。
      </div>
      <div class="row g-3 mt-1">
        <div class="col-md-6">
          <label class="form-label small fw-semibold" for="condition_required_labels">必須ラベル</label>
          <textarea name="condition_required_labels" id="condition_required_labels" rows="3" class="form-control form-control-sm @error('condition_required_labels') is-invalid @enderror" placeholder="1行に1つ">{{ $requiredLabelsText }}</textarea>
          @error('condition_required_labels')<div class="invalid-feedback">{{ $message }}</div>@enderror
          <div class="form-text small">すべてのラベルを持つ読者だけに送信します。</div>
        </div>
        <div class="col-md-6">
          <label class="form-label small fw-semibold" for="condition_excluded_labels">除外ラベル</label>
          <textarea name="condition_excluded_labels" id="condition_excluded_labels" rows="3" class="form-control form-control-sm @error('condition_excluded_labels') is-invalid @enderror" placeholder="1行に1つ">{{ $excludedLabelsText }}</textarea>
          @error('condition_excluded_labels')<div class="invalid-feedback">{{ $message }}</div>@enderror
          <div class="form-text small">いずれかのラベルを持つ読者には送信しません。</div>
        </div>
      </div>
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">配信メール</div>
    <div class="step-utage-card-b">
      @include('account.scenario.partials.step_mail_from_defaults', ['extended' => $extended, 'account' => $mailAccount ?? $account])
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold small">送信者名</label>
          <input type="text" name="mail_from_name" class="form-control form-control-sm @error('mail_from_name') is-invalid @enderror"
            value="{{ old('mail_from_name', $step->mail_from_name) }}" placeholder="任意（空欄なら上記の既定）" autocomplete="organization">
          @error('mail_from_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold small">送信者メールアドレス</label>
          <input type="email" name="mail_from_email" class="form-control form-control-sm @error('mail_from_email') is-invalid @enderror"
            value="{{ old('mail_from_email', $step->mail_from_email) }}" placeholder="任意（空欄なら上記の既定）" autocomplete="email">
          @error('mail_from_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-8">
          <label class="form-label fw-semibold small">件名</label>
          <input type="text" name="subject" class="form-control form-control-sm @error('subject') is-invalid @enderror"
            value="{{ old('subject', $step->subject) }}">
          @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-4 d-flex align-items-end">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" name="ab_test_enabled" id="ab_test" value="1"
              {{ old('ab_test_enabled', $step->ab_test_enabled) ? 'checked' : '' }}>
            <label class="form-check-label small" for="ab_test">A/Bテストを行う（保存のみ・未接続）</label>
          </div>
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold small d-block">種類（本文）</label>
          <div class="btn-group btn-group-sm" role="group">
            <input type="radio" class="btn-check" name="mail_format" id="mf_html" value="html" autocomplete="off"
              {{ $mailFmt === 'html' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="mf_html">HTML</label>
            <input type="radio" class="btn-check" name="mail_format" id="mf_text" value="text" autocomplete="off"
              {{ $mailFmt === 'text' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="mf_text">テキスト</label>
          </div>
          @error('mail_format')<div class="text-danger small">{{ $message }}</div>@enderror
        </div>
        <div class="col-lg-8">
          <label class="form-label fw-semibold small">本文</label>
          <div id="wrap-body-html" class="{{ $mailFmt === 'html' ? '' : 'd-none' }}">
            <textarea name="body_html" id="step_body_html" rows="14" class="form-control form-control-sm font-monospace @error('body_html') is-invalid @enderror">{{ old('body_html', $step->body_html) }}</textarea>
            @error('body_html')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div id="wrap-body-text" class="{{ $mailFmt === 'text' ? '' : 'd-none' }}">
            <textarea name="body_text" id="step_body_text" rows="14" class="form-control form-control-sm font-monospace @error('body_text') is-invalid @enderror">{{ old('body_text', $step->body_text) }}</textarea>
            @error('body_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
        <div class="col-lg-4">
          @include('account.scenario.partials.step_mail_placeholder_chips', [
            'mode' => 'edit',
            'readerFormFields' => $readerFormFields,
            'customPlaceholders' => $customPlaceholders,
          ])
        </div>
      </div>
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">プレビューに表示するテキスト</div>
    <div class="step-utage-card-b">
      <input type="text" name="preview_text" class="form-control form-control-sm @error('preview_text') is-invalid @enderror"
        value="{{ old('preview_text', $step->preview_text) }}" maxlength="500" placeholder="メールクライアントのプレビュー一行目など（任意）">
      @error('preview_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
      <div class="form-text small">対応は送信エンジン接続後の想定です。現状は<strong>保存のみ</strong>です。</div>
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">送信のタイミング <span class="text-danger small">必須</span></div>
    <div class="step-utage-card-b">
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="schedule_mode" id="sched_imm" value="registration_immediate"
          {{ $sched === 'registration_immediate' ? 'checked' : '' }}>
        <label class="form-check-label" for="sched_imm">シナリオ登録直後（当日・配信エンジン未接続時は保存のみ）</label>
      </div>
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="schedule_mode" id="sched_days" value="registration_plus_days"
          {{ $sched === 'registration_plus_days' ? 'checked' : '' }}>
        <label class="form-check-label" for="sched_days">送信日を指定（登録〇日後の〇時〇分）</label>
      </div>
      <div class="form-check mb-3">
        <input class="form-check-input" type="radio" name="schedule_mode" id="sched_hours" value="registration_plus_hours"
          {{ $sched === 'registration_plus_hours' ? 'checked' : '' }}>
        <label class="form-check-label" for="sched_hours">送信日を指定（登録〇時間〇分後）</label>
      </div>

      <div id="row-delay-days" class="row g-2 mb-2 {{ $sched === 'registration_plus_days' ? '' : 'd-none' }}">
        <div class="col-auto">
          <label class="form-label small mb-0">登録から</label>
          <input type="number" name="delay_days" class="form-control form-control-sm" style="width:5rem" min="0" max="3650"
            value="{{ old('delay_days', $step->delay_days ?? 0) }}">
        </div>
        <div class="col-auto d-flex align-items-end pb-1 small">日後</div>
        <div class="col-auto">
          <label class="form-label small mb-0">時刻</label>
          <input type="time" name="delay_time" class="form-control form-control-sm" value="{{ old('delay_time', $timeInput) }}">
        </div>
      </div>

      <div id="row-delay-hours" class="row g-2 mb-1 {{ $sched === 'registration_plus_hours' ? '' : 'd-none' }}">
        <div class="col-auto">
          <label class="form-label small mb-0">時間</label>
          <input type="number" name="delay_hours_after" class="form-control form-control-sm" style="width:5rem" min="0" max="8760"
            value="{{ old('delay_hours_after', $step->delay_hours_after ?? 0) }}">
        </div>
        <div class="col-auto">
          <label class="form-label small mb-0">分</label>
          <input type="number" name="delay_minutes_after" class="form-control form-control-sm" style="width:4rem" min="0" max="59"
            value="{{ old('delay_minutes_after', $step->delay_minutes_after ?? 0) }}">
        </div>
      </div>
      @error('schedule_mode')<div class="text-danger small">{{ $message }}</div>@enderror
      @error('delay_days')<div class="text-danger small">{{ $message }}</div>@enderror
      @error('delay_time')<div class="text-danger small">{{ $message }}</div>@enderror
      @error('delay_hours_after')<div class="text-danger small">{{ $message }}</div>@enderror
      @error('delay_minutes_after')<div class="text-danger small">{{ $message }}</div>@enderror
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">既存読者への送信</div>
    <div class="step-utage-card-b">
      <select name="existing_reader_policy" class="form-select form-select-sm @error('existing_reader_policy') is-invalid @enderror">
        <option value="reserve_skip_late" {{ old('existing_reader_policy', $step->existing_reader_policy ?? 'reserve_skip_late') === 'reserve_skip_late' ? 'selected' : '' }}>
          配信時刻より前に登録した読者：配信予約／後から登録した読者：このステップでは送らない
        </option>
        <option value="schedule_all_readers" {{ old('existing_reader_policy', $step->existing_reader_policy ?? '') === 'schedule_all_readers' ? 'selected' : '' }}>
          既存・新規ともにスケジュールに従って送る（論理は送信エンジン側）
        </option>
        <option value="skip_existing_readers" {{ old('existing_reader_policy', $step->existing_reader_policy ?? '') === 'skip_existing_readers' ? 'selected' : '' }}>
          ステップ追加以前からいる読者には送らない（新規のみ）
        </option>
      </select>
      @error('existing_reader_policy')<div class="invalid-feedback">{{ $message }}</div>@enderror
      <div class="form-text small mt-1">実際の振り分けはステップエンジン接続後の想定。現状は<strong>保存のみ</strong>です。</div>
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">送信後アクション・リンク・URL</div>
    <div class="step-utage-card-b row g-3">
      <div class="col-md-6">
        <label class="form-label small fw-semibold" for="action_add_labels">付与するラベル</label>
        <textarea name="action_add_labels" id="action_add_labels" rows="3" class="form-control form-control-sm @error('action_add_labels') is-invalid @enderror" placeholder="1行に1つ">{{ $addLabelsText }}</textarea>
        @error('action_add_labels')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="col-md-6">
        <label class="form-label small fw-semibold" for="action_remove_labels">除外するラベル</label>
        <textarea name="action_remove_labels" id="action_remove_labels" rows="3" class="form-control form-control-sm @error('action_remove_labels') is-invalid @enderror" placeholder="1行に1つ">{{ $removeLabelsText }}</textarea>
        @error('action_remove_labels')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="col-md-7">
        <label class="form-label small fw-semibold" for="action_transition_scenario_id">別シナリオへ登録</label>
        <select name="action_transition_scenario_id" id="action_transition_scenario_id" class="form-select form-select-sm @error('action_transition_scenario_id') is-invalid @enderror">
          <option value="">登録しない</option>
          @foreach($transitionScenarios as $targetScenario)
            <option value="{{ $targetScenario->id }}" @selected((string) $transitionScenarioId === (string) $targetScenario->id)>{{ $targetScenario->name }}</option>
          @endforeach
        </select>
        @error('action_transition_scenario_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="col-md-5 d-flex flex-column justify-content-end gap-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="action_deactivate_current" id="action_deactivate_current" value="1" {{ $deactivateCurrent ? 'checked' : '' }}>
          <label class="form-check-label small" for="action_deactivate_current">このシナリオの読者を停止する</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="action_deactivate_after_transition" id="action_deactivate_after_transition" value="1" {{ $deactivateAfterTransition ? 'checked' : '' }}>
          <label class="form-check-label small" for="action_deactivate_after_transition">別シナリオ登録後、このシナリオを停止する</label>
        </div>
      </div>
      <div class="col-12">
        <div class="form-text small">メール送信が成功したあと、送信済み記録と同じ処理内で実行します。</div>
      </div>
      <div class="col-md-6">
        <label class="form-label small fw-semibold">リンククリック時のアクション</label>
        <select name="link_click_action" class="form-select form-select-sm">
          <option value="none" selected>実行しない</option>
        </select>
      </div>
      <div class="col-md-6">
        <label class="form-label small fw-semibold">URL置換ドメイン</label>
        <select name="url_replace_domain_mode" class="form-select form-select-sm @error('url_replace_domain_mode') is-invalid @enderror">
          <option value="default" {{ old('url_replace_domain_mode', $step->url_replace_domain_mode ?? 'default') === 'default' ? 'selected' : '' }}>デフォルト（シナリオ設定のホスト）</option>
          <option value="scenario" {{ old('url_replace_domain_mode', $step->url_replace_domain_mode ?? '') === 'scenario' ? 'selected' : '' }}>シナリオのデフォルトURL置換ドメインを使用</option>
        </select>
        @error('url_replace_domain_mode')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="col-md-6">
        <label class="form-label small fw-semibold">URL置換の見え方</label>
        <select name="url_replace_display_mode" class="form-select form-select-sm @error('url_replace_display_mode') is-invalid @enderror">
          <option value="original" {{ old('url_replace_display_mode', $step->url_replace_display_mode ?? 'original') === 'original' ? 'selected' : '' }}>元のURLを表示</option>
        </select>
        <div class="form-text small">短縮ドメイン・計測のみ表示などは将来対応予定です。</div>
        @error('url_replace_display_mode')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="col-12">
        <label class="form-label small fw-semibold">テスト送信</label>
        <div class="input-group input-group-sm" style="max-width:28rem">
          <input type="email" class="form-control" placeholder="テスト送信先メールアドレス" disabled>
          <button type="button" class="btn btn-outline-secondary" disabled>送信</button>
        </div>
        <div class="form-text small">送信エンジン未接続のため利用できません。</div>
      </div>
    </div>
  </div>

  <div class="step-utage-card">
    <div class="step-utage-card-h">ステータス</div>
    <div class="step-utage-card-b">
      {{-- 下書き・停止は別の概念。下書き＝まだ配信を開始していない、停止＝いったん止めている。
           チャットで作成したステップは下書きで作られるため、ここに選択肢が無いと
           **どれも選ばれず先頭の「稼働中」が表示され**、「もう動いている」と誤解される。 --}}
      <select name="status" class="form-select form-select-sm @error('status') is-invalid @enderror" style="max-width:12rem">
        <option value="draft" {{ old('status', $step->status) === 'draft' ? 'selected' : '' }}>下書き（まだ配信しない）</option>
        <option value="active" {{ old('status', $step->status) === 'active' ? 'selected' : '' }}>稼働中</option>
        <option value="inactive" {{ old('status', $step->status) === 'inactive' ? 'selected' : '' }}>停止</option>
      </select>
      <div class="form-text">配信されるのは<strong>稼働中</strong>のときだけです。</div>
      @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
  </div>

  <div class="mb-5">
    <button type="submit" class="btn btn-success">保存</button>
    <a href="{{ route('step.index', [$account, $scenario]) }}" class="btn btn-outline-secondary ms-2">一覧へ戻る</a>
  </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
  function toggleSched() {
    var m = document.querySelector('input[name="schedule_mode"]:checked');
    var mode = m ? m.value : 'registration_plus_days';
    document.getElementById('row-delay-days').classList.toggle('d-none', mode !== 'registration_plus_days');
    document.getElementById('row-delay-hours').classList.toggle('d-none', mode !== 'registration_plus_hours');
  }
  document.querySelectorAll('input[name="schedule_mode"]').forEach(function (el) {
    el.addEventListener('change', toggleSched);
  });
  toggleSched();

  var mfHtml = document.getElementById('mf_html');
  var mfText = document.getElementById('mf_text');
  if (mfHtml && mfText) {
    function toggleMailFmt() {
      var html = mfHtml.checked;
      var wh = document.getElementById('wrap-body-html');
      var wt = document.getElementById('wrap-body-text');
      if (wh) wh.classList.toggle('d-none', !html);
      if (wt) wt.classList.toggle('d-none', html);
    }
    mfHtml.addEventListener('change', toggleMailFmt);
    mfText.addEventListener('change', toggleMailFmt);
    toggleMailFmt();
  }

  document.querySelectorAll('.token-chip').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var tok = btn.getAttribute('data-token');
      if (!tok) return;
      var ta = document.getElementById('step_body_text');
      var ha = document.getElementById('step_body_html');
      var target = ha;
      if (mfText && mfText.checked && ta) target = ta;
      if (!target) target = ha || ta;
      if (!target) return;
      var start = target.selectionStart != null ? target.selectionStart : target.value.length;
      var end = target.selectionEnd != null ? target.selectionEnd : target.value.length;
      target.value = target.value.slice(0, start) + tok + target.value.slice(end);
      target.focus();
      target.selectionStart = target.selectionEnd = start + tok.length;
    });
  });

  var condFilter = document.getElementById('cond_filter');
  var condNote = document.getElementById('cond-conditional-note');
  if (condFilter && condNote) {
    document.querySelectorAll('input[name="delivery_condition_mode"]').forEach(function (r) {
      r.addEventListener('change', function () {
        condNote.classList.toggle('d-none', !document.getElementById('cond_filter').checked);
      });
    });
    condNote.classList.toggle('d-none', !condFilter.checked);
  }
})();
</script>
@endpush