@extends('portal.layout')
@section('title', 'Scenario Analysis — Report #'.str_pad($report->id, 5, '0', STR_PAD_LEFT))

@section('content')
@php
    $score      = $report->feasibility_score ?? 0;
    $scoreColor = $score >= 70 ? '#22c55e' : ($score >= 40 ? '#eab308' : '#ef4444');
    $baseFar    = $report->zoneRule?->max_far ?? ($report->result_data['max_far'] ?? '—');
    $baseHeight = $report->zoneRule?->max_height_m ?? ($report->result_data['max_height_m'] ?? '—');
    $typeBadgeColors = [
        'what_if'      => '#60a5fa',
        'optimizer'    => '#22c55e',
        'tdr'          => '#f97316',
        'premium_fsi'  => '#eab308',
        'amalgamation' => '#a78bfa',
    ];
@endphp

<div class="report-layout">
@include('portal.partials.report-sidebar')
<div class="report-content" style="padding:32px 28px;">
<div style="max-width:1100px;" x-data="scenarioApp()">

    {{-- Page Header --}}
    <div style="margin-bottom:28px;">
        <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#c4b5fd;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
            <i data-lucide="git-compare" style="width:12px;height:12px;"></i> Scenario Engine
        </div>
        <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Multi-Scenario Analysis</h1>
        <p style="font-size:13px;color:var(--text-secondary);">
            Compare what-if scenarios, optimize configurations, evaluate TDR &amp; premium FSI, or analyze plot amalgamation.
        </p>
    </div>

    {{-- Base Report Context --}}
    <div class="card" style="padding:16px;margin-bottom:24px;">
        <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:8px;">
                <div style="width:36px;height:36px;background:rgba(167,139,250,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="map-pin" style="width:16px;height:16px;color:#c4b5fd;"></i>
                </div>
                <div>
                    <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;">Base Plot</div>
                    <div style="font-size:13px;font-weight:600;">{{ $report->address ?? ($report->city?->name ?? 'Plot') }}</div>
                </div>
            </div>
            <div style="height:28px;width:1px;background:var(--border);"></div>
            <div style="display:flex;gap:20px;flex-wrap:wrap;font-size:12px;">
                <div><span style="color:var(--text-muted);">Area</span> <span style="font-weight:600;margin-left:4px;">{{ number_format($report->plot_area_sqm) }} sqm</span></div>
                <div><span style="color:var(--text-muted);">Road</span> <span style="font-weight:600;margin-left:4px;">{{ $report->road_width_m }}m</span></div>
                <div><span style="color:var(--text-muted);">FAR</span> <span style="font-weight:600;margin-left:4px;">{{ $baseFar }}</span></div>
                <div><span style="color:var(--text-muted);">Height</span> <span style="font-weight:600;margin-left:4px;">{{ $baseHeight }}m</span></div>
                <div><span style="color:var(--text-muted);">Score</span> <span style="font-weight:700;margin-left:4px;color:{{ $scoreColor }};">{{ $score }}/100</span></div>
            </div>
        </div>
    </div>

    {{-- Analysis Type Navigation --}}
    <style>
        .scenario-tab { padding:9px 16px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:all .2s ease;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:transparent;color:var(--text-muted); }
        .scenario-tab:hover { background:rgba(255,255,255,.05);color:var(--text-secondary); }
        .scenario-tab svg { flex-shrink:0; }
    </style>
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:4px;display:inline-flex;gap:4px;margin-bottom:24px;">

        {{-- What-If --}}
        <button class="scenario-tab" @click="switchTab('what_if')"
                :class="activeTab === 'what_if' && 'scenario-tab--active'"
                :style="activeTab === 'what_if'
                    ? 'background:rgba(96,165,250,.15);color:#60a5fa;border-color:rgba(96,165,250,.3);box-shadow:0 2px 8px rgba(96,165,250,.12),inset 0 1px 0 rgba(255,255,255,.05);'
                    : ''">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            What-If
        </button>

        {{-- Optimizer --}}
        <button class="scenario-tab" @click="switchTab('optimizer')"
                :style="activeTab === 'optimizer'
                    ? 'background:rgba(34,197,94,.15);color:#22c55e;border-color:rgba(34,197,94,.3);box-shadow:0 2px 8px rgba(34,197,94,.12),inset 0 1px 0 rgba(255,255,255,.05);'
                    : ''">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
            Optimizer
        </button>

        {{-- TDR --}}
        <button class="scenario-tab" @click="switchTab('tdr')"
                :style="activeTab === 'tdr'
                    ? 'background:rgba(249,115,22,.15);color:#f97316;border-color:rgba(249,115,22,.3);box-shadow:0 2px 8px rgba(249,115,22,.12),inset 0 1px 0 rgba(255,255,255,.05);'
                    : ''">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 17.5v-11"/></svg>
            TDR
        </button>

        {{-- Premium FSI --}}
        <button class="scenario-tab" @click="switchTab('premium_fsi')"
                :style="activeTab === 'premium_fsi'
                    ? 'background:rgba(234,179,8,.15);color:#eab308;border-color:rgba(234,179,8,.3);box-shadow:0 2px 8px rgba(234,179,8,.12),inset 0 1px 0 rgba(255,255,255,.05);'
                    : ''">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12"/><path d="M6 8h12"/><path d="m6 13 8.5 8"/><path d="M6 13h3"/><path d="M9 13c6.667 0 6.667-10 0-10"/></svg>
            Premium FSI
        </button>

        {{-- Amalgamation --}}
        <button class="scenario-tab" @click="switchTab('amalgamation')"
                :style="activeTab === 'amalgamation'
                    ? 'background:rgba(167,139,250,.15);color:#a78bfa;border-color:rgba(167,139,250,.3);box-shadow:0 2px 8px rgba(167,139,250,.12),inset 0 1px 0 rgba(255,255,255,.05);'
                    : ''">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="8" x="2" y="2" rx="2"/><rect width="8" height="8" x="14" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
            Amalgamation
        </button>
    </div>

    {{-- Loading overlay --}}
    <div x-show="loading" x-cloak style="margin-bottom:20px;">
        <div class="card" style="padding:40px;text-align:center;">
            <div style="display:inline-block;width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:12px;"></div>
            <div style="font-size:13px;color:var(--text-secondary);" x-text="loadingText"></div>
        </div>
    </div>

    {{-- ===== WHAT-IF PANEL ===== --}}
    <div x-show="activeTab === 'what_if' && !loading" x-cloak>
        <div class="card" style="padding:24px;margin-bottom:20px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                <i data-lucide="help-circle" style="width:16px;height:16px;color:#60a5fa;"></i>
                <div style="font-size:14px;font-weight:600;">What-If Scenario Builder</div>
            </div>
            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:20px;padding-left:26px;">
                Create up to 5 scenarios — adjust road width, FAR, height, project type, setbacks and compare outcomes side-by-side.
            </div>

            <template x-for="(sc, idx) in whatIfScenarios" :key="idx">
                <div style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px;transition:border-color .2s;" :style="idx === 0 ? 'border-color:rgba(96,165,250,.3);' : ''">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <span style="width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;"
                                  :style="'background:' + scenarioColors[idx % scenarioColors.length]" x-text="idx+1"></span>
                            <input x-model="sc.label" class="form-input" style="width:220px;padding:6px 12px;font-size:12px;font-weight:500;" placeholder="Scenario name">
                        </div>
                        <button @click="whatIfScenarios.splice(idx,1)" x-show="whatIfScenarios.length > 1"
                                style="color:var(--text-muted);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:color .15s;" onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--text-muted)'">
                            <i data-lucide="x" style="width:16px;height:16px;"></i>
                        </button>
                    </div>
                    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;">
                        <div>
                            <label class="form-label">Road Width (m)</label>
                            <input x-model.number="sc.road_width_m" type="number" step="0.5" class="form-input" placeholder="{{ $report->road_width_m }}">
                        </div>
                        <div>
                            <label class="form-label">Max FAR / FSI</label>
                            <input x-model.number="sc.max_far" type="number" step="0.1" class="form-input" placeholder="{{ $report->zoneRule?->max_far ?? '' }}">
                        </div>
                        <div>
                            <label class="form-label">Max Height (m)</label>
                            <input x-model.number="sc.max_height_m" type="number" step="1" class="form-input" placeholder="{{ $report->zoneRule?->max_height_m ?? '' }}">
                        </div>
                        <div>
                            <label class="form-label">Project Type</label>
                            <select x-model="sc.project_type" class="form-input">
                                <option value="">Same as base</option>
                                <option value="residential">Residential</option>
                                <option value="commercial">Commercial</option>
                                <option value="mixed">Mixed Use</option>
                                <option value="industrial">Industrial</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Plot Area (sqm)</label>
                            <input x-model.number="sc.plot_area_sqm" type="number" step="1" class="form-input" placeholder="{{ number_format($report->plot_area_sqm, 0, '', '') }}">
                        </div>
                        <div>
                            <label class="form-label">Front Setback (m)</label>
                            <input x-model.number="sc.front_setback_m" type="number" step="0.5" class="form-input" placeholder="{{ $report->zoneRule?->front_setback_m ?? '' }}">
                        </div>
                        <div>
                            <label class="form-label">Side Setback (m)</label>
                            <input x-model.number="sc.side_setback_m" type="number" step="0.5" class="form-input" placeholder="{{ $report->zoneRule?->side_setback_m ?? '' }}">
                        </div>
                        <div>
                            <label class="form-label">Ground Coverage</label>
                            <input x-model.number="sc.max_ground_coverage" type="number" step="0.05" min="0" max="1" class="form-input" placeholder="{{ $report->zoneRule?->max_ground_coverage ?? '' }}">
                        </div>
                    </div>
                </div>
            </template>

            <div style="display:flex;gap:10px;margin-top:12px;">
                <button @click="addWhatIfScenario()" x-show="whatIfScenarios.length < 5"
                        style="background:transparent;color:var(--primary);border:1px dashed rgba(37,99,235,.4);border-radius:8px;padding:9px 16px;font-size:12px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s;" onmouseover="this.style.borderColor='var(--primary)';this.style.background='rgba(37,99,235,.06)'" onmouseout="this.style.borderColor='rgba(37,99,235,.4)';this.style.background='transparent'">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i> Add Scenario
                </button>
                <button @click="runAnalysis('what_if', {scenarios: cleanWhatIf()})"
                        :disabled="loading" class="btn btn-primary" style="font-size:12px;">
                    <i data-lucide="play" style="width:14px;height:14px;"></i>
                    Run What-If Analysis
                </button>
            </div>
        </div>
    </div>

    {{-- ===== OPTIMIZER PANEL ===== --}}
    <div x-show="activeTab === 'optimizer' && !loading" x-cloak>
        <div class="card" style="padding:24px;margin-bottom:20px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                <i data-lucide="bar-chart-3" style="width:16px;height:16px;color:#22c55e;"></i>
                <div style="font-size:14px;font-weight:600;">Auto-Optimizer</div>
            </div>
            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:20px;padding-left:26px;">
                Automatically tests all project types to find the most profitable building configuration with optimal unit mix.
            </div>

            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
                <div style="background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.18);border-radius:10px;padding:16px;text-align:center;">
                    <div style="width:36px;height:36px;background:rgba(96,165,250,.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;">
                        <i data-lucide="home" style="width:16px;height:16px;color:#60a5fa;"></i>
                    </div>
                    <div style="font-size:12px;font-weight:600;">Residential</div>
                    <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">Apartments &amp; Housing</div>
                </div>
                <div style="background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.18);border-radius:10px;padding:16px;text-align:center;">
                    <div style="width:36px;height:36px;background:rgba(249,115,22,.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;">
                        <i data-lucide="building-2" style="width:16px;height:16px;color:#f97316;"></i>
                    </div>
                    <div style="font-size:12px;font-weight:600;">Commercial</div>
                    <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">Office &amp; Retail</div>
                </div>
                <div style="background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.18);border-radius:10px;padding:16px;text-align:center;">
                    <div style="width:36px;height:36px;background:rgba(167,139,250,.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;">
                        <i data-lucide="layers" style="width:16px;height:16px;color:#a78bfa;"></i>
                    </div>
                    <div style="font-size:12px;font-weight:600;">Mixed Use</div>
                    <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">Residential + Commercial</div>
                </div>
                <div style="background:rgba(45,212,191,.06);border:1px solid rgba(45,212,191,.18);border-radius:10px;padding:16px;text-align:center;">
                    <div style="width:36px;height:36px;background:rgba(45,212,191,.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;">
                        <i data-lucide="factory" style="width:16px;height:16px;color:#2dd4bf;"></i>
                    </div>
                    <div style="font-size:12px;font-weight:600;">Industrial</div>
                    <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">Factory &amp; Warehouse</div>
                </div>
            </div>
            <button @click="runAnalysis('optimizer', {})"
                    :disabled="loading" class="btn btn-primary" style="font-size:12px;">
                <i data-lucide="sparkles" style="width:14px;height:14px;"></i>
                Run Optimizer
            </button>
        </div>
    </div>

    {{-- ===== TDR PANEL ===== --}}
    <div x-show="activeTab === 'tdr' && !loading" x-cloak>
        <div class="card" style="padding:24px;margin-bottom:20px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                <i data-lucide="receipt" style="width:16px;height:16px;color:#f97316;"></i>
                <div style="font-size:14px;font-weight:600;">TDR (Transfer of Development Rights) Calculator</div>
            </div>
            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:20px;padding-left:26px;">
                Calculate additional buildable area from TDR purchase and cost-benefit at different levels. Leave blank to use state defaults.
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;">
                <div>
                    <label class="form-label">TDR Cost (₹/sqm)</label>
                    <input x-model.number="tdrParams.tdr_cost_per_sqm" type="number" step="100" class="form-input" placeholder="State default">
                </div>
                <div>
                    <label class="form-label">Max TDR %</label>
                    <input x-model.number="tdrParams.max_tdr_pct" type="number" step="5" min="5" max="100" class="form-input" placeholder="State default">
                </div>
                <button @click="runAnalysis('tdr', cleanTdr())"
                        :disabled="loading" class="btn btn-primary" style="font-size:12px;height:38px;">
                    <i data-lucide="calculator" style="width:14px;height:14px;"></i>
                    Calculate TDR
                </button>
            </div>
        </div>
    </div>

    {{-- ===== PREMIUM FSI PANEL ===== --}}
    <div x-show="activeTab === 'premium_fsi' && !loading" x-cloak>
        <div class="card" style="padding:24px;margin-bottom:20px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                <i data-lucide="indian-rupee" style="width:16px;height:16px;color:#eab308;"></i>
                <div style="font-size:14px;font-weight:600;">Premium FSI Calculator</div>
            </div>
            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:20px;padding-left:26px;">
                Calculate break-even for purchasing premium FSI from the government. Shows incremental cost-benefit at each 0.1 FSI step.
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;">
                <div>
                    <label class="form-label">Premium Rate (₹/sqm)</label>
                    <input x-model.number="premiumParams.premium_rate_per_sqm" type="number" step="100" class="form-input" placeholder="State default">
                </div>
                <div>
                    <label class="form-label">Max Additional FSI</label>
                    <input x-model.number="premiumParams.max_extra_far" type="number" step="0.1" min="0.1" max="5.0" class="form-input" placeholder="State default">
                </div>
                <button @click="runAnalysis('premium_fsi', cleanPremium())"
                        :disabled="loading" class="btn btn-primary" style="font-size:12px;height:38px;">
                    <i data-lucide="calculator" style="width:14px;height:14px;"></i>
                    Calculate Premium FSI
                </button>
            </div>
        </div>
    </div>

    {{-- ===== AMALGAMATION PANEL ===== --}}
    <div x-show="activeTab === 'amalgamation' && !loading" x-cloak>
        <div class="card" style="padding:24px;margin-bottom:20px;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                <i data-lucide="combine" style="width:16px;height:16px;color:#a78bfa;"></i>
                <div style="font-size:14px;font-weight:600;">Amalgamation Analysis</div>
            </div>
            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:20px;padding-left:26px;">
                Compare combined feasibility of merging adjacent plots vs developing individually. Add up to 4 adjacent plots.
            </div>

            {{-- Primary Plot --}}
            <div style="background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.2);border-radius:10px;padding:14px;margin-bottom:16px;display:flex;align-items:center;gap:12px;">
                <div style="width:32px;height:32px;background:rgba(167,139,250,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="map-pin" style="width:14px;height:14px;color:#c4b5fd;"></i>
                </div>
                <div>
                    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#c4b5fd;">Primary Plot (from report)</div>
                    <div style="font-size:12px;color:var(--text-secondary);margin-top:2px;">
                        {{ number_format($report->plot_area_sqm) }} sqm &mdash; Road: {{ $report->road_width_m }}m &mdash; {{ $report->zone?->name ?? '' }}
                    </div>
                </div>
            </div>

            <template x-for="(adj, idx) in adjPlots" :key="idx">
                <div style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <span style="width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(167,139,250,.15);color:#c4b5fd;" x-text="idx+1"></span>
                            <span style="font-size:12px;font-weight:600;">Adjacent Plot <span x-text="idx+1"></span></span>
                        </div>
                        <button @click="adjPlots.splice(idx,1)" x-show="adjPlots.length > 1"
                                style="color:var(--text-muted);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;" onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--text-muted)'">
                            <i data-lucide="x" style="width:16px;height:16px;"></i>
                        </button>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
                        <div>
                            <label class="form-label">Label</label>
                            <input x-model="adj.label" class="form-input" placeholder="Plot name">
                        </div>
                        <div>
                            <label class="form-label">Area (sqm)*</label>
                            <input x-model.number="adj.area_sqm" type="number" step="1" class="form-input" placeholder="e.g. 500">
                        </div>
                        <div>
                            <label class="form-label">Road Width (m)</label>
                            <input x-model.number="adj.road_width_m" type="number" step="0.5" class="form-input" placeholder="{{ $report->road_width_m }}">
                        </div>
                    </div>
                </div>
            </template>

            <div style="display:flex;gap:10px;margin-top:12px;">
                <button @click="addAdjacentPlot()" x-show="adjPlots.length < 4"
                        style="background:transparent;color:var(--primary);border:1px dashed rgba(37,99,235,.4);border-radius:8px;padding:9px 16px;font-size:12px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s;" onmouseover="this.style.borderColor='var(--primary)';this.style.background='rgba(37,99,235,.06)'" onmouseout="this.style.borderColor='rgba(37,99,235,.4)';this.style.background='transparent'">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i> Add Adjacent Plot
                </button>
                <button @click="runAnalysis('amalgamation', {adjacent_plots: adjPlots.filter(p => p.area_sqm > 0)})"
                        :disabled="loading" class="btn btn-primary" style="font-size:12px;">
                    <i data-lucide="play" style="width:14px;height:14px;"></i>
                    Run Amalgamation
                </button>
            </div>
        </div>
    </div>

    {{-- ===== RESULTS AREA ===== --}}
    <div x-show="result && !loading" x-cloak>

        {{-- What-If Results --}}
        <template x-if="result && activeTab === 'what_if'">
            <div>
                <div class="card" style="padding:24px;margin-bottom:20px;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:32px;height:32px;background:rgba(96,165,250,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                <i data-lucide="table-2" style="width:15px;height:15px;color:#60a5fa;"></i>
                            </div>
                            <div style="font-size:14px;font-weight:600;">Comparison Results</div>
                        </div>
                        <span class="badge badge-blue">What-If</span>
                    </div>

                    <div style="overflow-x:auto;margin-bottom:18px;border:1px solid var(--border);border-radius:8px;">
                        <table style="width:100%;border-collapse:collapse;font-size:12px;">
                            <thead>
                                <tr style="background:rgba(255,255,255,.03);">
                                    <th style="text-align:left;padding:10px 12px;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);">Metric</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);">Base</th>
                                    <template x-for="(sc, i) in result.scenarios" :key="'th'+i">
                                        <th style="text-align:right;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);"
                                            :style="'color:' + scenarioColors[i % scenarioColors.length]" x-text="sc.label"></th>
                                    </template>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="metric in ['feasibility_score','max_buildable_area_sqm','max_floors','ground_coverage_sqm']" :key="metric">
                                    <tr style="border-bottom:1px solid rgba(255,255,255,.04);">
                                        <td style="padding:10px 12px;color:var(--text-secondary);font-weight:500;" x-text="metricLabel(metric)"></td>
                                        <td style="padding:10px 12px;text-align:right;font-weight:600;" x-text="fmt(result.base[metric])"></td>
                                        <template x-for="(sc, i) in result.scenarios" :key="metric+'_'+i">
                                            <td style="padding:10px 12px;text-align:right;">
                                                <span x-text="fmt(sc.result[metric])" style="font-weight:600;"></span>
                                                <span x-show="sc.delta[metric]"
                                                      :style="deltaColor(sc.delta[metric]?.change)"
                                                      style="font-size:10px;margin-left:4px;font-weight:500;"
                                                      x-text="deltaText(sc.delta[metric])"></span>
                                            </td>
                                        </template>
                                    </tr>
                                </template>
                                <tr style="border-bottom:1px solid rgba(255,255,255,.04);">
                                    <td style="padding:10px 12px;color:var(--text-secondary);font-weight:500;">Profit (₹)</td>
                                    <td style="padding:10px 12px;text-align:right;font-weight:600;" x-text="'₹'+fmtNum(result.base.cost_estimates?.estimated_profit_inr)"></td>
                                    <template x-for="(sc, i) in result.scenarios" :key="'profit_'+i">
                                        <td style="padding:10px 12px;text-align:right;">
                                            <span x-text="'₹'+fmtNum(sc.result.cost_estimates?.estimated_profit_inr)" style="font-weight:600;"></span>
                                            <span :style="deltaColor(sc.delta.estimated_profit_inr?.change)"
                                                  style="font-size:10px;margin-left:4px;font-weight:500;"
                                                  x-text="deltaText(sc.delta.estimated_profit_inr)"></span>
                                        </td>
                                    </template>
                                </tr>
                                <tr>
                                    <td style="padding:10px 12px;color:var(--text-secondary);font-weight:500;">ROI</td>
                                    <td style="padding:10px 12px;text-align:right;font-weight:600;" x-text="(result.base.cost_estimates?.roi_pct ?? 0)+'%'"></td>
                                    <template x-for="(sc, i) in result.scenarios" :key="'roi_'+i">
                                        <td style="padding:10px 12px;text-align:right;">
                                            <span x-text="(sc.result.cost_estimates?.roi_pct ?? 0)+'%'" style="font-weight:600;"></span>
                                        </td>
                                    </template>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div x-show="result.recommendation" style="background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:8px;padding:14px;">
                        <div style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--green);margin-bottom:6px;">
                            <i data-lucide="check-circle-2" style="width:13px;height:13px;"></i> Recommendation
                        </div>
                        <div style="font-size:12px;color:var(--text-secondary);">
                            <strong x-text="result.recommendation?.best_scenario" style="color:var(--text);"></strong>:
                            <span x-text="result.recommendation?.reason"></span>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        {{-- Optimizer Results --}}
        <template x-if="result && activeTab === 'optimizer'">
            <div>
                <div class="card" style="padding:24px;margin-bottom:20px;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:32px;height:32px;background:rgba(34,197,94,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                <i data-lucide="trophy" style="width:15px;height:15px;color:#22c55e;"></i>
                            </div>
                            <div style="font-size:14px;font-weight:600;">Optimization Results</div>
                        </div>
                        <span class="badge badge-green">Optimizer</span>
                    </div>

                    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px;">
                        <template x-for="(cfg, i) in result.configurations" :key="i">
                            <div :style="i===0 ? 'border-color:var(--green);' : ''"
                                 style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:18px;position:relative;">
                                <div x-show="i===0" style="position:absolute;top:-8px;right:12px;background:var(--green);color:#000;font-size:9px;font-weight:700;padding:3px 10px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em;">Best Pick</div>
                                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                                    <div :style="'background:' + optimizerColors[cfg.project_type] + '18'"
                                         style="width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;">
                                        <i :data-lucide="optimizerIcons[cfg.project_type]" style="width:14px;height:14px;" :style="'color:' + optimizerColors[cfg.project_type]"></i>
                                    </div>
                                    <div style="font-size:13px;font-weight:600;text-transform:capitalize;" x-text="cfg.project_type"></div>
                                </div>
                                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:12px;">
                                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);">
                                        <span style="color:var(--text-muted);">Buildable</span>
                                        <span x-text="fmtNum(cfg.max_buildable_sqm)+' sqm'" style="font-weight:600;"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);">
                                        <span style="color:var(--text-muted);">Floors</span>
                                        <span x-text="cfg.max_floors" style="font-weight:600;"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);">
                                        <span style="color:var(--text-muted);">GDV</span>
                                        <span x-text="'₹'+fmtNum(cfg.gdv_inr)" style="font-weight:600;color:#60a5fa;"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);">
                                        <span style="color:var(--text-muted);">Profit</span>
                                        <span x-text="'₹'+fmtNum(cfg.profit_inr)" style="font-weight:600;color:var(--green);"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;padding:4px 0;">
                                        <span style="color:var(--text-muted);">ROI</span>
                                        <span x-text="cfg.roi_pct+'%'" style="font-weight:600;color:#f97316;"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;padding:4px 0;">
                                        <span style="color:var(--text-muted);">Score</span>
                                        <span x-text="cfg.feasibility_score" style="font-weight:600;"></span>
                                    </div>
                                </div>
                                <div x-show="cfg.unit_mix && cfg.unit_mix.length" style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border);">
                                    <div style="font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">Unit Mix</div>
                                    <template x-for="u in cfg.unit_mix" :key="u.type">
                                        <div style="font-size:11px;display:flex;justify-content:space-between;padding:3px 0;">
                                            <span style="color:var(--text-secondary);" x-text="u.type"></span>
                                            <span x-text="u.count+' units ('+fmtNum(u.total_area_sqm)+' sqm)'" style="color:var(--text);font-weight:500;"></span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>

                    <div style="background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:8px;padding:14px;">
                        <div style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--green);margin-bottom:6px;">
                            <i data-lucide="check-circle-2" style="width:13px;height:13px;"></i> Recommendation
                        </div>
                        <div style="font-size:12px;color:var(--text-secondary);" x-text="result.recommendation?.reason"></div>
                    </div>
                </div>
            </div>
        </template>

        {{-- TDR Results --}}
        <template x-if="result && activeTab === 'tdr'">
            <div>
                <div class="card" style="padding:24px;margin-bottom:20px;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:32px;height:32px;background:rgba(249,115,22,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                <i data-lucide="receipt" style="width:15px;height:15px;color:#f97316;"></i>
                            </div>
                            <div>
                                <div style="font-size:14px;font-weight:600;">TDR Analysis Results</div>
                                <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">
                                    Base FAR: <strong x-text="result.base_far" style="color:var(--text);"></strong> &mdash;
                                    Rate: <strong style="color:var(--text);">₹<span x-text="fmtNum(result.state_tdr_rate)"></span>/sqm</strong> &mdash;
                                    Max: <strong x-text="result.max_tdr_pct+'%'" style="color:var(--text);"></strong>
                                </div>
                            </div>
                        </div>
                        <span class="badge badge-orange">TDR</span>
                    </div>

                    <div style="overflow-x:auto;margin-bottom:18px;border:1px solid var(--border);border-radius:8px;">
                        <table style="width:100%;border-collapse:collapse;font-size:12px;">
                            <thead>
                                <tr style="background:rgba(255,255,255,.03);">
                                    <th style="text-align:left;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">TDR %</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">New FAR</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Extra Area</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">TDR Cost</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Add. Profit</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Net Gain</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">CB Ratio</th>
                                    <th style="text-align:center;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Viable</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(tier, i) in result.scenarios" :key="i">
                                    <tr :style="tier.is_viable ? 'background:rgba(34,197,94,.04);' : ''" style="border-bottom:1px solid rgba(255,255,255,.04);">
                                        <td style="padding:10px 12px;font-weight:600;" x-text="tier.tdr_pct+'%'"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="tier.new_far"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="fmtNum(tier.additional_area_sqm)+' sqm'"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="'₹'+fmtNum(tier.tdr_cost_inr)"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="'₹'+fmtNum(tier.additional_profit)"></td>
                                        <td style="padding:10px 12px;text-align:right;font-weight:600;" :style="tier.net_gain_inr > 0 ? 'color:var(--green);' : 'color:var(--red);'" x-text="'₹'+fmtNum(tier.net_gain_inr)"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="tier.cost_benefit_ratio+'x'"></td>
                                        <td style="padding:10px 12px;text-align:center;">
                                            <span :style="tier.is_viable ? 'background:rgba(34,197,94,.15);color:#22c55e;' : 'background:rgba(239,68,68,.15);color:#ef4444;'" style="padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;" x-text="tier.is_viable ? 'Yes' : 'No'"></span>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>

                    <div :style="result.recommendation?.optimal_tdr_pct ? 'background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2);' : 'background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);'"
                         style="border:1px solid;border-radius:8px;padding:14px;">
                        <div style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:6px;"
                             :style="result.recommendation?.optimal_tdr_pct ? 'color:var(--green);' : 'color:var(--red);'">
                            <i :data-lucide="result.recommendation?.optimal_tdr_pct ? 'check-circle-2' : 'x-circle'" style="width:13px;height:13px;"></i>
                            <span x-text="result.recommendation?.optimal_tdr_pct ? 'Recommended' : 'Not Viable'"></span>
                        </div>
                        <div style="font-size:12px;color:var(--text-secondary);" x-text="result.recommendation?.reason"></div>
                    </div>
                </div>
            </div>
        </template>

        {{-- Premium FSI Results --}}
        <template x-if="result && activeTab === 'premium_fsi'">
            <div>
                <div class="card" style="padding:24px;margin-bottom:20px;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:32px;height:32px;background:rgba(234,179,8,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                <i data-lucide="indian-rupee" style="width:15px;height:15px;color:#eab308;"></i>
                            </div>
                            <div>
                                <div style="font-size:14px;font-weight:600;">Premium FSI Results</div>
                                <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">
                                    Base FAR: <strong x-text="result.base_far" style="color:var(--text);"></strong> &mdash;
                                    Premium: <strong style="color:var(--text);">₹<span x-text="fmtNum(result.premium_rate_sqm)"></span>/sqm</strong> &mdash;
                                    Max Extra: <strong x-text="result.max_extra_far" style="color:var(--text);"></strong>
                                </div>
                            </div>
                        </div>
                        <span class="badge badge-yellow">Premium FSI</span>
                    </div>

                    <div style="overflow-x:auto;margin-bottom:18px;border:1px solid var(--border);border-radius:8px;">
                        <table style="width:100%;border-collapse:collapse;font-size:12px;">
                            <thead>
                                <tr style="background:rgba(255,255,255,.03);">
                                    <th style="text-align:left;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Extra FSI</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">New FAR</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Extra Area</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Premium Cost</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Total Cost</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Add. Revenue</th>
                                    <th style="text-align:right;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Net Gain</th>
                                    <th style="text-align:center;padding:10px 12px;color:var(--text-muted);font-size:11px;border-bottom:1px solid var(--border);">Viable</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(tier, i) in result.scenarios" :key="i">
                                    <tr :style="tier.is_viable ? 'background:rgba(34,197,94,.04);' : ''" style="border-bottom:1px solid rgba(255,255,255,.04);">
                                        <td style="padding:10px 12px;font-weight:600;" x-text="+tier.extra_far.toFixed(1)"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="tier.new_far"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="fmtNum(tier.additional_area_sqm)+' sqm'"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="'₹'+fmtNum(tier.premium_cost_inr)"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="'₹'+fmtNum(tier.total_additional_cost_inr)"></td>
                                        <td style="padding:10px 12px;text-align:right;" x-text="'₹'+fmtNum(tier.additional_revenue_inr)"></td>
                                        <td style="padding:10px 12px;text-align:right;font-weight:600;" :style="tier.net_gain_inr > 0 ? 'color:var(--green);' : 'color:var(--red);'" x-text="'₹'+fmtNum(tier.net_gain_inr)"></td>
                                        <td style="padding:10px 12px;text-align:center;">
                                            <span :style="tier.is_viable ? 'background:rgba(34,197,94,.15);color:#22c55e;' : 'background:rgba(239,68,68,.15);color:#ef4444;'" style="padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;" x-text="tier.is_viable ? 'Yes' : 'No'"></span>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>

                    <div :style="result.recommendation?.optimal_extra_far ? 'background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2);' : 'background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);'"
                         style="border:1px solid;border-radius:8px;padding:14px;">
                        <div style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:6px;"
                             :style="result.recommendation?.optimal_extra_far ? 'color:var(--green);' : 'color:var(--red);'">
                            <i :data-lucide="result.recommendation?.optimal_extra_far ? 'check-circle-2' : 'x-circle'" style="width:13px;height:13px;"></i>
                            <span x-text="result.recommendation?.optimal_extra_far ? 'Recommended' : 'Not Cost-Effective'"></span>
                        </div>
                        <div style="font-size:12px;color:var(--text-secondary);" x-text="result.recommendation?.reason"></div>
                    </div>
                </div>
            </div>
        </template>

        {{-- Amalgamation Results --}}
        <template x-if="result && activeTab === 'amalgamation'">
            <div>
                <div class="card" style="padding:24px;margin-bottom:20px;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:32px;height:32px;background:rgba(167,139,250,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                <i data-lucide="combine" style="width:15px;height:15px;color:#a78bfa;"></i>
                            </div>
                            <div style="font-size:14px;font-weight:600;">Amalgamation Results</div>
                        </div>
                        <span class="badge badge-teal">Amalgamation</span>
                    </div>

                    {{-- Individual vs Combined --}}
                    <div style="display:grid;grid-template-columns:1fr 48px 1fr;gap:0;align-items:center;margin-bottom:20px;">
                        <div style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:20px;text-align:center;">
                            <div style="font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;">Individual Total</div>
                            <div style="font-size:20px;font-weight:700;" x-text="fmtNum(result.comparison?.individual_buildable_sqm)+' sqm'"></div>
                            <div style="font-size:12px;color:var(--text-secondary);margin-top:6px;">
                                Profit: <span style="color:var(--text);font-weight:600;" x-text="'₹'+fmtNum(result.comparison?.individual_profit_inr)"></span>
                            </div>
                        </div>
                        <div style="display:flex;justify-content:center;">
                            <i data-lucide="arrow-right" style="width:20px;height:20px;color:var(--text-muted);"></i>
                        </div>
                        <div :style="result.comparison?.profit_diff_inr > 0 ? 'border-color:var(--green);' : 'border-color:var(--border);'"
                             style="background:var(--bg);border:1px solid;border-radius:10px;padding:20px;text-align:center;">
                            <div style="font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;">Combined</div>
                            <div style="font-size:20px;font-weight:700;" x-text="fmtNum(result.comparison?.combined_buildable_sqm)+' sqm'"></div>
                            <div style="font-size:12px;color:var(--text-secondary);margin-top:6px;">
                                Profit: <span style="color:var(--text);font-weight:600;" x-text="'₹'+fmtNum(result.comparison?.combined_profit_inr)"></span>
                            </div>
                        </div>
                    </div>

                    {{-- Synergy KPIs --}}
                    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;">
                        <div style="background:var(--bg);border-radius:8px;padding:14px;text-align:center;">
                            <div style="font-size:20px;font-weight:700;color:#60a5fa;" x-text="fmtNum(result.comparison?.synergy_sqm)+' sqm'"></div>
                            <div style="font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;margin-top:4px;">Synergy Area</div>
                        </div>
                        <div style="background:var(--bg);border-radius:8px;padding:14px;text-align:center;">
                            <div style="font-size:20px;font-weight:700;color:#f97316;" x-text="result.comparison?.synergy_pct+'%'"></div>
                            <div style="font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;margin-top:4px;">Synergy %</div>
                        </div>
                        <div style="background:var(--bg);border-radius:8px;padding:14px;text-align:center;">
                            <div style="font-size:20px;font-weight:700;" :style="result.comparison?.profit_diff_inr > 0 ? 'color:var(--green);' : 'color:var(--red);'"
                                 x-text="'₹'+fmtNum(result.comparison?.profit_diff_inr)"></div>
                            <div style="font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;margin-top:4px;">Profit Diff</div>
                        </div>
                        <div style="background:var(--bg);border-radius:8px;padding:14px;text-align:center;">
                            <div style="font-size:20px;font-weight:700;color:#a78bfa;" x-text="result.comparison?.combined_floors"></div>
                            <div style="font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;margin-top:4px;">Combined Floors</div>
                        </div>
                    </div>

                    <div :style="result.recommendation?.should_amalgamate ? 'background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2);' : 'background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);'"
                         style="border:1px solid;border-radius:8px;padding:14px;">
                        <div style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:6px;"
                             :style="result.recommendation?.should_amalgamate ? 'color:var(--green);' : 'color:var(--red);'">
                            <i :data-lucide="result.recommendation?.should_amalgamate ? 'check-circle-2' : 'x-circle'" style="width:13px;height:13px;"></i>
                            <span x-text="result.recommendation?.should_amalgamate ? 'Amalgamation Recommended' : 'Individual Development Preferred'"></span>
                        </div>
                        <div style="font-size:12px;color:var(--text-secondary);" x-text="result.recommendation?.reason"></div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- ===== SAVED SCENARIOS ===== --}}
    @if($savedScenarios->count())
    <div class="card" style="padding:24px;margin-top:24px;">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="width:32px;height:32px;background:rgba(96,165,250,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="folder-open" style="width:15px;height:15px;color:#60a5fa;"></i>
            </div>
            <div>
                <div style="font-size:14px;font-weight:600;">Saved Analyses</div>
                <div style="font-size:11px;color:var(--text-muted);">{{ $savedScenarios->count() }} saved scenario{{ $savedScenarios->count() !== 1 ? 's' : '' }}</div>
            </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:8px;">
            @foreach($savedScenarios as $saved)
            @php $bc = $typeBadgeColors[$saved->type] ?? '#2563eb'; @endphp
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;transition:border-color .15s;" id="saved-{{ $saved->id }}" onmouseover="this.style.borderColor='rgba(255,255,255,.12)'" onmouseout="this.style.borderColor='var(--border)'">
                <div style="display:flex;align-items:center;gap:12px;min-width:0;">
                    <div style="width:28px;height:28px;background:{{ $bc }}18;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        @if($saved->type === 'what_if')
                            <i data-lucide="help-circle" style="width:13px;height:13px;color:{{ $bc }};"></i>
                        @elseif($saved->type === 'optimizer')
                            <i data-lucide="bar-chart-3" style="width:13px;height:13px;color:{{ $bc }};"></i>
                        @elseif($saved->type === 'tdr')
                            <i data-lucide="receipt" style="width:13px;height:13px;color:{{ $bc }};"></i>
                        @elseif($saved->type === 'premium_fsi')
                            <i data-lucide="indian-rupee" style="width:13px;height:13px;color:{{ $bc }};"></i>
                        @else
                            <i data-lucide="combine" style="width:13px;height:13px;color:{{ $bc }};"></i>
                        @endif
                    </div>
                    <div style="min-width:0;">
                        <div style="font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $saved->title }}</div>
                        <div style="font-size:10px;color:var(--text-muted);margin-top:1px;">{{ $saved->created_at->diffForHumans() }}</div>
                    </div>
                    <span style="font-size:10px;padding:2px 8px;border-radius:4px;background:{{ $bc }}18;color:{{ $bc }};font-weight:600;text-transform:uppercase;white-space:nowrap;">{{ str_replace('_', ' ', $saved->type) }}</span>
                </div>
                <div style="display:flex;gap:6px;flex-shrink:0;margin-left:12px;">
                    <a href="{{ route('portal.scenarios.show', [$report->id, $saved->id]) }}" class="btn btn-secondary" style="font-size:11px;padding:6px 14px;">
                        <i data-lucide="eye" style="width:12px;height:12px;"></i> View
                    </a>
                    <button onclick="deleteScenario({{ $saved->id }})" class="btn btn-secondary" style="font-size:11px;padding:6px 14px;color:var(--red);border-color:rgba(239,68,68,.25);">
                        <i data-lucide="trash-2" style="width:12px;height:12px;"></i>
                    </button>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Error display --}}
    <div x-show="error" x-cloak style="background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:16px;margin-top:16px;">
        <div style="display:flex;align-items:center;gap:8px;">
            <i data-lucide="alert-circle" style="width:16px;height:16px;color:var(--red);flex-shrink:0;"></i>
            <div style="font-size:12px;color:var(--red);" x-text="error"></div>
        </div>
    </div>
