@php
  $reqLine = in_array($account->type, ['line', 'both'], true);
  $webhookUrl = $lineWebhookUrl ?? route('line.messaging.webhook', ['uid' => $account->uid], true);
  $lineCheckUrl = route('account.line-settings-check', $account);
  $lineDevelopersConsole = 'https://developers.line.biz/console/';
  $stepwiseSave = $stepwiseSave ?? false;
  $setupChannel = $setupChannel ?? null;
  if (! in_array($setupChannel, ['mail', 'line'], true)) {
      $setupChannel = null;
  }
@endphp

@push('styles')
<style>
.line-setup-step-card {
  border: 1px solid var(--border-soft, #dee2e6);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  background: #fff;
}
.line-setup-step-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: #2b4f9b;
  color: #fff;
  margin-bottom: 0.5rem;
}
.line-setup-step-card h6 {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.line-check-table th { font-size: 0.78rem; }
.line-check-detail { max-width: 22rem; }
.badge-req { display:inline-block; font-size:0.68rem; font-weight:700; padding:0.1rem 0.45rem; border-radius:4px; background:#fde8e8; color:#c0392b; border:1px solid #f5c6cb; margin-left:0.4rem; vertical-align:middle; }
.badge-opt { display:inline-block; font-size:0.68rem; font-weight:700; padding:0.1rem 0.45rem; border-radius:4px; background:#eef1f5; color:#6c757d; border:1px solid #dde3ea; margin-left:0.4rem; vertical-align:middle; }
.badge-auto { display:inline-block; font-size:0.68rem; font-weight:700; padding:0.1rem 0.45rem; border-radius:4px; background:#e8f2ff; color:#2454a6; border:1px solid #c8dcff; margin-left:0.4rem; vertical-align:middle; }
.line-legend { font-size:0.78rem; }
</style>
@endpush

<p class="small text-muted mb-3">
  LINE連携の設定ですが、<strong>LINE側の画面に表示される情報を、この画面にコピーして貼り付けるだけ</strong>です。<br>
  特別難しい操作は必要ありません。設定は <strong>STEP 1 → 2 → 3</strong> の順に進めていきましょう。各ステップに保存ボタンがありますので、入力した内容は必ず保存しながら進めてください。
</p>
<div class="line-legend text-muted mb-3">
  各項目のラベル横に <span class="badge-req">必須</span>（入力が必要）／<span class="badge-opt">任意</span>（空欄でもOK）／<span class="badge-auto">自動</span>（monakaが用意・入力不要）を表示しています。まずは <span class="badge-req">必須</span> の項目だけ埋めれば使い始められます。
</div>

@if($stepwiseSave)
<form method="POST" action="{{ route('account.line-settings.save-messaging', $account) }}" class="line-setup-step-card" id="line-step-messaging">
  @csrf
  @method('PUT')
  @if($setupChannel)<input type="hidden" name="setup_channel" value="{{ $setupChannel }}">@endif
@else
<div class="line-setup-step-card" id="line-step-messaging">
@endif
  <span class="line-setup-step-badge">STEP 1</span>
  <h6 class="h6">LINE公式アカウントとつなぐ</h6>
  <p class="small text-muted mb-3">
    <a href="https://manager.line.biz/" target="_blank" rel="noopener noreferrer">LINE公式アカウントの管理画面</a> を開き、<strong>「設定」→「Messaging API」</strong>の画面に表示される<strong>2つの値</strong>（<strong>Channel ID</strong> と <strong>Channel secret</strong>）を、下の欄にコピーして貼り付けてください。この2つが、monaka と LINE をつなぐための合言葉です。<br>
    貼り付けて保存すると、monaka と LINE が自動でつながります。最後に LINE の管理画面で <strong>「設定」→「応答設定」</strong>を開き、<strong>「Webhook」という項目をオン（利用する）</strong>にしてください。これで、友だち追加やメッセージが monaka に届くようになります。
  </p>
  <div class="mb-3">
    <label class="form-label fw-semibold">アカウントのメモ<span class="badge-opt">任意</span></label>
    <textarea name="line_messaging_memo" class="form-control @error('line_messaging_memo') is-invalid @enderror" rows="3"
      maxlength="2000" placeholder="例: ○○店の公式アカウント / Channel ID 1234567890 / 担当: 山田">{{ old('line_messaging_memo', $account->line_messaging_memo) }}</textarea>
    <div class="form-text">複数の LINE 公式アカウントを運用しているとき、どのアカウントか分かるようメモを残せます（monaka の一覧にも表示されます）。</div>
    @error('line_messaging_memo')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>
  <div class="mb-3">
    <label class="form-label fw-semibold">Channel ID @if($reqLine)<span class="badge-req">必須</span>@else<span class="badge-opt">任意</span>@endif</label>
    <input type="text" name="line_channel_id" class="form-control @error('line_channel_id') is-invalid @enderror js-line-check-field"
      value="{{ old('line_channel_id', $account->line_channel_id) }}" autocomplete="off"
      placeholder="LINEの「設定 → Messaging API」に表示される Channel ID" data-line-check-key="line_channel_id">
    @error('line_channel_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>
  <div class="mb-3">
    <label class="form-label fw-semibold">Channel secret @if($reqLine)<span class="badge-req">必須</span>@else<span class="badge-opt">任意</span>@endif</label>
    <input type="text" name="line_channel_secret" class="form-control @error('line_channel_secret') is-invalid @enderror js-line-check-field"
      value="{{ old('line_channel_secret', $account->line_channel_secret) }}" autocomplete="off"
      placeholder="LINEの「設定 → Messaging API」に表示される Channel secret" data-line-check-key="line_channel_secret">
    @error('line_channel_secret')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>
  <div class="mb-3">
    <label class="form-label fw-semibold">Webhook URL（monaka）<span class="badge-auto">自動</span></label>
    <div class="input-group">
      <input type="text" class="form-control bg-light" readonly value="{{ $webhookUrl }}" id="line-webhook-url-edit" aria-readonly="true">
      <button type="button" class="btn btn-outline-secondary" id="line-webhook-copy-edit">コピー</button>
    </div>
    <div class="form-text">これは monaka が自動で用意する URL です。<strong>入力は不要</strong>で、STEP 1 を保存すると自動で LINE に登録されます（通常はさわらなくて大丈夫です）。</div>
  </div>
  <div class="mb-3">
    <label class="form-label fw-semibold">チャネルアクセストークン（長期）<span class="badge-opt">任意</span></label>
    <input type="text" name="line_access_token" class="form-control @error('line_access_token') is-invalid @enderror"
      value="{{ old('line_access_token', $account->line_access_token) }}" autocomplete="off"
      placeholder="通常は空欄のままでOK">
    <div class="form-text">基本は<strong>空欄のままで大丈夫</strong>です。上の Channel ID と Channel secret が入っていれば、メッセージ送信に必要な鍵は monaka が自動で用意します。<br>（LINE Developers で「長期のアクセストークン」を自分で発行して使いたい上級者だけ、ここに貼り付けてください。）</div>
    @error('line_access_token')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>
  @if($stepwiseSave)
  <div class="d-flex flex-wrap gap-2 mb-0">
    <button type="submit" class="btn btn-primary">STEP 1 を保存</button>
  </div>
  @endif
@if($stepwiseSave)
</form>
@else
</div>
@endif

@if($stepwiseSave)
<form method="POST" action="{{ route('account.line-settings.save-login', $account) }}" class="line-setup-step-card" id="line-step-login">
  @csrf
  @method('PUT')
  @if($setupChannel)<input type="hidden" name="setup_channel" value="{{ $setupChannel }}">@endif
@else
<div class="line-setup-step-card" id="line-step-login">
@endif
  <span class="line-setup-step-badge">STEP 2</span>
  <h6 class="h6">LINEログインの登録</h6>
  <div class="alert alert-light border small py-2 mb-3"><i class="bi bi-info-circle me-1"></i>この STEP は、<strong>「LINEログイン」で友だち登録してもらう場合だけ</strong>設定します。使わないなら<strong>空欄のままでOK</strong>（あとから設定してもかまいません）。</div>
  <p class="small text-muted mb-3">
    <a href="{{ $lineDevelopersConsole }}" target="_blank" rel="noopener noreferrer">LINE Developers コンソール</a> を開き、STEP 1 と<strong>同じプロバイダー</strong>の中に「<strong>LINEログイン</strong>」を追加で作成します。その画面に表示される <strong>Channel ID</strong> と <strong>Channel secret</strong> を、下の欄にコピーして貼り付けてください。
  </p>
  <div class="mb-3">
    <label class="form-label fw-semibold">Channel ID（LINEログイン）<span class="badge-opt">任意</span></label>
    <input type="text" name="line_login_channel_id" class="form-control @error('line_login_channel_id') is-invalid @enderror js-line-check-field"
      value="{{ old('line_login_channel_id', $account->line_login_channel_id) }}" autocomplete="off"
      placeholder="「LINEログイン」の Channel ID（使う場合のみ）" data-line-check-key="line_login_channel_id">
    @error('line_login_channel_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>
  <div class="mb-3">
    <label class="form-label fw-semibold">Channel secret（LINEログイン）<span class="badge-opt">任意</span></label>
    <input type="text" name="line_login_channel_secret" class="form-control @error('line_login_channel_secret') is-invalid @enderror js-line-check-field"
      value="{{ old('line_login_channel_secret', $account->line_login_channel_secret) }}" autocomplete="off"
      placeholder="「LINEログイン」の Channel secret（使う場合のみ）" data-line-check-key="line_login_channel_secret">
    @error('line_login_channel_secret')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>
  @if($stepwiseSave)
  <div class="d-flex flex-wrap gap-2 mb-0">
    <button type="submit" class="btn btn-primary">STEP 2 を保存</button>
  </div>
  @endif
@if($stepwiseSave)
</form>
@else
</div>
@endif

<div class="line-setup-step-card mb-0" id="line-step-verify">
  <span class="line-setup-step-badge">STEP 3</span>
  <h6 class="h6">設定内容の確認</h6>
  <p class="small text-muted mb-3">
    フォームに入力した値（未保存でも可）をもとに、monaka から <strong>LINE Platform API</strong> へ接続確認します（ping ではなく API 照会です）。
    結果はメールの送信ドメイン認証と同様に<strong>保存され、再読み込み後も表示</strong>されます。
  </p>
  @php
    $persistedCheck = is_array($account->line_settings_last_check_result ?? null) ? $account->line_settings_last_check_result : null;
    $persistedItems = $persistedCheck['items'] ?? [];
    $overallLabel = $persistedCheck['overall_label'] ?? null;
    $overallDetail = $persistedCheck['overall_detail'] ?? null;
    $overallOk = $account->line_settings_last_check_ok;
  @endphp
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
    <div class="small text-muted">
      最終確認:
      <span class="fw-semibold" id="line-settings-last-checked-at">
        {{ $account->line_settings_last_checked_at ? $account->line_settings_last_checked_at->timezone(config('app.timezone'))->format('Y/m/d H:i') : '—' }}
      </span>
    </div>
  </div>
  <div id="line-settings-overall-banner" class="alert py-2 small mb-3 @if($overallOk === true) alert-success @elseif($overallOk === false) alert-danger @else alert-secondary @endif">
    @if($account->line_settings_last_checked_at === null)
      <strong>総合:</strong> まだ確認していません。STEP 1・2 を保存したあと「設定を確認」を押してください。
    @else
      <strong>総合: {{ $overallLabel ?? ($overallOk ? '設定完了（OK）' : '要修正（NG）') }}</strong>
      @if(filled($overallDetail))
        <span class="d-block mt-1 mb-0">{{ $overallDetail }}</span>
      @endif
    @endif
  </div>
  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <button
      type="button"
      class="btn btn-primary btn-sm text-white fw-semibold"
      id="line-settings-check-btn"
      data-check-url="{{ $lineCheckUrl }}"
    >
      <i class="bi bi-check2-circle me-1" aria-hidden="true"></i>設定を確認
    </button>
    <span class="small text-muted">STEP 1・2 の入力後に実行してください。</span>
  </div>
  <div class="table-responsive">
    <table class="table table-sm align-middle mb-0 line-check-table">
      <thead class="table-light">
        <tr>
          <th style="width:4.5rem">STEP</th>
          <th>項目</th>
          <th style="width:7rem">状態</th>
          <th>詳細</th>
        </tr>
      </thead>
      <tbody id="line-settings-check-tbody">
        @if(count($persistedItems) > 0)
          @foreach($persistedItems as $checkItem)
            @include('account.partials.line-settings-check-status', ['item' => $checkItem])
          @endforeach
        @else
          <tr data-line-check-row="placeholder">
            <td colspan="4" class="text-muted small py-3">「設定を確認」を押すと結果が表示されます。</td>
          </tr>
        @endif
      </tbody>
    </table>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  var copyBtn = document.getElementById('line-webhook-copy-edit');
  var webhookInput = document.getElementById('line-webhook-url-edit');
  if (copyBtn && webhookInput) {
    copyBtn.addEventListener('click', function () {
      navigator.clipboard.writeText(webhookInput.value).then(function () {
        copyBtn.textContent = 'コピーしました';
        setTimeout(function () { copyBtn.textContent = 'コピー'; }, 2000);
      });
    });
  }

  var checkBtn = document.getElementById('line-settings-check-btn');
  var tbody = document.getElementById('line-settings-check-tbody');
  if (!checkBtn || !tbody) return;

  var meta = document.querySelector('meta[name="csrf-token"]');
  var token = meta ? meta.getAttribute('content') : '';

  function collectPayload() {
    var payload = {};
    document.querySelectorAll('.js-line-check-field').forEach(function (el) {
      var key = el.getAttribute('data-line-check-key');
      if (key) payload[key] = el.value;
    });
    return payload;
  }

  function renderRow(item) {
    var tr = document.createElement('tr');
    tr.setAttribute('data-line-check-row', item.key);
    var statusHtml = '—';
    var statusClass = 'text-muted';
    if (item.ok === true) {
      statusHtml = '<i class="bi bi-check-circle-fill text-success me-1" aria-hidden="true"></i>設定完了';
      statusClass = 'text-success';
    } else if (item.ok === false) {
      statusHtml = '<i class="bi bi-x-circle-fill text-danger me-1" aria-hidden="true"></i>未設定';
      statusClass = 'text-danger';
    }
    tr.innerHTML =
      '<td><span class="badge bg-light text-dark border">'+ (item.step || '—') +'</span></td>' +
      '<td class="small">'+ (item.label || '') +'</td>' +
      '<td class="small text-nowrap '+ statusClass +'">'+ statusHtml +'</td>' +
      '<td class="small text-muted line-check-detail">'+ (item.detail || '') +'</td>';
    return tr;
  }

  checkBtn.addEventListener('click', function () {
    var url = checkBtn.getAttribute('data-check-url');
    checkBtn.disabled = true;
    var prev = checkBtn.innerHTML;
    checkBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
    tbody.innerHTML = '<tr><td colspan="4" class="small text-muted py-2">確認中…</td></tr>';

    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'X-CSRF-TOKEN': token,
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(collectPayload())
    })
      .then(function (r) {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        return r.json();
      })
      .then(function (data) {
        if (data.checked_at_human) {
          var lastEl = document.getElementById('line-settings-last-checked-at');
          if (lastEl) lastEl.textContent = data.checked_at_human;
        }
        var banner = document.getElementById('line-settings-overall-banner');
        if (banner) {
          var label = data.overall_label || '—';
          var detail = data.overall_detail || '';
          var status = data.overall_status || '';
          banner.className = 'alert py-2 small mb-3 ' + (
            status === 'ok' ? 'alert-success' : (status === 'pending' ? 'alert-warning' : (status === 'ng' ? 'alert-danger' : 'alert-secondary'))
          );
          banner.innerHTML = '<strong>総合: ' + label + '</strong>' + (detail ? '<span class="d-block mt-1 mb-0">' + detail + '</span>' : '');
        }
        tbody.innerHTML = '';
        (data.items || []).forEach(function (item) {
          tbody.appendChild(renderRow(item));
        });
        if (!tbody.children.length) {
          tbody.innerHTML = '<tr><td colspan="4" class="small text-danger">結果を取得できませんでした。</td></tr>';
        }
      })
      .catch(function () {
        tbody.innerHTML = '<tr><td colspan="4" class="small text-danger">確認に失敗しました。ログインし直すか、しばらくしてから再試行してください。</td></tr>';
      })
      .finally(function () {
        checkBtn.disabled = false;
        checkBtn.innerHTML = prev;
      });
  });
});
</script>
@endpush