@extends('layouts.app')
@section('title', 'Smart Workflow Engine')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .workflow-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 24px;
    }
    @media (max-width: 1024px) {
        .workflow-grid { grid-template-columns: 1fr; }
    }
    .rule-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 12px;
        transition: all 0.2s ease;
    }
    .rule-item:hover {
        background: rgba(255,255,255,0.04);
        border-color: var(--accent-soft);
    }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '
        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
            <form method="POST" action="'.route('workflow.auto-assign').'">'.csrf_field().'<button class="final-btn final-btn-secondary" style="padding: 8px 16px; font-size: 11px;"><i class="bi bi-person-lines-fill"></i> Auto Assign</button></form>
            <form method="POST" action="'.route('workflow.predictions').'">'.csrf_field().'<button class="final-btn final-btn-secondary" style="padding: 8px 16px; font-size: 11px; color: var(--warning-color); border-color: rgba(245, 158, 11, 0.2);"><i class="bi bi-clock-history"></i> Delay Prediction</button></form>
            <form method="POST" action="'.route('workflow.smart-queue').'">'.csrf_field().'<button class="final-btn final-btn-secondary" style="padding: 8px 16px; font-size: 11px; color: var(--info-color); border-color: rgba(14, 165, 233, 0.2);"><i class="bi bi-sort-numeric-down"></i> Recalculate Queue</button></form>
        </div>
    ';
@endphp

@include('components.page-header', [
    'title' => 'Workflow Intelligence',
    'description' => 'Real-time automation monitoring, capacity planning, and predictive delay analysis.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Workflow' => '#'],
    'actions' => $actionsHtml,
    'stats' => [
        ['label' => 'Active Rules', 'value' => count($rules), 'icon' => 'bi-gear-fill', 'color' => 'var(--accent-green)'],
        ['label' => 'Delayed Tasks', 'value' => count($predictions), 'icon' => 'bi-exclamation-octagon-fill', 'color' => 'var(--danger-color)'],
        ['label' => 'Smart Queue', 'value' => count($queueTasks), 'icon' => 'bi-list-stars', 'color' => 'var(--warning-color)'],
        ['label' => 'Availability', 'value' => '84%', 'icon' => 'bi-pie-chart-fill', 'color' => 'var(--info-color)']
    ]
])

