@extends('layouts.main')

@section('title', 'Vena ETL Notebooks — Prolytics Connect')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-0 fw-bold">
                <i class="bx bx-transfer-alt me-2" style="color:#007aff;"></i>Vena ETL Notebooks
            </h4>
            <small class="text-muted">Fabric Notebooks that send Lakehouse data to Vena ETL templates</small>
        </div>
        <a href="{{ route('vena-notebooks.create') }}" class="btn btn-primary"
           style="background:#007aff; border-color:#007aff;">
            <i class="bx bx-plus me-1"></i>New Vena Notebook
        </a>
    </div>

    @if($notebooks->isEmpty())
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5">
                <i class="bx bx-transfer-alt" style="font-size:3rem; color:#ced4da;"></i>
                <h5 class="mt-3 text-muted">No Vena notebooks yet</h5>
                <p class="text-muted small mb-4">
                    Create your first Vena notebook to start sending Lakehouse data to your Vena ETL templates.
                </p>
                <a href="{{ route('vena-notebooks.create') }}" class="btn btn-primary"
                   style="background:#007aff; border-color:#007aff;">
                    <i class="bx bx-plus me-1"></i>Create Vena Notebook
                </a>
            </div>
        </div>
    @else
        <div class="row g-3">
            @foreach($notebooks as $nb)
            <div class="col-md-6 col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <div class="d-flex align-items-center">
                                <div class="me-3"
                                     style="width:40px;height:40px;background:rgba(0,122,255,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                    <i class="bx bx-transfer-alt" style="font-size:1.4rem;color:#007aff;"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-semibold">{{ $nb->name }}</h6>
                                    <small class="text-muted">{{ $nb->workspace->name ?? '—' }}</small>
                                </div>
                            </div>
                            <span class="{{ $nb->status_badge_class }}">{{ $nb->status_label }}</span>
                        </div>

                        <div class="small text-muted mb-2">
                            <span class="badge bg-light text-dark me-1">
                                <i class="bx bx-table me-1"></i>{{ $nb->source_table_name }}
                            </span>
                            <span class="badge bg-light text-dark me-1">
                                {{ $nb->transfer_mode === 'data_array' ? 'Array' : 'CSV' }}
                            </span>
                        </div>

                        @if($nb->venaConnection)
                        <div class="small text-muted mb-2">
                            <i class="bx bx-link me-1"></i>
                            {{ $nb->venaConnection->name }}
                            <span class="badge bg-secondary ms-1" style="font-size:0.65rem;">
                                {{ $nb->venaConnection->vena_hub }}
                            </span>
                        </div>
                        @endif

                        @if($nb->last_run_at)
                        <div class="small text-muted">
                            <i class="bx bx-time-five me-1"></i>
                            Last run: {{ $nb->last_run_at->diffForHumans() }}
                            @if($nb->last_rows_sent !== null)
                                &mdash; {{ number_format($nb->last_rows_sent) }} rows
                            @endif
                        </div>
                        @endif
                    </div>
                    <div class="card-footer bg-transparent d-flex justify-content-between align-items-center py-2">
                        <a href="{{ route('vena-notebooks.show', $nb->id) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bx bx-show me-1"></i>Details
                        </a>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-success"
                                    onclick="runNotebook({{ $nb->id }}, this)" title="Run now">
                                <i class="bx bx-play"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger"
                                    onclick="deleteNotebook({{ $nb->id }}, this)" title="Delete">
                                <i class="bx bx-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-4">{{ $notebooks->links() }}</div>
    @endif
</div>
@endsection

@section('scripts')
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]').content;

async function apiCall(url, method = 'POST') {
    const res = await fetch(url, {
        method, credentials: 'same-origin',
        headers: {
            'X-CSRF-TOKEN': CSRF,
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
    });
    return res.json();
}

async function runNotebook(id, btn) {
    if (!confirm('Trigger an immediate run for this notebook?')) return;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
    const json = await apiCall('/api/vena-notebooks/' + id + '/run');
    btn.disabled = false;
    btn.innerHTML = '<i class="bx bx-play"></i>';
    alert(json.success ? 'Run triggered!' : ('Error: ' + json.message));
    if (json.success) location.reload();
}

async function deleteNotebook(id, btn) {
    if (!confirm('Delete this Vena notebook? (Fabric notebook item is kept)')) return;
    btn.disabled = true;
    const json = await apiCall('/api/vena-notebooks/' + id, 'DELETE');
    if (json.success) { location.reload(); } else { alert('Error: ' + json.message); btn.disabled = false; }
}
</script>
@endsection