@extends('layouts.main')

@section('title', $notebook->name . ' — Deel HR Notebooks')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('deel-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-group 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">
        {{-- Config 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">Load Type</dt>
                        <dd class="col-7">
                            <span class="badge bg-secondary">{{ $notebook->load_type }}</span>
                        </dd>

                        <dt class="col-5 text-muted">Entities</dt>
                        <dd class="col-7">
                            @foreach($notebook->entities ?? [] as $ent)
                                <span class="badge bg-light text-dark me-1 mb-1">{{ $ent }}</span>
                            @endforeach
                        </dd>

                        <dt class="col-5 text-muted">Lookback Days</dt>
                        <dd class="col-7">{{ $notebook->incremental_lookback_days }}</dd>

                        <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() }}</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>

            @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>Records</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('partial_success')
                                                <span class="badge bg-warning text-dark">Partial</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>{{ number_format($run->total_records_processed) }}</td>
                                    <td>{{ $run->duration_seconds ? $run->duration_seconds . 's' : '—' }}</td>
                                </tr>
                                @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/deel-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/deel-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/deel-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/deel-notebooks/' + NB_ID, 'DELETE');
    if (json.success) { window.location.href = '/deel-notebooks'; }
    else { alert('Error: ' + json.message); }
}
</script>
@endsection