@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-2">
        <ol class="breadcrumb mb-0 small text-uppercase fw-bold letter-spacing-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
            <li class="breadcrumb-item active text-primary" aria-current="page">Documents Inbox</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
        <div>
            <h2 class="h3 font-weight-bold text-dark mb-1">Documents Inbox</h2>
            <p class="text-muted small mb-0">Upload and process receipts, bills, and invoices automatically.</p>
        </div>
        <button type="button" class="btn btn-primary shadow-sm rounded-3 px-4" data-bs-toggle="modal" data-bs-target="#uploadModal">
            <i class="fas fa-cloud-upload-alt me-2"></i> Upload Document
        </button>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm rounded-4 mb-4 mx-3">
        <div class="card-body p-3">
            <form action="{{ route('documents.index') }}" method="GET" class="row g-3 align-items-center">
                <div class="col-md-3">
                    <select name="status" class="form-select border-2 small" onchange="this.form.submit()">
                        <option value="">All Statuses</option>
                        <option value="uploaded" {{ request('status') == 'uploaded' ? 'selected' : '' }}>Uploaded</option>
                        <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                        <option value="ready" {{ request('status') == 'ready' ? 'selected' : '' }}>Ready</option>
                        <option value="converted" {{ request('status') == 'converted' ? 'selected' : '' }}>Converted</option>
                        <option value="matched" {{ request('status') == 'matched' ? 'selected' : '' }}>Matched</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="type" class="form-select border-2 small" onchange="this.form.submit()">
                        <option value="">All Types</option>
                        <option value="Bill" {{ request('type') == 'Bill' ? 'selected' : '' }}>Bill</option>
                        <option value="Invoice" {{ request('type') == 'Invoice' ? 'selected' : '' }}>Invoice</option>
                        <option value="Receipt" {{ request('type') == 'Receipt' ? 'selected' : '' }}>Receipt</option>
                    </select>
                </div>
                <div class="col-md-6 text-end">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control border-2 small" placeholder="Search by filename..." value="{{ request('search') }}">
                        <button class="btn btn-outline-primary" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Documents Table -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mx-3">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4 border-0 small fw-bold text-muted text-uppercase">File Name</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Upload Date</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Type</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Vendor</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Amount</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Status</th>
                        <th class="text-end pe-4 border-0 small fw-bold text-muted text-uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($documents as $doc)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <div class="bg-light p-2 rounded-3 me-3 text-primary">
                                    <i class="fas {{ Str::endsWith($doc->file_name, '.pdf') ? 'fa-file-pdf' : 'fa-file-image' }} fa-lg"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">{{ $doc->file_name }}</h6>
                                    <small class="text-muted">#DOC-{{ $doc->id }}</small>
                                </div>
                            </div>
                        </td>
                        <td>{{ $doc->created_at->format('M d, Y') }}</td>
                        <td>{{ $doc->document_type ?? '---' }}</td>
                        <td>{{ $doc->vendor_name ?? '---' }}</td>
                        <td class="fw-bold text-dark">
                            @if($doc->amount) ${{ number_format($doc->amount, 2) }} @else --- @endif
                        </td>
                        <td>
                            @php
                                $badgeClass = [
                                    'uploaded' => 'bg-secondary',
                                    'processing' => 'bg-info',
                                    'ready' => 'bg-warning text-dark',
                                    'converted' => 'bg-success',
                                    'matched' => 'bg-primary'
                                ][$doc->status] ?? 'bg-secondary';
                            @endphp
                            <span class="badge {{ $badgeClass }} rounded-pill px-3">{{ ucfirst($doc->status) }}</span>
                            @if($doc->links->count() > 0)
                                @php $link = $doc->links->first(); @endphp
                                @if($link && $link->linked)
                                    <div class="mt-1">
                                        <a href="{{ $link->linked_type == 'App\Models\Bill' ? route('bills.show', $link->linked_id) : route('expenses.show', $link->linked_id) }}" class="xx-small text-decoration-none fw-bold text-primary">
                                            <i class="fas fa-external-link-alt me-1"></i> View {{ class_basename($link->linked_type) }}
                                        </a>
                                    </div>
                                @endif
                            @endif
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group">
                                <a href="{{ route('documents.show', $doc) }}" class="btn btn-sm btn-outline-primary border-0 rounded-circle" title="Preview & Process">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if($doc->status == 'uploaded')
                                <button type="button" class="btn btn-sm btn-outline-info border-0 rounded-circle process-btn" data-id="{{ $doc->id }}" title="Start Processing">
                                    <i class="fas fa-magic"></i>
                                </button>
                                @endif
                                @if($doc->status == 'ready')
                                <button type="button" class="btn btn-sm btn-outline-success border-0 rounded-circle match-btn" data-id="{{ $doc->id }}" title="Auto Match">
                                    <i class="fas fa-link"></i>
                                </button>
                                @endif
                                <button type="button" class="btn btn-sm btn-outline-danger border-0 rounded-circle delete-btn" data-id="{{ $doc->id }}" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="mb-3"><i class="fas fa-inbox fa-3x text-light"></i></div>
                            <h5 class="text-muted">Your inbox is empty</h5>
                            <p class="text-muted small">Upload receipts and bills to get started.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($documents->hasPages())
        <div class="card-footer bg-white border-0 p-3">
            {{ $documents->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 p-4 pb-0">
                <h5 class="modal-title fw-bold">Upload Document</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div id="drop-zone" class="border-2 border-dashed border-primary rounded-4 p-5 text-center bg-light cursor-pointer mb-3">
                    <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                    <h6 class="fw-bold mb-1">Drag & Drop files here</h6>
                    <p class="text-muted small mb-3">Supports PDF, JPG, PNG (Max 10MB)</p>
                    <input type="file" id="file-input" class="d-none" accept=".pdf,.jpg,.jpeg,.png">
                    <button type="button" class="btn btn-primary px-4" onclick="document.getElementById('file-input').click()">Browse Files</button>
                </div>
                <div id="upload-progress" class="d-none">
                    <div class="progress rounded-pill overflow-hidden" style="height: 10px">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                    </div>
                    <p class="text-center small mt-2 text-muted" id="upload-status">Uploading...</p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // File Input / Drag & Drop
    const fileInput = document.getElementById('file-input');
    const dropZone = document.getElementById('drop-zone');
    const progressDiv = document.getElementById('upload-progress');
    const progressBar = progressDiv.querySelector('.progress-bar');
    const uploadStatus = document.getElementById('upload-status');

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('bg-primary', 'bg-opacity-10');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('bg-primary', 'bg-opacity-10');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('bg-primary', 'bg-opacity-10');
        const files = e.dataTransfer.files;
        if (files.length) handleUpload(files[0]);
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length) handleUpload(e.target.files[0]);
    });

    function handleUpload(file) {
        const formData = new FormData();
        formData.append('document', file);
        formData.append('_token', '{{ csrf_token() }}');

        dropZone.classList.add('d-none');
        progressDiv.classList.remove('d-none');

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route("documents.upload") }}', true);

        xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) {
                const percent = (e.loaded / e.total) * 100;
                progressBar.style.width = percent + '%';
            }
        };

        xhr.onload = () => {
            if (xhr.status === 200) {
                window.location.reload();
            } else {
                alert('Upload failed. Please try again.');
                dropZone.classList.remove('d-none');
                progressDiv.classList.add('d-none');
            }
        };

        xhr.send(formData);
    }

    // Processing Logic
    document.querySelectorAll('.process-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            const id = this.dataset.id;
            const originalContent = this.innerHTML;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

            try {
                const response = await fetch(`/documents/${id}/process`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('Processing failed: ' + (data.message || 'Unknown error'));
                    this.disabled = false;
                    this.innerHTML = originalContent;
                }
            } catch (err) {
                alert('Processing failed. Please check your connection.');
                this.disabled = false;
                this.innerHTML = originalContent;
            }
        });
    });

    // Match Logic
    document.querySelectorAll('.match-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            const id = this.dataset.id;
            const originalContent = this.innerHTML;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

            try {
                const response = await fetch(`/documents/${id}/match`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message || 'No match found.');
                    this.disabled = false;
                    this.innerHTML = originalContent;
                }
            } catch (err) {
                alert('Matching failed. Please check your connection.');
                this.disabled = false;
                this.innerHTML = originalContent;
            }
        });
    });

    // Delete Logic
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            if (!confirm('Are you sure you want to delete this document? This action cannot be undone.')) return;
            
            const id = this.dataset.id;
            const row = this.closest('tr');
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

            try {
                const response = await fetch(`/documents/${id}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) {
                    row.style.transition = 'opacity 0.5s';
                    row.style.opacity = '0';
                    setTimeout(() => row.remove(), 500);
                } else {
                    alert('Delete failed: ' + (data.message || 'Unknown error'));
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-trash"></i>';
                }
            } catch (err) {
                alert('Delete failed. Please check your connection.');
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-trash"></i>';
            }
        });
    });
</script>
@endpush

<style>
    .cursor-pointer { cursor: pointer; }
    .letter-spacing-1 { letter-spacing: 1px; }
    .xx-small { font-size: 0.65rem; }
    .bg-opacity-10 { --bs-bg-opacity: 0.1; }
</style>
@endsection