@extends('admin.layouts.app')

@section('title', 'Card Flags')
@section('page-title', 'Card Flags')
@section('page-title-jp', 'カード報告')

@section('content')

{{-- Stats --}}
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;">
    <div class="glass-card" style="--card-color-1: #ef4444; --card-color-2: #f97316;">
        <div class="glass-card-top">
            <div>
                <div style="font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Open</div>
                <div style="font-size: 2rem; font-weight: 700; color: #1e293b;">{{ $openCount }}</div>
            </div>
            <div style="width: 40px; height: 40px; border-radius: 10px; background: rgba(239,68,68,0.1); display: flex; align-items: center; justify-content: center;">
                <x-icon name="flag" size="20" style="color: #ef4444;" />
            </div>
        </div>
    </div>
    <div class="glass-card" style="--card-color-1: #22c55e; --card-color-2: #10b981;">
        <div class="glass-card-top">
            <div>
                <div style="font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Resolved</div>
                <div style="font-size: 2rem; font-weight: 700; color: #1e293b;">{{ $resolvedCount }}</div>
            </div>
            <div style="width: 40px; height: 40px; border-radius: 10px; background: rgba(34,197,94,0.1); display: flex; align-items: center; justify-content: center;">
                <x-icon name="check-circle" size="20" style="color: #22c55e;" />
            </div>
        </div>
    </div>
    <div class="glass-card" style="--card-color-1: #94a3b8; --card-color-2: #64748b;">
        <div class="glass-card-top">
            <div>
                <div style="font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Dismissed</div>
                <div style="font-size: 2rem; font-weight: 700; color: #1e293b;">{{ $dismissedCount }}</div>
            </div>
            <div style="width: 40px; height: 40px; border-radius: 10px; background: rgba(148,163,184,0.1); display: flex; align-items: center; justify-content: center;">
                <x-icon name="x-circle" size="20" style="color: #94a3b8;" />
            </div>
        </div>
    </div>
</div>

@if(session('success'))
    <div style="background: #dcfce7; border: 1px solid #86efac; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; color: #166534; font-size: 0.875rem;">
        {{ session('success') }}
    </div>
@endif

<form method="GET">
    <x-admin.data-table
        :headers="[
            ['label' => 'Card', 'sortable' => false, 'width' => '18%'],
            ['label' => 'User', 'sortable' => false, 'width' => '14%'],
            ['label' => 'Modality', 'sortable' => false, 'align' => 'center', 'width' => '10%'],
            ['label' => 'Comment', 'sortable' => false, 'width' => '25%'],
            ['label' => 'Status', 'sortable' => false, 'align' => 'center', 'width' => '10%'],
            ['label' => 'Date', 'sortable' => false, 'width' => '11%'],
            ['label' => 'Actions', 'sortable' => false, 'align' => 'center', 'width' => '12%'],
        ]"
        :searchable="true"
        searchPlaceholder="Search by card kanji/kana or user..."
        :hoverable="true"
        :paginator="$flags">

        <x-slot name="filters">
            <select name="status" style="padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px;">
                <option value="">All Statuses</option>
                <option value="open"      {{ request('status') === 'open'      ? 'selected' : '' }}>Open</option>
                <option value="resolved"  {{ request('status') === 'resolved'  ? 'selected' : '' }}>Resolved</option>
                <option value="dismissed" {{ request('status') === 'dismissed' ? 'selected' : '' }}>Dismissed</option>
            </select>
        </x-slot>

        @foreach ($flags as $flag)
        <tr>
            {{-- Card --}}
            <td>
                @if($flag->card)
                    <div style="font-weight: 600; font-size: 1.1rem; font-family: serif;">
                        {{ $flag->card->kanji ?: $flag->card->kana }}
                    </div>
                    @if($flag->card->kanji)
                        <div style="font-size: 0.8rem; color: #64748b;">{{ $flag->card->kana }}</div>
                    @endif
                    <a href="{{ route('admin.cards.edit', $flag->card) }}" style="font-size: 0.75rem; color: #3b82f6; text-decoration: none;">
                        Edit card →
                    </a>
                @else
                    <span class="text-muted">[deleted]</span>
                @endif
            </td>

            {{-- User --}}
            <td>
                <div style="font-size: 0.875rem; font-weight: 500;">{{ $flag->user?->name ?? '—' }}</div>
                <div style="font-size: 0.75rem; color: #94a3b8;">{{ $flag->user?->email ?? '' }}</div>
            </td>

            {{-- Modality --}}
            <td class="center">
                @if($flag->modality)
                    <span class="badge badge-primary" style="text-transform: capitalize;">{{ $flag->modality }}</span>
                @else
                    <span class="text-muted">—</span>
                @endif
            </td>

            {{-- Comment --}}
            <td>
                @if($flag->comment)
                    <span style="font-size: 0.875rem; color: #374151;" title="{{ $flag->comment }}">
                        {{ Str::limit($flag->comment, 80) }}
                    </span>
                @else
                    <span class="text-muted" style="font-size: 0.8rem; font-style: italic;">No comment</span>
                @endif
            </td>

            {{-- Status --}}
            <td class="center">
                <span class="badge
                    @if($flag->status === 'open') badge-danger
                    @elseif($flag->status === 'resolved') badge-success
                    @else badge-gray
                    @endif">
                    {{ ucfirst($flag->status) }}
                </span>
            </td>

            {{-- Date --}}
            <td style="font-size: 0.8rem; color: #64748b;">
                {{ $flag->created_at->format('M d, Y') }}<br>
                <span style="color: #94a3b8;">{{ $flag->created_at->format('H:i') }}</span>
            </td>

            {{-- Actions --}}
            <td class="center">
                <button
                    onclick="openFlagModal({{ $flag->id }}, '{{ addslashes($flag->admin_note ?? '') }}', '{{ $flag->status }}')"
                    class="btn-action btn-edit">
                    Review
                </button>
            </td>
        </tr>
        @endforeach
    </x-admin.data-table>
