@extends('layouts.app')
@section('title', $page->name . ' — コメント返信')
@section('page-title', $funnel->name . ' — ' . $page->name)
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
  <div class="d-flex align-items-center gap-2">
    <a href="{{ route('funnel.page.index', $funnel) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> ページ一覧</a>
    <a href="{{ route('funnel.page.edit', [$funnel, $page]) }}" class="btn btn-outline-primary btn-sm">ページを編集</a>
    @if($page->status === 'public' && !empty($page->uid))
    <a href="{{ url('/p/'.$page->uid) }}" target="_blank" rel="noopener" class="btn btn-outline-success btn-sm">公開ページ</a>
    @endif
  </div>
</div>

@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

<div class="card mb-4">
  <div class="card-body">
    <h2 class="h5 mb-2">訪問者コメントの返信</h2>
    <p class="text-muted small mb-0">
      <strong>返信者名</strong>と<strong>管理者返信</strong>は別々に入力します。返信者名・アイコンはコメントブロックの既定値が入りますが、この画面で変更した内容は<strong>そのコメントの返信だけ</strong>に保存されます（ブロック設定は変わりません）。返信は公開ページのコメント一覧にも表示されます。
      @if($unrepliedCount > 0)
      <span class="badge bg-warning text-dark ms-1">未返信 {{ $unrepliedCount }} 件</span>
      @endif
    </p>
  </div>
</div>

@if($comments->isEmpty())
<div class="card">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-chat-square-text" style="font-size:2.5rem;opacity:.4;"></i>
    <p class="mt-3 mb-0">まだ訪問者からのコメントはありません。</p>
  </div>
</div>
@else
@foreach($comments as $comment)
@php
  $blockLabel = $blockLabels[$comment->block_element_id] ?? $comment->block_element_id;
  $hasReply = trim((string) ($comment->admin_reply ?? '')) !== '';
  $defaults = $blockReplyDefaults[$comment->block_element_id] ?? ['name' => '', 'avatar' => ''];
  $authorNameValue = old('admin_reply_author_name');
  if ($authorNameValue === null) {
    $savedName = trim((string) ($comment->admin_reply_author_name ?? ''));
    $authorNameValue = $savedName !== '' ? $comment->admin_reply_author_name : ($defaults['name'] ?? '');
  }
  $authorAvatarValue = old('admin_reply_author_avatar_url');
  if ($authorAvatarValue === null) {
    $savedAvatar = trim((string) ($comment->admin_reply_author_avatar_url ?? ''));
    $authorAvatarValue = $savedAvatar !== '' ? $comment->admin_reply_author_avatar_url : ($defaults['avatar'] ?? '');
  }
  $replyBodyValue = old('admin_reply');
  if ($replyBodyValue === null) {
    $replyBodyValue = $comment->admin_reply ?? '';
  }
