@extends('layouts.app')
@section('title','Photos')
@section('content')
<style>
.pacc{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.pacc>summary{cursor:pointer;padding:14px 18px;font-weight:800;display:flex;align-items:center;gap:10px;list-style:none}
.pacc>summary::-webkit-details-marker{display:none}
.pacc>summary .chev{margin-left:auto;color:var(--muted);transition:.2s}
.pacc[open]>summary .chev{transform:rotate(90deg)}
.pbadge{font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:20px;background:#fde9d2;color:#a85b1a}
.pacc.complete .pbadge{background:#e0f0d8;color:#3f7a33}
.pbody{padding:6px 14px 14px}
.facc{border-top:1px solid var(--line)}
.facc>summary{cursor:pointer;padding:11px 6px;display:flex;align-items:center;gap:10px;list-style:none;font-weight:600}
.facc>summary::-webkit-details-marker{display:none}
.fstatus{width:20px;text-align:center;font-weight:800}
.ffile{margin-left:auto;font-size:.72rem;color:var(--muted);font-family:monospace}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:8px 6px 16px}
.pdrop{border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center;color:var(--muted);font-size:.88rem}
.pdrop.drag{border-color:var(--orange);background:var(--bg)}
.pright{background:var(--bg);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;min-height:160px}
.pprev{max-width:100%;max-height:260px;border-radius:8px;object-fit:contain}
.pempty{color:var(--muted);font-size:.85rem}
.pmeta{margin-top:8px;font-size:.78rem}
.fmsg{font-size:.8rem}
#libmodal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding:5vh 16px}
#libmodal.show{display:flex}
.libbox{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:860px;width:100%;max-height:88vh;overflow:auto;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.libcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:var(--bg);transition:.15s}
.libcard:hover{border-color:var(--orange);transform:translateY(-2px)}
.libcard img{width:100%;height:110px;object-fit:cover;display:block}
.libcard .c{padding:6px 8px;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcar{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;font-size:.85rem}
.pcar-lbl{display:inline-flex;gap:7px;align-items:center;font-weight:700;cursor:pointer}
.pcar-lbl input{width:auto}
.pcar-cfg{margin-left:10px;color:var(--muted)}
.pcar-sec{width:62px;display:inline;padding:4px 6px}
.pcar-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pcar-slide{position:relative;width:66px;height:48px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.pcar-slide img{width:100%;height:100%;object-fit:cover}
.pcar-del{position:absolute;top:0;right:0;background:rgba(192,57,43,.92);color:#fff;border:0;width:18px;height:18px;cursor:pointer;font-size:.66rem;line-height:18px;padding:0}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
</style>

<div class="row" style="justify-content:space-between;align-items:flex-end">
  <div><div class="h1">Photos</div><div class="sub">Les vraies images du site, page par page. Optimisées automatiquement, crédit lu des métadonnées. Une image manquante = emplacement vide.</div></div>
  <div class="row" style="align-items:center;gap:14px">
    <button type="button" class="btn ghost" id="optimize"><i data-lucide="zap"></i> Optimiser les images</button>
    <div class="stat" style="text-align:center"><div class="n" id="gcount">{{ $filledTotal }} / {{ $total }}</div><div class="l">Emplacements remplis<br><small>({{ $uniqueDone }}/{{ $uniqueTotal }} images uniques)</small></div></div>
  </div>
</div>

@foreach($pages as $p)
<details class="pacc {{ $p['filled']===$p['total']?'complete':'' }}" data-page="{{ $p['slug'] }}" @if($p['filled']<$p['total']) open @endif>
  <summary>
    {{ $p['label'] }}
    <span class="pbadge"><span class="pcount">{{ $p['filled'] }}/{{ $p['total'] }}</span> images</span>
    <i class="chev" data-lucide="chevron-right"></i>
  </summary>
  <div class="pbody">
    @foreach($p['images'] as $im)
    <details class="facc" @if(!$im['exists']) open @endif>
      <summary>
        <span class="fstatus" style="color:{{ $im['exists']?'var(--green)':'#c0392b' }}">@if($im['exists'])<i data-lucide="check" style="width:16px;height:16px"></i>@else<i data-lucide="x" style="width:16px;height:16px"></i>@endif</span>
        {{ $im['label'] }}
        <span class="ffile">{{ $im['file'] }}</span>
      </summary>
      <div class="pfield {{ $im['exists']?'filled':'' }}" data-page="{{ $p['slug'] }}" data-file="{{ $im['file'] }}">
        <div class="pgrid">
          <div class="pleft">
            <div class="pdrop">
              Glissez une image ici, ou<br>
              <button type="button" class="btn ghost sm ppick" style="margin-top:8px">Choisir une photo</button>
              <button type="button" class="btn ghost sm plib" style="margin-top:8px"><i data-lucide="images"></i> Bibliothèque</button>
              <input type="file" accept="image/*" class="pfile" hidden>
              <div class="sub" style="margin-top:8px">Enregistrée en <b>{{ $im['file'] }}</b>, redimensionnée à {{ $maxWidth }} px et compressée avant l'envoi (le poids du fichier d'origine n'a pas d'importance). HEIC iPhone non pris en charge.</div>
            </div>
            <label>Crédit photo</label>
            <input class="pcredit" value="{{ $im['credit'] }}" placeholder="Auteur / © (auto si présent dans la photo)">
            <div class="row" style="margin-top:10px">
              <button type="button" class="btn danger sm pdel" {{ $im['exists']?'':'disabled' }}>Supprimer</button>
              <span class="fmsg sub"></span>
            </div>
          </div>
          <div class="pright">
            <img class="pprev" src="{{ $im['url'] }}" alt="" style="{{ $im['exists']?'':'display:none' }}">
            <div class="pempty" style="{{ $im['exists']?'display:none':'' }}">Aucune image</div>
            <div class="pmeta sub">{{ $im['meta'] }}</div>
          </div>
        </div>
        <div class="pcar">
          <label class="pcar-lbl"><input type="checkbox" class="pcar-on" @checked($im['carousel'])> <i data-lucide="film" style="width:1em;height:1em;vertical-align:-.15em"></i> Carrousel à cet endroit</label>
          <span class="pcar-cfg" @style(['display:none' => !$im['carousel']])>, défile toutes les
            <input type="number" class="pcar-sec" value="{{ $im['interval'] }}" min="0.5" max="30" step="0.5"> s ·
            <button type="button" class="btn ghost sm pcar-add">+ Ajouter une image</button>
            <button type="button" class="btn ghost sm pcar-lib"><i data-lucide="images"></i> Bibliothèque</button>
            <input type="file" accept="image/*" class="pcar-file" hidden>
            <span class="pcar-msg sub"></span>
          </span>
          <div class="pcar-strip" @style(['display:none' => !$im['carousel']])>
            @foreach($im['slides'] as $sl)
              <span class="pcar-slide" data-slide="{{ $sl['file'] }}"><img src="{{ $sl['url'] }}" alt=""><button type="button" class="pcar-del" title="Retirer"><i data-lucide="x" style="width:12px;height:12px"></i></button></span>
            @endforeach
          </div>
        </div>
      </div>
    </details>
    @endforeach
  </div>
</details>
@endforeach

<div id="libmodal">
  <div class="libbox">
    <div class="row" style="justify-content:space-between;align-items:center">
      <b><i data-lucide="images" style="width:1em;height:1em;vertical-align:-.15em"></i> Médiathèque <span class="sub" id="libfor"></span></b>
      <button type="button" class="btn ghost sm" id="libclose">Fermer</button>
    </div>
    <div class="sub" style="margin-top:4px">Naviguez dans les dossiers, cliquez sur une image pour l'utiliser, ou glissez-la sur un dossier (ou le fil d'Ariane) pour la ranger.</div>
    <div style="display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:10px">
      <div id="libcrumb" style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:.85rem"></div>
      <div id="libnewf" style="display:flex;gap:6px">
        <input id="libnewf-name" placeholder="Nom du dossier…" maxlength="80" style="width:150px;padding:6px 10px;font-size:.85rem">
        <button type="button" class="btn ghost sm" id="libnewf-btn"><i data-lucide="folder-plus"></i> Créer</button>
      </div>
    </div>
    <div class="libgrid" id="libgrid"></div>
    <p class="sub" id="libempty" style="display:none;padding:24px;text-align:center">Aucune image ici, regardez dans les dossiers ou uploadez une première image.</p>
  </div>
</div>

@push('scripts')<script>
const CONF={maxW:{{ $maxWidth }},q:{{ $quality }}};
const UP="{{ route('admin.photos.store') }}", UCRED="{{ route('admin.photos.credit') }}", UDEL="{{ route('admin.photos.destroy') }}";
const LIBLIST="{{ route('admin.photos.library') }}", LIBUSE="{{ route('admin.photos.from-library') }}", OPTIMIZE="{{ route('admin.photos.optimize') }}";
const CAR="{{ route('admin.photos.carousel') }}", SLIDE="{{ route('admin.photos.slide') }}", SLIDEDEL="{{ route('admin.photos.slide.destroy') }}";
const LIBMOVE="{{ route('admin.mediatheque.move') }}", LIBFOLDERS="{{ route('admin.mediatheque.folders.store') }}";

// ---- Traduction des erreurs (code, explication) ----
const ERRS={
  0:"Connexion interrompue, vérifiez votre réseau.",
  403:"Accès refusé (droits insuffisants).",
  413:"Fichier trop volumineux pour le serveur.",
  419:"Session expirée, rechargez la page puis reconnectez-vous.",
  422:"Image invalide (format non supporté ou trop grande).",
  429:"Trop de tentatives, patientez quelques secondes.",
  500:"Erreur interne du serveur, réessayez ou prévenez l'administrateur.",
  502:"Serveur injoignable, réessayez dans un instant.",
  503:"Service momentanément indisponible, réessayez."
};
function httpMsg(status,serverMsg){return status+', '+(serverMsg||ERRS[status]||"Erreur inattendue.");}
async function errFrom(r){
  let m='';try{const j=await r.json();m=j.message||(j.errors&&Object.values(j.errors)[0]&&Object.values(j.errors)[0][0])||'';}catch(_){}
  return httpMsg(r.status,m);
}

document.getElementById('optimize').addEventListener('click',function(){
  if(!confirm('Optimiser toutes les images du site (redimensionnement ≤ {{ $maxWidth }} px + compression) ? Les crédits sont conservés.'))return;
  const b=this;b.disabled=true;b.textContent='Optimisation en cours…';
  fetch(OPTIMIZE,{method:'POST',headers:{'X-CSRF-TOKEN':window.csrf,'Accept':'application/json'}})
    .then(r=>r.json()).then(d=>{alert(d.output||'Terminé.');location.reload();})
    .catch(()=>{alert('Erreur pendant l\'optimisation.');b.disabled=false;b.textContent='Optimiser les images';});
});

function recount(){
  let g=0,gt=0;
  document.querySelectorAll('.pacc').forEach(p=>{
    const fields=p.querySelectorAll('.pfield'), f=p.querySelectorAll('.pfield.filled').length;
    p.querySelector('.pcount').textContent=f+'/'+fields.length;
    p.classList.toggle('complete',f===fields.length);
    g+=f;gt+=fields.length;
  });
  document.getElementById('gcount').textContent=g+' / '+gt;
}
// Met à jour TOUS les champs qui pointent vers le même fichier (images partagées).
function eachSame(file,fn){document.querySelectorAll('.pfield[data-file="'+CSS.escape(file)+'"]').forEach(fn);}
function setFilled(field,on){
  field.classList.toggle('filled',on);
  const st=field.closest('details').querySelector('.fstatus');
  st.innerHTML=on?'<i data-lucide="check" style="width:16px;height:16px"></i>':'<i data-lucide="x" style="width:16px;height:16px"></i>';st.style.color=on?'var(--green)':'#c0392b';window.lucide&&lucide.createIcons();
  field.querySelector('.pdel').disabled=!on;
}
function showPhoto(field,photo){
  const img=field.querySelector('.pprev'),empty=field.querySelector('.pempty'),meta=field.querySelector('.pmeta');
  img.src=photo.url;img.style.display='';empty.style.display='none';meta.textContent=photo.meta||'';
}

// Optimise via canvas ; en cas d'échec (format exotique, navigateur), renvoie
// le fichier d'origine en repli pour que l'upload aboutisse quand même.
// type='image/png' préserve la transparence (logo, plannings) ; sinon JPEG.
function optimize(file,type){return new Promise(res=>{
  type=type||'image/jpeg';
  var done=false; var finish=function(b){ if(done)return; done=true; res(b||file); };
  setTimeout(function(){finish(file);},8000); // garde-fou : ne jamais bloquer
  const img=new Image();
  img.onload=function(){
    try{
      if(!img.naturalWidth){finish(file);return;}
      const sc=Math.min(1,CONF.maxW/img.naturalWidth);
      const w=Math.round(img.naturalWidth*sc),h=Math.round(img.naturalHeight*sc);
      const c=document.createElement('canvas');c.width=w;c.height=h;
      c.getContext('2d').drawImage(img,0,0,w,h);
      c.toBlob(function(b){URL.revokeObjectURL(img.src);finish(b);},type,CONF.q);
    }catch(e){URL.revokeObjectURL(img.src);finish(file);}
  };
  img.onerror=function(){URL.revokeObjectURL(img.src);finish(file);};
  img.src=URL.createObjectURL(file);
});}

function readExifCredit(file){return new Promise(res=>{
  if(!/jpe?g/i.test(file.type)){res('');return;}
  const fr=new FileReader();
  fr.onload=function(){
    try{
      const v=new DataView(fr.result);
      if(v.getUint16(0)!==0xFFD8){res('');return;}
      let off=2;
      while(off<v.byteLength){
        const marker=v.getUint16(off);
        if(marker===0xFFE1){res(parseTiff(v,off+10));return;}
        if((marker&0xFF00)!==0xFF00)break;
        off+=2+v.getUint16(off+2);
      }
      res('');
    }catch(e){res('');}
  };
  fr.readAsArrayBuffer(file.slice(0,131072));
});}
function parseTiff(v,start){
  try{
    const little=v.getUint16(start)===0x4949;
    const ifd0=v.getUint32(start+4,little), n=v.getUint16(start+ifd0,little);
    let artist='',copy='',descr='';
    for(let i=0;i<n;i++){
      const e=start+ifd0+2+i*12, tag=v.getUint16(e,little), cnt=v.getUint32(e+4,little);
      if(tag!==0x013B&&tag!==0x8298&&tag!==0x010E)continue;
      const valOff=cnt>4?start+v.getUint32(e+8,little):e+8;
      let s='';for(let j=0;j<cnt-1;j++){const ch=v.getUint8(valOff+j);if(ch)s+=String.fromCharCode(ch);}
      s=s.trim();
      if(tag===0x013B)artist=s;else if(tag===0x8298)copy=s;else descr=s;
    }
    return artist||copy||descr||'';
  }catch(e){return '';}
}

async function doUpload(field,file){
  const msg=field.querySelector('.fmsg'),credit=field.querySelector('.pcredit'),fname=field.dataset.file;
  // Le navigateur ne sait pas décoder le HEIC (photos iPhone), message clair.
  if(/\.(heic|heif)$/i.test(file.name||'')||/image\/hei[cf]/i.test(file.type||'')){
    msg.textContent='Format HEIC (iPhone) non pris en charge. Exportez/convertissez en JPG ou PNG.';return;
  }
  try{
    msg.textContent='Lecture des métadonnées…';
    const exif=await readExifCredit(file);
    if(exif&&!credit.value.trim())credit.value=exif;
    msg.textContent='Optimisation…';
    const isPng=/\.png$/i.test(fname);
    const blob=await optimize(file,isPng?'image/png':'image/jpeg');
    const fd=new FormData();
    fd.append('page',field.dataset.page);fd.append('file',fname);fd.append('credit',credit.value);
    fd.append('photo',blob,fname);
    msg.textContent='Envoi…';
    const r=await fetch(UP,{method:'POST',headers:{'X-CSRF-TOKEN':window.csrf,'Accept':'application/json'},body:fd});
    if(!r.ok){msg.textContent=await errFrom(r);return;}
    const d=await r.json();
    eachSame(fname,f=>{showPhoto(f,d.photo);setFilled(f,true);if(d.photo.credit)f.querySelector('.pcredit').value=d.photo.credit;});
    recount();msg.textContent='Enregistré';
  }catch(e){msg.textContent='Erreur : '+e.message;}
}

function wire(field){
  const fileInput=field.querySelector('.pfile'),drop=field.querySelector('.pdrop');
  field.querySelector('.ppick').addEventListener('click',()=>fileInput.click());
  field.querySelector('.plib').addEventListener('click',()=>openLib(field));
  wireCarousel(field);
  fileInput.addEventListener('change',e=>{if(e.target.files[0])doUpload(field,e.target.files[0]);});
  ['dragover','dragenter'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.add('drag');}));
  ['dragleave','drop'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.remove('drag');}));
  drop.addEventListener('drop',e=>{if(e.dataTransfer.files[0])doUpload(field,e.dataTransfer.files[0]);});

  let t;const credit=field.querySelector('.pcredit');
  credit.addEventListener('input',()=>{
    if(!field.classList.contains('filled'))return;
    clearTimeout(t);const msg=field.querySelector('.fmsg');msg.textContent='…';
    t=setTimeout(()=>{
      fetch(UCRED,{method:'PATCH',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf},
        body:JSON.stringify({page:field.dataset.page,file:field.dataset.file,credit:credit.value})})
        .then(r=>{msg.textContent=r.ok?'Crédit enregistré':httpMsg(r.status);
          if(r.ok)eachSame(field.dataset.file,f=>{if(f!==field)f.querySelector('.pcredit').value=credit.value;});});
    },800);
  });
  field.querySelector('.pdel').addEventListener('click',()=>{
    if(!confirm('Supprimer cette image du site ?'))return;
    fetch(UDEL,{method:'DELETE',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf},
      body:JSON.stringify({page:field.dataset.page,file:field.dataset.file})})
      .then(r=>{if(!r.ok){field.querySelector('.fmsg').textContent=httpMsg(r.status);return;}
        eachSame(field.dataset.file,f=>{
          const img=f.querySelector('.pprev');img.src='';img.style.display='none';
          f.querySelector('.pempty').style.display='';f.querySelector('.pmeta').textContent='';
          f.querySelector('.pcredit').value='';setFilled(f,false);
        });
        recount();field.querySelector('.fmsg').textContent='Supprimée';
      });
  });
}
// ---- Carrousel par emplacement ----
function wireCarousel(field){
  const on=field.querySelector('.pcar-on'), cfg=field.querySelector('.pcar-cfg'),
        strip=field.querySelector('.pcar-strip'), sec=field.querySelector('.pcar-sec');
  function saveCar(){
    fetch(CAR,{method:'PATCH',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf},
      body:JSON.stringify({page:field.dataset.page,file:field.dataset.file,carousel:on.checked,interval:parseFloat(sec.value)||2})});
  }
  on.addEventListener('change',()=>{const v=on.checked?'':'none';cfg.style.display=v;strip.style.display=v;saveCar();});
  let t; sec.addEventListener('input',()=>{clearTimeout(t);t=setTimeout(saveCar,600);});
  field.querySelector('.pcar-add').addEventListener('click',()=>field.querySelector('.pcar-file').click());
  field.querySelector('.pcar-lib').addEventListener('click',()=>openLib(field,'slide'));
  field.querySelector('.pcar-file').addEventListener('change',e=>{if(e.target.files[0])addSlide(field,e.target.files[0]);e.target.value='';});
  strip.querySelectorAll('.pcar-del').forEach(b=>b.addEventListener('click',()=>delSlide(field,b.closest('.pcar-slide'))));
}
async function addSlide(field,file){
  const msg=field.querySelector('.pcar-msg');
  if(/\.(heic|heif)$/i.test(file.name||'')){msg.textContent='HEIC non pris en charge.';return;}
  msg.textContent='Envoi…';
  const blob=await optimize(file);
  const fd=new FormData();fd.append('page',field.dataset.page);fd.append('file',field.dataset.file);fd.append('photo',blob,'slide.jpg');
  const r=await fetch(SLIDE,{method:'POST',headers:{'X-CSRF-TOKEN':window.csrf,'Accept':'application/json'},body:fd});
  if(!r.ok){msg.textContent=await errFrom(r);return;}
  const d=await r.json();msg.textContent='Ajoutée';addThumb(field,d.slide);
}
function addThumb(field,slide){
  const s=document.createElement('span');s.className='pcar-slide';s.dataset.slide=slide.file;
  s.innerHTML='<img src="'+slide.url+'" alt=""><button type="button" class="pcar-del" title="Retirer"><i data-lucide="x" style="width:12px;height:12px"></i></button>';
  s.querySelector('.pcar-del').addEventListener('click',()=>delSlide(field,s));
  field.querySelector('.pcar-strip').appendChild(s);
  window.lucide&&lucide.createIcons();
}
function delSlide(field,elt){
  fetch(SLIDEDEL,{method:'DELETE',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf},
    body:JSON.stringify({page:field.dataset.page,file:field.dataset.file,slide:elt.dataset.slide})}).then(()=>elt.remove());
}

