@extends('admin.layout')
@section('title', 'Comments')
@section('page-title', 'Comments')

@section('content')

{{-- Status tabs --}}
<div class="flex items-center gap-1 mb-6">
  @php
  $tabs = [''=>'All','pending'=>'Pending','approved'=>'Approved','spam'=>'Spam'];
  $tabColors = ['pending'=>'text-yellow-400','approved'=>'text-green-400','spam'=>'text-red-400',''=>'text-gray-300'];
  @endphp
  @foreach($tabs as $val => $label)
    <a href="{{ route('admin.comments.index', array_merge(request()->except('page'), ['status'=>$val ?: null])) }}"
       class="px-4 py-2 rounded-xl text-sm font-medium transition-colors
         {{ request('status', '') === $val
            ? 'bg-white/10 text-white'
            : 'text-gray-500 hover:text-white hover:bg-white/5' }}">
      {{ $label }}
      <span class="ml-1 text-xs">({{ $counts[$val ?: 'all'] ?? 0 }})</span>
    </a>
  @endforeach

  {{-- Search --}}
  <form method="GET" class="ml-auto flex gap-2">
    <input type="hidden" name="status" value="{{ request('status') }}">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search…"
      class="bg-gray-800 border border-white/10 rounded-xl px-4 py-2 text-sm text-white w-52 focus:outline-none focus:border-blue-500">
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-xl">Go</button>
  </form>
</div>

{{-- Bulk actions --}}
<form method="POST" action="{{ route('admin.comments.bulk') }}" id="bulkForm">
  @csrf
  <div class="flex items-center gap-3 mb-3">
    <select name="action" class="bg-gray-800 border border-white/10 rounded-xl px-3 py-1.5 text-sm text-gray-300 focus:outline-none">
      <option value="">Bulk action…</option>
      <option value="approve">Approve</option>
      <option value="spam">Mark spam</option>
      <option value="delete">Delete</option>
    </select>
    <button type="submit" onclick="return confirm('Apply to selected?')"
      class="text-sm text-gray-400 hover:text-white border border-white/10 hover:border-white/30 px-3 py-1.5 rounded-xl transition-colors">
      Apply
    </button>
  </div>

  <div class="bg-gray-900 rounded-2xl border border-white/10 overflow-hidden">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-white/10 text-xs text-gray-500 uppercase tracking-wider">
          <th class="px-4 py-3 w-8"><input type="checkbox" id="selectAll" class="rounded"></th>
          <th class="text-left px-4 py-3">Author</th>
          <th class="text-left px-4 py-3">Comment</th>
          <th class="text-left px-4 py-3 hidden lg:table-cell">Post</th>
          <th class="text-left px-4 py-3">Status</th>
          <th class="text-left px-4 py-3 hidden md:table-cell">Date</th>
          <th class="px-4 py-3"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/5">
        @forelse($comments as $comment)
        <tr class="hover:bg-white/3 transition-colors">
          <td class="px-4 py-3">
            <input type="checkbox" name="ids[]" value="{{ $comment->id }}" class="rounded comment-cb">
          </td>
          <td class="px-4 py-3">
            <p class="text-white font-medium text-sm">{{ $comment->author_name }}</p>
            <p class="text-gray-600 text-xs">{{ $comment->author_ip }}</p>
          </td>
          <td class="px-4 py-3 max-w-xs">
            <p class="text-gray-300 text-sm line-clamp-2">{{ $comment->content }}</p>
          </td>
          <td class="px-4 py-3 hidden lg:table-cell">
            @if($comment->post)
              <a href="{{ route('admin.posts.edit', $comment->post) }}"
                 class="text-blue-400 hover:underline text-xs line-clamp-1">
                {{ Str::limit($comment->post->title, 50) }}
              </a>
            @endif
          </td>
          <td class="px-4 py-3">
            @php $sc = ['approved'=>'text-green-400','pending'=>'text-yellow-400','spam'=>'text-red-400']; @endphp
            <span class="text-xs font-medium {{ $sc[$comment->status] ?? 'text-gray-400' }}">
              {{ ucfirst($comment->status) }}
            </span>
          </td>
          <td class="px-4 py-3 text-gray-500 text-xs hidden md:table-cell">
            {{ $comment->created_at->diffForHumans() }}
          </td>
          <td class="px-4 py-3">
            <div class="flex items-center gap-1 justify-end">
              @if($comment->status !== 'approved')
                <form method="POST" action="{{ route('admin.comments.approve', $comment) }}" class="inline">
                  @csrf
                  <button type="submit" class="text-xs text-green-400 hover:underline px-2 py-1">Approve</button>
                </form>
              @endif
              @if($comment->status !== 'spam')
                <form method="POST" action="{{ route('admin.comments.spam', $comment) }}" class="inline">
                  @csrf
                  <button type="submit" class="text-xs text-yellow-400 hover:underline px-2 py-1">Spam</button>
                </form>
              @endif
              <form method="POST" action="{{ route('admin.comments.destroy', $comment) }}" class="inline"
                    onsubmit="return confirm('Delete?')">
                @csrf @method('DELETE')
                <button type="submit" class="text-xs text-gray-600 hover:text-red-400 px-2 py-1 transition-colors">✕</button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="7" class="px-5 py-12 text-center text-gray-500">No comments found.</td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</form>

<div class="mt-4">{{ $comments->links() }}</div>

<script>
document.getElementById('selectAll').addEventListener('change', function() {
  document.querySelectorAll('.comment-cb').forEach(cb => cb.checked = this.checked);
});
</script>
@endsection
