@extends('layouts.app')

@section('title', 'Slopes Status — Mzaar Ski Resort')
@section('description', 'Live slope and lift status at Mzaar. Updated by resort staff and on-slope reporters.')

@section('content')

{{-- Snow conditions banner --}}
@if($snowCondition)
<div class="bg-primary text-primary-foreground">
    <div class="container-x py-8">
        <span class="text-xs font-semibold uppercase tracking-[0.25em] text-secondary">Resort snow conditions</span>
        <div class="mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <div class="text-3xl font-display">{{ $snowCondition->snow_depth_base_cm ?? '—' }} cm</div>
                <div class="text-xs uppercase tracking-widest text-primary-foreground/60 mt-1">Base snow depth</div>
            </div>
            <div>
                <div class="text-3xl font-display">{{ $snowCondition->snow_depth_summit_cm ?? '—' }} cm</div>
                <div class="text-xs uppercase tracking-widest text-primary-foreground/60 mt-1">Summit snow depth</div>
            </div>
            <div>
                <div class="text-3xl font-display capitalize">{{ str_replace('_', ' ', $snowCondition->snow_type ?? '—') }}</div>
                <div class="text-xs uppercase tracking-widest text-primary-foreground/60 mt-1">Snow type</div>
            </div>
            <div>
                <div class="text-3xl font-display capitalize">{{ $snowCondition->overall_conditions ?? '—' }}</div>
                <div class="text-xs uppercase tracking-widest text-primary-foreground/60 mt-1">Overall conditions</div>
            </div>
        </div>
        @if($snowCondition->piste_conditions)
        <p class="mt-4 text-sm text-primary-foreground/70">{{ $snowCondition->piste_conditions }}</p>
        @endif
        @if($snowCondition->last_snowfall_date)
        <p class="mt-2 text-xs text-primary-foreground/50">
            Last snowfall: {{ $snowCondition->last_snowfall_date->format('M j') }}
            @if($snowCondition->last_snowfall_cm)
                &mdash; {{ $snowCondition->last_snowfall_cm }} cm
            @endif
        </p>
        @endif
    </div>
</div>
@endif

@if(auth()->check() && in_array(auth()->user()->role, ['admin', 'staff', 'slope_reporter']))
{{-- ─────────────── REPORTER MODE ─────────────── --}}
<style>
.toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    position: relative; width: 80px; height: 28px;
    border-radius: 9999px; background: #f43f5e;
    transition: background 0.2s; display: flex; align-items: center;
}
.toggle-switch input:checked ~ .toggle-track { background: #10b981; }
.toggle-thumb {
    position: absolute; left: 3px; width: 22px; height: 22px;
    border-radius: 9999px; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(52px); }
.toggle-label-open, .toggle-label-closed {
    position: absolute; font-size: 9px; font-weight: 700;
    letter-spacing: 0.05em; color: #fff; text-transform: uppercase; pointer-events: none;
}
.toggle-label-open   { right: 7px; opacity: 0; transition: opacity 0.15s; }
.toggle-label-closed { left: 28px; opacity: 1; transition: opacity 0.15s; }
.toggle-switch input:checked ~ .toggle-track .toggle-label-open   { opacity: 1; }
.toggle-switch input:checked ~ .toggle-track .toggle-label-closed { opacity: 0; }
</style>

<section class="container-x py-12 md:py-16 pb-28">
    <div class="flex flex-col items-start justify-between gap-4 md:flex-row md:items-end">
        <div>
            <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Live conditions</span>
            <h1 class="mt-2 text-4xl md:text-5xl">Slopes status — today.</h1>
            <p class="mt-1 text-xs text-muted-foreground">Last updated {{ $lastUpdate ? $lastUpdate->diffForHumans() : 'never' }}</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-sm text-muted-foreground">{{ auth()->user()->name }}</span>
            <form method="POST" action="{{ route('reporter.logout') }}">
                @csrf
                <button type="submit" class="rounded-full border border-border px-4 py-2 text-sm font-semibold hover:bg-muted transition">Log out</button>
            </form>
        </div>
    </div>

    <div class="mt-8 space-y-6">
        @foreach($slopes as $domainName => $domainSlopes)
        <div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
            <h2 class="text-lg font-semibold mb-3 text-muted-foreground uppercase tracking-wide text-xs">{{ $domainName }}</h2>
            <div class="divide-y divide-border">
                @foreach($domainSlopes as $slope)
                @php
                    $status = $slope->latestStatus();
                    $isOpen = $slope->isOpen();
                    $crowdMap = ['empty'=>0,'quiet'=>1,'moderate'=>2,'busy'=>3,'packed'=>4];
                    $snowMap  = ['powder'=>0,'packed_powder'=>1,'groomed'=>2,'icy'=>3,'wet'=>4,'slushy'=>5];
                    $visMap   = ['excellent'=>0,'good'=>1,'moderate'=>2,'poor'=>3];
                    $cv = $status ? ($crowdMap[$status->crowd_level] ?? 2) : 2;
                    $sv = $status ? ($snowMap[$status->snow_quality] ?? 2) : 2;
                    $vv = $status ? ($visMap[$status->visibility] ?? 1) : 1;
                @endphp
                <div class="py-3 first:pt-0 last:pb-0" data-slope-id="{{ $slope->id }}">
                    <div class="flex items-center justify-between gap-3 mb-2">
                        <span class="text-sm font-semibold">{{ $slope->name }}</span>
                        <label class="toggle-switch">
                            <input type="checkbox" class="slope-status-toggle" {{ $isOpen ? 'checked' : '' }}>
                            <span class="toggle-track">
                                <span class="toggle-thumb"></span>
                                <span class="toggle-label-open">Open</span>
                                <span class="toggle-label-closed">Closed</span>
                            </span>
                        </label>
                    </div>
                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <div class="flex justify-between text-[10px] text-muted-foreground mb-1">
                                <span>Crowd</span><span class="crowd-label font-medium text-foreground">{{ ['Empty','Quiet','Moderate','Busy','Packed'][$cv] }}</span>
                            </div>
                            <input type="range" min="0" max="4" value="{{ $cv }}" class="slope-crowd w-full accent-primary h-1 cursor-pointer" data-labels="Empty,Quiet,Moderate,Busy,Packed">
                        </div>
                        <div>
                            <div class="flex justify-between text-[10px] text-muted-foreground mb-1">
                                <span>Snow</span><span class="snow-label font-medium text-foreground">{{ ['Powder','Packed','Groomed','Icy','Wet','Slushy'][$sv] }}</span>
                            </div>
                            <input type="range" min="0" max="5" value="{{ $sv }}" class="slope-snow w-full accent-primary h-1 cursor-pointer" data-labels="Powder,Packed,Groomed,Icy,Wet,Slushy">
                        </div>
                        <div>
                            <div class="flex justify-between text-[10px] text-muted-foreground mb-1">
                                <span>Visibility</span><span class="vis-label font-medium text-foreground">{{ ['Excellent','Good','Moderate','Poor'][$vv] }}</span>
                            </div>
                            <input type="range" min="0" max="3" value="{{ $vv }}" class="slope-vis w-full accent-primary h-1 cursor-pointer" data-labels="Excellent,Good,Moderate,Poor">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</section>

{{-- Floating save bar --}}
<div id="floating-save" class="fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm shadow-lg">
    <div class="container-x flex items-center justify-between gap-4 py-4">
        <span id="save-status" class="text-sm text-muted-foreground"></span>
        <button id="save-all-btn" class="rounded-full bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground transition hover:-translate-y-0.5 disabled:opacity-50">
            Save all changes
        </button>
    </div>
</div>

<script>
(function () {
    var updateUrl = '{{ route('slopes.update') }}';
    var csrfToken = '{{ csrf_token() }}';
    var crowdLabels = ['Empty','Quiet','Moderate','Busy','Packed'];
    var snowLabels  = ['Powder','Packed','Groomed','Icy','Wet','Slushy'];
    var visLabels   = ['Excellent','Good','Moderate','Poor'];

    // Wire slider live labels
    document.querySelectorAll('input[type="range"]').forEach(function (slider) {
        var labels = slider.dataset.labels.split(',');
        var row = slider.closest('[data-slope-id]');
        var labelEl = slider.classList.contains('slope-crowd') ? row.querySelector('.crowd-label')
                    : slider.classList.contains('slope-snow')  ? row.querySelector('.snow-label')
                    : slider.classList.contains('slope-vis')   ? row.querySelector('.vis-label') : null;
        if (!labelEl) return;
        slider.addEventListener('input', function () { labelEl.textContent = labels[+this.value]; });
    });

    var saveBtn    = document.getElementById('save-all-btn');
    var saveStatus = document.getElementById('save-status');

    saveBtn.addEventListener('click', function () {
        var rows = document.querySelectorAll('[data-slope-id]');
        var requests = Array.from(rows).map(function (row) {
            var payload = new URLSearchParams({
                _token:       csrfToken,
                slope_id:     row.dataset.slopeId,
                status:       row.querySelector('.slope-status-toggle').checked ? 'open' : 'closed',
                crowd_level:  row.querySelector('.slope-crowd').value,
                snow_quality: row.querySelector('.slope-snow').value,
                visibility:   row.querySelector('.slope-vis').value,
            });
            return fetch(updateUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' },
                body: payload.toString(),
            });
        });

        saveBtn.disabled = true;
        saveStatus.textContent = 'Saving…';
        saveStatus.className = 'text-sm text-muted-foreground';

        Promise.all(requests)
            .then(function (responses) {
                var allOk = responses.every(function (r) { return r.ok; });
                if (allOk) {
                    saveStatus.textContent = 'All changes saved ✓';
                    saveStatus.className = 'text-sm text-emerald-600 font-semibold';
                } else {
                    saveStatus.textContent = 'Some updates failed — try again';
                    saveStatus.className = 'text-sm text-rose-600 font-semibold';
                }
            })
            .catch(function () {
                saveStatus.textContent = 'Network error — try again';
                saveStatus.className = 'text-sm text-rose-600 font-semibold';
            })
            .finally(function () {
                saveBtn.disabled = false;
                setTimeout(function () { saveStatus.textContent = ''; }, 5000);
            });
    });
}());
</script>

