@extends('portal.layout')
@section('title', 'Approval Predictor')

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

        <div style="margin-bottom:28px;">
            <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#2dd4bf;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
                <i data-lucide="check-circle" style="width:12px;height:12px;"></i> Approval Intelligence
            </div>
            <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Approval Predictor</h1>
            <p style="font-size:13px;color:var(--text-secondary);">AI predicts approval probability based on compliance checks, risk factors, and regulatory alignment.</p>
        </div>

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

        <form method="POST" action="{{ route('portal.approval.predict', $report) }}" style="margin-bottom:24px;">
            @csrf
            <button type="submit" class="btn btn-primary">
                <i data-lucide="activity" style="width:14px;height:14px;"></i> Run Prediction
            </button>
        </form>

        @if($prediction)
        @php $color = $prediction->probability_color; @endphp

        {{-- Probability Gauge --}}
        <div class="card" style="padding:28px;margin-bottom:24px;text-align:center;">
            <div style="font-size:12px;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px;">Approval Probability</div>
            <div style="font-size:56px;font-weight:800;color:{{ $color }};">{{ $prediction->approval_probability }}%</div>
            <span class="badge" style="background:{{ $color }}20;color:{{ $color }};font-size:13px;padding:6px 16px;">
                {{ $prediction->probability_label }}
            </span>

        </div>

        {{-- Compliance Checks --}}
        @if($prediction->compliance_checks && is_array($prediction->compliance_checks))
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:14px;">Compliance Checks</div>
            <div style="display:grid;gap:6px;">
                @foreach($prediction->compliance_checks as $check)
                @php
                    $pass = $check['status'] ?? 'unknown';
                    $checkColor = $pass === 'pass' ? '#22c55e' : ($pass === 'warning' ? '#eab308' : '#ef4444');
                    $checkIcon = $pass === 'pass' ? 'check-circle' : ($pass === 'warning' ? 'alert-triangle' : 'x-circle');
                @endphp
                <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg);border-radius:6px;">
                    <i data-lucide="{{ $checkIcon }}" style="width:14px;height:14px;color:{{ $checkColor }};flex-shrink:0;"></i>
                    <div style="flex:1;">
                        <span style="font-size:13px;font-weight:500;">{{ $check['rule'] ?? '' }}</span>
                        @if(!empty($check['detail']))
                        <div style="font-size:11px;color:var(--text-secondary);">{{ $check['detail'] }}</div>
                        @endif
                    </div>
                    <span class="badge badge-{{ $pass === 'pass' ? 'green' : ($pass === 'warning' ? 'yellow' : 'red') }}">{{ ucfirst($pass) }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Risk Factors --}}
        @if($prediction->risk_factors && is_array($prediction->risk_factors))
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:14px;">Risk Factors</div>
            @foreach($prediction->risk_factors as $rf)
            @php
                $rfSeverity = is_array($rf) ? ($rf['severity'] ?? 'medium') : 'medium';
                $rfColor = $rfSeverity === 'high' ? '#ef4444' : '#f97316';
                $rfText = is_array($rf) ? ($rf['factor'] ?? '') . ' — ' . ($rf['description'] ?? '') : $rf;
            @endphp
            <div style="display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);">
                <i data-lucide="alert-circle" style="width:14px;height:14px;color:{{ $rfColor }};flex-shrink:0;margin-top:2px;"></i>
                <div>
                    <span style="font-size:10px;font-weight:600;text-transform:uppercase;color:{{ $rfColor }};margin-right:6px;">{{ $rfSeverity }}</span>
                    <span style="font-size:13px;color:var(--text-secondary);">{{ $rfText }}</span>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Recommendations --}}
        @if($prediction->recommendations && is_array($prediction->recommendations))
        <div class="card" style="padding:20px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:14px;">Recommendations</div>
            @foreach($prediction->recommendations as $rec)
            @php
                $recText = is_array($rec) ? ($rec['action'] ?? ($rec['text'] ?? json_encode($rec))) : $rec;
                $priority = is_array($rec) ? ($rec['priority'] ?? '') : '';
                $prioColor = match($priority) { 'critical' => '#ef4444', 'important' => '#f97316', 'advisory' => '#eab308', 'positive' => '#22c55e', default => '#eab308' };
            @endphp
            <div style="display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);">
                <i data-lucide="lightbulb" style="width:14px;height:14px;color:{{ $prioColor }};flex-shrink:0;margin-top:2px;"></i>
                <div>
                    @if($priority)<span style="font-size:10px;font-weight:600;text-transform:uppercase;color:{{ $prioColor }};margin-right:6px;">{{ $priority }}</span>@endif
                    <span style="font-size:13px;color:var(--text-secondary);">{{ $recText }}</span>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        @else
        <div class="card" style="padding:40px;text-align:center;">
            <i data-lucide="check-circle" style="width:36px;height:36px;color:var(--text-muted);margin-bottom:12px;"></i>
            <div style="font-size:15px;font-weight:600;margin-bottom:6px;">No Prediction Yet</div>
            <div style="font-size:13px;color:var(--text-secondary);">Click "Run Prediction" to get an AI-powered approval probability estimate.</div>
        </div>
        @endif
    </div>
</div>
@endsection