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

@section('content')
@php
    $score      = $report->feasibility_score ?? 0;
    $scoreColor = $score >= 70 ? 'var(--green)' : ($score >= 40 ? 'var(--yellow)' : 'var(--red)');
    $scoreLabel = $score >= 70 ? 'Feasible' : ($score >= 40 ? 'Marginal' : 'Challenging');
    $scoreBadge = $score >= 70 ? 'badge-green' : ($score >= 40 ? 'badge-yellow' : 'badge-red');
    $cost       = $report->cost_estimates ?? [];
    $projectTypeLabels = ['residential' => 'Residential', 'commercial' => 'Commercial', 'industrial' => 'Industrial', 'mixed' => 'Mixed Use'];
    $ptLabel    = $projectTypeLabels[$report->project_type ?? 'residential'] ?? 'Residential';
@endphp

<div class="report-layout">
@if($report->status === 'completed')
    @include('portal.partials.report-sidebar')
@endif
<div class="report-content">
<div style="max-width:980px;margin:0 auto;padding:32px 24px;">

    {{-- Header --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap;">
        <div style="flex:1;min-width:0;">
            <div style="font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px;">FEASIBILITY REPORT</div>
            <h1 style="font-size:20px;font-weight:700;word-break:break-word;">{{ $report->address ?? 'Plot Analysis' }}</h1>
            <div style="font-size:13px;color:var(--text-secondary);margin-top:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                <span>Report #{{ str_pad($report->id, 5, '0', STR_PAD_LEFT) }}</span>
                <span style="color:var(--border);">•</span>
                <span>{{ $report->created_at?->diffForHumans() }}</span>
                @if($report->zone)
                <span style="color:var(--border);">•</span>
                <span style="color:#60a5fa;font-weight:600;">{{ $report->zone->name }}</span>
                @endif
                <span class="badge badge-blue">{{ $ptLabel }}</span>
            </div>
        </div>
        <div style="display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;">
            <button onclick="copyShareLink()" class="btn btn-secondary" style="font-size:12px;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
                Share
            </button>
            <a href="{{ route('portal.analyze.form') }}" class="btn btn-secondary" style="font-size:12px;">← New Analysis</a>
        </div>
    </div>

    @if($report->status === 'failed')
    <div class="alert alert-error">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        Analysis failed: {{ $report->result_data['error'] ?? 'Unknown error. Please try again.' }}
    </div>
    @endif

    @if($report->status === 'completed')

    {{-- ═══════════ TAB NAVIGATION ═══════════ --}}
    <div x-data="{ tab: 'summary' }" style="margin-bottom:20px;">
        <div style="display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:20px;">
            <button @click="tab = 'summary'" :style="tab === 'summary' ? 'border-bottom:2px solid #60a5fa;color:#60a5fa;font-weight:700;' : 'color:var(--text-secondary);'" style="background:none;border:none;padding:10px 18px;font-size:13px;cursor:pointer;margin-bottom:-2px;transition:all .15s;">
                Summary
            </button>
            <button @click="tab = 'details'" :style="tab === 'details' ? 'border-bottom:2px solid #60a5fa;color:#60a5fa;font-weight:700;' : 'color:var(--text-secondary);'" style="background:none;border:none;padding:10px 18px;font-size:13px;cursor:pointer;margin-bottom:-2px;transition:all .15s;">
                Full Details
            </button>
            <button @click="tab = 'costs'" :style="tab === 'costs' ? 'border-bottom:2px solid #60a5fa;color:#60a5fa;font-weight:700;' : 'color:var(--text-secondary);'" style="background:none;border:none;padding:10px 18px;font-size:13px;cursor:pointer;margin-bottom:-2px;transition:all .15s;">
                Cost &amp; ROI
            </button>
            <button @click="tab = 'correct'" :style="tab === 'correct' ? 'border-bottom:2px solid #60a5fa;color:#60a5fa;font-weight:700;' : 'color:var(--text-secondary);'" style="background:none;border:none;padding:10px 18px;font-size:13px;cursor:pointer;margin-bottom:-2px;transition:all .15s;">
                Corrections
            </button>
        </div>

    {{-- ═══════════ SUMMARY TAB (Quick View — answer the user's question fast) ═══════════ --}}
    <div x-show="tab === 'summary'" x-transition>

    {{-- Score Banner --}}
    <div class="card" style="padding:24px 28px;margin-bottom:20px;display:flex;align-items:center;gap:28px;">
        <div style="text-align:center;flex-shrink:0;">
            <div style="font-size:56px;font-weight:800;color:{{ $scoreColor }};line-height:1;">{{ $score }}</div>
            <div style="font-size:13px;font-weight:600;color:{{ $scoreColor }};">{{ $scoreLabel }}</div>
            <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">out of 100</div>
        </div>
        <div style="flex:1;">
            <div style="height:10px;background:rgba(255,255,255,.07);border-radius:5px;overflow:hidden;margin-bottom:16px;">
                <div style="width:{{ $score }}%;height:100%;background:{{ $scoreColor }};border-radius:5px;"></div>
            </div>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
                @if($report->max_buildable_area_sqm)
                <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:10px;text-align:center;">
                    <div style="font-size:20px;font-weight:700;color:#60a5fa;">{{ number_format($report->max_buildable_area_sqm) }}</div>
                    <div style="font-size:10px;color:var(--text-muted);">Max BUA (sqm)</div>
                </div>
                @endif
                @if($report->max_floors)
                <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:10px;text-align:center;">
                    <div style="font-size:20px;font-weight:700;color:#f97316;">{{ $report->max_floors }}</div>
                    <div style="font-size:10px;color:var(--text-muted);">Max Floors</div>
                </div>
                @endif
                @if($report->zoneRule)
                <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:10px;text-align:center;">
                    <div style="font-size:20px;font-weight:700;color:#a78bfa;">{{ $report->zoneRule->max_far }}</div>
                    <div style="font-size:10px;color:var(--text-muted);">FAR / FSI</div>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Quick Answer: What Can Be Built --}}
    <div class="card" style="padding:20px;margin-bottom:20px;background:rgba(37,99,235,.05);border-color:rgba(37,99,235,.2);">
        <div style="font-size:14px;font-weight:700;color:#93c5fd;margin-bottom:14px;">🏗 What Can Be Built Here?</div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;">
            <div>
                <div style="color:var(--text-muted);font-size:11px;margin-bottom:4px;">Max Built-up Area</div>
                <div style="font-weight:700;color:var(--text);font-size:20px;">{{ $report->max_buildable_area_sqm ? number_format($report->max_buildable_area_sqm).' sqm' : '—' }}</div>
                <div style="color:var(--text-muted);font-size:11px;">across {{ $report->max_floors ?? '—' }} floor{{ ($report->max_floors ?? 1) != 1 ? 's' : '' }}</div>
            </div>
            <div>
                <div style="color:var(--text-muted);font-size:11px;margin-bottom:4px;">Approx. Units @ 75 sqm</div>
                <div style="font-weight:700;color:#60a5fa;font-size:20px;">
                    {{ $report->max_buildable_area_sqm ? floor($report->max_buildable_area_sqm / 75).' units' : '—' }}
                </div>
                <div style="color:var(--text-muted);font-size:11px;">typical 2-BHK size</div>
            </div>
            <div>
                <div style="color:var(--text-muted);font-size:11px;margin-bottom:4px;">Ground Floor Footprint</div>
                <div style="font-weight:700;color:#2dd4bf;font-size:20px;">{{ $report->ground_coverage_sqm ? number_format($report->ground_coverage_sqm).' sqm' : '—' }}</div>
                <div style="color:var(--text-muted);font-size:11px;">{{ $report->zoneRule?->max_ground_coverage ? round($report->zoneRule->max_ground_coverage * 100).'% coverage' : '' }}</div>
            </div>
        </div>
    </div>

    {{-- Key Parameters (compact summary) --}}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
        <div class="card" style="padding:16px;">
            <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px;">Key Parameters</div>
            @php $summaryParams = [
                ['Plot Area', $report->plot_area_sqm ? number_format($report->plot_area_sqm).' sqm' : '—'],
                ['Road Width', $report->road_width_m ? $report->road_width_m.' m' : '—'],
                ['Max Height', $report->zoneRule?->max_height_m ? $report->zoneRule->max_height_m.' m' : ($report->result_data['max_height_m_allowed'] ?? '—')],
                ['Zone', $report->zone?->name ?? '—'],
            ]; @endphp
            @foreach($summaryParams as [$label, $value])
            <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;">
                <span style="color:var(--text-secondary);">{{ $label }}</span>
                <span style="color:var(--text);font-weight:500;">{{ $value }}</span>
            </div>
            @endforeach
        </div>

        {{-- Setbacks (compact) --}}
        @if($report->setback_summary)
        <div class="card" style="padding:16px;">
            <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px;">Required Setbacks</div>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;">
                @foreach(['front_m' => 'Front', 'side_m' => 'Side', 'rear_m' => 'Rear'] as $key => $dir)
                @if(isset($report->setback_summary[$key]))
                <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:10px;text-align:center;">
                    <div style="font-size:18px;font-weight:700;color:#2dd4bf;">{{ $report->setback_summary[$key] }}m</div>
                    <div style="font-size:10px;color:var(--text-muted);">{{ $dir }}</div>
                </div>
                @endif
                @endforeach
            </div>
        </div>
        @endif
    </div>

    {{-- Height rule explanation (shown when road-width-based height) --}}
    @if(($report->result_data['height_rule_type'] ?? 'fixed') === 'road_width_based')
    <div class="card" style="padding:16px;margin-bottom:20px;border-color:rgba(167,139,250,.25);">
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a78bfa;margin-bottom:8px;">📐 Height Rule: Road-Width Based</div>
        <div style="font-size:12px;color:var(--text-secondary);line-height:1.5;">
            Max height = road width
            @if($report->result_data['height_multiplier'] ?? null)
                ({{ $report->road_width_m }}m) × {{ $report->result_data['height_multiplier'] }}
            @endif
            @if(($report->setback_summary['has_extra_setback'] ?? false))
                + setback bonus
            @endif
            = <strong style="color:#a78bfa;">{{ $report->result_data['max_height_m_allowed'] ?? '—' }}m</strong>
        </div>
    </div>
    @endif

    {{-- Quick cost preview --}}
    @if(!empty($cost))
    <div class="card" style="padding:16px;margin-bottom:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
        @php $quickCost = [
            ['Construction', '₹'.number_format($cost['construction_cost_min_inr']).'+', '#60a5fa'],
            ['Market Value', '₹'.number_format($cost['gross_development_value_inr']), '#22c55e'],
            ['Est. Profit', ($cost['estimated_profit_inr'] >= 0 ? '₹' : '-₹').number_format(abs($cost['estimated_profit_inr'])), $cost['estimated_profit_inr'] >= 0 ? '#22c55e' : '#ef4444'],
            ['ROI', $cost['roi_pct'].'%', $cost['roi_pct'] >= 30 ? '#22c55e' : ($cost['roi_pct'] >= 15 ? '#eab308' : '#ef4444')],
        ]; @endphp
        @foreach($quickCost as [$label, $value, $color])
        <div style="text-align:center;">
            <div style="font-size:14px;font-weight:700;color:{{ $color }};">{{ $value }}</div>
            <div style="font-size:10px;color:var(--text-muted);">{{ $label }}</div>
        </div>
        @endforeach
    </div>
    @endif

    {{-- Manual override indicator --}}
    @if($report->has_manual_overrides && !empty($report->manual_overrides))
    <div style="background:rgba(241,196,15,.04);border:1px solid rgba(241,196,15,.2);border-radius:8px;padding:10px 14px;margin-bottom:20px;font-size:12px;color:#fbbf24;display:flex;align-items:center;gap:8px;">
        ⚙ Manual overrides applied:
        @foreach($report->manual_overrides as $key => $value)
        <span class="badge badge-yellow" style="font-size:10px;">{{ str_replace('_', ' ', ucfirst(str_replace('_m', '', $key))) }}: {{ $value }}</span>
        @endforeach
        @if($report->parent_report_id)
        <a href="{{ route('portal.report', $report->parent_report_id) }}" style="margin-left:auto;font-size:11px;color:#60a5fa;">← Original</a>
        @endif
    </div>
    @endif

    {{-- Quick actions --}}
    <div style="display:flex;gap:10px;flex-wrap:wrap;">
        <button @click="tab = 'details'" class="btn btn-secondary" style="font-size:12px;">View Full Details →</button>
        <button @click="tab = 'costs'" class="btn btn-secondary" style="font-size:12px;">Cost Breakdown →</button>
        <a href="{{ route('portal.envelope', $report->id) }}" class="btn btn-secondary" style="font-size:12px;">🏗 3D Building View</a>
        <a href="{{ route('portal.scenarios', $report->id) }}" class="btn btn-secondary" style="font-size:12px;">📊 What-If Scenarios</a>
    </div>

    </div>{{-- /summary tab --}}

    {{-- ═══════════ FULL DETAILS TAB ═══════════ --}}
    <div x-show="tab === 'details'" x-transition>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">

        {{-- Left Column --}}
        <div style="display:flex;flex-direction:column;gap:16px;">

            {{-- Building Parameters --}}
            <div class="card" style="padding:18px;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:14px;">Building Parameters</div>
                @php
                $params = [
                    ['Plot Area',          $report->plot_area_sqm ? number_format($report->plot_area_sqm).' sqm' : '—', null],
                    ['Max Buildable Area', $report->max_buildable_area_sqm ? number_format($report->max_buildable_area_sqm).' sqm' : '—', '#60a5fa'],
                    ['Ground Coverage',    $report->ground_coverage_sqm ? number_format($report->ground_coverage_sqm).' sqm' : '—', null],
                    ['Max Floors',         $report->max_floors ?? '—', '#f97316'],
                    ['FAR / FSI',          $report->zoneRule?->max_far ?? '—', '#a78bfa'],
                    ['Max Height',         $report->zoneRule?->max_height_m ? $report->zoneRule->max_height_m.' m' : '—', null],
                    ['Road Width',         $report->road_width_m ? $report->road_width_m.' m' : '—', '#2dd4bf'],
                    ['Ground Coverage %',  $report->zoneRule?->max_ground_coverage ? ($report->zoneRule->max_ground_coverage * 100).'%' : '—', null],
                    ['Parking Required',   isset($report->result_data['parking_required_ecs']) ? $report->result_data['parking_required_ecs'].' ECS' : '—', null],
                ];
                @endphp
                @foreach($params as [$label, $value, $color])
                <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;">
                    <span style="color:var(--text-secondary);">{{ $label }}</span>
                    <span style="{{ $color ? 'color:'.$color.';font-weight:600;' : 'color:var(--text);' }}">{{ $value }}</span>
                </div>
                @endforeach
            </div>

            {{-- Setbacks --}}
            @if($report->setback_summary)
            <div class="card" style="padding:18px;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:14px;">Required Setbacks</div>
                <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;">
                    @foreach(['front_m' => 'Front', 'side_m' => 'Side', 'rear_m' => 'Rear'] as $key => $dir)
                    @if(isset($report->setback_summary[$key]))
                    <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:10px;text-align:center;">
                        <div style="font-size:18px;font-weight:700;color:#2dd4bf;">{{ $report->setback_summary[$key] }}m</div>
                        <div style="font-size:10px;color:var(--text-muted);">{{ $dir }}</div>
                    </div>
                    @endif
                    @endforeach
                </div>
                @if(!empty($report->setback_summary['note']))
                <div style="font-size:11px;color:var(--text-muted);">{{ $report->setback_summary['note'] }}</div>
                @endif
            </div>
            @endif

            {{-- Regulation Source --}}
            @if($report->zoneRule)
            <div class="card" style="padding:18px;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;">Applied Regulation</div>
                @foreach([
                    ['Rule Source',       $report->zoneRule->rule_source ?? '—'],
                    ['Road Width Band',   $report->zoneRule->road_width_label ?? '—'],
                    ['Open Space %',      $report->zoneRule->open_space_pct ? $report->zoneRule->open_space_pct.'%' : '—'],
                    ['Parking Ratio',     $report->zoneRule->parking_ratio_ecs ? $report->zoneRule->parking_ratio_ecs.' ECS / 100 sqm' : '—'],
                ] as [$label, $value])
                <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;">
                    <span style="color:var(--text-secondary);">{{ $label }}</span>
                    <span style="color:var(--text);">{{ $value }}</span>
                </div>
                @endforeach
                @if($report->zoneRule->special_conditions)
                <div style="margin-top:10px;background:rgba(241,196,15,.08);border:1px solid rgba(241,196,15,.2);border-radius:6px;padding:8px 10px;font-size:12px;color:#fbbf24;">
                    ⚠ {{ $report->zoneRule->special_conditions }}
                </div>
                @endif
            </div>
            @endif
        </div>

        {{-- Right Column --}}
        <div style="display:flex;flex-direction:column;gap:16px;">

            {{-- Location Map + Info --}}
            <div class="card" style="padding:0;overflow:hidden;">
                @if($report->latitude && $report->longitude)
                <div id="report-map" style="height:200px;"></div>
                @endif
                <div style="padding:16px 18px;">
                    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;">Location</div>
                    @foreach([
                        ['Address',     $report->address ?? '—'],
                        ['State',       $report->state?->name ?? '—'],
                        ['City',        $report->city?->name ?? '—'],
                        ['Zone',        $report->zone?->name ?? '—'],
                        ['Coordinates', $report->latitude && $report->longitude ? round($report->latitude,5).', '.round($report->longitude,5) : '—'],
                        ['Regulation',  $report->zoneRule?->rule_source ?? '—'],
                    ] as [$label, $value])
                    <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;gap:12px;">
                        <span style="color:var(--text-secondary);flex-shrink:0;">{{ $label }}</span>
                        <span style="color:var(--text);text-align:right;word-break:break-word;">{{ $value }}</span>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Permitted Uses --}}
            @if($report->permitted_uses && count($report->permitted_uses))
            <div class="card" style="padding:18px;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;">Permitted Uses</div>
                <div style="display:flex;flex-wrap:wrap;gap:6px;">
                    @foreach($report->permitted_uses as $use)
                    <span class="badge badge-teal">{{ $use }}</span>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Restrictions --}}
            @if($report->restriction_flags && count(array_filter($report->restriction_flags)))
            <div class="card" style="padding:18px;border-color:rgba(249,115,22,.3);">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:12px;">⚠ Restriction Flags</div>
                @foreach($report->restriction_flags as $flag => $active)
                    @if($active)
                    <div style="display:flex;align-items:center;gap:8px;color:var(--orange);font-size:13px;margin-bottom:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        {{ str_replace('_', ' ', ucfirst($flag)) }}
                    </div>
                    @endif
                @endforeach
            </div>
            @endif
        </div>
    </div>

    {{-- Height rule explanation (in Details tab, shown when road-width-based) --}}
    @if(($report->result_data['height_rule_type'] ?? 'fixed') === 'road_width_based')
    <div class="card" style="padding:18px;margin-bottom:20px;border-color:rgba(167,139,250,.25);">
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a78bfa;margin-bottom:10px;">📐 Height Rule: Road-Width Based</div>
        <div style="font-size:13px;color:var(--text-secondary);line-height:1.6;">
            In this zone, the <strong>maximum permissible building height</strong> is calculated based on the
            <strong>front road width</strong>
            @if($report->result_data['height_multiplier'] ?? null)
                ({{ $report->road_width_m }}m × {{ $report->result_data['height_multiplier'] }} multiplier)
            @endif.
            @if(($report->setback_summary['has_extra_setback'] ?? false))
                An <strong>additional height bonus</strong> was applied because the front setback
                ({{ $report->setback_summary['front_m'] }}m) exceeds the minimum requirement
                ({{ $report->setback_summary['front_min_m'] ?? '—' }}m).
            @endif
            Changing the road width or front setback may <strong>change the maximum height</strong> allowed.
        </div>
        <div style="margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;">
            <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:8px;text-align:center;">
                <div style="font-size:16px;font-weight:700;color:#60a5fa;">{{ $report->road_width_m ?? '—' }}m</div>
                <div style="font-size:10px;color:var(--text-muted);">Road Width</div>
            </div>
            <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:8px;text-align:center;">
                <div style="font-size:16px;font-weight:700;color:#a78bfa;">{{ $report->result_data['max_height_m_allowed'] ?? '—' }}m</div>
                <div style="font-size:10px;color:var(--text-muted);">Max Height</div>
            </div>
            <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:8px;text-align:center;">
                <div style="font-size:16px;font-weight:700;color:#f97316;">{{ $report->max_floors ?? '—' }}</div>
                <div style="font-size:10px;color:var(--text-muted);">Max Floors</div>
            </div>
        </div>
    </div>
    @endif

    </div>{{-- /details tab --}}

    {{-- ═══════════ COST & ROI TAB ═══════════ --}}
    <div x-show="tab === 'costs'" x-transition>

    @if(!empty($cost))
    <div class="card" style="padding:24px;margin-bottom:20px;border-color:rgba(34,197,94,.2);">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
            <div>
                <div style="font-size:15px;font-weight:700;color:var(--text);">💰 Cost & Return Estimates</div>
                <div style="font-size:12px;color:var(--text-secondary);margin-top:2px;">{{ $ptLabel }} project in {{ $report->state?->name ?? 'this region' }}</div>
            </div>
            <span class="badge badge-green" style="font-size:11px;">Indicative</span>
        </div>

        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;">
            @php
            $costMetrics = [
                ['Construction Cost', '₹'.number_format($cost['construction_cost_min_inr']).' – ₹'.number_format($cost['construction_cost_max_inr']), '#60a5fa', 'Total build cost'],
                ['Gross Dev. Value',  '₹'.number_format($cost['gross_development_value_inr']), '#22c55e', 'Est. market value'],
                ['Est. Profit',       ($cost['estimated_profit_inr'] >= 0 ? '₹' : '-₹').number_format(abs($cost['estimated_profit_inr'])), $cost['estimated_profit_inr'] >= 0 ? '#22c55e' : '#ef4444', 'GDV minus avg cost'],
                ['ROI %',             $cost['roi_pct'].'%', $cost['roi_pct'] >= 30 ? '#22c55e' : ($cost['roi_pct'] >= 15 ? '#eab308' : '#ef4444'), 'Return on construction'],
            ];
            @endphp
            @foreach($costMetrics as [$label, $value, $color, $sub])
            <div style="background:rgba(255,255,255,.04);border-radius:8px;padding:14px;text-align:center;">
                <div style="font-size:15px;font-weight:700;color:{{ $color }};line-height:1.3;">{{ $value }}</div>
                <div style="font-size:11px;font-weight:600;color:var(--text-secondary);margin-top:4px;">{{ $label }}</div>
                <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">{{ $sub }}</div>
            </div>
            @endforeach
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
            @if($cost['monthly_rent_estimate_inr'])
            <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:12px;">
                <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">Monthly Rental</div>
                <div style="font-size:16px;font-weight:700;color:#2dd4bf;">₹{{ number_format($cost['monthly_rent_estimate_inr']) }}</div>
                <div style="font-size:10px;color:var(--text-muted);">₹{{ number_format($cost['annual_rent_estimate_inr']) }} / yr</div>
            </div>
            @endif
            @if($cost['breakeven_years'])
            <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:12px;">
                <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">Rental Break-even</div>
                <div style="font-size:16px;font-weight:700;color:#f97316;">{{ $cost['breakeven_years'] }} yrs</div>
                <div style="font-size:10px;color:var(--text-muted);">Via rental income alone</div>
            </div>
            @endif
            <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:12px;">
                <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">Construction Rate</div>
                <div style="font-size:16px;font-weight:700;color:#a78bfa;">₹{{ number_format($cost['construction_rate_min_sqm']) }}–{{ number_format($cost['construction_rate_max_sqm']) }}</div>
                <div style="font-size:10px;color:var(--text-muted);">per sqm ({{ $ptLabel }})</div>
            </div>
        </div>

        <div style="background:rgba(255,255,255,.03);border:1px solid rgba(234,179,8,.2);border-radius:6px;padding:10px 12px;font-size:11px;color:#ca8a04;">
            ⚠ <strong>Estimates only.</strong> {{ $cost['note'] ?? '' }}
        </div>
    </div>
    @else
    <div class="card" style="padding:20px;text-align:center;color:var(--text-muted);">
        <div style="font-size:14px;margin-bottom:4px;">No cost data available</div>
        <div style="font-size:12px;">Cost estimates require a completed zone rule with market data.</div>
    </div>
    @endif

    </div>{{-- /costs tab --}}

    {{-- ═══════════ CORRECTIONS TAB ═══════════ --}}
    <div x-show="tab === 'correct'" x-transition>

    {{-- Child reports (re-analyses) --}}
    @if($report->childReports->isNotEmpty())
    <div class="card" style="padding:16px;margin-bottom:20px;border-color:rgba(37,99,235,.25);">
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd;margin-bottom:10px;">📊 Previous Re-analyses</div>
        <div style="display:flex;flex-direction:column;gap:6px;">
            @foreach($report->childReports()->latest()->get() as $child)
            <a href="{{ route('portal.report', $child->id) }}" style="display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.04);border-radius:6px;padding:8px 12px;font-size:12px;text-decoration:none;color:var(--text);">
                <span>
                    Report #{{ str_pad($child->id, 5, '0', STR_PAD_LEFT) }}
                    <span style="color:var(--text-muted);">— {{ $child->created_at?->diffForHumans() }}</span>
                </span>
                <span style="display:flex;align-items:center;gap:8px;">
                    @if($child->feasibility_score)
                    <span class="badge {{ $child->feasibility_score >= 70 ? 'badge-green' : ($child->feasibility_score >= 40 ? 'badge-yellow' : 'badge-red') }}" style="font-size:10px;">Score: {{ $child->feasibility_score }}</span>
                    @endif
                    <span style="color:#60a5fa;">→</span>
                </span>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ═══════════ RE-ANALYZE WITH CORRECTIONS ═══════════ --}}
    <div class="card" style="padding:20px;margin-bottom:20px;border-color:rgba(34,197,94,.2);" x-data="{ showReanalyze: false }">
        <div style="display:flex;align-items:center;justify-content:space-between;cursor:pointer;" @click="showReanalyze = !showReanalyze">
            <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:18px;">🔄</span>
                <div>
                    <div style="font-size:14px;font-weight:700;color:var(--text);">Re-Analyze with Corrected Details</div>
                    <div style="font-size:12px;color:var(--text-secondary);">Wrong road width, setback, or plot dimensions? Enter the correct values and re-run the analysis.</div>
                </div>
            </div>
            <svg :style="showReanalyze ? 'transform:rotate(180deg)' : ''" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition:transform .2s;flex-shrink:0;color:var(--text-muted);"><polyline points="6 9 12 15 18 9"/></svg>
        </div>

        <div x-show="showReanalyze" x-transition style="margin-top:18px;border-top:1px solid var(--border);padding-top:18px;">
            <div style="background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.15);border-radius:8px;padding:10px 12px;margin-bottom:16px;font-size:12px;color:#93c5fd;display:flex;align-items:flex-start;gap:8px;">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-top:2px;flex-shrink:0;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                <span>Only fill in the values you want to correct. A new report will be created linked to this one.
                    <strong>In states with road-width-based height rules, changing road width or front setback will recalculate the max permissible height.</strong>
                </span>
            </div>

            <form method="POST" action="{{ route('portal.report.reanalyze', $report->id) }}">
                @csrf

                {{-- Current vs Override comparison --}}
                <div style="font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Plot & Road Details</div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
                    <div>
                        <label class="form-label" style="font-size:11px;">
                            Plot Area (sqm)
                            <span style="color:var(--text-muted);font-weight:400;">— current: {{ $report->plot_area_sqm ? number_format($report->plot_area_sqm, 2) : '—' }}</span>
                        </label>
                        <input type="number" name="plot_area_sqm" class="form-input" step="0.01" min="10"
                            placeholder="{{ $report->plot_area_sqm ?? 'Enter' }}" style="font-size:12px;">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">
                            Road Width (m)
                            <span style="color:var(--text-muted);font-weight:400;">— current: {{ $report->road_width_m ?? '—' }}m</span>
                        </label>
                        <input type="number" name="road_width_m" class="form-input" step="0.1" min="1"
                            placeholder="{{ $report->road_width_m ?? 'Enter' }}" style="font-size:12px;">
                        @if(($report->result_data['height_rule_type'] ?? 'fixed') === 'road_width_based')
                        <div style="font-size:10px;color:#fbbf24;margin-top:3px;">⚠ Changing this will affect max building height</div>
                        @endif
                    </div>
                </div>

                <div style="font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Setback Corrections</div>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
                    <div>
                        <label class="form-label" style="font-size:11px;">
                            Front Setback (m)
                            <span style="color:var(--text-muted);font-weight:400;">— current: {{ $report->setback_summary['front_m'] ?? '—' }}m</span>
                        </label>
                        <input type="number" name="front_setback_m" class="form-input" step="0.1" min="0"
                            placeholder="{{ $report->setback_summary['front_m'] ?? 'Enter' }}" style="font-size:12px;">
                        @if(($report->result_data['height_rule_type'] ?? 'fixed') === 'road_width_based')
                        <div style="font-size:10px;color:#fbbf24;margin-top:3px;">⚠ May affect max height if extra setback bonus applies</div>
                        @endif
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">
                            Side Setback (m)
                            <span style="color:var(--text-muted);font-weight:400;">— current: {{ $report->setback_summary['side_m'] ?? '—' }}m</span>
                        </label>
                        <input type="number" name="side_setback_m" class="form-input" step="0.1" min="0"
                            placeholder="{{ $report->setback_summary['side_m'] ?? 'Enter' }}" style="font-size:12px;">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">
                            Rear Setback (m)
                            <span style="color:var(--text-muted);font-weight:400;">— current: {{ $report->setback_summary['rear_m'] ?? '—' }}m</span>
                        </label>
                        <input type="number" name="rear_setback_m" class="form-input" step="0.1" min="0"
                            placeholder="{{ $report->setback_summary['rear_m'] ?? 'Enter' }}" style="font-size:12px;">
                    </div>
                </div>

                <div style="font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Plot Dimensions (optional)</div>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
                    <div>
                        <label class="form-label" style="font-size:11px;">Width (m)</label>
                        <input type="number" name="plot_width_m" class="form-input" step="0.1" min="1"
                            placeholder="Width" style="font-size:12px;">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">Depth (m)</label>
                        <input type="number" name="plot_depth_m" class="form-input" step="0.1" min="1"
                            placeholder="Depth" style="font-size:12px;">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">Frontage (m)</label>
                        <input type="number" name="plot_frontage_m" class="form-input" step="0.1" min="1"
                            placeholder="Frontage" style="font-size:12px;">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">Open Sides</label>
                        <select name="num_open_sides" class="form-input" style="font-size:12px;">
                            <option value="">Same</option>
                            @for($i = 1; $i <= 4; $i++)
                            <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
                    <div>
                        <label class="form-label" style="font-size:11px;">Project Type</label>
                        <select name="project_type" class="form-input" style="font-size:12px;">
                            <option value="">Same as original ({{ ucfirst($report->project_type ?? 'residential') }})</option>
                            @foreach(['residential' => 'Residential', 'commercial' => 'Commercial', 'industrial' => 'Industrial', 'mixed' => 'Mixed Use'] as $val => $lbl)
                            <option value="{{ $val }}">{{ $lbl }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">Max Height Override (m)</label>
                        <input type="number" name="max_height_m" class="form-input" step="0.1" min="3"
                            placeholder="Leave blank for rule-based" style="font-size:12px;">
                        <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">Override the calculated height directly</div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg>
                    Re-Analyze with Corrected Details
                </button>
            </form>
        </div>
    </div>

    {{-- Disclaimer --}}
    <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:14px;font-size:11px;color:var(--text-muted);line-height:1.6;margin-bottom:20px;">
        <strong style="color:var(--text-secondary);">Disclaimer:</strong> This analysis is for informational purposes only based on publicly available regulations and indicative market data. Always consult a licensed architect, town planner, or registered valuer before making investment decisions. LandFeasibility.in accepts no liability for decisions made based on this report.
    </div>

    </div>{{-- /corrections tab --}}

    </div>{{-- /x-data tabs --}}

    @endif {{-- status completed --}}

    {{-- Action Buttons --}}
    <div style="display:flex;gap:12px;flex-wrap:wrap;">
        <a href="{{ route('portal.analyze.form') }}" class="btn btn-primary">← New Analysis</a>
        @if($report->status === 'completed')
        <a href="{{ route('portal.report.pdf', $report->id) }}" class="btn btn-secondary" target="_blank">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            PDF
        </a>
        <a href="{{ route('portal.envelope', $report->id) }}" class="btn btn-secondary">🏗 3D View</a>
        <a href="{{ route('portal.scenarios', $report->id) }}" class="btn btn-secondary">📊 Scenarios</a>
        <a href="{{ route('portal.compare', ['address1' => urlencode($report->address ?? ''), 'area1' => $report->plot_area_sqm, 'state1' => $report->state_id]) }}" class="btn btn-secondary">⚖️ Compare</a>
        <button onclick="window.print()" class="btn btn-secondary">🖨 Print</button>
        @endif
    </div>
</div>

<div id="share-toast" style="position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#22c55e;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;opacity:0;transition:all .3s;pointer-events:none;z-index:999;">
    ✓ Link copied to clipboard!
</div>
</div>{{-- .report-content --}}
</div>{{-- .report-layout --}}
@endsection

@section('scripts')
<script src="https://unpkg.com/alpinejs@3/dist/cdn.min.js" defer></script>
@if($report->latitude && $report->longitude)
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const lat = {{ $report->latitude }};
    const lng = {{ $report->longitude }};
    const map = L.map('report-map', { zoomControl: true, scrollWheelZoom: false }).setView([lat, lng], 16);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors', maxZoom: 19
    }).addTo(map);
    L.marker([lat, lng]).addTo(map)
        .bindPopup('<strong>{{ addslashes($report->address ?? 'Plot') }}</strong><br>{{ $report->zone?->name ?? '' }}')
        .openPopup();
});
</script>
@endif
<script>
function copyShareLink() {
    navigator.clipboard.writeText(window.location.href).then(() => {
        const t = document.getElementById('share-toast');
        t.style.opacity = '1'; t.style.transform = 'translateX(-50%) translateY(0)';
        setTimeout(() => { t.style.opacity='0'; t.style.transform='translateX(-50%) translateY(20px)'; }, 2800);
    });
}
</script>
@endsection