@extends('layouts.app')

@section('breadcrumb', 'Revisión documental')

@section('content')
    <x-page-header :title="'Revisión #' . $document->id" description="Corrige datos clave y alimenta el aprendizaje incremental.">
        <x-slot:actions>
            <a href="{{ route('documents.original', $document) }}" class="btn btn-outline-light" target="_blank" rel="noopener">Ver documento original</a>
            <a href="{{ route('inbox') }}" class="btn btn-outline-light">Volver al inbox</a>
        </x-slot:actions>
    </x-page-header>

    <section class="row g-4">
        <div class="col-12 col-xl-8">
            <section class="surface mb-4">
                <div class="surface__header">
                    <h2 class="surface__title">Contexto extraído</h2>
                </div>
                <div class="surface__body">
                    <div class="meta-grid">
                        <div class="meta-item">
                            <div class="meta-item__label">Estado</div>
                            <div class="meta-item__value"><x-status-badge :status="$document->status" /></div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-item__label">Tipo</div>
                            <div class="meta-item__value">{{ $document->type ?? '—' }}</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-item__label">Confianza OCR</div>
                            <div class="meta-item__value tabular-nums">{{ number_format((float) ($document->confidence_score ?? 0), 2, ',', '.') }}</div>
                        </div>
                        <div class="meta-item" style="grid-column: 1 / -1;">
                            <div class="meta-item__label">Documento original</div>
                            <div class="meta-item__value">
                                <a href="{{ route('documents.original', $document) }}" target="_blank" rel="noopener">{{ basename($document->original_path) }}</a>
                                <span class="text-secondary ms-2"><code>{{ $document->original_path }}</code></span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="surface mb-4">
                <div class="surface__header">
                    <h2 class="surface__title">Corrección manual</h2>
                    <small id="save-status" class="text-secondary"></small>
                </div>
                <div class="surface__body">
                    <form id="corrections-form" class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Tipo documento</label>
                            <input class="form-control" name="type" value="{{ $document->type }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Número</label>
                            <input class="form-control" name="number" value="{{ $document->number }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Fecha</label>
                            <input class="form-control" type="date" name="issue_date" value="{{ optional($document->issue_date)->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Categoría</label>
                            <select class="form-select" name="category_id">
                                <option value="">Sin categoría</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" @selected($document->category_id === $category->id)>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Proveedor existente (opcional)</label>
                            <select class="form-select" name="provider_id">
                                <option value="">Auto / por nombre</option>
                                @foreach($providers as $provider)
                                    <option value="{{ $provider->id }}" @selected($document->provider_id === $provider->id)>
                                        {{ $provider->name }}{{ $provider->tax_id ? ' - '.$provider->tax_id : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Proveedor detectado</label>
                            <input class="form-control" name="provider_name" value="{{ $document->provider?->name ?? ($document->ai_json['provider_name'] ?? '') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">CIF/NIF proveedor</label>
                            <input class="form-control" name="provider_tax_id" value="{{ $document->provider?->tax_id ?? ($document->ai_json['provider_tax_id'] ?? '') }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Base imponible</label>
                            <input class="form-control" type="number" step="0.01" name="subtotal" value="{{ $document->subtotal }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">IVA</label>
                            <input class="form-control" type="number" step="0.01" name="tax_amount" value="{{ $document->tax_amount }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipo IVA (%)</label>
                            <input class="form-control" type="number" step="0.01" name="tax_rate" value="{{ $document->tax_rate }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Total</label>
                            <input class="form-control" type="number" step="0.01" name="total" value="{{ $document->total }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Forma de pago</label>
                            <select class="form-select" name="payment_method">
                                @php($methods = ['cash' => 'Efectivo', 'card' => 'Tarjeta', 'tpv' => 'TPV', 'transfer' => 'Transferencia', 'bizum' => 'Bizum', 'pending' => 'Pendiente', 'other' => 'Otro'])
                                <option value="">Sin definir</option>
                                @foreach($methods as $value => $label)
                                    <option value="{{ $value }}" @selected($document->payment_method === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Estado de pago</label>
                            <select class="form-select" name="payment_status">
                                @php($statuses = ['pending' => 'Pendiente', 'paid' => 'Pagado', 'partial' => 'Parcial', 'unknown' => 'Desconocido'])
                                <option value="">Sin definir</option>
                                @foreach($statuses as $value => $label)
                                    <option value="{{ $value }}" @selected($document->payment_status === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-primary" type="submit">Guardar correcciones y aprender</button>
                        </div>
                    </form>
                </div>
            </section>

            <section class="surface">
                <div class="surface__header">
                    <h2 class="surface__title">Texto OCR (preview)</h2>
                </div>
                <div class="surface__body">
                    <pre class="code-block">{{ \Illuminate\Support\Str::limit($document->ocr_text ?? 'Sin OCR', 5000) }}</pre>
                </div>
            </section>
        </div>

        <div class="col-12 col-xl-4">
            <section class="surface mb-4">
                <div class="surface__header">
                    <h2 class="surface__title">JSON IA (normalizado)</h2>
                </div>
                <div class="surface__body">
                    <pre class="code-block">{{ json_encode($document->ai_json, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                </div>
            </section>

            <section class="surface">
                <div class="surface__header">
                    <h2 class="surface__title">Últimas correcciones</h2>
                </div>
                <div class="surface__body">
                    @forelse($recentCorrections as $correction)
                        <div class="list-item">
                            <div class="list-item__title">{{ $correction->field_name }}</div>
                            <div class="list-item__meta">Antes: {{ $correction->original_value ?? '—' }}</div>
                            <div class="list-item__meta">Después: {{ $correction->corrected_value ?? '—' }}</div>
                        </div>
                    @empty
                        <p class="text-secondary mb-0">Sin correcciones todavía.</p>
                    @endforelse
                </div>
            </section>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    const form = document.getElementById('corrections-form');
    const statusLabel = document.getElementById('save-status');
    const documentId = {{ $document->id }};

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

        const formData = new FormData(form);
        const corrections = {};

        formData.forEach((value, key) => {
            if (value !== null && String(value).trim() !== '') {
                corrections[key] = value;
            }
        });

        try {
            const response = await fetch(`/api/documents/${documentId}/corrections`, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ corrections }),
            });

            if (!response.ok) {
                throw new Error('No se pudo guardar');
            }

            const data = await response.json();
            statusLabel.textContent = data.message ?? 'Correcciones guardadas.';
            setTimeout(() => window.location.reload(), 700);
        } catch (error) {
            statusLabel.textContent = 'No se pudieron guardar las correcciones.';
        }
    });
</script>
@endpush