@extends('portal.layout')
@section('title', 'Shadow Analysis')

@section('content')
<div class="report-layout">
    @include('portal.partials.report-sidebar', ['report' => $report])
    <div class="report-content" style="padding:32px 28px;">

        <div style="margin-bottom:28px;">
            <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#fbbf24;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
                <i data-lucide="sun" style="width:12px;height:12px;"></i> Shadow Study
            </div>
            <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Shadow Analysis</h1>
            <p style="font-size:13px;color:var(--text-secondary);">Solar shadow simulation with hour-by-hour sun path, neighbor impact and right-to-light compliance.</p>
        </div>

        @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="card" style="padding:20px;margin-bottom:24px;">
            <form method="POST" action="{{ route('portal.shadow.analyze', $report) }}" style="display:flex;gap:12px;align-items:end;">
                @csrf
                <div>
                    <label class="form-label">Building Height (m)</label>
                    <input type="number" name="building_height" class="form-input" placeholder="{{ $report->max_height_m ?? 15 }}" step="0.5" min="3">
                </div>
                <div>
                    <label class="form-label">Analysis Date</label>
                    <input type="date" name="analysis_date" class="form-input" value="{{ date('Y-m-d') }}">
                </div>
                <button type="submit" class="btn btn-primary" style="height:38px;">
                    <i data-lucide="sun" style="width:14px;height:14px;"></i> Analyze Shadows
                </button>
            </form>
        </div>

        @if($analyses->count())
        @foreach($analyses as $analysis)
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
                <div>
                    <div style="font-size:14px;font-weight:600;">{{ \Carbon\Carbon::parse($analysis->analysis_date)->format('M j, Y') }} — {{ $analysis->building_height_m }}m building</div>
                    <div style="font-size:11px;color:var(--text-secondary);">Lat {{ number_format($analysis->latitude, 4) }}, Lng {{ number_format($analysis->longitude, 4) }}</div>
                </div>
                <span class="badge badge-{{ ($analysis->right_to_light_compliance ?? false) ? 'green' : 'red' }}">
                    {{ ($analysis->right_to_light_compliance ?? false) ? 'Compliant' : 'Non-compliant' }}
                </span>
            </div>

            {{-- Daylight hours --}}
            @if($analysis->daylight_hours)
            @php
                $dh = $analysis->daylight_hours;
                // Use stored exact times; fall back to deriving from hourly entries
                if (!empty($dh['sunrise']) && !empty($dh['sunset'])) {
                    $sunrise = $dh['sunrise'];
                    $sunset  = $dh['sunset'];
                } else {
                    $sunlit = collect($analysis->hourly_shadows ?? [])->filter(fn($s) => ($s['sun_altitude'] ?? 0) > 0);
                    $sunrise = $sunlit->keys()->first() ?? '—';
                    $sunset  = $sunlit->keys()->last()  ?? '—';
                }
                $totalHrs = $dh['total_hours'] ?? '—';
                // Format duration as Xh Ym
                if (is_numeric($totalHrs)) {
                    $hrs = (int)$totalHrs;
                    $mins = (int)round(($totalHrs - $hrs) * 60);
                    $durationStr = $hrs . 'h ' . $mins . 'm';
                } else {
                    $durationStr = $totalHrs . 'h';
                }
            @endphp
            <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;">Daylight Period</div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px;">
                <div style="padding:8px;background:var(--bg);border-radius:4px;text-align:center;">
                    <div style="font-size:10px;color:var(--text-muted);">Sunrise</div>
                    <div style="font-size:14px;font-weight:600;color:#fbbf24;">{{ $sunrise }}</div>
                </div>
                <div style="padding:8px;background:var(--bg);border-radius:4px;text-align:center;">
                    <div style="font-size:10px;color:var(--text-muted);">Sunset</div>
                    <div style="font-size:14px;font-weight:600;color:#f97316;">{{ $sunset }}</div>
                </div>
                <div style="padding:8px;background:var(--bg);border-radius:4px;text-align:center;">
                    <div style="font-size:10px;color:var(--text-muted);">Duration</div>
                    <div style="font-size:14px;font-weight:600;">{{ $durationStr }}</div>
                </div>
            </div>
            @endif

            {{-- Hourly shadows table --}}
            @if($analysis->hourly_shadows && is_array($analysis->hourly_shadows))
            <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;">Hourly Shadow Lengths</div>
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:4px;margin-bottom:16px;">
                @foreach($analysis->hourly_shadows as $timeKey => $hs)
                <div style="padding:6px;background:var(--bg);border-radius:4px;text-align:center;">
                    <div style="font-size:10px;color:var(--text-muted);">{{ $timeKey }}</div>
                    <div style="font-size:12px;font-weight:600;">{{ number_format($hs['shadow_length'] ?? 0, 1) }}m</div>
                    <div style="font-size:9px;color:var(--text-muted);">{{ isset($hs['shadow_direction']) ? round($hs['shadow_direction']) . '°' : '' }}</div>
                </div>
                @endforeach
            </div>
            @endif

            {{-- Max shadow --}}
            <div style="padding:10px;background:var(--bg);border-radius:6px;">
                <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;">Max Shadow Length</div>
                <div style="font-size:18px;font-weight:700;color:#eab308;">{{ number_format($analysis->max_shadow_length_m ?? 0, 1) }}m</div>
            </div>
        </div>
        @endforeach
        @else
        <div class="card" style="padding:40px;text-align:center;">
            <i data-lucide="sun" style="width:36px;height:36px;color:var(--text-muted);margin-bottom:12px;"></i>
            <div style="font-size:15px;font-weight:600;margin-bottom:6px;">No Shadow Analysis Yet</div>
            <div style="font-size:13px;color:var(--text-secondary);">Set building height and date to simulate solar shadows.</div>
        </div>
        @endif
    </div>
</div>
@endsection