@extends('layouts.repository')
@section('title', 'Submission Wizard')

@section('content')
<div class="py-12 bg-slate-50 min-h-screen">
    <div class="container mx-auto px-4 max-w-4xl">

        <!-- Wizard Navigation / Progress Tracker -->
        <div class="mb-10 bg-white rounded-3xl p-6 border border-slate-100 shadow-sm">
            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
                <!-- Step Info -->
                <div>
                    <span class="text-[10px] font-black uppercase tracking-widest text-primary">Deposit Wizard</span>
                    <h1 class="text-2xl font-black text-slate-800 tracking-tight mt-1">
                        @if($step === 1)
                            Step 1: Select Collection
                        @elseif($step === 2)
                            Step 2: Enter Metadata
                        @elseif($step === 3)
                            Step 3: Upload Files
                        @endif
                    </h1>
                </div>

                <!-- Progress indicators -->
                <div class="flex items-center gap-2 md:gap-4">
                    <!-- Step 1 Indicator -->
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 rounded-xl flex items-center justify-center font-bold text-xs uppercase tracking-wider {{ $step === 1 ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'bg-emerald-500/10 text-emerald-500' }}">
                            @if($step > 1) <span class="material-icons text-sm">check</span> @else 1 @endif
                        </span>
                        <span class="hidden md:inline text-xs font-bold {{ $step === 1 ? 'text-slate-800 font-extrabold' : 'text-slate-400' }}">Collection</span>
                    </div>

                    <div class="w-8 h-[2px] bg-slate-100"></div>

                    <!-- Step 2 Indicator -->
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 rounded-xl flex items-center justify-center font-bold text-xs uppercase tracking-wider {{ $step === 2 ? 'bg-primary text-white shadow-lg shadow-primary/25' : ($step > 2 ? 'bg-emerald-500/10 text-emerald-500' : 'bg-slate-100 text-slate-400') }}">
                            @if($step > 2) <span class="material-icons text-sm">check</span> @else 2 @endif
                        </span>
                        <span class="hidden md:inline text-xs font-bold {{ $step === 2 ? 'text-slate-800 font-extrabold' : 'text-slate-400' }}">Metadata</span>
                    </div>

                    <div class="w-8 h-[2px] bg-slate-100"></div>

                    <!-- Step 3 Indicator -->
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 rounded-xl flex items-center justify-center font-bold text-xs uppercase tracking-wider {{ $step === 3 ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'bg-slate-100 text-slate-400' }}">
                            3
                        </span>
                        <span class="hidden md:inline text-xs font-bold {{ $step === 3 ? 'text-slate-800 font-extrabold' : 'text-slate-400' }}">Files</span>
                    </div>
                </div>
            </div>
        </div>

        @if(session('error'))
            <div class="mb-6 flex items-center gap-3 p-4 bg-red-50 border border-red-100 text-red-700 rounded-2xl text-sm font-bold shadow-sm">
                <span class="material-icons text-red-500">error</span>
                {{ session('error') }}
            </div>
        @endif

        <!-- Main Form Panel -->
        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm p-8 md:p-10">

            <!-- STEP 1: SELECT COLLECTION -->
            @if($step === 1)
                <form action="{{ route('submissions.saveStep', $item->uuid) }}" method="POST" class="space-y-8">
                    @csrf
                    <input type="hidden" name="step" value="1">

                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2">1. Select Community / Faculty</label>
                            <select id="wizard_community_select" class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
                                <option value="">-- Select Community --</option>
                                @foreach($communities as $comm)
                                    <option value="{{ $comm->id }}" {{ optional($item->collection)->community_id == $comm->id ? 'selected' : '' }}>
                                        {{ $comm->name }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="text-[10px] text-slate-400 mt-1.5 font-medium">Select the broader academic faculty or school.</p>
                        </div>

                        <div>
                            <label class="block text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2">2. Select Collection / Programme <span class="text-red-500">*</span></label>
                            <select name="collection_id" id="wizard_collection_select" required class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
                                <option value="">-- Select Collection --</option>
                                @foreach($collections as $col)
                                    <option value="{{ $col->id }}" data-community-id="{{ $col->community_id }}" {{ $item->collection_id == $col->id ? 'selected' : '' }}>
                                        {{ $col->name }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="text-[10px] text-slate-400 mt-1.5 font-medium">Select the specific academic programme series.</p>
                        </div>
                    </div>

                    <div class="pt-6 border-t border-slate-50 flex items-center justify-between">
                        <a href="{{ route('submissions.index') }}" class="px-6 py-3.5 bg-slate-100 text-slate-600 font-bold rounded-2xl text-xs uppercase tracking-widest hover:bg-slate-200 transition-all">
                            Cancel & Exit
                        </a>
                        <button type="submit" class="px-8 py-3.5 bg-primary text-white font-black rounded-2xl text-xs uppercase tracking-widest shadow-lg shadow-primary/30 hover:scale-105 transition-all">
                            Next Step <span class="material-icons text-xs align-middle ml-1">arrow_forward</span>
                        </button>
                    </div>
                </form>

            <!-- STEP 2: METADATA ENTRY -->
            @elseif($step === 2)
                <form action="{{ route('submissions.saveStep', $item->uuid) }}" method="POST" class="space-y-8">
                    @csrf
                    <input type="hidden" name="step" value="2">

                    <div class="space-y-6">
                        @foreach($fields as $field)
                            @php
                                $fieldName = 'dc.' . $field->element . ($field->qualifier !== 'none' ? '.' . $field->qualifier : '');
                                $existingValue = $item->metadata->where('metadata_field_id', $field->id)->first()?->text_value;

                                if (empty($existingValue)) {
                                    if ($field->element === 'publisher') {
                                        $existingValue = 'Mountain Top University';
                                    } elseif ($field->element === 'date') {
                                        $existingValue = now()->format('d/m/Y');
                                    }
                                }
                            @endphp
                            <div>
                                <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 flex items-center justify-between">
                                    <span class="font-mono text-primary font-bold">
                                        {{ $fieldName }}
                                        @if($field->element === 'title') <span class="text-red-500 font-bold">*</span> @endif
                                    </span>
                                    @if($field->element === 'title')
                                        <span class="text-[10px] text-slate-400 font-medium normal-case">(Max 255 characters)</span>
                                    @elseif($field->element === 'date')
                                        <span class="text-[10px] text-primary font-bold normal-case">Format: YYYY-MM-DD</span>
                                    @endif
                                </label>
                                @if(in_array($field->element, ['description']))
                                    <textarea name="metadata[{{ $field->id }}]" rows="4" required
                                        class="w-full border @error('metadata.'.$field->id) border-red-500 focus:ring-red-500 focus:border-red-500 @else border-slate-200 focus:ring-primary focus:border-primary @enderror rounded-xl px-4 py-3 text-sm resize-none"
                                        placeholder="Enter abstract or description...">{{ old('metadata.'.$field->id, $existingValue) }}</textarea>
                                @elseif($field->element === 'date')
                                    @php
                                        $wizDateVal = $existingValue;
                                        if (!empty($wizDateVal) && preg_match('/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/', $wizDateVal, $m)) {
                                            $wizDateVal = "{$m[3]}-" . str_pad($m[2], 2, '0', STR_PAD_LEFT) . "-" . str_pad($m[1], 2, '0', STR_PAD_LEFT);
                                        }
                                    @endphp
                                    <input type="date" name="metadata[{{ $field->id }}]" required 
                                        value="{{ old('metadata.'.$field->id, $wizDateVal ?: now()->format('Y-m-d')) }}"
                                        placeholder="YYYY-MM-DD"
                                        class="w-full border @error('metadata.'.$field->id) border-red-500 focus:ring-red-500 focus:border-red-500 @else border-slate-200 focus:ring-primary focus:border-primary @enderror rounded-xl px-4 py-3 text-sm font-mono">
                                @else
                                    <input name="metadata[{{ $field->id }}]" required value="{{ old('metadata.'.$field->id, $existingValue) }}"
                                        @if($field->element === 'title') maxlength="255" @endif
                                        placeholder="{{ $field->scope_note ?: 'Enter ' . $fieldName }}"
                                        class="w-full border @error('metadata.'.$field->id) border-red-500 focus:ring-red-500 focus:border-red-500 @else border-slate-200 focus:ring-primary focus:border-primary @enderror rounded-xl px-4 py-3 text-sm">
                                @endif
                                <p class="text-[9px] text-slate-400 mt-1.5 font-medium">{{ $field->scope_note ?: '' }}</p>
                                @error('metadata.'.$field->id)
                                    <p class="text-xs text-red-500 font-bold mt-1 flex items-center gap-1">
                                        <span class="material-icons text-sm">error_outline</span> {{ $message }}
                                    </p>
                                @enderror
                            </div>
                        @endforeach
                    </div>

                    <div class="pt-6 border-t border-slate-50 flex items-center justify-between">
                        <a href="{{ route('submissions.wizard', ['item' => $item->uuid, 'step' => 1]) }}" class="px-6 py-3.5 bg-slate-100 text-slate-600 font-bold rounded-2xl text-xs uppercase tracking-widest hover:bg-slate-200 transition-all">
                            Back
                        </a>
                        <button type="submit" class="px-8 py-3.5 bg-primary text-white font-black rounded-2xl text-xs uppercase tracking-widest shadow-lg shadow-primary/30 hover:scale-105 transition-all">
                            Next Step <span class="material-icons text-xs align-middle ml-1">arrow_forward</span>
                        </button>
                    </div>
                </form>

            <!-- STEP 3: FILE UPLOAD -->
            @elseif($step === 3)
                <div class="space-y-8">
                    <!-- Current Files -->
                    <div>
                        <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Attached Bitstreams (Files)</h3>
                        @php $originalFiles = $item->bitstreams->where('bundle', 'ORIGINAL'); @endphp
                        @if($originalFiles->count() > 0)
                            <div class="divide-y divide-slate-100 border border-slate-100 rounded-2xl p-4 bg-slate-50/50">
                                @foreach($originalFiles as $bs)
                                    <div class="py-3 flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <div class="w-9 h-9 bg-primary/5 text-primary rounded-xl flex items-center justify-center">
                                                <span class="material-icons text-base">insert_drive_file</span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-bold text-slate-800">{{ $bs->file_name }}</p>
                                                <p class="text-[10px] text-slate-400 font-medium">Size: {{ number_format($bs->file_size / 1024, 2) }} KB | MIME: {{ $bs->mime_type }}</p>
                                            </div>
                                        </div>
                                        <form action="{{ route('admin.bitstreams.destroy', $bs) }}" method="POST" onsubmit="return confirm('Remove this file?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="p-2 rounded-xl bg-red-50 hover:bg-red-500 text-red-400 hover:text-white transition-all">
                                                <span class="material-icons text-sm">delete_outline</span>
                                            </button>
                                        </form>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-xs text-slate-400 font-bold">No files uploaded yet.</p>
                        @endif
                    </div>

                    <!-- Chunked Upload Dropzone -->
                    <div id="dropZone" class="border-2 border-dashed border-slate-200 hover:border-primary/50 bg-slate-50/20 hover:bg-primary/5/10 rounded-3xl p-10 text-center transition-all cursor-pointer group">
                        <span class="material-icons text-4xl text-slate-300 group-hover:text-primary transition-colors">cloud_upload</span>
                        <h4 class="font-bold text-slate-800 mt-3 text-sm">Drag & Drop files here</h4>
                        <p class="text-xs text-slate-400 mt-1 font-medium">or click to browse local files (Supports large PDF/video files)</p>
                        <button type="button" id="browseButton" class="mt-4 px-5 py-2.5 bg-slate-900 text-white text-[11px] font-black uppercase tracking-widest rounded-xl hover:scale-105 transition-all">
                            Browse Files
                        </button>
                    </div>

                    <!-- Chunk Upload Progress Bar -->
                    <div id="uploadProgressContainer" class="hidden bg-white border border-slate-100 rounded-2xl p-4 shadow-sm space-y-2">
                        <div class="flex items-center justify-between text-xs font-bold text-slate-700">
                            <span id="fileNameText" class="truncate max-w-[250px] font-bold">Uploading File...</span>
                            <span id="uploadPercentText" class="text-primary font-black">0%</span>
                        </div>
                        <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                            <div id="uploadProgressBar" class="bg-primary h-full transition-all duration-300" style="width: 0%;"></div>
                        </div>
                    </div>

                    <!-- Submission Action Buttons -->
                    <div class="pt-6 border-t border-slate-50 flex items-center justify-between">
                        <a href="{{ route('submissions.wizard', ['item' => $item->uuid, 'step' => 2]) }}" class="px-6 py-3.5 bg-slate-100 text-slate-600 font-bold rounded-2xl text-xs uppercase tracking-widest hover:bg-slate-200 transition-all">
                            Back
                        </a>
                        <form action="{{ route('submissions.complete', $item->uuid) }}" method="POST">
                            @csrf
                            <button type="submit" class="px-10 py-3.5 bg-emerald-500 text-white font-black rounded-2xl text-xs uppercase tracking-widest shadow-lg shadow-emerald-500/30 hover:scale-105 transition-all">
                                Complete Submission
                            </button>
                        </form>
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>
@endsection

@section('scripts')
@if($step === 1)
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const communitySelect = document.getElementById('wizard_community_select');
            const collectionSelect = document.getElementById('wizard_collection_select');
            
            if (communitySelect && collectionSelect) {
                const allOptions = Array.from(collectionSelect.querySelectorAll('option[data-community-id]'));

                function filterCollections() {
                    const selectedCommunityId = communitySelect.value;
                    const currentSelectedValue = collectionSelect.value;

                    collectionSelect.innerHTML = '<option value="">-- Select Collection --</option>';

                    allOptions.forEach(opt => {
                        if (!selectedCommunityId || opt.dataset.communityId === selectedCommunityId) {
                            const clonedOpt = opt.cloneNode(true);
                            if (clonedOpt.value === currentSelectedValue) {
                                clonedOpt.selected = true;
                            }
                            collectionSelect.appendChild(clonedOpt);
                        }
                    });
                }

                communitySelect.addEventListener('change', function () {
                    const previouslySelected = collectionSelect.value;
                    filterCollections();
                    if (!Array.from(collectionSelect.options).some(o => o.value === previouslySelected)) {
                        collectionSelect.value = '';
                    }
                });

                collectionSelect.addEventListener('change', function () {
                    const selectedOption = collectionSelect.options[collectionSelect.selectedIndex];
                    if (selectedOption && selectedOption.dataset.communityId) {
                        communitySelect.value = selectedOption.dataset.communityId;
                    }
                });

                if (communitySelect.value) {
                    filterCollections();
                }
            }
        });
    </script>