</form>

<div style="margin-top: 20px;">
    {{ $flags->links() }}
</div>

{{-- Review Modal --}}
<div id="flag-modal" style="display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; padding:16px;">
    <div style="background:#fff; border-radius:16px; width:100%; max-width:480px; padding:28px; box-shadow:0 25px 50px rgba(0,0,0,0.15);">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
            <h3 style="font-size:1.125rem; font-weight:700; color:#1e293b; margin:0;">Review Flag</h3>
            <button onclick="closeFlagModal()" style="background:none; border:none; cursor:pointer; color:#94a3b8; font-size:1.25rem; line-height:1;">&times;</button>
        </div>
        <form id="flag-form" method="POST">
            @csrf
            @method('PUT')
            <div style="margin-bottom:16px;">
                <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;">Status</label>
                <select name="status" id="flag-status" style="width:100%; padding:10px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#1e293b;">
                    <option value="open">Open</option>
                    <option value="resolved">Resolved</option>
                    <option value="dismissed">Dismissed</option>
                </select>
            </div>
            <div style="margin-bottom:20px;">
                <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;">Admin Note</label>
                <textarea name="admin_note" id="flag-admin-note" rows="3" placeholder="Internal note (not shown to user)..."
                    style="width:100%; padding:10px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#1e293b; resize:vertical; box-sizing:border-box;"></textarea>
            </div>
            <div style="display:flex; gap:12px;">
                <button type="button" onclick="closeFlagModal()"
                    style="flex:1; padding:10px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#64748b; font-weight:600; cursor:pointer; font-size:0.875rem;">
                    Cancel
                </button>
                <button type="submit"
                    style="flex:1; padding:10px; border:none; border-radius:8px; background:#3b82f6; color:#fff; font-weight:700; cursor:pointer; font-size:0.875rem;">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openFlagModal(id, adminNote, status) {
    document.getElementById('flag-form').action = '/admin/card-flags/' + id;
    document.getElementById('flag-admin-note').value = adminNote;
    document.getElementById('flag-status').value = status;
    const modal = document.getElementById('flag-modal');
    modal.style.display = 'flex';
}
function closeFlagModal() {
    document.getElementById('flag-modal').style.display = 'none';
}
document.getElementById('flag-modal').addEventListener('click', function(e) {
    if (e.target === this) closeFlagModal();
});
</script>
@endsection