@extends('layouts.app')

@section('breadcrumb', 'Inbox documental')

@section('content')
    <x-page-header
        title="Inbox documental"
        description="Sube facturas y albaranes. El pipeline OCR e IA los procesa de forma automática."
    />

    <div class="stat-grid">
        <div class="stat-card stat-card--accent">
            <div class="stat-card__label">Total documentos</div>
            <div class="stat-card__value">{{ number_format($stats['total']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Pendientes de revisión</div>
            <div class="stat-card__value">{{ number_format($stats['pending_review']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Procesados</div>
            <div class="stat-card__value">{{ number_format($stats['processed']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Subidos hoy</div>
            <div class="stat-card__value">{{ number_format($stats['today']) }}</div>
        </div>
    </div>

    <section class="surface mb-4">
        <div class="surface__header">
            <h2 class="surface__title">Nuevo documento</h2>
        </div>
        <div class="surface__body">
            <form id="upload-form" enctype="multipart/form-data">
                <div id="dropzone" class="dropzone mb-3">
                    <div class="dropzone__icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                    </div>
                    <p class="dropzone__title">Arrastra PDF, JPG, PNG, HEIC o WEBP</p>
                    <p class="dropzone__hint">También puedes seleccionar el archivo manualmente</p>
                    <input class="form-control" type="file" id="file" name="file" accept=".pdf,.jpg,.jpeg,.png,.heic,.webp" required>
                </div>
                <div class="d-flex gap-3 align-items-center flex-wrap">
                    <button class="btn btn-primary" type="submit">Subir y procesar</button>
                    <small id="upload-status" class="text-secondary"></small>
                </div>
            </form>
        </div>
    </section>

    <section class="surface surface--flush">
        <div class="surface__header">
            <h2 class="surface__title">Documentos recientes</h2>
        </div>
        <div class="data-table-wrap">
            <table class="data-table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Estado</th>
                    <th>Fecha carga</th>
                    <th>Archivo</th>
                    <th>Total</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @forelse($documents as $document)
                    <tr>
                        <td class="tabular-nums">#{{ $document->id }}</td>
                        <td><x-status-badge :status="$document->status" /></td>
                        <td class="cell-muted">{{ $document->created_at?->format('d/m/Y H:i') }}</td>
                        <td class="cell-muted text-break">{{ basename($document->original_path) }}</td>
                        <td class="amount">
                            {{ $document->total ? number_format((float) $document->total, 2, ',', '.') . ' €' : '—' }}
                        </td>
                        <td class="cell-actions">
                            <a href="{{ route('documents.review', $document) }}" class="btn btn-sm btn-outline-light">
                                Revisar
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">
                            <div class="empty-state">
                                Aún no hay documentos. Sube el primero arriba para iniciar el pipeline.
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    const form = document.getElementById('upload-form');
    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('file');
    const statusLabel = document.getElementById('upload-status');

    ['dragenter', 'dragover'].forEach((eventName) => {
        dropzone.addEventListener(eventName, (event) => {
            event.preventDefault();
            dropzone.classList.add('dragging');
        });
    });

    ['dragleave', 'drop'].forEach((eventName) => {
        dropzone.addEventListener(eventName, (event) => {
            event.preventDefault();
            dropzone.classList.remove('dragging');
        });
    });

    dropzone.addEventListener('drop', (event) => {
        if (event.dataTransfer.files.length > 0) {
            fileInput.files = event.dataTransfer.files;
        }
    });

    dropzone.addEventListener('click', (event) => {
        if (event.target !== fileInput) {
            fileInput.click();
        }
    });

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        statusLabel.textContent = 'Subiendo…';

        const formData = new FormData(form);

        try {
            const response = await fetch('/api/documents/upload', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: formData,
            });

            const data = await response.json();
            statusLabel.textContent = data.message ?? 'Documento en cola.';
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            statusLabel.textContent = 'No se pudo subir el documento.';
        }
    });
</script>
@endpush