@endif

@if($step === 3)
    <script src="https://cdn.jsdelivr.net/npm/resumablejs@1.1.0/resumable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let r = new Resumable({
                target: '{{ route('submissions.uploadChunk', $item->uuid) }}',
                query: {_token: '{{ csrf_token() }}'},
                chunkSize: 5 * 1024 * 1024, // 5MB chunks
                simultaneousUploads: 1,
                testChunks: false
            });

            r.assignBrowse(document.getElementById('browseButton'));
            r.assignDrop(document.getElementById('dropZone'));

            r.on('fileAdded', function (file) {
                document.getElementById('uploadProgressContainer').classList.remove('hidden');
                document.getElementById('fileNameText').innerText = file.fileName;
                r.upload();
            });

            r.on('fileProgress', function (file) {
                let percent = Math.floor(file.progress() * 100);
                document.getElementById('uploadProgressBar').style.width = percent + '%';
                document.getElementById('uploadPercentText').innerText = percent + '%';
            });

            r.on('fileSuccess', function (file, message) {
                // Success: refresh to show newly attached files
                window.location.reload();
            });

            r.on('fileError', function (file, message) {
                alert('Upload failed: ' + message);
                document.getElementById('uploadProgressContainer').classList.add('hidden');
            });
        });
    </script>
@endif
@endsection