@extends('portal.layout')
@section('title', 'AI Site Plan')

@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(37,99,235,.12);border:1px solid rgba(37,99,235,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#60a5fa;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
                <i data-lucide="layout" style="width:12px;height:12px;"></i> AI Site Planning
            </div>
            <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Site Plan Generator</h1>
            <p style="font-size:13px;color:var(--text-secondary);">AI generates optimized 2D site plans with building footprints, parking, setbacks and open space allocation.</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.site-plan.generate', $report) }}" style="display:flex;gap:12px;align-items:end;">
                @csrf
                <div>
                    <label class="form-label">Project Type</label>
                    <select name="project_type" class="form-input">
                        <option value="residential">Residential</option>
                        <option value="commercial">Commercial</option>
                        <option value="mixed">Mixed Use</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" style="height:38px;">
                    <i data-lucide="wand-2" style="width:14px;height:14px;"></i> Generate Plans
                </button>
            </form>
        </div>

        @if($plans->count())
        {{-- Plan selector tabs --}}
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;">
            @foreach($plans as $pi => $plan)
            <button onclick="showPlan({{ $plan->id }})" id="tab-{{ $plan->id }}"
                class="btn {{ $pi === 0 ? 'btn-primary' : 'btn-secondary' }}"
                style="font-size:11px;padding:6px 14px;">
                {{ $plan->title ?? 'Plan #' . $plan->id }}
                @if($plan->score)
                <span style="margin-left:4px;opacity:.7;">{{ $plan->score }}/100</span>
                @endif
            </button>
            @endforeach
        </div>

        @foreach($plans as $pi => $plan)
        <div id="plan-{{ $plan->id }}" class="site-plan-panel" style="{{ $pi !== 0 ? 'display:none;' : '' }}">
            <div class="card" style="padding:20px;">
                {{-- Header --}}
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
                        <div>
                            <div style="font-size:15px;font-weight:700;">{{ $plan->title ?? 'Site Plan' }}</div>
                            <div style="font-size:11px;color:var(--text-secondary);">
                                {{ ucfirst($plan->plan_type ?? 'auto') }} &middot; Generated {{ $plan->created_at->format('M j, Y H:i') }}
                            </div>
                        </div>
                        @if($plan->score)
                        <div style="text-align:center;">
                            <div style="font-size:24px;font-weight:800;color:{{ $plan->score >= 80 ? '#22c55e' : ($plan->score >= 60 ? '#eab308' : '#ef4444') }};">{{ $plan->score }}</div>
                            <div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;">Score</div>
                        </div>
                        @endif
                    </div>

                    {{-- Metrics --}}
                    @if($plan->metrics)
                    <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;">
                        @php
                            $metricConfig = [
                                'coverage_pct'   => ['label' => 'Coverage',    'suffix' => '%',   'format' => 'number'],
                                'open_space_pct' => ['label' => 'Open Space',  'suffix' => '%',   'format' => 'number'],
                                'total_builtup'  => ['label' => 'Built-up',    'suffix' => ' sqm','format' => 'comma'],
                                'parking_count'  => ['label' => 'Parking',     'suffix' => ' ECS','format' => 'int'],
                                'building_count' => ['label' => 'Buildings',   'suffix' => '',    'format' => 'int'],
                            ];
                        @endphp
                        @foreach($metricConfig as $mKey => $mConf)
                        @if(isset($plan->metrics[$mKey]))
                        <div style="padding:10px 8px;background:var(--bg);border-radius:6px;text-align:center;">
                            <div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;">{{ $mConf['label'] }}</div>
                            <div style="font-size:16px;font-weight:700;">
                                @if($mConf['format'] === 'comma')
                                    {{ number_format($plan->metrics[$mKey]) }}{{ $mConf['suffix'] }}
                                @elseif($mConf['format'] === 'number')
                                    {{ number_format($plan->metrics[$mKey], 1) }}{{ $mConf['suffix'] }}
                                @else
                                    {{ $plan->metrics[$mKey] }}{{ $mConf['suffix'] }}
                                @endif
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    @endif

                    {{-- SVG Plan Visualization --}}
                    @php
                        // Compute bounding box from all polygon data to scale SVG properly
                        $allCoords = [];
                        foreach (($plan->building_footprints ?? []) as $fp) {
                            foreach (($fp['polygon'] ?? []) as $pt) { $allCoords[] = $pt; }
                        }
                        foreach (($plan->parking_zones ?? []) as $pz) {
                            foreach (($pz['polygon'] ?? []) as $pt) { $allCoords[] = $pt; }
                        }
                        foreach (($plan->landscape_areas ?? []) as $la) {
                            foreach (($la['polygon'] ?? []) as $pt) { $allCoords[] = $pt; }
                        }

                        // If we have polygon data, compute bounds; otherwise use fixed dims
                        if (!empty($allCoords)) {
                            $xs = array_column($allCoords, 0);
                            $ys = array_column($allCoords, 1);
                            $rawMinX = min($xs); $rawMinY = min($ys);
                            $rawMaxX = max($xs); $rawMaxY = max($ys);
                        } else {
                            $rawMinX = 0; $rawMinY = 0; $rawMaxX = 100; $rawMaxY = 100;
                        }

                        // Add padding around the plot
                        $padFrac = 0.15;
                        $rawW = max($rawMaxX - $rawMinX, 1);
                        $rawH = max($rawMaxY - $rawMinY, 1);
                        $pad = max($rawW, $rawH) * $padFrac;
                        $vbX = $rawMinX - $pad;
                        $vbY = $rawMinY - $pad;
                        $vbW = $rawW + $pad * 2;
                        $vbH = $rawH + $pad * 2;

                        // Plot boundary rectangle (from 0,0 to plotW,plotD in service coords)
                        // Estimate plot dimensions same as service
                        $plotArea = $report->plot_area_sqm ?? 3317;
                        $ratio = 0.6;
                        $plotDepth = sqrt($plotArea / $ratio);
                        $plotWidth = $plotArea / $plotDepth;

                        $resultData = $report->result_data ?? [];
                        $frontSetback = $resultData['front_setback_m'] ?? 6;
                        $sideSetback = $resultData['side_setback_m'] ?? 3;
                        $rearSetback = $resultData['rear_setback_m'] ?? 3;
                    @endphp

                    <div style="background:#080a10;border-radius:8px;padding:16px;position:relative;">
                        {{-- Legend --}}
                        <div style="display:flex;gap:14px;margin-bottom:10px;flex-wrap:wrap;">
                            <span style="font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px;">
                                <span style="width:10px;height:10px;background:#3b82f640;border:1px solid #3b82f6;border-radius:2px;display:inline-block;"></span> Building
                            </span>
                            <span style="font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px;">
                                <span style="width:10px;height:10px;background:#eab30830;border:1px solid #eab308;border-radius:2px;display:inline-block;"></span> Parking
                            </span>
                            <span style="font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px;">
                                <span style="width:10px;height:10px;background:#22c55e30;border:1px solid #22c55e;border-radius:2px;display:inline-block;"></span> Landscape
                            </span>
                            <span style="font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px;">
                                <span style="width:10px;height:3px;border-top:1.5px dashed #f97316;display:inline-block;"></span> Setback Line
                            </span>
                            <span style="font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px;">
                                <span style="width:10px;height:10px;border:1.5px solid #64748b;border-radius:2px;display:inline-block;"></span> Plot Boundary
                            </span>
                        </div>

                        <svg width="100%" height="400" viewBox="{{ $vbX }} {{ $vbY }} {{ $vbW }} {{ $vbH }}" preserveAspectRatio="xMidYMid meet"
                             style="border:1px solid var(--border);border-radius:6px;background:#0a0c14;">

                            {{-- Grid lines --}}
                            @for($gx = 0; $gx <= $plotWidth; $gx += 10)
                            <line x1="{{ $gx }}" y1="0" x2="{{ $gx }}" y2="{{ $plotDepth }}" stroke="#1a1d28" stroke-width="0.3"/>
                            @endfor
                            @for($gy = 0; $gy <= $plotDepth; $gy += 10)
                            <line x1="0" y1="{{ $gy }}" x2="{{ $plotWidth }}" y2="{{ $gy }}" stroke="#1a1d28" stroke-width="0.3"/>
                            @endfor

                            {{-- Plot boundary --}}
                            <rect x="0" y="0" width="{{ $plotWidth }}" height="{{ $plotDepth }}"
                                  fill="none" stroke="#64748b" stroke-width="0.8" stroke-dasharray="3,2"/>

                            {{-- Setback lines (dashed orange) --}}
                            <rect x="{{ $sideSetback }}" y="{{ $frontSetback }}"
                                  width="{{ max(0, $plotWidth - 2 * $sideSetback) }}"
                                  height="{{ max(0, $plotDepth - $frontSetback - $rearSetback) }}"
                                  fill="none" stroke="#f97316" stroke-width="0.5" stroke-dasharray="2,2" opacity="0.6"/>

                            {{-- Road indicator --}}
                            <rect x="-{{ $pad }}" y="-3" width="{{ $plotWidth + $pad * 2 }}" height="3"
                                  fill="#374151" rx="0.5"/>
                            <text x="{{ $plotWidth / 2 }}" y="-0.5" text-anchor="middle" fill="#9ca3af" font-size="{{ max(1.5, $vbW / 200) }}">
                                ROAD ({{ $report->road_width_m ?? 9 }}m)
                            </text>

                            {{-- Landscape areas --}}
                            @foreach(($plan->landscape_areas ?? []) as $la)
                            @if(!empty($la['polygon']))
                            @php $pts = implode(' ', array_map(fn($p) => $p[0].','.$p[1], $la['polygon'])); @endphp
                            <polygon points="{{ $pts }}" fill="#22c55e20" stroke="#22c55e" stroke-width="0.5" rx="1"/>
                            @php
                                $laCx = array_sum(array_column($la['polygon'], 0)) / count($la['polygon']);
                                $laCy = array_sum(array_column($la['polygon'], 1)) / count($la['polygon']);
                            @endphp
                            <text x="{{ $laCx }}" y="{{ $laCy }}" text-anchor="middle" fill="#22c55e" font-size="{{ max(1.5, $vbW / 180) }}" opacity="0.8">
                                {{ ucfirst($la['type'] ?? 'Garden') }}
                            </text>
                            @endif
                            @endforeach

                            {{-- Parking zones --}}
                            @foreach(($plan->parking_zones ?? []) as $pz)
                            @if(!empty($pz['polygon']))
                            @php $pts = implode(' ', array_map(fn($p) => $p[0].','.$p[1], $pz['polygon'])); @endphp
                            <polygon points="{{ $pts }}" fill="#eab30815" stroke="#eab308" stroke-width="0.5"/>
                            @php
                                $pzCx = array_sum(array_column($pz['polygon'], 0)) / count($pz['polygon']);
                                $pzCy = array_sum(array_column($pz['polygon'], 1)) / count($pz['polygon']);
                            @endphp
                            <text x="{{ $pzCx }}" y="{{ $pzCy - 1 }}" text-anchor="middle" fill="#eab308" font-size="{{ max(1.5, $vbW / 180) }}">
                                Parking
                            </text>
                            <text x="{{ $pzCx }}" y="{{ $pzCy + 2 }}" text-anchor="middle" fill="#eab308" font-size="{{ max(1.2, $vbW / 220) }}" opacity="0.7">
                                {{ $pz['capacity'] ?? '' }} {{ ($pz['type'] ?? '') === 'stilt' ? '(Stilt)' : '' }}
                            </text>
                            @endif
                            @endforeach

                            {{-- Building footprints --}}
                            @php $bColors = ['#3b82f6', '#8b5cf6', '#06b6d4', '#22c55e', '#f59e0b']; @endphp
                            @foreach(($plan->building_footprints ?? []) as $bi => $fp)
                            @if(!empty($fp['polygon']))
                            @php
                                $bColor = $bColors[$bi % count($bColors)];
                                $pts = implode(' ', array_map(fn($p) => $p[0].','.$p[1], $fp['polygon']));
                                $fpCx = array_sum(array_column($fp['polygon'], 0)) / count($fp['polygon']);
                                $fpCy = array_sum(array_column($fp['polygon'], 1)) / count($fp['polygon']);
                                $floors = $fp['floors'] ?? 1;
                            @endphp
                            <polygon points="{{ $pts }}" fill="{{ $bColor }}25" stroke="{{ $bColor }}" stroke-width="1"/>
                            <text x="{{ $fpCx }}" y="{{ $fpCy - 1 }}" text-anchor="middle" fill="{{ $bColor }}" font-size="{{ max(1.8, $vbW / 160) }}" font-weight="600">
                                {{ $fp['label'] ?? 'Block ' . ($bi + 1) }}
                            </text>
                            <text x="{{ $fpCx }}" y="{{ $fpCy + 2.5 }}" text-anchor="middle" fill="{{ $bColor }}" font-size="{{ max(1.2, $vbW / 220) }}" opacity="0.7">
                                {{ $floors }}F &middot; {{ ucfirst($fp['use'] ?? 'residential') }}
                            </text>
                            @endif
                            @endforeach

                            {{-- Access points --}}
                            @foreach(($plan->access_points ?? []) as $ap)
                            @php $apx = $ap['position'][0] ?? 0; $apy = $ap['position'][1] ?? 0; @endphp
                            <circle cx="{{ $apx }}" cy="{{ $apy }}" r="{{ max(1, $vbW / 200) }}" fill="#ef4444" stroke="#fff" stroke-width="0.3"/>
                            <text x="{{ $apx }}" y="{{ $apy - 2 }}" text-anchor="middle" fill="#ef4444" font-size="{{ max(1, $vbW / 260) }}">
                                {{ ($ap['type'] ?? '') === 'main_entry' ? 'Entry' : (($ap['type'] ?? '') === 'emergency' ? 'Emergency' : 'Access') }}
                            </text>
                            @endforeach

                            {{-- Dimension labels --}}
                            <text x="{{ $plotWidth / 2 }}" y="{{ $plotDepth + $pad * 0.5 }}" text-anchor="middle" fill="#94a3b8" font-size="{{ max(1.5, $vbW / 180) }}">
                                {{ number_format($plotWidth, 1) }}m
                            </text>
                            <text x="{{ -$pad * 0.4 }}" y="{{ $plotDepth / 2 }}" text-anchor="middle" fill="#94a3b8" font-size="{{ max(1.5, $vbW / 180) }}" transform="rotate(-90, {{ -$pad * 0.4 }}, {{ $plotDepth / 2 }})">
                                {{ number_format($plotDepth, 1) }}m
                            </text>
                        </svg>
                    </div>

                    {{-- AI Rationale --}}
                    @if($plan->ai_rationale)
                    @php $rationale = is_array($plan->ai_rationale) ? ($plan->ai_rationale['rationale'] ?? '') : $plan->ai_rationale; @endphp
                    @if($rationale)
                    <div style="margin-top:14px;padding:12px;background:var(--bg);border-radius:6px;border-left:3px solid #60a5fa;">
                        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">
                            <i data-lucide="sparkles" style="width:10px;height:10px;display:inline;"></i> Design Rationale
                        </div>
                        <div style="font-size:12px;color:var(--text-secondary);line-height:1.6;">{{ $rationale }}</div>
                    </div>
                    @endif
                    @endif

                    {{-- Constraint Summary --}}
                    <div style="margin-top:12px;padding:10px;background:var(--bg);border-radius:6px;">
                        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">Applied Constraints</div>
                        <div style="display:flex;flex-wrap:wrap;gap:6px;">
                            @php $rd = $report->result_data ?? []; @endphp
                            @foreach([
                                'Plot' => number_format($report->plot_area_sqm ?? 0) . ' sqm',
                                'FAR' => $rd['max_far'] ?? '—',
                                'Height' => ($rd['max_height_m'] ?? '—') . 'm',
                                'Coverage' => ($rd['coverage_pct'] ?? '—') . '%',
                                'Floors' => $rd['max_floors'] ?? '—',
                                'Front' => ($rd['front_setback_m'] ?? '—') . 'm',
                                'Side' => ($rd['side_setback_m'] ?? '—') . 'm',
                                'Rear' => ($rd['rear_setback_m'] ?? '—') . 'm',
                            ] as $cl => $cv)
                            <span style="font-size:10px;padding:3px 8px;background:var(--card-bg);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);">
                                <span style="color:var(--text-muted);">{{ $cl }}:</span> {{ $cv }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        @else
        <div class="card" style="padding:40px;text-align:center;">
            <i data-lucide="layout" 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 Site Plans Yet</div>
            <div style="font-size:13px;color:var(--text-secondary);">Choose a project type and generate optimized site plans.</div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
const planIds = @json($plans->pluck('id')->values());
function showPlan(id) {
    planIds.forEach(pid => {
        const panel = document.getElementById('plan-' + pid);
        const tab = document.getElementById('tab-' + pid);
        if (panel) panel.style.display = pid === id ? '' : 'none';
        if (tab) {
            tab.className = pid === id ? 'btn btn-primary' : 'btn btn-secondary';
        }
    });
}
</script>
@endsection