@extends('layouts.admin')

@section('title', 'Histórico — ' . $reservation->locator)

@section('breadcrumb')
    <a class="breadcrumb-item" href="{{ route('admin.reservations.index') }}">Reservas</a>
    <span class="breadcrumb-separator">/</span>
    <a class="breadcrumb-item" href="{{ route('admin.reservations.show', $reservation) }}">{{ $reservation->locator }}</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Histórico</span>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 48px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-border) 100%);
    border-radius: 2px;
}
.tl-item {
    position: relative;
    margin-bottom: 24px;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
    position: absolute;
    left: -40px;
    top: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tl-dot.checkin  { border-color:#4E86E8;background:#EBF4FF; }
.tl-dot.checkout { border-color:#59B39E;background:#F0FDF4; }
.tl-dot.created  { border-color:#6366f1;background:#EEF2FF; }
.tl-dot.canceled { border-color:#ef4444;background:#FEF2F2; }
.tl-dot.updated,
.tl-dot.status_changed { border-color:#f59e0b;background:#FFFBEB; }
.tl-body {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.tl-action {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.tl-desc {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.tl-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.diff-box {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    font-size: 11px;
}
.diff-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 4px;
}
.diff-row:last-child { margin-bottom: 0; }
.diff-key { color: var(--color-text-muted); min-width: 100px; }
.diff-old { color: #ef4444; text-decoration: line-through; }
.diff-new { color: #16a34a; font-weight: 600; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Histórico da Reserva</h1>
        <p class="page-subtitle">{{ $reservation->locator }} — {{ $reservation->guest?->full_name }}</p>
    </div>
    <a href="{{ route('admin.reservations.show', $reservation) }}" class="btn btn-secondary">
        <i data-lucide="arrow-left" style="width:14px;height:14px;"></i> Voltar para Reserva
    </a>
</div>

<div style="display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start;">

    {{-- Timeline principal --}}
    <div class="card">
        <div class="card-header">
            <h3 style="margin:0;font-size:14px;font-weight:700;">
                <i data-lucide="activity" style="width:15px;height:15px;display:inline;vertical-align:middle;margin-right:6px;"></i>
                {{ $logs->count() }} evento{{ $logs->count() !== 1 ? 's' : '' }} registrado{{ $logs->count() !== 1 ? 's' : '' }}
            </h3>
        </div>
        <div class="card-body" style="padding:28px 28px 28px 28px;">
            @if($logs->isEmpty())
            <div style="text-align:center;padding:40px;">
                <i data-lucide="clock" style="width:36px;height:36px;color:var(--color-text-muted);margin-bottom:12px;"></i>
                <p style="color:var(--color-text-muted);margin:0;">Nenhum histórico registrado ainda.</p>
            </div>
            @else
            <div class="timeline">
                @foreach($logs as $log)
                @php
                    $dotClass = match($log->action) {
                        'checkin'         => 'checkin',
                        'checkout'        => 'checkout',
                        'created'         => 'created',
                        'canceled'        => 'canceled',
                        'updated', 'status_changed', 'room_changed', 'period_changed' => 'updated',
                        default           => '',
                    };
                    $actionColors = [
                        'created'          => '#6366f1',
                        'checkin'          => '#4E86E8',
                        'checkout'         => '#59B39E',
                        'canceled'         => '#ef4444',
                        'updated'          => '#f59e0b',
                        'status_changed'   => '#f59e0b',
                        'room_changed'     => '#8b5cf6',
                        'period_changed'   => '#06b6d4',
                        'companion_added'  => '#10b981',
                        'companion_removed'=> '#f43f5e',
                        'fnrh_generated'   => '#f59e0b',
                        'payment_added'    => '#059669',
                    ];
                    $color = $actionColors[$log->action] ?? '#64748b';
                @endphp
                <div class="tl-item">
                    <div class="tl-dot {{ $dotClass }}">
                        <i data-lucide="{{ $log->icon }}" style="width:13px;height:13px;color:{{ $color }};"></i>
                    </div>
                    <div class="tl-body">
                        <div class="tl-action" style="color:{{ $color }};">{{ str_replace('_', ' ', strtoupper($log->action)) }}</div>
                        <div class="tl-desc">{{ $log->description }}</div>
                        <div class="tl-meta">
                            <span>
                                <i data-lucide="user" style="width:11px;height:11px;display:inline;vertical-align:middle;"></i>
                                {{ $log->user?->name ?? 'Sistema' }}
                            </span>
                            <span>
                                <i data-lucide="clock" style="width:11px;height:11px;display:inline;vertical-align:middle;"></i>
                                {{ $log->created_at->format('d/m/Y H:i:s') }}
                            </span>
                            <span style="background:var(--color-bg);padding:2px 8px;border-radius:100px;border:1px solid var(--color-border);">
                                {{ ucfirst($log->origin) }}
                            </span>
                        </div>

                        {{-- Diff de valores --}}
                        @if($log->old_values && $log->new_values)
                        <div class="diff-box">
                            @foreach(array_keys($log->new_values) as $field)
                            @if(isset($log->old_values[$field]) && $log->old_values[$field] != $log->new_values[$field])
                            <div class="diff-row">
                                <span class="diff-key">{{ $field }}</span>
                                <span class="diff-old">{{ is_array($log->old_values[$field]) ? json_encode($log->old_values[$field]) : $log->old_values[$field] }}</span>
                                <span style="color:var(--color-text-muted);">→</span>
                                <span class="diff-new">{{ is_array($log->new_values[$field]) ? json_encode($log->new_values[$field]) : $log->new_values[$field] }}</span>
                            </div>
                            @endif
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    {{-- Sidebar com resumo --}}
    <div>
        <div class="card">
            <div class="card-header"><h3 style="margin:0;font-size:13px;font-weight:700;">Resumo da Reserva</h3></div>
            <div class="card-body" style="padding:16px;">
                <div style="font-size:22px;font-weight:900;margin-bottom:4px;">{{ $reservation->locator }}</div>
                <div style="font-size:12px;color:var(--color-text-muted);margin-bottom:12px;">{{ $reservation->status_label }}</div>
                <table style="width:100%;font-size:12px;border-collapse:collapse;">
                    <tr><td style="padding:5px 0;color:var(--color-text-muted);">Hóspede</td><td style="text-align:right;font-weight:600;">{{ $reservation->guest?->full_name }}</td></tr>
                    <tr><td style="padding:5px 0;color:var(--color-text-muted);">UH</td><td style="text-align:right;font-weight:600;">{{ $reservation->room?->name ?? '—' }}</td></tr>
                    <tr><td style="padding:5px 0;color:var(--color-text-muted);">Check-in</td><td style="text-align:right;font-weight:600;">{{ $reservation->check_in_expected->format('d/m/Y') }}</td></tr>
                    <tr><td style="padding:5px 0;color:var(--color-text-muted);">Check-out</td><td style="text-align:right;font-weight:600;">{{ $reservation->check_out_expected->format('d/m/Y') }}</td></tr>
                    <tr><td style="padding:5px 0;color:var(--color-text-muted);">Eventos</td><td style="text-align:right;font-weight:800;color:var(--color-primary);">{{ $logs->count() }}</td></tr>
                </table>
                <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border-light);">
                    <a href="{{ route('admin.reservations.show', $reservation) }}" class="btn btn-secondary" style="width:100%;text-align:center;">
                        Ver Detalhe
                    </a>
                </div>
            </div>
        </div>

        {{-- Legenda --}}
        <div class="card" style="margin-top:16px;">
            <div class="card-header"><h3 style="margin:0;font-size:12px;font-weight:700;">Legenda</h3></div>
            <div class="card-body" style="padding:14px;">
                @foreach([
                    ['created','#6366f1','Criação'],
                    ['checkin','#4E86E8','Check-in'],
                    ['checkout','#59B39E','Check-out'],
                    ['updated','#f59e0b','Atualização'],
                    ['canceled','#ef4444','Cancelamento'],
                ] as [$action,$color,$label])
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;">
                    <div style="width:10px;height:10px;border-radius:50%;background:{{ $color }};flex-shrink:0;"></div>
                    {{ $label }}
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection