<?php $page_title = "Envoyer des images — Tuina Loygue"; ?><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $page_title; ?></title>
<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Manrope:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root{--ink:#20262b;--ink2:#535d65;--blue:#1f4e79;--blue-d:#163a5c;--paper:#f6f2ea;--line:#ddd3c0;--jade:#4f7d6e;--ok:#3a7d4f;--err:#a8402f}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Manrope",sans-serif;font-weight:300;color:var(--ink);background:var(--paper);line-height:1.6;padding:2rem}
.wrap{max-width:920px;margin:0 auto}
h1{font-family:"Marcellus",serif;font-weight:400;color:var(--blue);font-size:1.8rem;margin-bottom:.4rem}
.sub{color:var(--ink2);margin-bottom:2rem;font-size:.95rem}
#drop{border:2px dashed var(--line);border-radius:10px;background:#fff;padding:3rem 2rem;text-align:center;
  transition:.25s;cursor:pointer}
#drop.over{border-color:var(--jade);background:#f0f6f3}
#drop .big{font-size:1.15rem;color:var(--ink);margin-bottom:.5rem}
#drop .small{color:var(--ink2);font-size:.9rem}
#drop kbd{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:.1rem .4rem;font-size:.85rem}
.btn{display:inline-block;margin-top:1rem;background:var(--blue);color:#fff;border:none;border-radius:4px;
  padding:.7rem 1.6rem;font-family:"Manrope";font-size:.95rem;cursor:pointer;transition:.25s}
.btn:hover{background:var(--blue-d)}
#status{margin:1.2rem 0;min-height:1.4rem;font-size:.95rem}
#status.ok{color:var(--ok)}#status.err{color:var(--err)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}
.item{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.item .imgwrap{aspect-ratio:4/3;background:#eee url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20"%3E%3Crect width="10" height="10" fill="%23f0f0f0"/%3E%3Crect x="10" y="10" width="10" height="10" fill="%23f0f0f0"/%3E%3C/svg%3E');overflow:hidden;display:flex;align-items:center;justify-content:center}
.item img{width:100%;height:100%;object-fit:cover}
.item .info{padding:.7rem;font-size:.78rem;color:var(--ink2)}
.item .nm{color:var(--ink);word-break:break-all;margin-bottom:.5rem;font-size:.8rem}
.item .copy{width:100%;background:var(--jade);color:#fff;border:none;border-radius:4px;padding:.5rem;cursor:pointer;font-size:.82rem;transition:.2s}
.item .copy:hover{background:#3f6a5c}
.item .copy.done{background:var(--ok)}
.section-t{font-family:"Marcellus",serif;color:var(--ink);font-size:1.2rem;margin:2.5rem 0 .3rem}
.hint{color:var(--ink2);font-size:.85rem;margin-bottom:1rem}
.back{display:inline-block;margin-top:2rem;color:var(--blue)}
</style>
</head>
<body>
<div class="wrap">
  <h1>Envoyer des images</h1>
  <p class="sub">Dépose une image ici, choisis un fichier, ou <strong>colle avec Ctrl+V</strong>.
  Elle est optimisée en WebP et ajoutée à la galerie. Copie ensuite son adresse et donne-la moi en disant où la placer.</p>

  <div id="drop">
    <div class="big">Glisser-déposer une image ici</div>
    <div class="small">ou coller avec <kbd>Ctrl</kbd> + <kbd>V</kbd> — ou&nbsp;:</div>
    <button class="btn" id="pick">Choisir un fichier</button>
    <input type="file" id="file" accept="image/*" multiple hidden>
  </div>

  <div id="status"></div>

  <div class="section-t">Galerie des images envoyées</div>
  <p class="hint">Clique sur « Copier l'adresse » sous une image, puis colle-la moi dans le chat.</p>
  <div class="grid" id="grid"></div>

  <a class="back" href="index.php">← Retour à l'accueil</a>
</div>

<script>
const drop = document.getElementById('drop');
const fileInput = document.getElementById('file');
const statusEl = document.getElementById('status');
const grid = document.getElementById('grid');

document.getElementById('pick').addEventListener('click', e=>{e.preventDefault();fileInput.click();});
fileInput.addEventListener('change', ()=>{ for(const f of fileInput.files) sendFile(f); });

['dragenter','dragover'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.add('over');}));
['dragleave','drop'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.remove('over');}));
drop.addEventListener('drop', e=>{ for(const f of e.dataTransfer.files) if(f.type.startsWith('image/')) sendFile(f); });

// Coller (Ctrl+V)
window.addEventListener('paste', e=>{
  for(const it of e.clipboardData.items){
    if(it.type.startsWith('image/')){ const f=it.getAsFile(); if(f) sendFile(f); }
  }
});

function setStatus(msg, cls){ statusEl.textContent=msg; statusEl.className=cls||''; }

function sendFile(file){
  setStatus('Envoi de '+(file.name||'image collée')+'…');
  const fd = new FormData();
  fd.append('file', file, file.name||'collee.png');
  fetch('outils/upload.php',{method:'POST',body:fd})
    .then(r=>r.json())
    .then(d=>{
      if(d.ok){ setStatus('✓ '+d.name+' ('+d.w+'×'+d.h+', '+Math.round(d.size/1024)+' Ko)','ok'); loadGrid(); }
      else { setStatus('✗ '+(d.error||'Erreur'),'err'); }
    })
    .catch(err=>setStatus('✗ '+err,'err'));
}

function copyText(text, btn){
  const done = ()=>{ btn.textContent='✓ Copié'; btn.classList.add('done');
    setTimeout(()=>{btn.textContent="Copier l'adresse";btn.classList.remove('done');},1500); };
  if(navigator.clipboard && window.isSecureContext){
    navigator.clipboard.writeText(text).then(done).catch(()=>fallback(text,done));
  } else { fallback(text,done); }
}
function fallback(text, done){
  const ta=document.createElement('textarea'); ta.value=text;
  ta.style.position='fixed'; ta.style.opacity='0'; document.body.appendChild(ta);
  ta.focus(); ta.select();
  try{ document.execCommand('copy'); done(); }
  catch(e){ window.prompt('Copie manuelle — Ctrl+C puis Entrée :', text); }
  document.body.removeChild(ta);
}
function loadGrid(){
  fetch('outils/liste.php').then(r=>r.json()).then(list=>{
    grid.innerHTML='';
    if(!list.length){ grid.innerHTML='<p style="color:#888">Aucune image pour l\'instant.</p>'; return; }
    for(const it of list){
      const div=document.createElement('div'); div.className='item';
      div.innerHTML=`<div class="imgwrap"><img src="${it.url}" loading="lazy"></div>
        <div class="info"><div class="nm">${it.full}</div>
        <button class="copy" data-u="${it.full}">Copier l'adresse</button></div>`;
      grid.appendChild(div);
    }
    grid.querySelectorAll('.copy').forEach(b=>{
      b.addEventListener('click',()=>{ copyText(b.dataset.u, b); });
    });
  });
}
loadGrid();
</script>
</body>
</html>
