@php
  use Carbon\Carbon;
  use Illuminate\Support\Str;

  $tz = config('app.timezone', 'Asia/Tokyo');
  $searchQ = $lineChatSearchQuery ?? '';
  $friends = $lineChatFriends ?? collect();
  $timeline = $lineChatTimeline ?? collect();
  $selectedUid = $lineChatSelectedLineUserId;
  $selectedSub = $lineChatSelectedSubscriber;
  $selectedRow = $friends->first(fn (array $row) => (string) $row['line_user_id'] === (string) $selectedUid);
  $selectedDisplayName = is_array($selectedRow) ? (string) ($selectedRow['display_name'] ?? 'LINEユーザー') : 'LINEユーザー';
  $selectedAvatarUrl = is_array($selectedRow) ? ($selectedRow['avatar_url'] ?? null) : null;
  $lineBotPictureUrl = $lineBotPictureUrl ?? null;
  $lineBotDisplayName = $lineBotDisplayName ?? null;
  $botInitial = Str::upper(Str::substr(trim((string) ($lineBotDisplayName ?: 'BOT')), 0, 1));

  $chatHref = function (?string $uid = null) use ($account, $scenario, $searchQ) {
      $params = ['account' => $account, 'scenario' => $scenario, 'slug' => 'line-chat'];
      $qs = array_filter([
          'u' => $uid,
          'q' => $searchQ !== '' ? $searchQ : null,
      ], fn ($v) => $v !== null && $v !== '');

      $url = route('scenario.workspace.show', $params);
      if ($qs !== []) {
          $url .= '?'.http_build_query($qs);
      }

      return $url;
  };
@endphp

@push('styles')
<style>
.line-chat-shell {
  display: flex;
  border: 1px solid #dce3ee;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-height: 520px;
}
.line-chat-sidebar {
  width: 340px;
  flex-shrink: 0;
  border-right: 1px solid #e8edf4;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}
.line-chat-sidebar-toolbar {
  padding: 10px 12px;
  border-bottom: 1px solid #e8edf4;
  background: #fff;
}
.line-chat-sidebar-toolbar .form-check-label { font-size: 0.82rem; color: #5f6d84; }
.line-chat-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.line-chat-filter-row .form-select { width: auto; max-width: 140px; font-size: 0.82rem; }
.line-chat-search-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.line-chat-search-form input { flex: 1; min-width: 0; font-size: 0.85rem; }
.line-chat-friends {
  flex: 1;
  overflow-y: auto;
}
.line-chat-friend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f8;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.line-chat-friend:hover { background: #eef4ff; }
.line-chat-friend.is-active {
  background: #e9eef6;
  border-right: 3px solid #6c757d;
}
.line-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c8e6c9 0%, #81c784 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.line-chat-avatar.line-chat-avatar--photo {
  padding: 0;
  overflow: hidden;
  background: #e8edf4;
}
.line-chat-avatar.line-chat-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.line-chat-friend-meta { flex: 1; min-width: 0; }
.line-chat-friend-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-chat-friend-snippet {
  font-size: 0.78rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.line-chat-friend-aside {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.75rem;
  color: #8a96a8;
}
.line-chat-pin {
  color: #06c755;
  opacity: 0.55;
  font-size: 0.9rem;
}
.line-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f3f5f7;
}
.line-chat-thread-head {
  padding: 12px 16px;
  border-bottom: 1px solid #e8edf4;
  background: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}
.line-chat-head-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8edf4;
}
.line-chat-head-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.line-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.line-chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 85%;
}
.line-chat-bubble-row.incoming { align-self: flex-start; }
.line-chat-bubble-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c8e6c9 0%, #66bb6a 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.line-chat-bubble-avatar.line-chat-avatar--photo {
  padding: 0;
  overflow: hidden;
  background: #e8edf4;
}
.line-chat-bubble-avatar.line-chat-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.line-chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}
.line-chat-bubble.incoming {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #2c3e50;
}
.line-chat-time {
  font-size: 0.72rem;
  color: #8a96a8;
  margin-top: 4px;
  padding-left: 44px;
}
.line-chat-system-wrap {
  align-self: center;
  max-width: 92%;
  margin: 4px 0 10px;
  text-align: center;
}
.line-chat-system-bubble {
  display: inline-block;
  background: #eceff4;
  color: #5f6d84;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: 14px;
  line-height: 1.45;
  word-break: break-word;
}
.line-chat-bubble-row.outgoing {
  align-self: flex-end;
  max-width: 85%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
.line-chat-out-meta {
  text-align: right;
  max-width: min(100%, min(380px, 92vw));
}
.line-chat-out-label {
  font-size: 0.72rem;
  color: #8a96a8;
  margin-bottom: 4px;
}
.line-chat-bubble.outgoing {
  background: #e8f7e3;
  border: 1px solid #c8e8bc;
  color: #2c3e50;
}
.line-chat-time.time-out {
  padding-left: 0;
  text-align: right;
}
.line-chat-bot-avatar {
  background: linear-gradient(145deg, #b3e5fc 0%, #4fc3f7 100%);
}
.line-chat-composer {
  border-top: 1px solid #e8edf4;
  background: #fff;
  padding: 10px 12px 12px;
}
.line-chat-composer-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  color: #6c757d;
}
.line-chat-composer-toolbar .btn-icon {
  padding: 4px 8px;
  line-height: 1;
  border: none;
  background: transparent;
  color: #7b8794;
}
.line-chat-composer-toolbar .btn-icon:disabled { opacity: 0.45; }
.line-chat-external-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.85rem;
}
.line-chat-external-details summary {
  cursor: pointer;
  color: #5f6d84;
  user-select: none;
}
.line-chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a96a8;
  font-size: 0.92rem;
  padding: 24px;
  text-align: center;
}
</style>
@endpush

