@extends('layouts.main')

@section('title', $notebook->name . ' — Vena ETL Notebooks')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('vena-notebooks.index') }}" class="btn btn-sm btn-outline-secondary me-3">
            <i class="bx bx-arrow-back me-1"></i>All Notebooks
        </a>
        <div class="flex-grow-1">
            <h4 class="mb-0 fw-bold">
                <i class="bx bx-transfer-alt me-2" style="color:#007aff;"></i>{{ $notebook->name }}
            </h4>
            <small class="text-muted">{{ $notebook->workspace->name ?? '—' }}</small>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-success btn-sm" onclick="runNow()" id="runBtn">
                <i class="bx bx-play me-1"></i>Run Now
            </button>
            @if($notebook->status === 'paused')
            <button class="btn btn-outline-primary btn-sm" onclick="resumeNotebook()">
                <i class="bx bx-play-circle me-1"></i>Resume
            </button>
            @else
            <button class="btn btn-outline-warning btn-sm" onclick="pauseNotebook()">
                <i class="bx bx-pause me-1"></i>Pause
            </button>
            @endif
            <button class="btn btn-outline-danger btn-sm" onclick="deleteNotebook()">
                <i class="bx bx-trash me-1"></i>Delete
            </button>
        </div>
    </div>

    <div class="row g-4">
        {{-- Configuration card --}}
        <div class="col-md-5">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent fw-semibold">Configuration</div>
                <div class="card-body">
                    <dl class="row small mb-0">
                        <dt class="col-5 text-muted">Status</dt>
                        <dd class="col-7">
                            <span class="{{ $notebook->status_badge_class }}">{{ $notebook->status_label }}</span>
                        </dd>

                        <dt class="col-5 text-muted">Source Table</dt>
                        <dd class="col-7"><code>{{ $notebook->source_table_name }}</code></dd>

                        <dt class="col-5 text-muted">Vena Template ID</dt>
                        <dd class="col-7"><code class="small">{{ $notebook->vena_template_id }}</code></dd>

                        <dt class="col-5 text-muted">Transfer Mode</dt>
                        <dd class="col-7">
                            <span class="badge bg-secondary">
                                {{ $notebook->transfer_mode === 'data_array' ? 'Data Array' : 'CSV File' }}
                            </span>
                        </dd>

                        <dt class="col-5 text-muted">Include Headers</dt>
                        <dd class="col-7">{{ $notebook->include_headers ? 'Yes' : 'No' }}</dd>

                        @if($notebook->filter_expression)
                        <dt class="col-5 text-muted">Filter</dt>
                        <dd class="col-7"><code class="small">{{ $notebook->filter_expression }}</code></dd>
                        @endif

                        <dt class="col-5 text-muted">Fabric Notebook ID</dt>
                        <dd class="col-7">
                            <code class="small">{{ Str::limit($notebook->fabric_notebook_id, 18) }}</code>
                        </dd>

                        @if($notebook->last_run_at)
                        <dt class="col-5 text-muted">Last Run</dt>
                        <dd class="col-7">
                            {{ $notebook->last_run_at->diffForHumans() }}
                            @if($notebook->last_rows_sent !== null)
                                <span class="text-muted">({{ number_format($notebook->last_rows_sent) }} rows)</span>
                            @endif
                        </dd>
                        @endif

                        <dt class="col-5 text-muted">Created</dt>
                        <dd class="col-7">{{ $notebook->created_at->format('d M Y') }}</dd>
                    </dl>
                </div>
            </div>

            {{-- Vena connection card --}}
            @if($notebook->venaConnection)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-transparent fw-semibold">Vena Connection</div>
                <div class="card-body small">
                    <div><span class="text-muted">Name:</span> {{ $notebook->venaConnection->name }}</div>
                    <div>
                        <span class="text-muted">Hub:</span>
                        <span class="badge bg-secondary ms-1">{{ $notebook->venaConnection->vena_hub }}</span>
                    </div>
                </div>
            </div>
            @endif

            {{-- Column mapping card --}}
            @if(!empty($notebook->column_mapping))
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-transparent fw-semibold">Column Mapping</div>
                <div class="card-body p-0">
                    <table class="table table-sm small mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Lakehouse Column</th>
                                <th>Vena Column</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($notebook->column_mapping as $src => $dst)
                            <tr>
                                <td><code>{{ $src }}</code></td>
                                <td><code>{{ $dst }}</code></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

            {{-- Schedule card --}}
            @if($notebook->schedule_config)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-transparent fw-semibold">Schedule</div>
                <div class="card-body small">
                    @php $sched = $notebook->schedule_config; @endphp
                    <div><span class="text-muted">Frequency:</span>
                        {{ ucfirst($sched['frequency'] ?? '—') }}</div>
                    <div><span class="text-muted">Time:</span>
                        {{ $sched['time'] ?? '—' }} {{ $sched['timezone'] ?? 'UTC' }}</div>
                    @if(!empty($sched['days']))
                    <div><span class="text-muted">Days:</span>
                        {{ implode(', ', array_map('ucfirst', $sched['days'])) }}</div>
                    @endif
                </div>
            </div>
            @endif
        </div>

        {{-- Run history --}}
        <div class="col-md-7">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent fw-semibold d-flex justify-content-between align-items-center">
                    Run History
                    <button class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
                        <i class="bx bx-refresh"></i>
                    </button>
                </div>
                <div class="card-body p-0">
                    @if($notebook->syncHistory->isEmpty())
                        <div class="text-center text-muted py-4">
                            <i class="bx bx-history" style="font-size:2rem;"></i>
                            <p class="mt-2 small">No runs yet.</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0 small">
                                <thead class="table-light">
                                    <tr>
                                        <th>Started</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Rows</th>
                                        <th>Duration</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($notebook->syncHistory as $run)
                                <tr>
                                    <td>{{ $run->started_at ? $run->started_at->format('d M H:i') : '—' }}</td>
                                    <td>
                                        <span class="badge {{ $run->run_type === 'manual' ? 'bg-secondary' : 'bg-info text-dark' }}">
                                            {{ ucfirst($run->run_type) }}
                                        </span>
                                    </td>
                                    <td>
                                        @switch($run->status)
                                            @case('success')
                                                <span class="badge bg-success">Success</span> @break
                                            @case('failed')
                                                <span class="badge bg-danger">Failed</span> @break
                                            @default
                                                <span class="badge bg-secondary">{{ ucfirst($run->status) }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        @if($run->rows_sent !== null)
                                            {{ number_format($run->rows_sent) }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $run->duration_seconds ? $run->duration_seconds . 's' : '—' }}</td>
                                </tr>
                                @if($run->error_message)
                                <tr>
                                    <td colspan="5" class="text-danger small py-1">
                                        <i class="bx bx-error-circle me-1"></i>{{ $run->error_message }}
                                    </td>
                                </tr>
                                @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

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 runNow() {
    if (!confirm('Trigger an immediate run?')) return;
    const btn = document.getElementById('runBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Running…';
    const json = await apiCall('/api/vena-notebooks/' + NB_ID + '/run');
    btn.disabled = false;
    btn.innerHTML = '<i class="bx bx-play me-1"></i>Run Now';
    alert(json.success
        ? 'Run triggered! Refresh in a few minutes to see results.'
        : ('Error: ' + json.message));
    if (json.success) location.reload();
}

async function pauseNotebook() {
    if (!confirm('Pause scheduled execution?')) return;
    const json = await apiCall('/api/vena-notebooks/' + NB_ID + '/pause', 'PATCH');
    alert(json.success ? 'Notebook paused.' : json.message);
    if (json.success) location.reload();
}

async function resumeNotebook() {
    const json = await apiCall('/api/vena-notebooks/' + NB_ID + '/resume', 'PATCH');
    alert(json.success ? 'Notebook resumed.' : json.message);
    if (json.success) location.reload();
}

async function deleteNotebook() {
    if (!confirm('Delete this notebook? The Fabric notebook item will be kept.')) return;
    const json = await apiCall('/api/vena-notebooks/' + NB_ID, 'DELETE');
    if (json.success) { window.location.href = '/vena-notebooks'; }
    else { alert('Error: ' + json.message); }
}
</script>
@endsection