@extends('layouts.app')
@section('title', 'LINEアカウント設定')
@section('page-title', 'LINEアカウント設定')
@section('page-subtitle')
<strong>LINE公式アカウントの追加（連携）</strong>はこの画面で行います。下のチェックリストに沿ってひとつずつ進めてください（送信用アカウントの「作成」は別画面です）。
@endsection
@push('styles')
<style>
.line-page-wrap { max-width: 720px; }
.line-linked-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f8fafc 100%);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.line-linked-banner .label { font-size: 0.75rem; color: #166534; font-weight: 600; letter-spacing: 0.02em; }
.line-linked-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #06c755; color: #fff; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.line-linked-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #bbf7d0;
  background: #f1f5f9;
}
.line-settings-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.25rem 1.35rem 1.35rem;
  margin-bottom: 1.25rem;
}
.line-settings-panel h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #e2e8f0;
}
.line-settings-panel .req { font-size: 0.65rem; vertical-align: 0.12em; }
.line-settings-webhook {
  background: #f1f5f9 !important;
  color: #475569;
  cursor: default;
}
.line-field-note {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin-top: 0.35rem;
}
.line-onboarding {
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #f8fafc;
  padding: 1rem 1.15rem 1.1rem;
  margin-bottom: 1.25rem;
}
.line-onboarding h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0 0 0.5rem;
}
.line-onboarding ol { margin: 0; padding-left: 1.2rem; }
.line-onboarding li { margin-bottom: 0.35rem; }
.line-onboarding a { word-break: break-all; }
.line-sync-status {
  font-size: 0.8125rem;
  color: #166534;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #bbf7d0;
}
.line-sync-status .text-danger { color: #b91c1c !important; }
.line-step7-panel {
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  padding: 1rem 1.15rem 1.1rem;
  margin-bottom: 1.25rem;
}
.line-step7-panel h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 0.5rem;
}
.line-step7-panel ol { margin: 0; padding-left: 1.2rem; }
.line-step7-panel li { margin-bottom: 0.35rem; }
</style>
@endpush
@section('content')
<div class="line-page-wrap">
  <nav class="text-muted small mb-3">
    <a href="{{ route('account.index') }}">送信用アカウント一覧</a>
    <span class="mx-1">/</span>
    <a href="{{ route('scenario.index', $account) }}">{{ $account->name }}</a>
    <span class="mx-1">/</span>
    <span class="text-dark">LINEアカウント設定</span>
  </nav>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる"></button>
    </div>
  @endif
  @if(session('warning'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      {{ session('warning') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる"></button>
    </div>
  @endif

  <div class="line-onboarding">
    <h3>LINE公式アカウントを追加（連携）する — 確認用チェックリスト</h3>
    <p class="small text-muted mb-2 mb-md-3">ここは <strong>LINE公式アカウントと monaka をつなぐ作業</strong>です（メール・LINE配信で作った「送信用アカウント」に LINE を載せる工程）。LINE側の設定画面を開きながら進めてください。
    </p>
    <ol class="small mb-0">
      <li><strong>LINE公式アカウント管理画面</strong>（<a href="https://manager.line.biz/" target="_blank" rel="noopener">manager.line.biz</a>）で Messaging API を有効化し、<strong>Channel ID / Channel secret</strong> を控える（公式側の Webhook URL 欄は手順どおり空のままに）。</li>
      <li>この画面の <a href="#line-panel-messaging">Messaging API設定</a> に、公式アカウント管理画面で控えた Channel ID / secret を貼る。<strong>保存</strong>すると monaka は Messaging API 経由で <strong>Webhook URL を LINE に自動登録</strong>します（あわせて <a href="#line-step7">ステップ7：応答設定</a> を必ず実施）。</li>
      <li>必要なら <a href="#line-panel-scenario">シナリオ設定</a>（任意）。</li>
      <li><a href="#line-panel-route">経路分析・認証方式</a> を選ぶ（推奨は LINEログイン認証）。</li>
      <li><strong>LINE Developers</strong> で同一プロバイダーに <strong>LINEログイン</strong> チャネルを作り、<a href="#line-panel-login">LINEログイン チャネル設定</a> の ID・secret を貼る（Messaging の値とは別）。</li>
      <li>公式アカウントの <strong>応答設定</strong> で Webhook をオンにし、下の Webhook URL と一致するか確認。</li>
      <li>4か所（Messaging の ID/secret とログインの ID/secret）が <strong>すべて別の値</strong>か確認してから <strong>保存</strong>。</li>
    </ol>
  </div>

  @php($reqLine = in_array($account->type, ['line', 'both'], true))

  {{-- 連携中のLINE公式アカウント --}}
  <div class="line-linked-banner mb-4">
    <div class="label mb-2">連携中のLINE公式アカウント</div>
    <div class="d-flex align-items-center gap-3">
      @if(filled($account->line_bot_picture_url))
        <img src="{{ $account->line_bot_picture_url }}" alt="{{ filled($account->line_bot_display_name) ? $account->line_bot_display_name : $account->name }}" width="48" height="48" class="line-linked-avatar-img" loading="lazy" referrerpolicy="no-referrer" decoding="async">
      @else
        <div class="line-linked-avatar" aria-hidden="true">LINE</div>
      @endif
      <div class="min-w-0">
        @php($lineDisplay = filled($account->line_bot_display_name) ? $account->line_bot_display_name : null)
        @php($lineBasic = filled($account->line_bot_basic_id) ? $account->line_bot_basic_id : null)
        <div class="fw-bold text-dark text-truncate" title="{{ trim(($lineDisplay ?? $account->name).' '.($lineBasic ? '('.$lineBasic.')' : '')) }}">
          <span>{{ $lineDisplay ?? $account->name }}</span>
          @if($lineBasic)
            <span class="text-secondary fw-normal">({{ $lineBasic }})</span>
          @endif
        </div>
        @if($lineDisplay)
          <div class="text-muted small text-truncate" title="{{ $account->name }}">monakaアカウント名: {{ $account->name }}</div>
        @endif
        <div class="text-muted small mt-1">
          @if(filled($account->line_channel_id))
            <code class="small text-secondary">Channel ID {{ $account->line_channel_id }}</code>
          @else
            公式アカウントの Channel ID を保存すると、ここに表示されます。
          @endif
        </div>
        @if((filled($account->line_bot_display_name) || filled($account->line_bot_basic_id)) && blank($account->line_bot_picture_url))
          <p class="text-muted small mt-2 mb-0">アイコンが緑の「LINE」のままのときは、LINE 側で<strong>プロフィール画像が未設定</strong>のことが多いです。<a href="https://manager.line.biz/" target="_blank" rel="noopener">公式アカウント管理画面</a>で画像を設定したあと、ここで<strong>保存</strong>し直すと反映されます。</p>
        @endif
        <div class="line-sync-status small">
          @if(filled($account->line_channel_id) && filled($account->line_channel_secret))
            <div class="mb-1"><i class="bi bi-check-circle-fill text-success me-1" aria-hidden="true"></i>Messaging API の Channel ID / secret は保存済みです。</div>
          @endif
          @if(filled($account->line_webhook_last_error))
            <div class="text-danger mb-1"><strong>直近の保存での自動登録:</strong> {{ $account->line_webhook_last_error }}</div>
          @endif
          @if($account->line_webhook_synced_at && filled($account->line_webhook_last_error))
            <div class="mb-1 text-muted"><i class="bi bi-check2-circle me-1" aria-hidden="true"></i>過去に Webhook 登録に成功した記録があります（{{ $account->line_webhook_synced_at->timezone(config('app.timezone'))->format('Y-m-d H:i') }}）。上のエラーを解消してから再度保存してください。</div>
          @elseif($account->line_webhook_synced_at && blank($account->line_webhook_last_error))
            <div class="mb-1"><i class="bi bi-check2-circle text-success me-1" aria-hidden="true"></i>Webhook URL を LINE に登録済み（最終成功: {{ $account->line_webhook_synced_at->timezone(config('app.timezone'))->format('Y-m-d H:i') }}）</div>
          @elseif(filled($account->line_channel_id) && filled($account->line_channel_secret) && blank($account->line_webhook_last_error) && !$account->line_webhook_synced_at)
            <div class="mb-1 text-warning"><i class="bi bi-hourglass-split me-1" aria-hidden="true"></i>まだ LINE への Webhook 自動登録の成功記録がありません。<strong>保存</strong>を試すか、下の「ステップ7」で手動確認してください。</div>
          @endif
        </div>
      </div>
    </div>
  </div>

  <div class="line-step7-panel" id="line-step7">
    <h3>ステップ7：LINE公式アカウントの「応答設定」（必須）</h3>
    <p class="small text-muted mb-2"><strong>Webhook を「利用する」にすること</strong>は LINE 公式側の画面操作が必要です。monaka は保存時に Webhook URL を Messaging API へ送りますが、<strong>応答設定のオン／オフ</strong>は次の手順で確認してください。</p>
    <ol class="small mb-0">
      <li><a href="https://manager.line.biz/" target="_blank" rel="noopener">LINE公式アカウント管理画面（manager.line.biz）</a>にログインし、対象アカウントを開く。</li>
      <li><strong>設定 → 応答設定</strong> を開く。</li>
      <li><strong>Webhook</strong> を <strong>利用する</strong> にする（オフのままだとイベントが届きません）。</li>
      <li>Webhook URL がこの画面の <a href="#line-webhook-url">Webhook URL</a> と同じか確認する（保存直後に自動反映されているはずです）。</li>
      <li>チャットの応答モードやあいさつメッセージなどは、運用に合わせて調整してください。</li>
    </ol>
  </div>

  <form method="POST" action="{{ route('account.workspace.line-account.update', $account) }}">
    @csrf
    @method('PUT')

    <div class="line-settings-panel" id="line-panel-messaging">
      <h2>Messaging API設定</h2>
      <p class="line-field-note mt-0 mb-3">値は <a href="https://manager.line.biz/" target="_blank" rel="noopener">LINE公式アカウント管理画面</a> にログインし、<strong>設定 → Messaging API</strong> に表示される <strong>Channel ID / Channel secret</strong> をコピーして入力してください。</p>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label fw-semibold">Messaging API メモ</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>
          <p class="line-field-note mb-0">複数の LINE 公式アカウントを運用しているとき、どのアカウントか分かるようメモを残せます。</p>
          @error('line_messaging_memo')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">Channel ID
            @if($reqLine)<span class="badge bg-danger req">必須</span>@endif
          </label>
          <input type="text" name="line_channel_id" class="form-control @error('line_channel_id') is-invalid @enderror"
            value="{{ old('line_channel_id', $account->line_channel_id) }}" autocomplete="off" placeholder="公式アカウント管理画面の Messaging API に表示される Channel ID">
          @error('line_channel_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">Channel secret
            @if($reqLine)<span class="badge bg-danger req">必須</span>@endif
          </label>
          <input type="text" name="line_channel_secret" class="form-control @error('line_channel_secret') is-invalid @enderror"
            value="{{ old('line_channel_secret', $account->line_channel_secret) }}" autocomplete="off" placeholder="公式アカウント管理画面の Messaging API に表示される Channel secret">
          @error('line_channel_secret')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">Webhook URL</label>
          <div class="input-group">
            <input type="text" class="form-control line-settings-webhook" readonly value="{{ $webhookUrl }}" id="line-webhook-url" aria-readonly="true">
            <button type="button" class="btn btn-outline-secondary" id="line-webhook-copy">コピー</button>
          </div>
          <p class="line-field-note mb-0"><strong>保存</strong>すると、monaka から LINE の Messaging API にこの URL が自動登録されます。あわせて公式アカウント管理画面の <strong>設定 → 応答設定</strong> で Webhook を <strong>利用する</strong> にしてください（<a href="#line-step7">ステップ7</a>）。読み取り専用ですがコピーして公式側と照合できます。</p>
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">チャネルアクセストークン（長期）</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) }}" placeholder="任意（公式アカウントの Messaging API で発行した長期トークン）" autocomplete="off">
          <p class="line-field-note mb-0"><strong>Messaging API でメッセージ送信</strong>するときに使う値です。monaka では現状 <strong>保存のみ</strong>で、送信処理への接続はこれから行います。</p>
          @error('line_access_token')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>

    <div class="line-settings-panel" id="line-panel-scenario">
      <h2>シナリオ設定</h2>
      <div class="row g-4">
        <div class="col-12">
          <label class="form-label fw-semibold">友だち追加後に登録されるシナリオ</label>
          <select name="line_scenario_on_friend_id" class="form-select @error('line_scenario_on_friend_id') is-invalid @enderror">
            <option value="">未設定</option>
            @foreach($scenarios as $sc)
              <option value="{{ $sc->id }}" @selected((string) old('line_scenario_on_friend_id', $account->line_scenario_on_friend_id) === (string) $sc->id)>{{ $sc->name }}</option>
            @endforeach
          </select>
          <p class="line-field-note mb-0">各シナリオの登録ページから登録した場合は、それぞれのシナリオに登録されます。</p>
          @error('line_scenario_on_friend_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">ブロック解除時に登録されるシナリオ</label>
          <select name="line_scenario_on_unblock_id" class="form-select @error('line_scenario_on_unblock_id') is-invalid @enderror">
            <option value="">未設定</option>
            @foreach($scenarios as $sc)
              <option value="{{ $sc->id }}" @selected((string) old('line_scenario_on_unblock_id', $account->line_scenario_on_unblock_id) === (string) $sc->id)>{{ $sc->name }}</option>
            @endforeach
          </select>
          <p class="line-field-note mb-0">既に登録されているシナリオの場合は、前回の登録日時に基づき、途中からステップ配信が開始されます。</p>
          @error('line_scenario_on_unblock_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">システム導入前からの友だちが登録されるシナリオ</label>
          <select name="line_scenario_legacy_friends_id" class="form-select @error('line_scenario_legacy_friends_id') is-invalid @enderror">
            <option value="">未設定</option>
            @foreach($scenarios as $sc)
              <option value="{{ $sc->id }}" @selected((string) old('line_scenario_legacy_friends_id', $account->line_scenario_legacy_friends_id) === (string) $sc->id)>{{ $sc->name }}</option>
            @endforeach
          </select>
          <p class="line-field-note mb-0">既存の友だちをこのシナリオに紐づける場合に指定します。</p>
          @error('line_scenario_legacy_friends_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>

    <div class="line-settings-panel" id="line-panel-route">
      <h2>経路分析設定</h2>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label fw-semibold">認証方式</label>
          @php($routeAuth = in_array($tmp = old('line_route_auth', $account->line_route_auth ?? 'line_login'), ['line_login', 'simple', 'image'], true) ? $tmp : 'line_login')
          <select name="line_route_auth" class="form-select @error('line_route_auth') is-invalid @enderror">
            <option value="line_login" @selected($routeAuth === 'line_login')>LINEログイン認証</option>
            <option value="simple" @selected($routeAuth === 'simple')>簡易認証</option>
            <option value="image" @selected($routeAuth === 'image')>画像認証</option>
          </select>
          <p class="line-field-note mb-0">経路分析で利用する認証方式です。簡易認証・画像認証の実処理は今後の実装で有効化します。</p>
          @error('line_route_auth')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>

    <div class="line-settings-panel" id="line-panel-login">
      <h2>LINEログイン チャネル設定</h2>
      <p class="line-field-note mt-0 mb-3">ここに入力する値は <strong>LINE Developers コンソール</strong>の「LINEログイン」チャネルです。公式アカウント管理画面の <strong>Messaging API</strong> 画面下部の <strong>LINE Developersコンソール</strong> リンクから開き、Messaging API チャネルと<strong>同じプロバイダー</strong>内に作成してください。</p>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label fw-semibold">Channel ID（LINEログイン）
            @if($reqLine)<span class="badge bg-danger req">必須</span>@endif
          </label>
          <input type="text" name="line_login_channel_id" class="form-control @error('line_login_channel_id') is-invalid @enderror"
            value="{{ old('line_login_channel_id', $account->line_login_channel_id) }}" autocomplete="off" placeholder="LINE Developers の LINEログイン チャネル基本設定の Channel ID">
          @error('line_login_channel_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">Channel secret（LINEログイン）
            @if($reqLine)<span class="badge bg-danger req">必須</span>@endif
          </label>
          <input type="text" name="line_login_channel_secret" class="form-control @error('line_login_channel_secret') is-invalid @enderror"
            value="{{ old('line_login_channel_secret', $account->line_login_channel_secret) }}" autocomplete="off" placeholder="LINE Developers の LINEログイン チャネルの Channel secret">
          @error('line_login_channel_secret')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>

    <div class="d-flex flex-wrap gap-2 pt-1 pb-4">
      <button type="submit" class="btn btn-success px-4">保存</button>
      <a href="{{ route('scenario.index', $account) }}" class="btn btn-outline-secondary">シナリオ一覧へ戻る</a>
    </div>
  </form>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('line-webhook-copy')?.addEventListener('click', function () {
  const el = document.getElementById('line-webhook-url');
  if (!el) return;
  navigator.clipboard.writeText(el.value).then(function () {
    const b = document.getElementById('line-webhook-copy');
    const t = b.textContent;
    b.textContent = 'コピーしました';
    setTimeout(function () { b.textContent = t; }, 2000);
  });
});
</script>
@endpush