@extends('layouts.dashboard')

@section('content')
    @php
        $statusTone = fn (?string $status) => match ($status) {
            \App\Models\RayDocImport::STATUS_COMPLETED, \App\Models\RayDocImport::STATUS_APPROVED => 'positive',
            \App\Models\RayDocImport::STATUS_REJECTED, \App\Models\RayDocImport::STATUS_FAILED => 'negative',
            \App\Models\RayDocImport::STATUS_PROCESSING, \App\Models\RayDocImport::STATUS_SENT_TO_RAYDOCS => 'primary',
            default => 'neutral',
        };
        $formatLabel = fn (?string $value) => $value ? ucfirst(str_replace('_', ' ', $value)) : '-';
    @endphp

    <div class="main-card">
        <div class="card-title card-title--with-actions">
            <div class="card-header-row card-header-row--title-actions">
                <div class="card-heading-block">
                    <x-ui.breadcrumbs :items="[
                        ['label' => 'Documents'],
                        ['label' => 'PDF Import & Scan'],
                    ]" />
                    <h3>PDF Import & Scan</h3>
                </div>
            </div>
        </div>

        <div class="card-body">
            <form method="POST" action="{{ route('raydocs.imports.store') }}" enctype="multipart/form-data" class="raydoc-import-form" data-raydoc-import-form>
                @csrf

                <label class="raydoc-dropzone" for="raydoc-document-input" data-raydoc-dropzone>
                    <input id="raydoc-document-input" type="file" name="document" accept="application/pdf,.pdf" data-raydoc-file-input>
                    <span class="raydoc-dropzone__icon" aria-hidden="true">
                        <x-ui.icon name="upload" size="28" />
                    </span>
                    <span class="raydoc-dropzone__copy">
                        <strong data-raydoc-file-label>Drop a PDF here</strong>
                        <small>Stored in the Raydocs import folder before processing.</small>
                    </span>
                </label>

                @error('document')
                    <div class="form-error">{{ $message }}</div>
                @enderror

                <div class="form-actions">
                    <button type="submit" class="btn-primary inline">
                        <x-ui.icon name="upload" size="13" />
                        Import PDF
                    </button>
                </div>
            </form>

            <div class="ui-tab-section-header">
                <div>
                    <h4 class="ui-tab-section-title">Recent imports</h4>
                    <p class="ui-tab-section-subtitle">PDFs stored for Raydocs processing.</p>
                </div>
            </div>

            <div class="detail-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>File</th>
                            <th>Status</th>
                            <th>Source</th>
                            <th>Uploaded by</th>
                            <th>Received</th>
                            <th>SHA-256</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($imports as $import)
                            <tr onclick="if (! event.target.closest('a, button, form, input, select, textarea')) window.location.href = '{{ route('raydocs.imports.show', $import) }}';" style="cursor: pointer;">
                                <td>
                                    <a href="{{ route('raydocs.imports.show', $import) }}"><strong>{{ $import->original_filename }}</strong></a>
                                    <div class="table-cell-subtitle">{{ $import->storage_path }}</div>
                                </td>
                                <td>
                                    <x-ui.performance-badge :tone="$statusTone($import->status)" icon="none">
                                        {{ $formatLabel($import->status) }}
                                    </x-ui.performance-badge>
                                </td>
                                <td>{{ $formatLabel($import->source_type) }}</td>
                                <td>{{ $import->uploader?->name ?? '-' }}</td>
                                <td>{{ $import->received_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                <td><code>{{ substr($import->sha256, 0, 12) }}...</code></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">No imported documents yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <x-pagination-footer :paginator="$imports" />
        </div>
    </div>

    <style>
        .raydoc-import-form {
            margin-bottom: 1.5rem;
        }

        .raydoc-dropzone {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.85rem;
            align-items: center;
            min-height: 148px;
            padding: 1.15rem;
            border: 1px dashed var(--color-border);
            border-radius: var(--radius-sm, 8px);
            background: color-mix(in srgb, var(--color-panel, #ffffff) 92%, var(--color-kview, #1b4d89));
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease;
        }

        .raydoc-dropzone[data-state="active"] {
            border-color: var(--color-kview);
            background: color-mix(in srgb, var(--color-panel, #ffffff) 84%, var(--color-kview, #1b4d89));
        }

        .raydoc-dropzone input {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
        }

        .raydoc-dropzone__icon {
            display: inline-grid;
            place-items: center;
            width: 52px;
            height: 52px;
            border-radius: 8px;
            color: var(--color-kview);
            background: color-mix(in srgb, var(--color-kview, #1b4d89) 10%, transparent);
        }

        .raydoc-dropzone__copy {
            display: grid;
            gap: 0.25rem;
            min-width: 0;
        }

        .raydoc-dropzone__copy strong {
            font-size: 1rem;
            color: var(--color-ink);
            word-break: break-word;
        }

        .raydoc-dropzone__copy small,
        .table-cell-subtitle {
            color: var(--color-muted, #6b7280);
            font-size: 0.82rem;
            word-break: break-word;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('[data-raydoc-import-form]');

            if (!form) {
                return;
            }

            const dropzone = form.querySelector('[data-raydoc-dropzone]');
            const input = form.querySelector('[data-raydoc-file-input]');
            const label = form.querySelector('[data-raydoc-file-label]');

            const showFile = function () {
                label.textContent = input.files && input.files[0] ? input.files[0].name : 'Drop a PDF here';
            };

            ['dragenter', 'dragover'].forEach(function (eventName) {
                dropzone.addEventListener(eventName, function (event) {
                    event.preventDefault();
                    dropzone.dataset.state = 'active';
                });
            });

            ['dragleave', 'drop'].forEach(function (eventName) {
                dropzone.addEventListener(eventName, function (event) {
                    event.preventDefault();
                    dropzone.dataset.state = '';
                });
            });

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

            input.addEventListener('change', showFile);
        });
    </script>
@endsection