@extends('layouts.app')

@section('title', 'Production Intelligence Dashboard')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-0 fw-bold">Executive Production Intelligence</h4>
            <p class="text-muted small mb-0">AI-Powered Predictive Analytics & Real-time Risk Monitoring</p>
        </div>
        <div class="d-flex gap-2">
            <form action="{{ route('intelligence.recalculate') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-primary d-flex align-items-center">
                    <i class="bi bi-cpu me-2"></i> Recalculate AI Engine
                </button>
            </form>
            <button class="btn btn-light" onclick="window.print()">
                <i class="bi bi-printer me-2"></i> Export Report
            </button>
        </div>
    </div>

    <!-- KPI Row -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 analytics-card">
                <div class="card-body">
                    <div class="small text-muted mb-1 text-uppercase fw-bold">Factory Health</div>
                    <div class="d-flex align-items-end gap-2">
                        <h2 class="mb-0 fw-bold">{{ number_format($stats['avg_health'], 1) }}%</h2>
                        <span class="text-success small mb-1"><i class="bi bi-arrow-up"></i> Stable</span>
                    </div>
                    <div class="progress mt-3" style="height: 6px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ $stats['avg_health'] }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 analytics-card">
                <div class="card-body">
                    <div class="small text-muted mb-1 text-uppercase fw-bold">Critical Delay Risks</div>
                    <div class="d-flex align-items-end gap-2">
                        <h2 class="mb-0 fw-bold {{ $stats['critical_risks'] > 0 ? 'text-danger' : '' }}">{{ $stats['critical_risks'] }}</h2>
                        <span class="text-muted small mb-1">Orders</span>
                    </div>
                    <div class="mt-3 small">
                        <a href="{{ route('intelligence.risks') }}" class="text-decoration-none">View risk monitor <i class="bi bi-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 analytics-card">
                <div class="card-body">
                    <div class="small text-muted mb-1 text-uppercase fw-bold">Forecast Shortages</div>
                    <div class="d-flex align-items-end gap-2">
                        <h2 class="mb-0 fw-bold {{ $stats['material_shortages'] > 0 ? 'text-warning' : '' }}">{{ $stats['material_shortages'] }}</h2>
                        <span class="text-muted small mb-1">Materials</span>
                    </div>
                    <div class="mt-3 small">
                        <a href="{{ route('intelligence.forecast') }}" class="text-decoration-none">View forecast <i class="bi bi-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 analytics-card">
                <div class="card-body">
                    <div class="small text-muted mb-1 text-uppercase fw-bold">Intelligence Alerts</div>
                    <div class="d-flex align-items-end gap-2">
                        <h2 class="mb-0 fw-bold text-primary">{{ $stats['active_alerts'] }}</h2>
                        <span class="badge bg-primary-subtle text-primary rounded-pill mb-1">Active</span>
                    </div>
                    <div class="mt-3 small text-muted">Real-time anomaly detection</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Top Production Risks -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold text-primary"><i class="bi bi-exclamation-triangle-fill me-2"></i>Top Production Risks</h6>
                    <a href="{{ route('intelligence.risks') }}" class="btn btn-sm btn-light">Full Monitor</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4">Production Order</th>
                                    <th>Planned Finish</th>
                                    <th>Predicted Finish</th>
                                    <th>Delay Probability</th>
                                    <th class="text-end pe-4">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($predictions as $pred)
                                    <tr>
                                        <td class="ps-4">
                                            <div class="fw-bold">{{ $pred->workOrder->work_order_no }}</div>
                                            <small class="text-muted">{{ $pred->workOrder->product->name }}</small>
                                        </td>
                                        <td>{{ optional(Carbon\Carbon::parse($pred->workOrder->end_date))->format('M d, H:i') ?? 'N/A' }}</td>
                                        <td class="text-danger fw-bold">{{ $pred->predicted_completion_at->format('M d, H:i') }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="progress flex-grow-1" style="height: 4px; width: 60px;">
                                                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $pred->delay_probability }}%"></div>
                                                </div>
                                                <small class="fw-bold">{{ $pred->delay_probability }}%</small>
                                            </div>
                                        </td>
                                        <td class="text-end pe-4">
                                            <span class="badge {{ $pred->risk_level == 'high' ? 'bg-danger' : 'bg-warning' }} rounded-pill">
                                                {{ strtoupper($pred->risk_level) }} RISK
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-4 text-muted">No high-risk production orders detected.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Machine Health Heatmap -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold text-primary"><i class="bi bi-grid-3x3-gap me-2"></i>Asset Health Overview</h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        @foreach($healthScores as $hs)
                            <div class="col-md-4 mb-3">
                                <div class="p-3 border rounded-3 bg-light">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div class="fw-bold small text-truncate" style="max-width: 120px;">{{ $hs->machine->name }}</div>
                                        <span class="badge {{ $hs->health_score > 80 ? 'bg-success' : ($hs->health_score > 60 ? 'bg-warning' : 'bg-danger') }} small">
                                            {{ $hs->health_score }}%
                                        </span>
                                    </div>
                                    <div class="text-muted smallest mb-2">Reliability Score</div>
                                    <div class="small">
                                        @if($hs->health_score < 60)
                                            <span class="text-danger fw-bold"><i class="bi bi-tools"></i> Maint. Required</span>
                                        @else
                                            <span class="text-success"><i class="bi bi-shield-check"></i> Operational</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="card-footer bg-white border-0 text-center pb-3">
                    <a href="{{ route('intelligence.machines') }}" class="small fw-bold text-decoration-none">View All Assets & Predictions</a>
                </div>
            </div>
        </div>

        <!-- Sidebar: Alerts & Insights -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-bell-fill me-2 text-danger"></i>AI Risk Alerts</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($alerts as $alert)
                            <div class="list-group-item p-3 border-0 border-bottom">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="badge bg-{{ $alert->severity == 'critical' ? 'danger' : 'warning' }}-subtle text-{{ $alert->severity == 'critical' ? 'danger' : 'warning' }} smallest text-uppercase">
                                        {{ $alert->type }}
                                    </span>
                                    <small class="text-muted">{{ $alert->created_at->diffForHumans() }}</small>
                                </div>
                                <div class="fw-bold small mb-1">{{ $alert->title }}</div>
                                <p class="text-muted smaller mb-2">{{ $alert->message }}</p>
                                <form action="{{ route('intelligence.alerts.read', $alert->id) }}" method="POST">
                                    @csrf
                                    <button class="btn btn-sm btn-link p-0 text-decoration-none smaller fw-bold">Acknowledge</button>
                                </form>
                            </div>
                        @empty
                            <div class="p-4 text-center text-muted">
                                <i class="bi bi-check-circle display-4 mb-2 d-block opacity-25"></i>
                                <div class="small">No active intelligence alerts.</div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Smart Optimization Placeholder -->
            <div class="card border-0 shadow-sm bg-primary-subtle">
                <div class="card-body">
                    <h6 class="fw-bold text-primary mb-3"><i class="bi bi-lightning-charge-fill me-2"></i>Smart Optimization</h6>
                    <div class="p-3 bg-white rounded-3 shadow-sm border-start border-4 border-primary mb-3">
                        <div class="fw-bold small mb-1">Task Rescheduling Suggested</div>
                        <p class="text-muted smaller mb-2">Move order PR-1101 to Line C to avoid a predicted bottleneck in Line A.</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-success fw-bold smaller">+ 2.5h Saved</span>
                            <button class="btn btn-sm btn-primary py-0 px-2 smallest shadow-sm">Apply</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .analytics-card { transition: transform 0.2s; cursor: default; }
        .analytics-card:hover { transform: translateY(-3px); }
        .smallest { font-size: 0.7rem; }
        .smaller { font-size: 0.8rem; }
        .bg-primary-subtle { background-color: rgba(13, 110, 253, 0.05) !important; }
        @media print {
            .btn, .breadcrumb, form { display: none !important; }
            .card { border: 1px solid #ddd !important; box-shadow: none !important; }
        }
    </style>
@endsection