@extends('layouts.dashboard')
@section('content')
<div class="max-w-6xl mx-auto space-y-7">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-3">
        <div><h1 class="text-3xl font-black text-slate-950">Smart Import Center</h1><p class="text-slate-500 mt-1">Upload the file only. The system identifies its contents, date and destination automatically.</p></div>
        <a href="{{ route('import-center.index') }}" class="btn btn-ghost">Import history</a>
    </div>

    @if($errors->any())<div class="rounded-2xl border border-rose-200 bg-rose-50 p-4 text-rose-800"><div class="font-black">The file was not accepted</div><ul class="mt-2 list-disc list-inside text-sm">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif

    <form id="smartImportForm" method="POST" action="{{ route('import-center.store') }}" enctype="multipart/form-data" class="rounded-[28px] border border-slate-200 bg-white shadow-sm overflow-hidden">
        @csrf
        <input type="hidden" name="request_token" value="{{ (string) Str::uuid() }}">
        <label id="dropZone" class="m-5 md:m-7 min-h-80 rounded-3xl border-2 border-dashed border-blue-400 bg-blue-50/40 flex flex-col items-center justify-center text-center p-8 cursor-pointer transition hover:bg-blue-50 hover:border-blue-600">
            <input id="importFile" type="file" name="import_file" accept=".xlsx,.xls,.csv,.pdf" class="sr-only" required>
            <span class="w-16 h-16 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center text-3xl">⇧</span>
            <h2 class="text-xl font-black mt-5">Drop a file here or click to browse</h2>
            <p class="text-slate-500 mt-2">WIWU Excel, CSV and PDF · large-file upload in 5 MB parts</p>
            <div id="selectedFile" class="hidden mt-5 rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-3 text-emerald-800 font-bold"></div>
        </label>
        <div class="px-7 pb-4"><label class="font-bold text-sm" for="purpose">File destination</label><select id="purpose" class="select select-bordered w-full mt-2"><option value="import_center">Import Center — Main / Clearance / Prices / Shipment / Van Stock</option><option value="soh">SOH — Stock on Hand</option></select><div id="uploadStatus" class="text-sm mt-3" role="status"></div><progress id="uploadProgress" class="progress progress-primary w-full hidden" value="0" max="100"></progress></div><div class="border-t border-slate-200 px-5 md:px-7 py-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="text-sm text-slate-500"><span class="font-bold text-slate-800">Safe workflow:</span> upload → automatic analysis → review → import</div>
            <div class="flex gap-3"><a href="{{ route('import-center.index') }}" class="btn btn-ghost">Cancel</a><button id="analyzeButton" class="btn btn-primary px-8">Analyze file</button></div>
        </div>
    </form>
</div>
<script>
const input=document.getElementById('importFile'),selected=document.getElementById('selectedFile'),form=document.getElementById('smartImportForm'),button=document.getElementById('analyzeButton'),status=document.getElementById('uploadStatus'),progress=document.getElementById('uploadProgress'),purpose=document.getElementById('purpose');
const csrf=form.querySelector('[name="_token"]').value;
input.addEventListener('change',()=>{const f=input.files?.[0];if(!f)return;selected.textContent=`${f.name} · ${(f.size/1048576).toFixed(1)} MB`;selected.classList.remove('hidden');});
async function post(url,fd){const r=await fetch(url,{method:'POST',headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json'},body:fd,credentials:'same-origin'});const j=await r.json().catch(()=>({}));if(!r.ok)throw Error(j.message||'Upload failed (HTTP '+r.status+')');return j;}
form.addEventListener('submit',async e=>{
 e.preventDefault();const f=input.files?.[0];if(!f)return;
 if(f.size>1073741824){status.textContent='Maximum supported file size is 1 GB.';return;}
 if(purpose.value==='soh'&&!/\.(xlsx|xls|csv)$/i.test(f.name)){status.textContent='SOH accepts Excel or CSV only.';return;}
 button.disabled=true;input.disabled=true;purpose.disabled=true;progress.classList.remove('hidden');
 const id=crypto.randomUUID(),token=form.querySelector('[name="request_token"]').value,step=5*1024*1024,total=Math.ceil(f.size/step);
 try{
  for(let i=0;i<total;i++){
   const part=f.slice(i*step,Math.min((i+1)*step,f.size));let done=false;
   for(let attempt=0;attempt<3&&!done;attempt++){try{const fd=new FormData();fd.append('upload_id',id);fd.append('index',i);fd.append('total',total);fd.append('chunk',part,'part.bin');await post('{{ route('import-center.chunk') }}',fd);done=true;}catch(err){if(attempt===2)throw err;await new Promise(r=>setTimeout(r,1000*(attempt+1)));}}
   progress.value=Math.round((i+1)/total*90);status.textContent=`Uploading part ${i+1} of ${total} (${progress.value}%)`;
  }
  status.textContent='Verifying file integrity…';
  const digest=await crypto.subtle.digest('SHA-256',await f.arrayBuffer());
  const sha=Array.from(new Uint8Array(digest),b=>b.toString(16).padStart(2,'0')).join('');
  const fd=new FormData();for(const [k,v] of Object.entries({upload_id:id,request_token:token,filename:f.name,total,size:f.size,sha256:sha,purpose:purpose.value}))fd.append(k,v);
  const result=await post('{{ route('import-center.chunk.finish') }}',fd);
  progress.value=100;status.textContent=result.message||'Upload complete. Redirecting…';
  window.location.assign(result.redirect);
 }catch(err){status.textContent=err.message;button.disabled=false;input.disabled=false;purpose.disabled=false;}
});
</script>
@endsection