@else
{{-- ─────────────── PUBLIC MODE ─────────────── --}}
<section class="container-x py-16 md:py-24">
    <div class="flex flex-col items-start justify-between gap-4 md:flex-row md:items-end">
        <div>
            <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Live conditions</span>
            <h1 class="mt-3 text-4xl md:text-5xl">Slopes status — today.</h1>
            <p class="mt-2 text-sm text-muted-foreground">
                Last updated {{ $lastUpdate ? $lastUpdate->diffForHumans() : 'never' }}
            </p>
        </div>
        <a href="{{ route('reporter.login') }}"
           class="rounded-full border border-border px-5 py-2.5 text-sm font-semibold hover:bg-muted transition">
            Report conditions
        </a>
    </div>

    <div class="mt-10 grid gap-6 lg:grid-cols-3">
        @foreach($slopes as $domainName => $domainSlopes)
        <div class="rounded-2xl border border-border bg-card p-6 shadow-sm">
            <h2 class="text-2xl font-display">{{ $domainName }}</h2>
            <ul class="mt-4 divide-y divide-border">
                @foreach($domainSlopes as $slope)
                @php $status = $slope->latestStatus(); $isOpen = $slope->isOpen(); @endphp
                <li class="flex items-center justify-between gap-3 py-3">
                    <div class="flex items-start gap-3">
                        @if($isOpen)
                            <span class="mt-1 inline-block h-3 w-3 rounded-full bg-emerald-400 shadow-[0_0_8px_rgb(52,211,153)] shrink-0" aria-label="open"></span>
                        @else
                            <span class="mt-1 inline-block h-3 w-3 rounded-full bg-rose-500 shrink-0" aria-label="closed"></span>
                        @endif
                        <div>
                            <span class="text-sm font-medium">{{ $slope->name }}</span>
                            @if($status)
                            <div class="flex gap-2 mt-0.5 flex-wrap">
                                @if($status->crowd_level)
                                <span class="text-[10px] text-muted-foreground capitalize">{{ $status->crowd_level }}</span>
                                @endif
                                @if($status->snow_quality)
                                <span class="text-[10px] text-muted-foreground capitalize">· {{ str_replace('_', ' ', $status->snow_quality) }}</span>
                                @endif
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2 shrink-0">
                        <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold bg-{{ $slope->levelColor() }}-100 text-{{ $slope->levelColor() }}-700">{{ $slope->levelLabel() }}</span>
                        @if($slope->altitude_m)
                        <span class="w-16 text-right text-xs text-muted-foreground">{{ number_format($slope->altitude_m) }} m</span>
                        @endif
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
        @endforeach
    </div>

    <p class="mt-6 text-xs text-muted-foreground">Status updated by resort staff, ski patrol, and on-slope reporters. Verified updates are marked by staff or patrol. Conditions may change throughout the day.</p>
</section>
@endif

@endsection