@extends('layouts.main')

@section('title', 'Workspace: ' . $workspace->name)

@section('content')
    <!-- start page content -->
    
    <!-- Storage Usage Alert Banner -->
    @auth
    @if(Auth::user()->hasRole('company') || Auth::user()->hasRole('company-user'))
        @if(isset($isStorageFull) && $isStorageFull)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                        <i class="bx bx-error-circle fs-4 me-2"></i>
                        <div>
                            <strong>Storage Full!</strong> Your storage usage is at {{ number_format($storageUsagePercentage ?? 0, 1) }}%. 
                            All job executions have been disabled. Please free up storage space or upgrade your plan to continue running jobs.
                        </div>
                    </div>
                </div>
            </div>
        @elseif(isset($storageUsagePercentage) && $storageUsagePercentage >= 90)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-warning d-flex align-items-center" role="alert">
                        <i class="bx bx-error fs-4 me-2"></i>
                        <div>
                            <strong>Storage Critical!</strong> Your storage usage is at {{ number_format($storageUsagePercentage ?? 0, 1) }}%. 
                            Please free up storage space or upgrade your plan to avoid job execution interruptions.
                        </div>
                    </div>
                </div>
            </div>
        @elseif(isset($storageUsagePercentage) && $storageUsagePercentage >= 80)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-info d-flex align-items-center" role="alert">
                        <i class="bx bx-info-circle fs-4 me-2"></i>
                        <div>
                            <strong>Storage High!</strong> Your storage usage is at {{ number_format($storageUsagePercentage ?? 0, 1) }}%. 
                            Consider freeing up storage space or upgrading your plan.
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endif
    @endauth
    
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card mb-3">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar">{{ strtoupper(substr($workspace->name, 0, 1)) }}</div>
                        <div class="block-heading">
                            <h3>Workspace: {{ $workspace->name }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0 d-none">
                                <i class="settings-icon-sm"></i>
                                Workspace Details
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2 d-none">
                        <a href="{{ route('workspaces.edit', $workspace->id) }}" class="btn btn-outline-primary">
                            <i class="bx bx-edit"></i> Edit Workspace
                        </a>
                        <a href="#" class="btn btn-primary d-none">Create Data Pipeline</a>
                    </div>
                </div>

                <!-- Workspace Information -->
                <div class="workspace-info mb-4">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item mb-3">
                                <strong>Workspace Name:</strong> {{ $workspace->name }}
                            </div>
                            <div class="info-item mb-3">
                                <strong>Description:</strong> {{ $workspace->description ?? 'No description provided' }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item mb-3">
                                <strong>Created:</strong> {{ $workspace->created_at->format('M d, Y H:i A') }}
                            </div>
                            <div class="info-item mb-3">
                                <strong>Last Updated:</strong> {{ $workspace->updated_at->format('M d, Y H:i A') }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Workspace Items Section -->
                <div class="workspace-items-section">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4>Workspace Items</h4>
                        <span class="badge bg-primary">{{ $workspace->workspaceItems->count() }} Item(s)</span>
                    </div>

                    @if($workspace->workspaceItems->count() > 0)
                        <div class="row">
                            @foreach($workspace->workspaceItems as $index => $item)
                                <div class="col-md-6 mb-4">
                                    <div class="card border-0 shadow-sm h-100">
                                        <div class="card-header bg-light border-0 d-flex justify-content-between align-items-center">
                                            <h6 class="mb-0 fw-bold">{{ $item->name }}</h6>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="badge bg-primary">{{ $item->type }}</span>
                                                @if($isStorageFull ?? false)
                                                    <button type="button" class="btn btn-danger btn-sm" 
                                                            disabled
                                                            title="Storage Full ({{ number_format($storageUsagePercentage ?? 0, 1) }}%) - Cannot run jobs until storage is freed">
                                                        <i class="bx bx-error-circle"></i> Storage Full
                                                    </button>
                                                @else
                                                    <button type="button" class="btn btn-primary btn-sm run-job-btn" 
                                                            data-workspace="{{ $workspace->fabric_workspace_id }}"
                                                            data-item="{{ $item->fabric_item_id }}"
                                                            data-job-type="{{ $item->type }}"
                                                            data-workspace-name="{{ $workspace->name }}"
                                                            data-item-name="{{ $item->name }}"
                                                            onclick="handleRunJob(this)">
                                                        <i class="bx bx-play-circle"></i> Run
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-6">
                                                    <div class="text-center">
                                                        <i class="bx bx-cube text-primary fs-4"></i>
                                                        <div class="mt-2">
                                                            <small class="text-muted d-block">Fabric ID</small>
                                                            <span class="fw-semibold">{{ $item->fabric_item_id }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="text-center">
                                                        <i class="bx bx-calendar text-success fs-4"></i>
                                                        <div class="mt-2">
                                                            <small class="text-muted d-block">Created</small>
                                                            <span class="fw-semibold">{{ $item->created_at->format('M d, Y') }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="empty-state">
                                <i class="bx bx-cube" style="font-size: 3rem; opacity: 0.3;"></i>
                                <h5 class="text-muted">No Workspace Items Found</h5>
                                <p class="text-muted mb-4">This workspace doesn't have any items yet.</p>
                                <a href="#" class="btn btn-primary">Create Your First Pipeline</a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Actions Card -->
            <div class="white-box-card">
                <h5 class="mb-3">Workspace Actions</h5>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ route('workspaces.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Back to Workspaces
                    </a>
                    <a href="{{ route('workspaces.edit', $workspace->id) }}" class="btn btn-outline-primary d-none">
                        <i class="bx bx-edit"></i> Edit Workspace
                    </a>
                    <form action="{{ route('workspaces.destroy', $workspace->id) }}" method="POST" class="d-inline d-none">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline-danger" 
                                onclick="return confirm('Are you sure you want to delete this workspace? This action cannot be undone.')">
                            <i class="bx bx-trash"></i> Delete Workspace
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
    // Handle Run Job button click
    window.handleRunJob = function(button) {
        console.log('Run job handler called!', button);
        
        const workspaceId = button.getAttribute('data-workspace');
        const itemId = button.getAttribute('data-item');
        const jobType = button.getAttribute('data-job-type');
        const workspaceName = button.getAttribute('data-workspace-name');
        const itemName = button.getAttribute('data-item-name');
        
        // Show bootbox confirmation dialog
        bootbox.confirm({
            title: "Confirm Job Execution",
            message: `Are you sure you want to run the job for "<strong>${itemName}</strong>" in workspace "<strong>${workspaceName}</strong>"?`,
            buttons: {
                confirm: {
                    label: 'Yes, Run Job',
                    className: 'btn-primary'
                },
                cancel: {
                    label: 'Cancel',
                    className: 'btn-secondary'
                }
            },
            callback: function (result) {
                if (result) {
                    // Show loading message
                    const originalText = button.innerHTML;
                    button.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Running...';
                    button.style.pointerEvents = 'none';
                    
                    // Call AJAX to run the job
                    fetch(`/workspaces/${workspaceId}/items/${itemId}/run-job`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            job_type: jobType,
                            workspace_name: workspaceName,
                            item_name: itemName
                        })
                    })
                    .then(response => {
                        // Check if response is ok
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                        }
                        
                        // Check content type
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            return response.text().then(text => {
                                throw new Error(`Expected JSON but got: ${text.substring(0, 200)}...`);
                            });
                        }
                        
                        return response.json();
                    })
                    .then(data => {
                        // Restore button
                        button.innerHTML = originalText;
                        button.style.pointerEvents = 'auto';
                        
                        if (data.success) {
                            bootbox.alert({
                                title: "Job Started Successfully",
                                message: `
                                    <div class="alert alert-success">
                                        <i class="bx bx-check-circle"></i> Job started successfully for <strong>${itemName}</strong>!
                                        <hr>                                            
                                        <strong>Status:</strong> ${data.status || 'Running'}<br>
                                        <strong>Workspace:</strong> ${workspaceName}
                                    </div>
                                `,
                                className: 'modal-success'
                            });
                        } else {
                            bootbox.alert({
                                title: "Job Failed",
                                message: `
                                    <div class="alert alert-danger">
                                        <i class="bx bx-error-circle"></i> Failed to start job: <br>
                                        <strong>${data.message || 'Unknown error'}</strong>
                                    </div>
                                `,
                                className: 'modal-danger'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        // Restore button
                        button.innerHTML = originalText;
                        button.style.pointerEvents = 'auto';
                        
                        bootbox.alert({
                            title: "Error Running Job",
                            message: `
                                <div class="alert alert-danger">
                                    <i class="bx bx-error-circle"></i> An error occurred while running the job:<br>
                                    <strong>${error.message}</strong>
                                    <hr>
                                    <small>Please check the browser console for more details.</small>
                                </div>
                            `,
                            className: 'modal-danger'
                        });
                    });
                }
            }
        });
    };

    // Initialize tooltips and other functionality
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
@endsection