@extends('layouts.main')

@section('title', 'Xero Accounting 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-calculator me-2" style="color:#007aff;"></i>Xero Accounting Notebooks
            </h4>
            <small class="text-muted">Fabric Notebooks that extract Xero Accounting data to your Lakehouse</small>
        </div>
        <a href="{{ route('xero-notebooks.create') }}" class="btn btn-primary"
           style="background:#007aff; border-color:#007aff;">
            <i class="bx bx-plus me-1"></i>New Xero 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-book-open" style="font-size:3rem; color:#ced4da;"></i>
                <h5 class="mt-3 text-muted">No Xero notebooks yet</h5>
                <p class="text-muted small mb-4">
                    Create your first Xero Accounting notebook to start extracting financial data into your Lakehouse.
                </p>
                <a href="{{ route('xero-notebooks.create') }}" class="btn btn-primary"
                   style="background:#007aff; border-color:#007aff;">
                    <i class="bx bx-plus me-1"></i>Create Xero 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-calculator" 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">
                            <i class="bx bx-building me-1"></i>
                            {{ $nb->connection->tenant_name ?? '—' }}
                        </div>

                        <div class="small text-muted mb-3">
                            <span class="badge bg-light text-dark me-1">{{ $nb->load_type }}</span>
                            @foreach(array_slice($nb->entities ?? [], 0, 4) as $ent)
                                <span class="badge bg-secondary me-1">{{ $ent }}</span>
                            @endforeach
                            @if(count($nb->entities ?? []) > 4)
                                <span class="badge bg-light text-muted">+{{ count($nb->entities) - 4 }} more</span>
                            @endif
                        </div>

                        @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() }}
                        </div>
                        @endif
                    </div>
                    <div class="card-footer bg-transparent d-flex justify-content-between align-items-center py-2">
                        <a href="{{ route('xero-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/xero-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 Xero notebook? (Fabric notebook item is kept)')) return;
    btn.disabled = true;
    const json = await apiCall('/api/xero-notebooks/' + id, 'DELETE');
    if (json.success) { location.reload(); } else { alert('Error: ' + json.message); btn.disabled = false; }
}
</script>
@endsection