@extends('layouts.admin')
@section('title', 'Avaliação #' . $review->id)
@section('breadcrumb')
    <a href="{{ route('admin.nps.index') }}" style="color:#6366f1;text-decoration:none;">NPS & Avaliações</a>
    <span style="margin:0 6px;color:#d1d5db;">›</span>
    <span class="breadcrumb-current">Avaliação #{{ $review->id }}</span>
@endsection

@section('content')
@php
$score = $review->nps_score;
$catClass = match($review->npsCategory) {
    'promoter'  => ['bg'=>'#dcfce7','color'=>'#15803d','label'=>'Promotor'],
    'passive'   => ['bg'=>'#fef3c7','color'=>'#b45309','label'=>'Passivo'],
    default     => ['bg'=>'#fee2e2','color'=>'#dc2626','label'=>'Detrator'],
};
@endphp

<div style="max-width:700px;margin:0 auto;">

    {{-- Header --}}
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px;">
        <div style="display:flex;align-items:center;gap:12px;">
            <div style="width:52px;height:52px;border-radius:12px;background:{{ $catClass['bg'] }};display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:{{ $catClass['color'] }};">
                {{ $review->nps_score }}
            </div>
            <div>
                <div style="font-size:1rem;font-weight:800;color:#111827;">
                    {{ $review->guest?->full_name ?? 'Hóspede' }}
                </div>
                <div style="font-size:.75rem;color:#6b7280;display:flex;gap:10px;margin-top:2px;">
                    <span style="padding:2px 8px;background:{{ $catClass['bg'] }};color:{{ $catClass['color'] }};border-radius:99px;font-weight:700;">{{ $catClass['label'] }}</span>
                    <span>{{ $review->submitted_at?->format('d/m/Y H:i') }}</span>
                </div>
            </div>
        </div>
        <div style="display:flex;gap:8px;">
            <button
                onclick="toggleVis({{ $review->id }}, this)"
                id="vis-btn"
                style="padding:7px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;background:#fff;color:#374151;"
            >{{ $review->is_public ? '👁 Público' : '🔒 Privado' }}</button>
            <a href="{{ route('admin.nps.index') }}" class="btn btn-secondary" style="font-size:.8rem;">
                ← Voltar
            </a>
        </div>
    </div>

    {{-- Avaliação --}}
    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px;">
        @if($review->title)
        <div style="font-size:1rem;font-weight:800;color:#111827;margin-bottom:10px;">
            "{{ $review->title }}"
        </div>
        @endif
        @if($review->comment)
        <div style="font-size:.88rem;color:#374151;line-height:1.7;margin-bottom:14px;">
            {{ $review->comment }}
        </div>
        @endif

        {{-- Avaliação geral --}}
        @if($review->overall_rating)
        <div style="display:flex;align-items:center;gap:8px;padding:12px;background:#fafafa;border-radius:10px;">
            <span style="font-size:.8rem;font-weight:700;color:#6b7280;">Avaliação Geral:</span>
            <span style="color:#f59e0b;font-size:1.2rem;">
                {{ str_repeat('★', $review->overall_rating) }}{{ str_repeat('☆', 5 - $review->overall_rating) }}
            </span>
            <span style="font-size:.9rem;font-weight:800;color:#111827;">{{ $review->overall_rating }}/5</span>
        </div>
        @endif
    </div>

    {{-- Notas por Categoria --}}
    @php
    $cats = [
        '🧹 Limpeza'         => $review->rating_cleanliness,
        '🤝 Atendimento'     => $review->rating_service,
        '📍 Localização'     => $review->rating_location,
        '💰 Custo-Benefício' => $review->rating_value,
        '🛏️ Conforto'        => $review->rating_comfort,
    ];
    $filledCats = array_filter($cats);
    @endphp

    @if(count($filledCats) > 0)
    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px;">
        <div style="font-size:.84rem;font-weight:800;color:#111827;margin-bottom:16px;">Notas por Categoria</div>
        <div style="display:flex;flex-direction:column;gap:14px;">
            @foreach($filledCats as $label => $val)
            <div style="display:flex;align-items:center;gap:12px;">
                <div style="font-size:.8rem;color:#374151;min-width:150px;">{{ $label }}</div>
                <div style="flex:1;height:8px;background:#f1f5f9;border-radius:99px;overflow:hidden;">
                    <div style="height:100%;width:{{ $val * 20 }}%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:99px;transition:width .4s;"></div>
                </div>
                <div style="font-size:.82rem;font-weight:800;color:#111827;min-width:30px;">{{ $val }}/5</div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Contexto da Reserva --}}
    @if($review->reservation)
    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px;">
        <div style="font-size:.84rem;font-weight:800;color:#111827;margin-bottom:14px;">🏨 Contexto da Reserva</div>
        @php $res = $review->reservation; @endphp
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
            <div>
                <div style="font-size:.7rem;color:#9ca3af;font-weight:700;">Localizador</div>
                <div style="font-size:.85rem;font-weight:700;color:#111827;">{{ $res->locator }}</div>
            </div>
            <div>
                <div style="font-size:.7rem;color:#9ca3af;font-weight:700;">Quarto</div>
                <div style="font-size:.85rem;font-weight:700;color:#111827;">{{ $res->room?->name ?? '—' }}</div>
            </div>
            <div>
                <div style="font-size:.7rem;color:#9ca3af;font-weight:700;">Check-in</div>
                <div style="font-size:.85rem;color:#374151;">{{ ($res->check_in_realized ?? $res->check_in_expected)?->format('d/m/Y') }}</div>
            </div>
            <div>
                <div style="font-size:.7rem;color:#9ca3af;font-weight:700;">Check-out</div>
                <div style="font-size:.85rem;color:#374151;">{{ ($res->check_out_realized ?? $res->check_out_expected)?->format('d/m/Y') }}</div>
            </div>
            <div>
                <div style="font-size:.7rem;color:#9ca3af;font-weight:700;">Noites</div>
                <div style="font-size:.85rem;color:#374151;">{{ $res->nights }}</div>
            </div>
        </div>
        <div style="margin-top:14px;">
            <a href="{{ route('admin.reservations.show', $res) }}" style="font-size:.78rem;font-weight:700;color:#6366f1;text-decoration:none;">
                Ver reserva completa →
            </a>
        </div>
    </div>
    @endif

    {{-- Dados técnicos --}}
    <div style="background:#fafafa;border:1px solid #f1f5f9;border-radius:10px;padding:14px 18px;font-size:.72rem;color:#9ca3af;display:flex;gap:16px;flex-wrap:wrap;">
        <span>ID: #{{ $review->id }}</span>
        <span>Token: {{ substr($review->token, 0, 8) }}...</span>
        @if($review->ip_address)<span>IP: {{ $review->ip_address }}</span>@endif
        <span>Solicitado: {{ $review->review_requested_at?->format('d/m/Y H:i') ?? '—' }}</span>
        <span>Respondido: {{ $review->submitted_at?->format('d/m/Y H:i') ?? '—' }}</span>
    </div>
</div>
@endsection

@push('scripts')
<script>
async function toggleVis(id, btn) {
    const res = await fetch(`/admin/nps/${id}/visibility`, {
        method:'PATCH',
        headers:{
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
            'X-Requested-With': 'XMLHttpRequest'
        }
    });
    const data = await res.json();
    if (data.ok) btn.textContent = data.is_public ? '👁 Público' : '🔒 Privado';
}
</script>
@endpush