document.querySelectorAll('.pfield').forEach(wire);

// ---- Médiathèque (bibliothèque réutilisable, navigation par dossiers) ----
let libField=null, libMode='main', libData=null, libCwd=null;
const modal=document.getElementById('libmodal'),grid=document.getElementById('libgrid'),crumb=document.getElementById('libcrumb');
document.getElementById('libclose').addEventListener('click',()=>modal.classList.remove('show'));
modal.addEventListener('click',e=>{if(e.target===modal)modal.classList.remove('show');});
function openLib(field,mode){
  libField=field; libMode=mode||'main'; libCwd=null;
  document.getElementById('libfor').textContent=(libMode==='slide'?'· carrousel de ':'· ')+field.dataset.file;
  grid.innerHTML='<p class="sub" style="padding:20px">Chargement…</p>';
  crumb.innerHTML='';
  document.getElementById('libempty').style.display='none';
  modal.classList.add('show');
  fetch(LIBLIST,{headers:{'Accept':'application/json'}}).then(r=>r.json()).then(d=>{libData=d;renderLib();});
}
let libDragged=null;
function libDepth(id){let d=0,n=id;while(n){const f=libData.folders.find(x=>x.id===n);if(!f)break;d++;n=f.parent_id;}return d;}
function libDropZone(el,targetId){
  el.addEventListener('dragover',e=>{if(!libDragged)return;e.preventDefault();el.style.outline='2px solid var(--orange)';});
  el.addEventListener('dragleave',()=>{el.style.outline='';});
  el.addEventListener('drop',e=>{
    e.preventDefault();el.style.outline='';
    if(!libDragged)return;
    const file=libDragged, target=targetId;
    if(String(target||'')===String(libCwd||''))return; // déjà ici
    fetch(LIBMOVE,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf,'Accept':'application/json'},
      body:JSON.stringify({files:[file],folder_id:target})})
      .then(r=>{if(!r.ok)throw 0;return r.json();})
      .then(()=>{const im=libData.images.find(i=>i.source===file);if(im)im.folder_id=target;renderLib();})
      .catch(()=>alert('Déplacement impossible, réessayez.'));
  });
}
function renderLib(){
  // Fil d'Ariane : Racine / dossier / sous-dossier (navigation sans rechargement,
  // et chaque étage accepte le dépôt d'une image pour la faire remonter).
  crumb.innerHTML='';
  const trail=[];let n=libCwd;
  while(n){const f=libData.folders.find(x=>x.id===n);if(!f)break;trail.unshift(f);n=f.parent_id;}
  const mk=(label,id,last)=>{
    const a=document.createElement('button');a.type='button';a.textContent=label;
    a.style.cssText='border:0;cursor:pointer;padding:5px 11px;border-radius:8px;font-weight:700;background:'+(last?'var(--orange)':'var(--bg)')+';color:'+(last?'#fff':'inherit');
    a.addEventListener('click',()=>{libCwd=id;renderLib();});
    libDropZone(a,id);
    return a;
  };
  crumb.appendChild(mk('Racine',null,libCwd===null));
  trail.forEach((f,i)=>{
    const s=document.createElement('span');s.textContent='/';s.style.color='var(--muted)';crumb.appendChild(s);
    crumb.appendChild(mk(f.name,f.id,i===trail.length-1));
  });

  // Création de dossier : masquée à la profondeur maximale (3 niveaux).
  document.getElementById('libnewf').style.display=libDepth(libCwd)>=3?'none':'flex';

  grid.innerHTML='';
  // Dossiers du niveau courant d'abord (comme dans la Médiathèque).
  const kids=libData.folders.filter(f=>(f.parent_id||null)===(libCwd||null));
  kids.forEach(f=>{
    const c=document.createElement('div');c.className='libcard';c.style.textAlign='center';
    const nImg=libData.images.filter(i=>i.folder_id===f.id).length;
    const nSub=libData.folders.filter(x=>x.parent_id===f.id).length;
    c.innerHTML='<div style="padding:18px 0 4px;display:flex;justify-content:center"><i data-lucide="folder" style="width:38px;height:38px"></i></div><div class="c"><b>'+f.name+'</b><br>'+nImg+' image(s)'+(nSub?' · '+nSub+' dossier(s)':'')+'</div>';
    c.addEventListener('click',()=>{libCwd=f.id;renderLib();});
    libDropZone(c,f.id);
    grid.appendChild(c);
  });
  const imgs=libData.images.filter(i=>(i.folder_id||null)===(libCwd||null));
  imgs.forEach(im=>{
    const c=document.createElement('div');c.className='libcard';c.draggable=true;
    c.innerHTML='<img src="'+im.url+'" alt="" loading="lazy" style="pointer-events:none"><div class="c">'+(im.credit||im.name||'')+'</div>';
    c.title=(im.name||'')+' · '+(im.meta||'');
    c.addEventListener('click',()=>useLib(im.source));
    c.addEventListener('dragstart',e=>{libDragged=im.source;e.dataTransfer.effectAllowed='move';c.style.opacity='.4';});
    c.addEventListener('dragend',()=>{c.style.opacity='';libDragged=null;});
    grid.appendChild(c);
  });
  document.getElementById('libempty').style.display=(kids.length||imgs.length)?'none':'';
  window.lucide&&lucide.createIcons();
}
// Bouton « + Créer » du sélecteur : crée le dossier dans le niveau affiché.
document.getElementById('libnewf-btn').addEventListener('click',()=>{
  const input=document.getElementById('libnewf-name'), name=input.value.trim();
  if(!name||!libData)return;
  fetch(LIBFOLDERS,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf,'Accept':'application/json'},
    body:JSON.stringify({name:name,parent_id:libCwd})})
    .then(r=>{if(!r.ok)throw 0;return r.json();})
    .then(d=>{
      if(!libData.folders.some(f=>f.id===d.folder.id))libData.folders.push(d.folder);
      input.value='';renderLib();
    })
    .catch(()=>alert('Création impossible (nom déjà pris ou profondeur maximale).'));
});
document.getElementById('libnewf-name').addEventListener('keydown',e=>{
  if(e.key==='Enter'){e.preventDefault();document.getElementById('libnewf-btn').click();}
});
function useLib(source){
  const field=libField;
  if(libMode==='slide'){
    fetch(SLIDE,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf,'Accept':'application/json'},
      body:JSON.stringify({page:field.dataset.page,file:field.dataset.file,source:source})})
      .then(r=>r.ok?r.json():Promise.reject(r)).then(d=>{addThumb(field,d.slide);modal.classList.remove('show');field.querySelector('.pcar-msg').textContent='Ajoutée';})
      .catch(async r=>{field.querySelector('.pcar-msg').textContent=(r&&typeof r.status==='number')?await errFrom(r):'Erreur';modal.classList.remove('show');});
    return;
  }
  fetch(LIBUSE,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf,'Accept':'application/json'},
    body:JSON.stringify({page:field.dataset.page,file:field.dataset.file,source:source})})
    .then(r=>r.ok?r.json():Promise.reject(r)).then(d=>{
      eachSame(field.dataset.file,f=>{showPhoto(f,d.photo);setFilled(f,true);if(d.photo.credit)f.querySelector('.pcredit').value=d.photo.credit;});
      recount();modal.classList.remove('show');field.querySelector('.fmsg').textContent='Image de la médiathèque appliquée';
    }).catch(async r=>{field.querySelector('.fmsg').textContent=(r&&typeof r.status==='number')?await errFrom(r):'Erreur médiathèque';modal.classList.remove('show');});
}
</script>@endpush
@endsection