@endphp
<div class="card mb-3 {{ $hasReply ? '' : 'border-warning' }}">
  <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2 py-2">
    <div>
      <span class="fw-semibold">{{ $comment->author_name ?: '匿名' }}</span>
      @if($comment->author_email)
      <span class="text-muted small ms-2"><i class="bi bi-envelope"></i> {{ $comment->author_email }}</span>
      @endif
    </div>
    <div class="small text-muted text-end">
      <span class="badge bg-light text-dark border">{{ $blockLabel }}</span>
      <span class="ms-2">{{ $comment->created_at?->format('Y/m/d H:i') }}</span>
      @if($hasReply)
      <span class="badge bg-success ms-1">返信済</span>
      @else
      <span class="badge bg-warning text-dark ms-1">未返信</span>
      @endif
    </div>
  </div>
  <div class="card-body">
    <div class="mb-3 p-3 rounded" style="background:#f8f9fa;">
      <div class="small text-muted mb-1">訪問者コメント</div>
      <div class="mb-0">{!! nl2br(e($comment->body)) !!}</div>
    </div>
    <form method="POST" action="{{ route('funnel.page.comments.reply', [$funnel, $page, $comment]) }}">
      @csrf
      @method('PUT')
      <div class="mb-3">
        <label class="form-label fw-semibold" for="reply-author-name-{{ $comment->id }}">返信者名</label>
        <input type="text" name="admin_reply_author_name" id="reply-author-name-{{ $comment->id }}" class="form-control" maxlength="100" value="{{ $authorNameValue }}" placeholder="例: 運営担当">
        @if(!$hasReply && ($defaults['name'] ?? '') !== '')
        <div class="form-text">初期表示: コメントブロックの返信者名（この返信だけ変更できます）</div>
        @endif
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold" for="reply-author-avatar-{{ $comment->id }}">返信者アイコン</label>
        <div class="d-flex gap-1 flex-wrap align-items-start">
          <input type="text" name="admin_reply_author_avatar_url" id="reply-author-avatar-{{ $comment->id }}" class="form-control flex-grow-1" maxlength="500" value="{{ $authorAvatarValue }}" placeholder="/storage/...">
          <button type="button" class="btn btn-outline-secondary btn-sm" title="画像を選択" onclick="MonakaImagePicker.open({ inputId: 'reply-author-avatar-{{ $comment->id }}', onSelect: function(url) { updateReplyAvatarPreview({{ $comment->id }}, url); } })"><i class="bi bi-upload"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm" title="画像をクリア" onclick="document.getElementById('reply-author-avatar-{{ $comment->id }}').value=''; updateReplyAvatarPreview({{ $comment->id }}, '');"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="mt-2 d-flex align-items-center gap-2" id="reply-avatar-preview-wrap-{{ $comment->id }}" @if($authorAvatarValue === '') style="display:none!important;" @endif>
          <img src="{{ $authorAvatarValue }}" alt="" id="reply-avatar-preview-{{ $comment->id }}" class="rounded-circle border" style="width:48px;height:48px;object-fit:cover;" onerror="this.closest('#reply-avatar-preview-wrap-{{ $comment->id }}').style.display='none'">
          <span class="small text-muted">プレビュー</span>
        </div>
        @if(!$hasReply && ($defaults['avatar'] ?? '') !== '')
        <div class="form-text">初期表示: コメントブロックの返信者アイコン（この返信だけ変更できます）</div>
        @endif
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold" for="reply-body-{{ $comment->id }}">管理者返信</label>
        <textarea name="admin_reply" id="reply-body-{{ $comment->id }}" class="form-control" rows="4" maxlength="2000" placeholder="返信文を入力すると公開ページにも表示されます">{{ $replyBodyValue }}</textarea>
        @if($comment->admin_replied_at)
        <div class="form-text">最終返信: {{ $comment->admin_replied_at->format('Y/m/d H:i') }}</div>
        @endif
      </div>
      <div class="form-check mb-3">
        <input type="hidden" name="is_visible" value="0">
        <input class="form-check-input" type="checkbox" name="is_visible" value="1" id="visible-{{ $comment->id }}" @checked(old('is_visible', $comment->is_visible))>
        <label class="form-check-label" for="visible-{{ $comment->id }}">公開ページにこのコメントを表示する</label>
      </div>
      <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-reply me-1"></i>返信を保存</button>
    </form>
  </div>
</div>
@endforeach
@endif

@include('partials.monaka_image_picker')

@push('scripts')
<script>
function updateReplyAvatarPreview(commentId, url) {
  const wrap = document.getElementById('reply-avatar-preview-wrap-' + commentId);
  const img = document.getElementById('reply-avatar-preview-' + commentId);
  if (!wrap || !img) return;
  if (url) {
    img.src = url;
    wrap.style.display = '';
  } else {
    wrap.style.display = 'none';
    img.removeAttribute('src');
  }
}
</script>
@endpush
@endsection