@extends('admin.layouts.app')
@section('title', 'Heatmap Management')
@section('breadcrumb')
    <a href="{{ route('admin.spatial.index') }}">Spatial Intelligence</a>
    <span class="separator">/</span>
    <span class="current">Heatmap</span>
@endsection

@section('content')
@include('admin.spatial._tabs')

<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;">
    <div>
        <h1 class="page-title">
            <span class="title-icon"><i data-lucide="flame" style="width:20px;height:20px;"></i></span>
            Heatmap Management
        </h1>
        <p class="page-subtitle">Pre-computed feasibility score grid cells for map overlays</p>
    </div>
</div>

{{-- Generate / Clear Controls ────────────────────────────────────── --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;">
    <div class="glass-card" style="padding:20px;">
        <div style="font-size:13px;font-weight:600;color:var(--vsc-text-active);margin-bottom:12px;">
            <i data-lucide="zap" style="width:14px;height:14px;"></i> Generate Heatmap
        </div>
        <form method="POST" action="{{ route('admin.spatial.heatmap.generate') }}">
            @csrf
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">State</label>
                    <select name="state_id" class="form-control" required>
                        <option value="">Select State</option>
                        @foreach($states as $state)
                            <option value="{{ $state->id }}">{{ $state->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Cell Size (m)</label>
                    <input type="number" name="cell_size" class="form-control" value="500" min="100" max="5000" step="100">
                </div>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">
                <i data-lucide="zap" style="width:12px;height:12px;"></i> Generate
            </button>
        </form>
    </div>

    <div class="glass-card" style="padding:20px;">
        <div style="font-size:13px;font-weight:600;color:var(--vsc-text-active);margin-bottom:12px;">
            <i data-lucide="trash-2" style="width:14px;height:14px;"></i> Clear Heatmap Data
        </div>
        <form method="POST" action="{{ route('admin.spatial.heatmap.clear') }}">
            @csrf @method('DELETE')
            <div class="form-group" style="margin-bottom:12px;">
                <label class="form-label">State (leave empty for all)</label>
                <select name="state_id" class="form-control">
                    <option value="">All States</option>
                    @foreach($states as $state)
                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-danger btn-sm" data-confirm-delete="Clear heatmap data?">
                <i data-lucide="trash-2" style="width:12px;height:12px;"></i> Clear
            </button>
        </form>
    </div>
</div>

{{-- Heatmap Cells Table ──────────────────────────────────────────── --}}
<div class="admin-table-wrap">
    <div class="admin-table-header">
        <div class="admin-table-title">
            <i data-lucide="flame" class="icon" style="width:14px;height:14px;"></i>
            Heatmap Cells ({{ $cells->total() }} total)
        </div>
        <form method="GET" style="display:flex;gap:8px;">
            <select name="state_id" class="form-control" style="width:150px;">
                <option value="">All States</option>
                @foreach($states as $state)
                    <option value="{{ $state->id }}" {{ request('state_id') == $state->id ? 'selected' : '' }}>
                        {{ $state->name }}
                    </option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-secondary btn-sm">
                <i data-lucide="filter" style="width:12px;height:12px;"></i> Filter
            </button>
        </form>
    </div>
    <div class="table-responsive">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Location</th>
                    <th>Avg Score</th>
                    <th>Avg FAR</th>
                    <th>Max Height</th>
                    <th>Reports</th>
                    <th>Zone Type</th>
                    <th>Computed</th>
                </tr>
            </thead>
            <tbody>
                @forelse($cells as $cell)
                    <tr>
                        <td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vsc-text-secondary);">
                            {{ number_format($cell->lat, 4) }}, {{ number_format($cell->lng, 4) }}
                        </td>
                        <td>
                            @php
                                $scoreColor = $cell->avg_feasibility_score >= 70 ? '#4ec980' : ($cell->avg_feasibility_score >= 50 ? '#ffc832' : ($cell->avg_feasibility_score >= 30 ? '#ff9640' : '#ff6b6b'));
                            @endphp
                            <span style="font-weight:700;color:{{ $scoreColor }};">
                                {{ number_format($cell->avg_feasibility_score, 1) }}
                            </span>
                        </td>
                        <td style="color:var(--vsc-teal);font-weight:600;">{{ $cell->avg_far ? number_format($cell->avg_far, 2) : '—' }}</td>
                        <td>{{ $cell->avg_max_height_m ? number_format($cell->avg_max_height_m, 1).'m' : '—' }}</td>
                        <td style="font-weight:600;color:var(--vsc-text-active);">{{ $cell->report_count }}</td>
                        <td>
                            <span class="badge badge-gray">{{ $cell->dominant_zone_type ?? '—' }}</span>
                        </td>
                        <td style="font-size:11px;color:var(--vsc-text-tertiary);">
                            {{ $cell->computed_at ? $cell->computed_at->diffForHumans() : '—' }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" style="text-align:center;padding:48px;color:var(--vsc-text-secondary);">
                            <i data-lucide="flame" style="width:32px;height:32px;display:block;margin:0 auto 12px;opacity:0.3;"></i>
                            No heatmap cells generated yet. Use the Generate tool above.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $cells->links('vendor.pagination.admin') }}
</div>
@endsection