<div class="workflow-grid">
    <!-- Automation Rules -->
    <div class="final-card">
        <h3 class="final-card-title"><i class="bi bi-magic" style="color: var(--warning-color)"></i> Automation Rules Engine</h3>
        
        <form method="POST" action="{{ route('workflow.rules.store') }}" style="display: flex; gap: 12px; margin-bottom: 24px;">
            @csrf
            <div style="flex: 2;">
                <input class="final-input" name="name" placeholder="Rule identifier (e.g. QA Auto-Route)" required>
            </div>
            <div style="flex: 1.5;">
                <select class="final-select" name="rule_type">
                    <option value="auto_assign">Auto Assign</option>
                    <option value="delay_prediction">Delay Prediction</option>
                    <option value="dependency_alert">Dependency Alert</option>
                    <option value="smart_queue">Smart Queue</option>
                </select>
            </div>
            <button class="final-btn final-btn-primary" style="padding: 10px 20px;">Add</button>
        </form>

        <div style="max-height: 300px; overflow-y: auto; padding-right: 8px;">
            @forelse($rules as $rule)
            <div class="rule-item">
                <div>
                    <strong style="display: block; font-size: 14px; margin-bottom: 4px;">{{ $rule->name }}</strong>
                    <div style="font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
                        <i class="bi bi-tag"></i> {{ str_replace('_', ' ', $rule->rule_type) }}
                    </div>
                </div>
                <div>
                    <span class="final-badge {{ $rule->is_active ? 'badge-medium' : 'badge-low' }}" style="color: {{ $rule->is_active ? 'var(--accent-color)' : '' }}; border-color: {{ $rule->is_active ? 'var(--accent-soft)' : '' }}">
                        {{ $rule->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
            @empty
            <div class="final-empty-state">
                <i class="bi bi-slash-circle"></i>
                <p>No active rules configured</p>
            </div>
            @endforelse
        </div>
    </div>

    <!-- Developer Availability -->
    <div class="final-card" style="border-top: 4px solid var(--accent-color);">
        <h3 class="final-card-title"><i class="bi bi-people"></i> Real-time Capacity Planning</h3>
        <div class="final-table-container">
            <table class="final-table">
                <thead>
                    <tr>
                        <th>Engineer</th>
                        <th>Availability</th>
                        <th style="text-align: right;">Allocated</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($capacity as $row)
                    <tr>
                        <td>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div class="final-avatar" style="width: 32px; height: 32px; font-size: 10px;">
                                    {{ substr($row->user?->name ?? 'D', 0, 1) }}
                                </div>
                                <span style="font-weight: 700;">{{ $row->user?->name }}</span>
                            </div>
                        </td>
                        <td>
                            <div style="width: 100%; max-width: 120px;">
                                <div class="final-progress-bg" style="height: 6px; margin-bottom: 6px;">
                                    <div class="final-progress-fill" style="width: {{ $row->availability_score }}%; background: {{ $row->availability_score < 40 ? 'var(--danger-color)' : 'var(--accent-color)' }}"></div>
                                </div>
                                <span style="font-size: 10px; font-weight: 800; opacity: 0.6;">{{ $row->availability_score }}% AVAILABLE</span>
                            </div>
                        </td>
                        <td style="text-align: right;">
                            <span class="final-badge badge-low">{{ $row->allocated_minutes }}m</span>
                        </td>
                    </tr>
                    @empty 
                    <tr><td colspan="3"><div class="final-empty-state"><i class="bi bi-person-x"></i><p>No developer capacity data</p></div></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="workflow-grid">
    <!-- Delay Predictions -->
    <div class="final-card">
        <h3 class="final-card-title"><i class="bi bi-shield-exclamation" style="color: var(--danger-color)"></i> Intelligence: Risk Forecast</h3>
        <div style="max-height: 340px; overflow-y: auto; padding-right: 8px;">
            @forelse($predictions as $p)
            <div style="padding: 16px; background: rgba(244, 63, 94, 0.03); border: 1px solid rgba(244, 63, 94, 0.1); border-radius: 12px; margin-bottom: 12px;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
                    <strong style="font-size: 14px;">{{ $p->task?->title ?? 'Unknown Task' }}</strong>
                    <span class="final-badge {{ $p->risk_level == 'High' ? 'badge-critical' : 'badge-high' }}">
                        {{ $p->risk_level }} ({{ $p->score }})
                    </span>
                </div>
                <p class="final-secondary-text" style="margin: 0; font-size: 12px;">{{ $p->reason }}</p>
            </div>
            @empty
            <div class="final-empty-state">
                <i class="bi bi-check2-all" style="color: var(--accent-color)"></i>
                <p>System analysis: No critical delays predicted</p>
            </div>
            @endforelse
        </div>
    </div>

    <!-- Recommendations -->
    <div class="final-card" style="background: linear-gradient(145deg, rgba(181, 255, 59, 0.03), rgba(5, 8, 22, 0.98));">
        <h3 class="final-card-title"><i class="bi bi-robot" style="color: var(--accent-color)"></i> Smart Recommendations</h3>
        <div style="max-height: 340px; overflow-y: auto; padding-right: 8px;">
            @forelse($recommendations as $r)
            <div style="padding: 20px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 16px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <span class="final-badge badge-medium" style="background: var(--accent-soft); color: var(--accent-color);">{{ ucfirst(str_replace('_',' ',$r->recommendation_type)) }}</span>
                    <span style="font-size: 10px; font-weight: 800; opacity: 0.5;">CONFIDENCE {{ $r->confidence_score }}%</span>
                </div>
                <p style="font-size: 13px; font-weight: 600; margin-bottom: 16px; line-height: 1.5;">{{ $r->message }}</p>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div style="font-size: 10px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase;">Task: {{ $r->task?->title ?? 'N/A' }}</div>
                    @if(!$r->is_applied)
                    <form method="POST" action="{{ route('workflow.recommendations.apply', $r) }}">
                        @csrf
                        <button class="final-btn final-btn-primary" style="padding: 6px 14px; font-size: 10px;">Apply</button>
                    </form>
                    @else
                    <span class="final-badge badge-medium"><i class="bi bi-check-circle"></i> Applied</span>
                    @endif
                </div>
            </div>
            @empty
            <div class="final-empty-state">
                <i class="bi bi-lightbulb"></i>
                <p>Awaiting new system optimizations</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

<!-- Smart Queue -->
<div class="final-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-list-ol" style="color: var(--info-color)"></i> Intelligence: Smart Priority Queue</h3>
        <span class="final-secondary-text" style="font-weight: 800; letter-spacing: 0.1em;">AUTO-SORTED BY ALGORITHM</span>
    </div>
    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th>Task Identification</th>
                    <th>Priority Matrix</th>
                    <th style="text-align: right;">Automation Score</th>
                </tr>
            </thead>
            <tbody>
                @forelse($queueTasks as $t)
                <tr>
                    <td style="max-width: 400px;">
                        <div style="font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $t->title }}</div>
                        <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px;">ID: #TSK-{{ $t->id }}</div>
                    </td>
                    <td>
                        @php
                            $priority = strtolower($t->priority);
                            $badgeClass = match($priority) {
                                'critical' => 'badge-critical',
                                'high' => 'badge-high',
                                'medium' => 'badge-medium',
                                default => 'badge-low'
                            };
                        @endphp
                        <span class="final-badge {{ $badgeClass }}">{{ ucfirst($t->priority) }}</span>
                    </td>
                    <td style="text-align: right;">
                        <div class="final-score-pill">
                            <i class="bi bi-cpu"></i> {{ $t->automation_priority_score }} <span style="opacity: 0.5;">PTS</span>
                        </div>
                    </td>
                </tr>
                @empty 
                <tr><td colspan="3"><div class="final-empty-state"><i class="bi bi-list-check"></i><p>Smart Queue is empty</p></div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection