@extends('layouts.app')

@section('mobile-title', 'Upload Documents')
@section('mobile-subtitle', 'Add files to folders')
@section('mobile-back', route('documents.index'))

@section('content')
    <div class="mx-auto max-w-6xl">
        <div class="mb-6">
            <div class="mb-2 flex flex-wrap items-center gap-2 text-sm text-[var(--construct-muted)]">
                <a href="{{ route('documents.index') }}" class="font-semibold text-[var(--construct-primary-dark)]">Document Centre</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span>Upload</span>
            </div>
            <h1 class="text-3xl font-bold">Upload Documents</h1>
        </div>

        @if ($folders->isEmpty())
            <div class="rounded border border-[var(--construct-border)] bg-white p-6 text-sm text-[var(--construct-muted)]">
                No uploadable folders are available for your account.
            </div>
        @else
            <form method="POST" action="{{ route('documents.upload.store') }}" enctype="multipart/form-data" data-upload-form>
                @csrf

                <section class="mb-6 rounded border border-[var(--construct-border)] bg-white p-6">
                    <label for="upload-files" class="group flex min-h-[280px] cursor-pointer flex-col items-center justify-center rounded border-2 border-dashed border-[var(--construct-border)] bg-white p-8 text-center transition hover:border-[var(--construct-primary)] hover:bg-[var(--construct-surface-low)]" data-drop-zone>
                        <span class="inline-flex h-16 w-16 items-center justify-center rounded bg-[var(--construct-surface-container)] text-[var(--construct-muted)] transition group-hover:bg-[var(--construct-primary)] group-hover:text-white">
                            <span class="material-symbols-outlined text-[34px]">cloud_upload</span>
                        </span>
                        <span class="mt-4 text-lg font-bold">Drag and drop files here</span>
                        <span class="mt-2 text-sm text-[var(--construct-muted)]">or <span class="font-bold text-[var(--construct-primary-dark)]">click to browse</span></span>
                        <span class="mt-4 text-xs font-semibold text-[var(--construct-muted)]">Supported formats: PDF, DWG, JPG, PNG, DOCX, XLSX, CSV, TXT, EML, ZIP. Max 50MB per file.</span>
                    </label>
                    <input id="upload-files" name="files[]" type="file" multiple class="sr-only" data-file-input accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.jpg,.jpeg,.png,.eml,.msg,.zip,.dwg">
                    @error('files')
                        <div class="mt-3 text-sm font-semibold text-red-700">{{ $message }}</div>
                    @enderror
                    @error('files.*')
                        <div class="mt-3 text-sm font-semibold text-red-700">{{ $message }}</div>
                    @enderror
                </section>

                <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
                    <div class="flex items-center justify-between border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4">
                        <h2 class="text-lg font-bold">Files to Upload <span class="ml-2 rounded-full bg-[var(--construct-surface-container)] px-2 py-1 text-xs" data-file-count>0</span></h2>
                        <button type="button" class="text-sm font-bold text-[var(--construct-muted)] hover:text-red-700" data-clear-files>Clear All</button>
                    </div>

                    <div class="space-y-3 p-5" data-file-list>
                        <div class="rounded border border-dashed border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-4 py-8 text-center text-sm text-[var(--construct-muted)]" data-empty-upload-state>
                            Selected files will appear here before upload.
                        </div>
                    </div>

                    <div class="flex flex-col-reverse gap-2 border-t border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4 sm:flex-row sm:justify-end">
                        <a href="{{ route('documents.index') }}" class="rounded border border-[var(--construct-border)] bg-white px-5 py-2.5 text-center text-sm font-bold text-[var(--construct-text)]">Cancel</a>
                        <button class="inline-flex items-center justify-center gap-2 rounded bg-[var(--construct-primary)] px-5 py-2.5 text-sm font-bold text-white disabled:cursor-not-allowed disabled:opacity-50" data-upload-submit disabled>
                            <span class="material-symbols-outlined text-[17px]">cloud_upload</span>
                            Upload Files
                        </button>
                    </div>
                </section>
            </form>

            <template data-file-row-template>
                <div class="grid gap-4 rounded border border-[var(--construct-border)] bg-white p-4 lg:grid-cols-[minmax(260px,1fr)_280px_320px_auto] lg:items-center" data-file-row>
                    <div class="flex min-w-0 items-center gap-3">
                        <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded bg-[var(--construct-surface-container)] text-[var(--construct-secondary)]" data-file-icon>
                            <span class="material-symbols-outlined">draft</span>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block truncate text-sm font-bold" data-file-name></span>
                            <span class="mt-1 flex items-center gap-2 text-xs text-[var(--construct-muted)]">
                                <span data-file-size></span>
                                <span class="h-1 w-1 rounded-full bg-[var(--construct-border)]"></span>
                                <span class="font-semibold text-[var(--construct-primary-dark)]">Ready to upload</span>
                            </span>
                            <span class="mt-2 block h-1 rounded bg-[var(--construct-surface-container)]">
                                <span class="block h-1 w-1/3 rounded bg-[var(--construct-primary)]"></span>
                            </span>
                        </span>
                    </div>

                    <label class="grid gap-1 text-sm">
                        <span class="text-xs font-bold text-[var(--construct-muted)]">Assign to Folder</span>
                        <select name="document_folder_ids[]" class="rounded border border-[var(--construct-border)] px-3 py-2 text-sm" data-folder-select>
                            @foreach ($folders as $folder)
                                <option value="{{ $folder->id }}" @selected($selectedFolderId === $folder->id)>
                                    {{ $folder->name }}@if ($folder->project) · {{ $folder->project->name }}@endif
                                </option>
                            @endforeach
                        </select>
                    </label>

                    <label class="grid gap-1 text-sm">
                        <span class="text-xs font-bold text-[var(--construct-muted)]">Tags</span>
                        <input name="tags[]" placeholder="Q3, inspection, critical" class="rounded border border-[var(--construct-border)] px-3 py-2 text-sm">
                    </label>

                    <button type="button" class="inline-flex h-10 w-10 items-center justify-center rounded border border-[var(--construct-border)] text-[var(--construct-muted)] hover:border-red-300 hover:text-red-700" data-remove-file aria-label="Remove file">
                        <span class="material-symbols-outlined text-[19px]">delete</span>
                    </button>
                </div>
            </template>

            <script>
                (() => {
                    const input = document.querySelector('[data-file-input]');
                    const list = document.querySelector('[data-file-list]');
                    const template = document.querySelector('[data-file-row-template]');
                    const emptyState = document.querySelector('[data-empty-upload-state]');
                    const count = document.querySelector('[data-file-count]');
                    const submit = document.querySelector('[data-upload-submit]');
                    const clear = document.querySelector('[data-clear-files]');
                    const dropZone = document.querySelector('[data-drop-zone]');
                    let files = [];

                    const formatSize = (bytes) => {
                        if (bytes >= 1048576) {
                            return `${(bytes / 1048576).toFixed(1)} MB`;
                        }

                        return `${Math.max(bytes / 1024, 0.1).toFixed(1)} KB`;
                    };

                    const iconFor = (file) => {
                        const name = file.name.toLowerCase();
                        if (name.endsWith('.pdf')) return ['picture_as_pdf', 'text-red-700', 'bg-red-50'];
                        if (/\.(jpg|jpeg|png)$/.test(name)) return ['image', 'text-[var(--construct-secondary)]', 'bg-[#e3f2ff]'];
                        if (/\.(xls|xlsx|csv)$/.test(name)) return ['table_chart', 'text-emerald-800', 'bg-emerald-50'];
                        if (/\.(doc|docx|txt)$/.test(name)) return ['description', 'text-[var(--construct-secondary)]', 'bg-[#e3f2ff]'];
                        return ['draft', 'text-[var(--construct-muted)]', 'bg-[var(--construct-surface-container)]'];
                    };

                    const syncInput = () => {
                        const transfer = new DataTransfer();
                        files.forEach((file) => transfer.items.add(file));
                        input.files = transfer.files;
                    };

                    const render = () => {
                        list.querySelectorAll('[data-file-row]').forEach((row) => row.remove());
                        emptyState.classList.toggle('hidden', files.length > 0);
                        count.textContent = files.length;
                        submit.disabled = files.length === 0;

                        files.forEach((file, index) => {
                            const row = template.content.firstElementChild.cloneNode(true);
                            const [icon, color, bg] = iconFor(file);
                            const iconWrap = row.querySelector('[data-file-icon]');
                            iconWrap.className = `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded ${color} ${bg}`;
                            iconWrap.querySelector('.material-symbols-outlined').textContent = icon;
                            row.querySelector('[data-file-name]').textContent = file.name;
                            row.querySelector('[data-file-size]').textContent = formatSize(file.size);
                            row.querySelector('[data-remove-file]').addEventListener('click', () => {
                                files.splice(index, 1);
                                syncInput();
                                render();
                            });
                            list.appendChild(row);
                        });
                    };

                    const addFiles = (incoming) => {
                        files = files.concat(Array.from(incoming)).slice(0, 10);
                        syncInput();
                        render();
                    };

                    input.addEventListener('change', () => {
                        files = Array.from(input.files).slice(0, 10);
                        render();
                    });

                    clear.addEventListener('click', () => {
                        files = [];
                        syncInput();
                        render();
                    });

                    dropZone.addEventListener('dragover', (event) => {
                        event.preventDefault();
                        dropZone.classList.add('border-[var(--construct-primary)]', 'bg-[var(--construct-surface-low)]');
                    });

                    dropZone.addEventListener('dragleave', () => {
                        dropZone.classList.remove('border-[var(--construct-primary)]', 'bg-[var(--construct-surface-low)]');
                    });

                    dropZone.addEventListener('drop', (event) => {
                        event.preventDefault();
                        dropZone.classList.remove('border-[var(--construct-primary)]', 'bg-[var(--construct-surface-low)]');
                        addFiles(event.dataTransfer.files);
                    });

                    render();
                })();
            </script>
        @endif
    </div>
@endsection