</div>
</div>{{-- .report-content --}}
</div>{{-- .report-layout --}}

<style>
    @keyframes spin { to { transform: rotate(360deg); } }
</style>
@endsection

@section('scripts')
<script src="https://unpkg.com/alpinejs@3/dist/cdn.min.js" defer></script>
<script>
function scenarioApp() {
    return {
        activeTab: 'what_if',
        loading: false,
        loadingText: 'Analyzing...',
        result: null,
        error: null,

        scenarioColors: ['#60a5fa', '#22c55e', '#f97316', '#a78bfa', '#2dd4bf'],

        optimizerColors: {
            residential: '#60a5fa',
            commercial: '#f97316',
            mixed: '#a78bfa',
            mixed_use: '#a78bfa',
            industrial: '#2dd4bf',
        },
        optimizerIcons: {
            residential: 'home',
            commercial: 'building-2',
            mixed: 'layers',
            mixed_use: 'layers',
            industrial: 'factory',
        },

        tabs: [
            { key: 'what_if',      label: 'What-If',       lucide: 'help-circle',  color: '#60a5fa' },
            { key: 'optimizer',    label: 'Optimizer',     lucide: 'bar-chart-3',  color: '#22c55e' },
            { key: 'tdr',          label: 'TDR',           lucide: 'receipt',       color: '#f97316' },
            { key: 'premium_fsi',  label: 'Premium FSI',   lucide: 'indian-rupee', color: '#eab308' },
            { key: 'amalgamation', label: 'Amalgamation',  lucide: 'combine',       color: '#a78bfa' },
        ],

        whatIfScenarios: [
            { label: 'Road widening to 12m', road_width_m: 12, max_far: null, max_height_m: null, project_type: '', plot_area_sqm: null, front_setback_m: null, side_setback_m: null, max_ground_coverage: null },
        ],

        tdrParams: { tdr_cost_per_sqm: null, max_tdr_pct: null },
        premiumParams: { premium_rate_per_sqm: null, max_extra_far: null },
        adjPlots: [
            { label: 'Adjacent Plot 1', area_sqm: null, road_width_m: null },
        ],

        switchTab(key) {
            this.activeTab = key;
            this.result = null;
            this.error = null;
            this.$nextTick(() => lucide.createIcons());
        },

        addWhatIfScenario() {
            if (this.whatIfScenarios.length < 5) {
                this.whatIfScenarios.push({
                    label: 'Scenario ' + (this.whatIfScenarios.length + 1),
                    road_width_m: null, max_far: null, max_height_m: null, project_type: '',
                    plot_area_sqm: null, front_setback_m: null, side_setback_m: null, max_ground_coverage: null,
                });
                this.$nextTick(() => lucide.createIcons());
            }
        },

        addAdjacentPlot() {
            if (this.adjPlots.length < 4) {
                this.adjPlots.push({ label: 'Adjacent Plot ' + (this.adjPlots.length + 1), area_sqm: null, road_width_m: null });
                this.$nextTick(() => lucide.createIcons());
            }
        },

        cleanWhatIf() {
            return this.whatIfScenarios.map(s => {
                const obj = { label: s.label };
                if (s.road_width_m) obj.road_width_m = s.road_width_m;
                if (s.max_far) obj.max_far = s.max_far;
                if (s.max_height_m) obj.max_height_m = s.max_height_m;
                if (s.project_type) obj.project_type = s.project_type;
                if (s.plot_area_sqm) obj.plot_area_sqm = s.plot_area_sqm;
                if (s.front_setback_m) obj.front_setback_m = s.front_setback_m;
                if (s.side_setback_m) obj.side_setback_m = s.side_setback_m;
                if (s.max_ground_coverage) obj.max_ground_coverage = s.max_ground_coverage;
                return obj;
            });
        },

        cleanTdr() {
            const o = {};
            if (this.tdrParams.tdr_cost_per_sqm) o.tdr_cost_per_sqm = this.tdrParams.tdr_cost_per_sqm;
            if (this.tdrParams.max_tdr_pct) o.max_tdr_pct = this.tdrParams.max_tdr_pct;
            return o;
        },

        cleanPremium() {
            const o = {};
            if (this.premiumParams.premium_rate_per_sqm) o.premium_rate_per_sqm = this.premiumParams.premium_rate_per_sqm;
            if (this.premiumParams.max_extra_far) o.max_extra_far = this.premiumParams.max_extra_far;
            return o;
        },

        async runAnalysis(type, params) {
            this.loading = true;
            this.error = null;
            this.result = null;

            const labels = {
                what_if: 'Running what-if analysis...',
                optimizer: 'Optimizing configurations...',
                tdr: 'Calculating TDR scenarios...',
                premium_fsi: 'Computing premium FSI break-even...',
                amalgamation: 'Analyzing amalgamation...',
            };
            this.loadingText = labels[type] || 'Analyzing...';

            try {
                const res = await fetch('{{ route("portal.scenarios.run", $report->id) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ type, ...params }),
                });
                const data = await res.json();
                if (!res.ok) {
                    this.error = data.message || 'Analysis failed. Please try again.';
                    return;
                }
                this.result = data.result;
                this.$nextTick(() => lucide.createIcons());
            } catch (e) {
                this.error = 'Network error: ' + e.message;
            } finally {
                this.loading = false;
            }
        },

        metricLabel(m) {
            return {
                feasibility_score: 'Feasibility Score',
                max_buildable_area_sqm: 'Buildable Area (sqm)',
                max_floors: 'Max Floors',
                ground_coverage_sqm: 'Ground Coverage (sqm)',
            }[m] || m;
        },

        fmt(v) {
            if (v == null) return '—';
            return typeof v === 'number' ? v.toLocaleString('en-IN') : v;
        },

        fmtNum(v) {
            if (v == null) return '0';
            return Math.round(v).toLocaleString('en-IN');
        },

        deltaText(d) {
            if (!d) return '';
            const c = d.change ?? 0;
            const sign = c > 0 ? '+' : '';
            return sign + this.fmtNum(c) + ' (' + (c >= 0 ? '+' : '') + (d.pct ?? 0) + '%)';
        },

        deltaColor(change) {
            if (change > 0) return 'color:var(--green);';
            if (change < 0) return 'color:var(--red);';
            return 'color:var(--text-muted);';
        },
    };
}

function deleteScenario(id) {
    if (!confirm('Delete this saved analysis?')) return;
    fetch('{{ url("landfeasibility/public/report/".$report->id."/scenarios") }}/' + id, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
    }).then(r => {
        if (r.ok) {
            const el = document.getElementById('saved-' + id);
            if (el) el.style.display = 'none';
        }
    });
}
</script>
@endsection