@include('account.scenario.partials._line_webhook_delivery_alert', ['lineAccount' => $lineAccount ?? null])

<div class="card scenario-ws-card mb-3">
  <div class="card-body p-0">
    <div class="p-3 border-bottom bg-white">
      <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-1">
        <h2 class="h5 mb-0">LINEチャット</h2>
        <form method="post" action="{{ route('scenario.workspace.line-followers.sync', [$account, $scenario]) }}" class="d-inline">
          @csrf
          <input type="hidden" name="return_slug" value="line-chat">
          <button type="submit" class="btn btn-sm btn-outline-success">LINE公式の友だちを取り込む</button>
        </form>
      </div>
      <p class="text-muted small mb-0">
        左は Webhook で届いた user を<strong>最終メッセージ順</strong>に並べ、Messaging API で<strong>プロフィール（表示名・アイコン）</strong>を反映します。右は <strong>Webhook で届いたイベント（フォロー・受信メッセージ）</strong>と、<strong>monaka からの送信ログ</strong>（Messaging API push）および<strong>公式・別ツールで送った内容を手入力で残した記録</strong>です。<strong>LINE公式の画面だけで送った文面</strong>は Webhook に載らないため自動では出ませんが、下の「外部送信を記録」で時刻・本文を登録するとタイムラインに並びます。未読・ピン止めは準備中です。
      </p>
    </div>

    <div class="line-chat-shell">
      <div class="line-chat-sidebar">
        <div class="line-chat-sidebar-toolbar">
          <div class="line-chat-filter-row">
            <div class="form-check mb-0">
              <input class="form-check-input" type="checkbox" id="lineChatUnreadOnly" disabled>
              <label class="form-check-label" for="lineChatUnreadOnly">未読のみを表示</label>
            </div>
            <select class="form-select form-select-sm" disabled aria-disabled="true" title="準備中">
              <option selected>すべて</option>
            </select>
          </div>
          <form method="get" action="{{ route('scenario.workspace.show', [$account, $scenario, 'line-chat']) }}" class="line-chat-search-form">
            <input type="search" name="q" value="{{ $searchQ }}" class="form-control form-control-sm" placeholder="名前・メール・LINE userId" autocomplete="off">
            <button type="submit" class="btn btn-sm btn-outline-secondary">検索</button>
          </form>
        </div>
        <div class="line-chat-friends">
          @forelse($friends as $row)
            @php
              $uid = (string) $row['line_user_id'];
              $lastAt = $row['last_at'];
              $displayName = (string) ($row['display_name'] ?? 'LINEユーザー');
              $avatarUrl = $row['avatar_url'] ?? null;
              $initial = Str::upper(Str::substr(trim($displayName ?: '?'), 0, 1));
              $isActive = $selectedUid === $uid;
            @endphp
            <a href="{{ $chatHref($uid) }}" class="line-chat-friend {{ $isActive ? 'is-active' : '' }}">
              <div class="line-chat-avatar {{ $avatarUrl ? 'line-chat-avatar--photo' : '' }}" aria-hidden="true">
                @if($avatarUrl)
                  <img src="{{ $avatarUrl }}" alt="" width="44" height="44" loading="lazy" decoding="async" referrerpolicy="no-referrer">
                @else
                  {{ $initial }}
                @endif
              </div>
              <div class="line-chat-friend-meta">
                <div class="line-chat-friend-name">{{ $displayName }}</div>
                <div class="line-chat-friend-snippet">{{ $row['preview'] }}</div>
              </div>
              <div class="line-chat-friend-aside">
                @if($lastAt)
                  <div>{{ $lastAt->timezone($tz)->format('m/d') }}</div>
                @endif
                <i class="bi bi-pin-angle line-chat-pin" title="ピン止め（準備中）" aria-hidden="true"></i>
              </div>
            </a>
          @empty
            @php
              $lineAccountLinked = isset($lineAccount) && $lineAccount instanceof \App\Models\DeliveryAccount;
              $subsTotal = (int) $scenario->subscribers()->count();
              $subsWithLine = (int) $scenario->subscribers()->countableForLine()->count();
            @endphp
            <div class="p-4 text-muted small">
              @if(! $lineAccountLinked)
                <p class="mb-0 text-center">このシナリオに <strong>LINEアカウントが紐づいていません</strong>。シナリオ設定で LINE を選ぶか、作成時に LINE を紐づけてください。</p>
              @else
                <p class="mb-2 text-center"><strong>一覧に出る条件</strong></p>
                <ul class="mb-2 ps-3">
                  <li>読者に <strong>LINE user ID</strong> がある（LINE登録・友だち追加の Webhook など）</li>
                  <li>または、公式アカウントへ <strong>メッセージ・友だち追加</strong>があり Webhook で monaka に届いた</li>
                </ul>
                @if($subsTotal > 0 && $subsWithLine === 0)
                  <p class="mb-0 alert alert-warning py-2 small">読者は <strong>{{ $subsTotal }}</strong> 人いますが <strong>メール登録のみ</strong>です（一覧の「LINE」が 0 のとき）。LINE からメッセージを送るか、LINE 登録ページから登録してください。</p>
                @elseif($subsTotal === 0)
                  @php
                    $officialFollowers = isset($lineAccount) && $lineAccount instanceof \App\Models\DeliveryAccount
                      ? $lineAccount->line_followers_count
                      : null;
                  @endphp
                  @if($officialFollowers !== null && (int) $officialFollowers > 0)
                    <p class="mb-2 text-center alert alert-warning py-2 small">LINE 公式では友だち <strong>{{ number_format((int) $officialFollowers) }}</strong> 人ですが、monaka にはまだ届いていません。</p>
                  @else
                    <p class="mb-2 text-center">このシナリオの読者は 0 人です。</p>
                  @endif
                  <p class="mb-0 text-center">右上の <strong>LINE公式の友だちを取り込む</strong> を押すか、LINE からメッセージを送ってください。</p>
                @else
                  <p class="mb-0 text-center">まだトーク履歴がありません。右上の <strong>取り込む</strong> か、LINE からメッセージを送ってください。</p>
                @endif
              @endif
            </div>
          @endforelse
        </div>
      </div>

      <div class="line-chat-main">
        @if($friends->isEmpty())
          <div class="line-chat-empty">左の一覧に表示する友だちがありません。</div>
        @elseif($selectedUid)
          <div class="line-chat-thread-head d-flex align-items-center gap-2 min-w-0" title="{{ $selectedDisplayName }}">
            @if($selectedAvatarUrl)
              <span class="line-chat-head-avatar" aria-hidden="true">
                <img src="{{ $selectedAvatarUrl }}" alt="" width="32" height="32" loading="lazy" decoding="async" referrerpolicy="no-referrer">
              </span>
            @endif
            <span class="text-truncate flex-grow-1">{{ $selectedDisplayName }}</span>
          </div>
          <div class="line-chat-thread" id="line-chat-thread">
            @forelse($timeline as $item)
              @php
                $kind = $item['kind'];
                $atFmt = $item['at']->timezone($tz)->format('m/d H:i');
                $friendInitial = Str::upper(Str::substr(trim($selectedDisplayName ?: '?'), 0, 1));
              @endphp
              @if($kind === 'system')
                <div class="line-chat-system-wrap">
                  <div class="line-chat-system-bubble">{{ $item['text'] }}</div>
                </div>
              @elseif($kind === 'incoming')
                <div class="line-chat-bubble-row incoming">
                  <div class="line-chat-bubble-avatar {{ $selectedAvatarUrl ? 'line-chat-avatar--photo' : '' }}" aria-hidden="true">
                    @if($selectedAvatarUrl)
                      <img src="{{ $selectedAvatarUrl }}" alt="" width="36" height="36" loading="lazy" decoding="async" referrerpolicy="no-referrer">
                    @else
                      {{ $friendInitial }}
                    @endif
                  </div>
                  <div>
                    <div class="line-chat-bubble incoming">{!! nl2br(e((string) $item['text'])) !!}</div>
                    <div class="line-chat-time">{{ $atFmt }}</div>
                  </div>
                </div>
              @else
                <div class="line-chat-bubble-row outgoing">
                  <div class="line-chat-out-meta">
                    @if(!empty($item['label']))
                      <div class="line-chat-out-label">{{ $item['label'] }}</div>
                    @endif
                    <div class="line-chat-bubble outgoing">{!! nl2br(e((string) $item['text'])) !!}</div>
                    <div class="line-chat-time time-out">{{ $atFmt }}</div>
                  </div>
                  <div class="line-chat-bubble-avatar line-chat-bot-avatar {{ $lineBotPictureUrl ? 'line-chat-avatar--photo' : '' }}" aria-hidden="true">
                    @if($lineBotPictureUrl)
                      <img src="{{ $lineBotPictureUrl }}" alt="" width="36" height="36" loading="lazy" decoding="async" referrerpolicy="no-referrer">
                    @else
                      {{ $botInitial }}
                    @endif
                  </div>
                </div>
              @endif
            @empty
              <div class="line-chat-empty align-self-center">この友だちとのトーク履歴がありません。</div>
            @endforelse
          </div>
          <div class="line-chat-composer">
            <div class="line-chat-composer-toolbar">
              <button type="button" class="btn btn-icon" disabled title="準備中"><i class="bi bi-image"></i></button>
              <button type="button" class="btn btn-icon" disabled title="準備中"><i class="bi bi-camera-video"></i></button>
              <button type="button" class="btn btn-icon" disabled title="準備中"><i class="bi bi-mic"></i></button>
              <button type="button" class="btn btn-icon" disabled title="準備中"><i class="bi bi-emoji-smile"></i></button>
              <button type="button" class="btn btn-icon" disabled title="準備中"><i class="bi bi-person-circle"></i></button>
            </div>
            <form method="post" action="{{ route('scenario.workspace.line-chat.push', [$account, $scenario]) }}" class="mb-0">
              @csrf
              <input type="hidden" name="line_user_id" value="{{ $selectedUid }}">
              @if($searchQ !== '')
                <input type="hidden" name="q" value="{{ $searchQ }}">
              @endif
              <div class="d-flex gap-2 align-items-end">
                <textarea name="body" class="form-control form-control-sm @error('body') is-invalid @enderror" rows="2" placeholder="メッセージを入力（最大5000文字）" maxlength="5000" required>{{ old('body') }}</textarea>
                <button type="submit" class="btn btn-primary btn-sm flex-shrink-0">送信</button>
              </div>
              @error('body')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </form>
            <details class="line-chat-external-details">
              <summary>公式・別ツールで送った内容を手入力で記録</summary>
              <p class="text-muted small mt-2 mb-2">LINE 公式の応答メッセージなど Webhook に載らない送信は、ここで<strong>送信日時・本文</strong>を残すと右のタイムラインに出ます（実際の LINE 送信は行いません）。</p>
              <form method="post" action="{{ route('scenario.workspace.line-chat.external', [$account, $scenario]) }}" class="row g-2 small">
                @csrf
                <input type="hidden" name="line_user_id" value="{{ $selectedUid }}">
                @if($searchQ !== '')
                  <input type="hidden" name="q" value="{{ $searchQ }}">
                @endif
                <div class="col-12 col-md-4">
                  <label class="form-label mb-0 text-muted">送信日時</label>
                  <input type="datetime-local" name="sent_at" class="form-control form-control-sm @error('sent_at') is-invalid @enderror" required value="{{ old('sent_at', Carbon::now()->timezone($tz)->format('Y-m-d\TH:i')) }}">
                  @error('sent_at')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-8">
                  <label class="form-label mb-0 text-muted">表示ラベル（任意）</label>
                  <input type="text" name="label" class="form-control form-control-sm" maxlength="191" placeholder="例: LINE公式の応答" value="{{ old('label') }}">
                </div>
                <div class="col-12">
                  <label class="form-label mb-0 text-muted">本文</label>
                  <textarea name="body_text" class="form-control form-control-sm @error('body_text') is-invalid @enderror" rows="2" required maxlength="20000">{{ old('body_text') }}</textarea>
                  @error('body_text')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
                <div class="col-12">
                  <button type="submit" class="btn btn-outline-secondary btn-sm">記録を追加</button>
                </div>
              </form>
            </details>
          </div>
        @else
          <div class="line-chat-empty">左から友だちを選択してください。</div>
        @endif
      </div>
    </div>
  </div>
</div>

@if($selectedUid)
  @push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var el = document.getElementById('line-chat-thread');
      if (el) { el.scrollTop = el.scrollHeight; }
    });
  </script>
  @endpush
@endif