HouseHub/modules/garage/assets/garage.js

// GarageManager - SPA Frontend
const API = '/modules/garage/api.php';
const UPLOADS = '/modules/garage/api.php?action=photo&file=';

function $(s,ctx=document){return ctx.querySelector(s);}
function $$(s,ctx=document){return [...ctx.querySelectorAll(s)];}
function fmt(n){return n!=null?Number(n).toLocaleString('fr-FR'):'--';}
function fmtPrice(n){return n!=null?Number(n).toFixed(2)+' €':'--';}
function fmtDate(d){if(!d)return '--';return new Date(d).toLocaleDateString('fr-FR');}
function formatBytes(n){
  n=Number(n)||0;
  if(n<1024)return n+' o';
  if(n<1048576)return (n/1024).toFixed(1)+' Ko';
  return (n/1048576).toFixed(1)+' Mo';
}
function ago(d){if(!d)return '';const diff=Math.floor((Date.now()-new Date(d))/86400000);if(diff===0)return "aujourd'hui";if(diff===1)return 'hier';return 'il y a '+diff+'j';}
function escHtml(s){const d=document.createElement('div');d.textContent=String(s??'');return d.innerHTML;}
function toast(msg,type='success'){
  const c=document.getElementById('toasts');const t=document.createElement('div');
  t.className='toast '+type;t.textContent=msg;c.appendChild(t);setTimeout(()=>t.remove(),3000);
}

// ─── STATE ────────────────────────────────────────────────────────────────────
let currentPage='dashboard';
let currentVehicleId=null;
let currentMaintenanceId=null;

// ─── NAV ──────────────────────────────────────────────────────────────────────
function navigate(page,params={}){
  currentPage=page;
  $$('.page').forEach(p=>p.classList.remove('active'));
  $$('.nav-link').forEach(n=>n.classList.remove('active'));
  document.getElementById('page-'+page)?.classList.add('active');
  const navTarget=page==='maintenance'?'maintenances-all':page==='vehicle'?'vehicles':page;
  document.querySelector('.nav-link[data-page="'+navTarget+'"]')?.classList.add('active');
  if(page==='dashboard')loadDashboard();
  else if(page==='vehicles')loadVehicles();
  else if(page==='vehicle')loadVehicleDetail(params.id);
  else if(page==='maintenance')loadMaintenanceDetail(params.id);
  else if(page==='parts')loadParts();
  else if(page==='maintenances-all')loadAllMaintenances();
}

// ─── API ──────────────────────────────────────────────────────────────────────
async function api(action,method='GET',data=null,extra=''){
  const opts={method,headers:{}};
  if(data&&!(data instanceof FormData)){opts.headers['Content-Type']='application/json';opts.body=JSON.stringify(data);}
  else if(data instanceof FormData){opts.body=data;}
  const r=await fetch(API+'?action='+action+extra,opts);
  const j=await r.json();
  if(!j.ok)throw new Error(j.error||'Erreur API');
  return j.data;
}

// ─── DASHBOARD ────────────────────────────────────────────────────────────────
async function loadDashboard(){
  try{
    const[stats,vehicles,reminders]=await Promise.all([api('stats'),api('vehicles'),api('maintenances')]);
    $('#stat-vehicles').textContent=stats.vehicles;
    $('#stat-maintenances').textContent=stats.maintenances;
    $('#stat-parts').textContent=stats.parts;
    $('#stat-cost').textContent=fmtPrice(parseFloat(stats.total_cost)+parseFloat(stats.total_parts_cost));
    renderDashboardVehicles(vehicles);
    renderReminders(reminders);
  }catch(e){toast(e.message,'error');}
}

function renderDashboardVehicles(list){
  const el=$('#dashboard-vehicles');
  if(!list.length){el.innerHTML='<div class="empty-state"><div class="icon">🚗</div><p>Aucun véhicule</p></div>';return;}
  el.innerHTML=list.slice(0,6).map(v=>vehicleCardHTML(v)).join('');
  $$('.vehicle-card',el).forEach(c=>c.addEventListener('click',()=>navigate('vehicle',{id:c.dataset.id})));
}

function vehicleCardHTML(v){
  const photoHTML=v.photo?'<img src="'+UPLOADS+v.photo+'" alt="">':'<span class="no-photo">🚗</span>';
  const fuel=v.fuel_type||'Essence';
  const fuelClass='fuel-'+fuel.replace(/\s/g,'');
  return '<div class="vehicle-card" data-id="'+v.id+'">'+
    '<div class="vehicle-card-img">'+photoHTML+'<span class="fuel-badge '+fuelClass+'">'+escHtml(fuel)+'</span></div>'+
    '<div class="vehicle-card-body">'+
      '<div class="vehicle-card-title">'+escHtml(v.name)+'</div>'+
      '<div class="vehicle-card-sub">'+escHtml(v.brand)+' '+escHtml(v.model)+(v.year?' &middot; '+v.year:'')+'</div>'+
      '<div class="vehicle-card-stats">'+
        '<div class="vc-stat">🔧 <strong>'+(v.maintenance_count||0)+'</strong> entretiens</div>'+
        '<div class="vc-stat">💶 <strong>'+fmtPrice(v.total_cost)+'</strong></div>'+
      '</div>'+
    '</div>'+
    '<div class="vehicle-card-footer">'+
      (v.license_plate?'<span class="plate">'+escHtml(v.license_plate)+'</span>':'<span></span>')+
      '<span class="vc-stat">'+(v.current_km?fmt(v.current_km)+' km':'--')+'</span>'+
    '</div></div>';
}

function renderReminders(list){
  const el=$('#reminders-list');const today=new Date();
  if(!list.length){el.innerHTML='<div class="empty-state" style="padding:1.5rem"><p style="color:var(--muted)">Aucun rappel configuré</p></div>';return;}
  el.innerHTML='<div class="table-wrap"><table><thead><tr><th>Véhicule</th><th>Type</th><th>Prochaine date</th><th>Prochain km</th><th>Écart km</th></tr></thead><tbody>'+
    list.map(r=>{
      const diff=r.next_km&&r.current_km?r.next_km-r.current_km:null;
      const dateOk=r.next_date?new Date(r.next_date)>today:true;
      const kmOk=diff==null||diff>0;
      const cls=(!dateOk||!kmOk)?'badge-red':diff!=null&&diff<2000?'badge-amber':'badge-green';
      return '<tr><td><strong>'+escHtml(r.vehicle_name)+'</strong>'+(r.license_plate?' <span class="plate">'+escHtml(r.license_plate)+'</span>':'')+'</td>'+
        '<td>'+escHtml(r.type)+'</td>'+
        '<td>'+(r.next_date?'<span class="badge '+cls+'">'+fmtDate(r.next_date)+'</span>':'--')+'</td>'+
        '<td>'+(r.next_km?fmt(r.next_km)+' km':'--')+'</td>'+
        '<td>'+(diff!=null?'<span class="badge '+(diff<0?'badge-red':diff<2000?'badge-amber':'badge-green')+'">'+(diff>=0?'+':'')+fmt(diff)+' km</span>':'--')+'</td></tr>';
    }).join('')+
  '</tbody></table></div>';
}

// ─── VEHICLES LIST ────────────────────────────────────────────────────────────
async function loadVehicles(){
  try{
    const list=await api('vehicles');
    const el=$('#vehicles-grid');
    if(!list.length){el.innerHTML='<div class="empty-state"><div class="icon">🚗</div><p>Aucun véhicule. Ajoutez-en un !</p></div>';return;}
    el.innerHTML=list.map(v=>vehicleCardHTML(v)).join('');
    $$('.vehicle-card',el).forEach(c=>c.addEventListener('click',()=>navigate('vehicle',{id:c.dataset.id})));
  }catch(e){toast(e.message,'error');}
}

// ─── VEHICLE DETAIL ───────────────────────────────────────────────────────────
async function loadVehicleDetail(id){
  currentVehicleId=id;
  try{
    const[v,maintenances,parts]=await Promise.all([
      api('vehicles','GET',null,'&id='+id),
      api('maintenances','GET',null,'&vehicle_id='+id),
      api('parts','GET',null,'&vehicle_id='+id)
    ]);
    renderVehicleHeader(v);
    renderMaintenances(maintenances);
    renderVehicleParts(parts);
    setVehicleDocTabBadge(v);
    await loadVehicleDocuments();
    document.title='GarageManager · '+v.name;
  }catch(e){toast(e.message,'error');}
}

function renderVehicleHeader(v){
  const photoHTML=v.photo?'<img src="'+UPLOADS+v.photo+'" alt="">':'<div class="no-photo">🚗</div>';
  const totalCost=(parseFloat(v.stats?.total||0)+parseFloat(v.parts_stats?.total||0)).toFixed(2);
  $('#vehicle-header').innerHTML=
    '<div class="vehicle-detail-header">'+
      '<div class="vehicle-detail-img">'+photoHTML+'</div>'+
      '<div class="vehicle-meta">'+
        '<h2>'+escHtml(v.name)+'</h2>'+
        '<p class="sub">'+escHtml(v.brand)+' '+escHtml(v.model)+(v.year?' · '+v.year:'')+'</p>'+
        '<div style="display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem">'+
          (v.license_plate?'<span class="plate">'+escHtml(v.license_plate)+'</span>':'')+
          '<span class="badge badge-blue">'+(v.fuel_type||'Essence')+'</span>'+
          (v.color?'<span class="badge badge-gray">🎨 '+escHtml(v.color)+'</span>':'')+
        '</div>'+
        '<div class="meta-grid">'+
          '<div class="meta-item"><span class="k">Kilométrage</span><br><span class="v">'+fmt(v.current_km)+' km</span></div>'+
          '<div class="meta-item"><span class="k">Entretiens</span><br><span class="v">'+(v.stats?.cnt||0)+'</span></div>'+
          '<div class="meta-item"><span class="k">Coût total</span><br><span class="v">'+fmtPrice(totalCost)+'</span></div>'+
          (v.purchase_date?'<div class="meta-item"><span class="k">Achat</span><br><span class="v">'+fmtDate(v.purchase_date)+'</span></div>':'')+
          (v.vin?'<div class="meta-item"><span class="k">VIN</span><br><span class="v" style="font-size:.75rem;font-family:monospace">'+escHtml(v.vin)+'</span></div>':'')+
        '</div>'+
        '<div class="garage-docs-recap">'+
          '📎 <strong>'+(Number(v.vehicle_docs_count)||0)+'</strong> '+(Number(v.vehicle_docs_count)===1?'document':'documents')+' véhicule · '+
          '<strong>'+(Number(v.maint_docs_count)||0)+'</strong> sur entretiens (factures, etc.) · '+
          '<button type="button" class="btn-link-sm" onclick="switchTab(\'documents\')">Voir les documents véhicule</button>'+
        '</div>'+
      '</div>'+
      '<div class="vehicle-detail-actions">'+
        '<button class="btn btn-secondary btn-sm" onclick="openEditVehicle('+v.id+')">✏️ Modifier</button>'+
        '<button class="btn btn-secondary btn-sm" onclick="openUploadPhoto('+v.id+')">📷 Photo</button>'+
        '<button class="btn btn-danger btn-sm" onclick="deleteVehicle('+v.id+')">🗑️ Supprimer</button>'+
      '</div>'+
    '</div>';
}

function renderMaintenances(list){
  const el=$('#maintenance-list');
  const totalCost=list.reduce((s,m)=>s+parseFloat(m.cost||0)+parseFloat(m.parts_cost||0),0);
  $('#maintenance-total').textContent=fmtPrice(totalCost);
  if(!list.length){el.innerHTML='<div class="empty-state"><div class="icon">🔧</div><p>Aucun entretien enregistré</p></div>';return;}
  el.innerHTML='<div class="table-wrap"><table><thead><tr><th>Date</th><th>Type</th><th>Description</th><th>Kilométrage</th><th>Coût MO</th><th>Pièces</th><th>Prochain</th><th></th></tr></thead><tbody>'+
    list.map(m=>'<tr style="cursor:pointer" onclick="navigate(\'maintenance\',{id:'+m.id+'})">'+
      '<td><strong>'+fmtDate(m.date)+'</strong><br><span style="color:var(--muted);font-size:.75rem">'+ago(m.date)+'</span>'+
        (m.documents_count>0?' <span class="badge badge-gray garage-maint-doc-badge" title="Documents / factures">📎 '+m.documents_count+'</span>':'')+
      '</td>'+
      '<td><span class="badge badge-blue">'+escHtml(m.type)+'</span></td>'+
      '<td style="max-width:200px;color:var(--muted)">'+(m.description?escHtml(m.description):'--')+'</td>'+
      '<td>'+(m.km?fmt(m.km)+' km':'--')+'</td>'+
      '<td>'+fmtPrice(m.cost)+'</td>'+
      '<td>'+(m.parts_count>0?'<span class="badge badge-purple">🔩 '+m.parts_count+' ('+fmtPrice(m.parts_cost)+')</span>':'--')+'</td>'+
      '<td style="font-size:.78rem">'+(m.next_date?'📅 '+fmtDate(m.next_date):'')+' '+(m.next_km?'<br>🛣️ '+fmt(m.next_km)+' km':'')+'</td>'+
      '<td onclick="event.stopPropagation()">'+
        '<button class="btn btn-secondary btn-sm btn-icon" onclick="openEditMaintenance('+m.id+')" title="Modifier">✏️</button> '+
        '<button class="btn btn-danger btn-sm btn-icon" onclick="deleteMaintenance('+m.id+')" title="Supprimer">🗑️</button>'+
      '</td>'+
    '</tr>').join('')+
  '</tbody></table></div>';
}

function renderVehicleParts(list){
  const el=$('#parts-list-vehicle');
  const total=list.reduce((s,p)=>s+parseFloat(p.price||0)*parseInt(p.quantity||1),0);
  $('#parts-total-vehicle').textContent=fmtPrice(total);
  if(!list.length){el.innerHTML='<div class="empty-state"><div class="icon">🔩</div><p>Aucune pièce enregistrée</p></div>';return;}
  el.innerHTML='<div class="table-wrap"><table><thead><tr><th>Photo</th><th>Nom</th><th>Marque</th><th>Référence</th><th>Catégorie</th><th>Prix unit.</th><th>Qté</th><th>Total</th><th>Entretien</th><th></th></tr></thead><tbody>'+
    list.map(p=>'<tr>'+
      '<td>'+(p.photo?'<img class="part-thumb" src="'+UPLOADS+p.photo+'" alt="">':'<span style="color:var(--muted)">--</span>')+'</td>'+
      '<td><strong>'+escHtml(p.name)+'</strong></td>'+
      '<td>'+(p.brand?escHtml(p.brand):'--')+'</td>'+
      '<td><code style="font-size:.75rem;color:var(--muted)">'+(p.reference?escHtml(p.reference):'--')+'</code></td>'+
      '<td><span class="badge badge-gray">'+escHtml(p.category)+'</span></td>'+
      '<td>'+fmtPrice(p.price)+'</td>'+
      '<td>'+p.quantity+' '+escHtml(p.unit||'pièce')+'</td>'+
      '<td><strong>'+fmtPrice(parseFloat(p.price||0)*parseInt(p.quantity||1))+'</strong></td>'+
      '<td style="font-size:.78rem">'+(p.maintenance_type?escHtml(p.maintenance_type)+' ('+fmtDate(p.maintenance_date)+')':'--')+'</td>'+
      '<td>'+
        '<button class="btn btn-secondary btn-sm btn-icon" onclick="openEditPart('+p.id+')" title="Modifier">✏️</button> '+
        '<button class="btn btn-danger btn-sm btn-icon" onclick="deletePart('+p.id+')" title="Supprimer">🗑️</button>'+
      '</td>'+
    '</tr>').join('')+
  '</tbody></table></div>';
}

// ─── MAINTENANCE DETAIL ───────────────────────────────────────────────────────
async function loadMaintenanceDetail(id){
  currentMaintenanceId=id;
  try{
    const[m,parts]=await Promise.all([
      api('maintenances','GET',null,'&id='+id),
      api('parts','GET',null,'&maintenance_id='+id)
    ]);
    currentVehicleId=m.vehicle_id;
    renderMaintenanceDetailHeader(m);
    renderMaintenanceParts(parts,id,m.vehicle_id);
    await loadMaintenanceDocuments();
    loadKnownParts(m.vehicle_id);
    const f=document.getElementById('inline-part-form');
    if(f)f.style.display='none';
  }catch(e){toast(e.message,'error');}
}

function renderMaintenanceDetailHeader(m){
  document.getElementById('maintenance-detail-header').innerHTML=
    '<div class="vehicle-detail-header" style="align-items:flex-start">'+
      '<div class="vehicle-meta" style="flex:1">'+
        '<div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem">'+
          '<span class="badge badge-blue" style="font-size:.95rem;padding:.35rem .8rem">'+escHtml(m.type)+'</span>'+
          '<span style="color:var(--muted)">'+fmtDate(m.date)+' · '+ago(m.date)+'</span>'+
          (m.documents_count>0?'<span class="badge badge-gray" title="Documents attachés à cette révision">📎 '+m.documents_count+' fichier'+(m.documents_count>1?'s':'')+'</span>':'')+
          (m.vehicle_name?'<span style="color:var(--muted);font-size:.85rem">🚗 <a href="#" onclick="navigate(\'vehicle\',{id:'+m.vehicle_id+'});return false" style="color:inherit;text-decoration:underline">'+escHtml(m.vehicle_name)+'</a></span>':'')+
        '</div>'+
        (m.description?'<p style="margin-bottom:.75rem">'+escHtml(m.description)+'</p>':'')+
        '<div class="meta-grid">'+
          (m.km?'<div class="meta-item"><span class="k">Kilométrage</span><br><span class="v">'+fmt(m.km)+' km</span></div>':'')+
          '<div class="meta-item"><span class="k">Coût M.O.</span><br><span class="v">'+fmtPrice(m.cost)+'</span></div>'+
          (m.mechanic?'<div class="meta-item"><span class="k">Mécanicien</span><br><span class="v">'+escHtml(m.mechanic)+'</span></div>':'')+
          (m.garage_name?'<div class="meta-item"><span class="k">Garage</span><br><span class="v">'+escHtml(m.garage_name)+'</span></div>':'')+
          (m.next_date?'<div class="meta-item"><span class="k">Prochain entretien</span><br><span class="v">📅 '+fmtDate(m.next_date)+'</span></div>':'')+
          (m.next_km?'<div class="meta-item"><span class="k">Prochain km</span><br><span class="v">🛣️ '+fmt(m.next_km)+' km</span></div>':'')+
        '</div>'+
        (m.notes?'<p style="margin-top:.75rem;color:var(--muted);font-size:.85rem;font-style:italic">'+escHtml(m.notes)+'</p>':'')+
      '</div>'+
      '<div class="vehicle-detail-actions">'+
        '<button class="btn btn-secondary btn-sm" onclick="openEditMaintenance('+m.id+')">✏️ Modifier</button>'+
        '<button class="btn btn-danger btn-sm" onclick="deleteMaintenance('+m.id+')">🗑️ Supprimer</button>'+
      '</div>'+
    '</div>';
}

function renderMaintenanceParts(list,mid,vid){
  const el=document.getElementById('maintenance-parts-list');
  const cnt=document.getElementById('maint-parts-count');
  if(cnt)cnt.textContent=list.length?list.length+' pièce'+(list.length>1?'s':''):'';
  if(!list.length){el.innerHTML='<div class="empty-state" style="padding:2rem"><div class="icon">🔩</div><p>Aucune pièce utilisée</p></div>';return;}
  const total=list.reduce((s,p)=>s+parseFloat(p.price||0)*parseInt(p.quantity||1),0);
  el.innerHTML='<div class="table-wrap"><table><thead><tr><th>Photo</th><th>Nom</th><th>Marque</th><th>Réf.</th><th>Catégorie</th><th>Prix unit.</th><th>Qté</th><th>Total</th><th></th></tr></thead><tbody>'+
    list.map(p=>'<tr>'+
      '<td>'+(p.photo?'<img class="part-thumb" src="'+UPLOADS+p.photo+'" alt="">':'--')+'</td>'+
      '<td><strong>'+escHtml(p.name)+'</strong></td>'+
      '<td>'+(p.brand?escHtml(p.brand):'--')+'</td>'+
      '<td><code style="font-size:.75rem;color:var(--muted)">'+(p.reference?escHtml(p.reference):'--')+'</code></td>'+
      '<td><span class="badge badge-gray">'+escHtml(p.category)+'</span></td>'+
      '<td>'+fmtPrice(p.price)+'</td>'+
      '<td>'+p.quantity+' '+escHtml(p.unit||'pièce')+'</td>'+
      '<td><strong>'+fmtPrice(parseFloat(p.price||0)*parseInt(p.quantity||1))+'</strong></td>'+
      '<td>'+
        '<button class="btn btn-secondary btn-sm btn-icon" onclick="openEditPart('+p.id+')" title="Modifier">✏️</button> '+
        '<button class="btn btn-danger btn-sm btn-icon" onclick="deleteMaintPart('+p.id+','+mid+','+vid+')" title="Supprimer">🗑️</button>'+
      '</td>'+
    '</tr>').join('')+
    '<tr style="background:rgba(0,0,0,.02)"><td colspan="7" style="text-align:right;font-weight:600;color:var(--muted)">Total pièces</td><td><strong>'+fmtPrice(total)+'</strong></td><td></td></tr>'+
  '</tbody></table></div>';
}

async function deleteMaintPart(id,mid,vid){
  if(!confirm('Supprimer cette pièce ?'))return;
  try{
    await api('parts','DELETE',null,'&id='+id);
    toast('Pièce supprimée');
    const parts=await api('parts','GET',null,'&maintenance_id='+mid);
    renderMaintenanceParts(parts,mid,vid);
  }catch(e){toast(e.message,'error');}
}

// ─── INLINE PART FORM ────────────────────────────────────────────────────────
function toggleInlinePartForm(){
  const f=document.getElementById('inline-part-form');
  if(!f)return;
  const visible=f.style.display==='block';
  f.style.display=visible?'none':'block';
  if(!visible)document.getElementById('ipart-name')?.focus();
}

async function loadKnownParts(vehicleId){
  try{
    const parts=await api('parts','GET',null,'&vehicle_id='+vehicleId);
    const el=document.getElementById('known-parts-list');
    if(!el)return;
    if(!parts.length){el.innerHTML='<p style="color:var(--muted);font-size:.8rem;margin-bottom:.75rem">Aucune pièce connue pour ce véhicule</p>';return;}
    const seen=new Set();
    const unique=parts.filter(p=>{if(seen.has(p.name))return false;seen.add(p.name);return true;});
    const wrap=document.createElement('div');
    wrap.className='scroll-list';
    unique.forEach((p,i)=>{
      const lbl=document.createElement('label');
      lbl.className='scroll-list-item';
      lbl.innerHTML=
        '<input type="radio" name="_prefill" value="'+i+'" style="width:auto;background:none;border:none;padding:0;accent-color:var(--primary)">'+
        '<span class="item-name">'+escHtml(p.name)+'</span>'+
        (p.reference?'<span class="item-ref">'+escHtml(p.reference)+'</span>':'')+
        (p.brand?'<span class="item-brand">'+escHtml(p.brand)+'</span>':'')+
        '<span class="item-price">'+fmtPrice(p.price)+'</span>';
      lbl.querySelector('input').addEventListener('change',()=>{
        const n=document.getElementById('ipart-name');const b=document.getElementById('ipart-brand');
        const r=document.getElementById('ipart-reference');const pr=document.getElementById('ipart-price');
        if(n)n.value=p.name;
        if(b)b.value=p.brand||'';
        if(r)r.value=p.reference||'';
        if(pr){pr.value=p.price;updateIPriceTTC();}
      });
      wrap.appendChild(lbl);
    });
    el.innerHTML='';
    el.appendChild(wrap);
  }catch(e){}
}

function updateIPriceTTC(){
  const ht=document.getElementById('ipart-prix-ht')?.checked;
  const price=parseFloat(document.getElementById('ipart-price')?.value)||0;
  const preview=document.getElementById('ipart-ttc-preview');
  if(!preview)return;
  if(ht&&price>0){preview.textContent='→ Prix TTC : '+(price*1.2).toFixed(2)+' €';preview.style.display='block';}
  else{preview.style.display='none';}
}

async function saveInlinePart(){
  const name=document.getElementById('ipart-name')?.value.trim();
  if(!name){toast('Nom requis','error');return;}
  let price=parseFloat(document.getElementById('ipart-price')?.value)||0;
  if(document.getElementById('ipart-prix-ht')?.checked)price=parseFloat((price*1.2).toFixed(2));
  const fd=new FormData();
  fd.append('name',name);
  fd.append('vehicle_id',currentVehicleId||'');
  fd.append('maintenance_id',currentMaintenanceId||'');
  fd.append('price',price);
  fd.append('quantity',parseInt(document.getElementById('ipart-quantity')?.value)||1);
  fd.append('category','Autre');
  fd.append('unit','pièce');
  const brand=document.getElementById('ipart-brand')?.value.trim();
  const ref=document.getElementById('ipart-reference')?.value.trim();
  if(brand)fd.append('brand',brand);
  if(ref)fd.append('reference',ref);
  const photoFile=document.getElementById('ipart-photo')?.files[0];
  if(photoFile)fd.append('photo',photoFile);
  try{
    await api('parts','POST',fd);
    toast('Pièce ajoutée');
    ['ipart-name','ipart-brand','ipart-reference'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
    const pr=document.getElementById('ipart-price');if(pr)pr.value='0';
    const qty=document.getElementById('ipart-quantity');if(qty)qty.value='1';
    const ht=document.getElementById('ipart-prix-ht');if(ht)ht.checked=false;
    const prev=document.getElementById('ipart-ttc-preview');if(prev)prev.style.display='none';
    const ph=document.getElementById('ipart-photo');if(ph)ph.value='';
    const parts=await api('parts','GET',null,'&maintenance_id='+currentMaintenanceId);
    renderMaintenanceParts(parts,currentMaintenanceId,currentVehicleId);
  }catch(e){toast(e.message,'error');}
}

// ─── ALL PARTS ────────────────────────────────────────────────────────────────
async function loadParts(){
  try{
    const list=await api('parts');
    const el=$('#all-parts-list');
    const total=list.reduce((s,p)=>s+parseFloat(p.price||0)*parseInt(p.quantity||1),0);
    $('#all-parts-total').textContent=fmtPrice(total);
    $('#all-parts-count').textContent=list.length;
    if(!list.length){el.innerHTML='<div class="empty-state"><div class="icon">🔩</div><p>Aucune pièce</p></div>';return;}
    const byVehicle={};
    list.forEach(p=>{const key=p.vehicle_name||'Sans véhicule';if(!byVehicle[key])byVehicle[key]=[];byVehicle[key].push(p);});
    let html='';
    for(const[vname,parts] of Object.entries(byVehicle)){
      const vtotal=parts.reduce((s,p)=>s+parseFloat(p.price||0)*parseInt(p.quantity||1),0);
      html+='<div style="margin-bottom:2rem">'+
        '<div class="card-header" style="margin-bottom:.5rem">'+
          '<h3 style="font-size:1rem;font-weight:700">🚗 '+escHtml(vname)+'</h3>'+
          '<span style="margin-left:auto;color:var(--muted);font-size:.85rem">'+parts.length+' pièce'+(parts.length>1?'s':'')+' · '+fmtPrice(vtotal)+'</span>'+
        '</div>'+
        '<div class="table-wrap"><table><thead><tr><th>Photo</th><th>Nom</th><th>Marque</th><th>Référence</th><th>Catégorie</th><th>Prix unit.</th><th>Qté</th><th>Total</th><th>Entretien</th><th></th></tr></thead><tbody>'+
        parts.map(p=>'<tr>'+
          '<td>'+(p.photo?'<img class="part-thumb" src="'+UPLOADS+p.photo+'" alt="">':'--')+'</td>'+
          '<td><strong>'+escHtml(p.name)+'</strong></td>'+
          '<td>'+(p.brand?escHtml(p.brand):'--')+'</td>'+
          '<td><code style="font-size:.75rem;color:var(--muted)">'+(p.reference?escHtml(p.reference):'--')+'</code></td>'+
          '<td><span class="badge badge-gray">'+escHtml(p.category)+'</span></td>'+
          '<td>'+fmtPrice(p.price)+'</td>'+
          '<td>'+p.quantity+' '+escHtml(p.unit||'pièce')+'</td>'+
          '<td><strong>'+fmtPrice(parseFloat(p.price||0)*parseInt(p.quantity||1))+'</strong></td>'+
          '<td style="font-size:.78rem">'+(p.maintenance_type?escHtml(p.maintenance_type)+' ('+fmtDate(p.maintenance_date)+')':'--')+'</td>'+
          '<td>'+
            '<button class="btn btn-secondary btn-sm btn-icon" onclick="openEditPart('+p.id+')" title="Modifier">✏️</button> '+
            '<button class="btn btn-danger btn-sm btn-icon" onclick="deletePart('+p.id+')" title="Supprimer">🗑️</button>'+
          '</td>'+
        '</tr>').join('')+
        '</tbody></table></div></div>';
    }
    el.innerHTML=html;
  }catch(e){toast(e.message,'error');}
}

// ─── ALL MAINTENANCES ─────────────────────────────────────────────────────────
async function loadAllMaintenances(){
  try{
    const vehicles=await api('vehicles');
    const el=$('#all-maintenances-list');
    if(!vehicles.length){el.innerHTML='<div class="empty-state"><div class="icon">🔧</div><p>Aucun véhicule</p></div>';return;}
    let totalAll=0,countAll=0,html='';
    for(const v of vehicles){
      const mlist=await api('maintenances',undefined,null,'&vehicle_id='+v.id);
      if(!mlist.length)continue;
      const total=mlist.reduce((s,m)=>s+parseFloat(m.cost||0)+parseFloat(m.parts_cost||0),0);
      totalAll+=total;countAll+=mlist.length;
      html+='<div style="margin-bottom:2rem">'+
        '<div class="card-header" style="margin-bottom:.5rem">'+
          '<h3 style="font-size:1rem;font-weight:700">🚗 '+escHtml(v.name)+'</h3>'+
          (v.license_plate?'<span class="plate">'+escHtml(v.license_plate)+'</span>':'')+
          '<span style="margin-left:auto;color:var(--muted);font-size:.85rem">'+mlist.length+' entretiens · '+fmtPrice(total)+'</span>'+
        '</div>'+
        '<div class="table-wrap"><table><thead><tr><th>Date</th><th>Type</th><th>Description</th><th>Km</th><th>Coût M.O.</th><th>Pièces</th><th>Total</th><th>Mécanicien</th><th></th></tr></thead><tbody>'+
        mlist.map(m=>'<tr style="cursor:pointer" onclick="navigate(\'maintenance\',{id:'+m.id+'})">'+
          '<td>'+fmtDate(m.date)+'</td>'+
          '<td><span class="badge badge-gray">'+escHtml(m.type)+'</span></td>'+
          '<td>'+(m.description?escHtml(m.description):'--')+'</td>'+
          '<td>'+(m.km?fmt(m.km)+' km':'--')+'</td>'+
          '<td>'+fmtPrice(m.cost)+'</td>'+
          '<td>'+(m.parts_count>0?m.parts_count+' ('+fmtPrice(m.parts_cost)+')':'--')+'</td>'+
          '<td><strong>'+fmtPrice(parseFloat(m.cost||0)+parseFloat(m.parts_cost||0))+'</strong></td>'+
          '<td>'+(m.mechanic?escHtml(m.mechanic):'--')+'</td>'+
          '<td onclick="event.stopPropagation()">'+
            '<button class="btn btn-danger btn-sm btn-icon" onclick="deleteMaintenance('+m.id+')" title="Supprimer">🗑️</button>'+
          '</td>'+
        '</tr>').join('')+
        '</tbody></table></div></div>';
    }
    $('#all-maint-count').textContent=countAll;
    $('#all-maint-total').textContent=fmtPrice(totalAll);
    el.innerHTML=html||'<div class="empty-state"><div class="icon">🔧</div><p>Aucun entretien</p></div>';
  }catch(e){console.error(e);}
}

// ─── MODALS ───────────────────────────────────────────────────────────────────
function openModal(id){document.getElementById(id).classList.add('show');}
function closeModal(id){document.getElementById(id).classList.remove('show');}

// ─── TVA ──────────────────────────────────────────────────────────────────────
function updatePartPriceTTC(){
  const ht=document.getElementById('part-prix-ht')?.checked;
  const price=parseFloat(document.getElementById('part-price')?.value)||0;
  const preview=document.getElementById('part-ttc-preview');
  if(!preview)return;
  if(ht&&price>0){preview.textContent='→ Prix TTC : '+(price*1.2).toFixed(2)+' €';preview.style.display='block';}
  else{preview.style.display='none';}
}

// ─── VEHICLE CRUD ─────────────────────────────────────────────────────────────
function openAddVehicle(){
  $('#form-vehicle').reset();$('#form-vehicle-id').value='';
  $('#modal-vehicle-title').textContent='Ajouter un véhicule';
  $('#vehicle-photo-preview').src='';$('#vehicle-photo-preview').style.display='none';
  openModal('modal-vehicle');
}
function openEditVehicle(id){
  api('vehicles','GET',null,'&id='+id).then(v=>{
    $('#form-vehicle-id').value=v.id;
    $('#modal-vehicle-title').textContent='Modifier le véhicule';
    ['name','brand','model','year','license_plate','vin','color','purchase_date','purchase_price','current_km','notes'].forEach(f=>{
      const el=$('#vehicle-'+f.replace(/_/g,'-'));
      if(el)el.value=v[f]??'';
    });
    setSelectVal('vehicle-fuel-type', v.fuel_type);
    if(v.photo){$('#vehicle-photo-preview').src=UPLOADS+v.photo;$('#vehicle-photo-preview').style.display='block';}
    else{$('#vehicle-photo-preview').style.display='none';}
    openModal('modal-vehicle');
  }).catch(e=>toast(e.message,'error'));
}
async function saveVehicle(){
  const id=$('#form-vehicle-id').value;
  const fd=new FormData($('#form-vehicle'));
  try{
    if(id){
      const d={};for(const[k,v]of fd.entries())d[k]=v;
      await api('vehicles','PUT',d,'&id='+id);
      const photoFile=$('#vehicle-photo').files[0];
      if(photoFile){const pfd=new FormData();pfd.append('photo',photoFile);await fetch(API+'?action=upload_vehicle_photo&id='+id,{method:'POST',body:pfd});}
      toast('Véhicule modifié');
    }else{
      await api('vehicles','POST',fd);
      toast('Véhicule ajouté');
    }
    closeModal('modal-vehicle');
    if(currentPage==='vehicles')loadVehicles();
    else if(currentPage==='vehicle')loadVehicleDetail(currentVehicleId);
    else loadDashboard();
  }catch(e){toast(e.message,'error');}
}
async function deleteVehicle(id){
  if(!confirm('Supprimer ce véhicule et tout son historique ?'))return;
  try{await api('vehicles','DELETE',null,'&id='+id);toast('Véhicule supprimé');navigate('vehicles');}catch(e){toast(e.message,'error');}
}

// ─── MAINTENANCE CRUD ─────────────────────────────────────────────────────────
function openAddMaintenance(){
  $('#form-maintenance').reset();$('#form-maintenance-id').value='';
  $('#maintenance-vehicle-id').value=currentVehicleId||'';
  $('#modal-maintenance-title').textContent='Ajouter un entretien';
  $('#maintenance-date').value=new Date().toISOString().slice(0,10);
  openModal('modal-maintenance');
}
function setSelectVal(elId, val){
  const el=document.getElementById(elId); if(!el||val==null)return;
  el.value=val;
  if(el.value!==String(val)&&val!==''){const o=new Option(val,val);el.add(o);el.value=val;}
}
function openEditMaintenance(id){
  api('maintenances','GET',null,'&id='+id).then(m=>{
    $('#form-maintenance-id').value=m.id;
    $('#maintenance-vehicle-id').value=m.vehicle_id;
    $('#modal-maintenance-title').textContent="Modifier l'entretien";
    setSelectVal('maintenance-type', m.type);
    const map={description:'maintenance-description',date:'maintenance-date',
      km:'maintenance-km',cost:'maintenance-cost',mechanic:'maintenance-mechanic',
      garage_name:'maintenance-garage',next_date:'maintenance-next-date',next_km:'maintenance-next-km',notes:'maintenance-notes'};
    for(const[k,elId] of Object.entries(map)){const el=document.getElementById(elId);if(el)el.value=m[k]??'';}
    openModal('modal-maintenance');
  }).catch(e=>toast(e.message,'error'));
}
async function saveMaintenance(){
  const id=$('#form-maintenance-id').value;
  const d={};new FormData($('#form-maintenance')).forEach((v,k)=>d[k]=v);
  try{
    if(id){await api('maintenances','PUT',d,'&id='+id);toast('Entretien modifié');}
    else{await api('maintenances','POST',d);toast('Entretien ajouté');}
    closeModal('modal-maintenance');
    if(currentPage==='maintenance')loadMaintenanceDetail(currentMaintenanceId);
    else loadVehicleDetail(currentVehicleId);
  }catch(e){toast(e.message,'error');}
}
async function deleteMaintenance(id){
  if(!confirm('Supprimer cet entretien ?'))return;
  try{
    await api('maintenances','DELETE',null,'&id='+id);
    toast('Entretien supprimé');
    if(currentPage==='maintenance')navigate('vehicle',{id:currentVehicleId});
    else loadVehicleDetail(currentVehicleId);
  }catch(e){toast(e.message,'error');}
}

// ─── PARTS CRUD ───────────────────────────────────────────────────────────────
function openAddPart(){
  $('#form-part').reset();$('#form-part-id').value='';
  $('#part-vehicle-id').value=currentVehicleId||'';
  $('#part-maintenance-id').value=currentMaintenanceId||'';
  $('#modal-part-title').textContent='Ajouter une pièce';
  $('#part-photo-preview').src='';$('#part-photo-preview').style.display='none';
  const ht=document.getElementById('part-prix-ht');if(ht)ht.checked=false;
  const prev=document.getElementById('part-ttc-preview');if(prev)prev.style.display='none';
  openModal('modal-part');
}
function openEditPart(id){
  api('parts','GET',null,'&id='+id).then(p=>{
    $('#form-part-id').value=p.id;
    $('#part-vehicle-id').value=p.vehicle_id||'';
    $('#part-maintenance-id').value=p.maintenance_id||'';
    $('#modal-part-title').textContent='Modifier la pièce';
    const map={name:'part-name',brand:'part-brand',reference:'part-reference',price:'part-price',quantity:'part-quantity',notes:'part-notes'};
    for(const[k,elId] of Object.entries(map)){const el=document.getElementById(elId);if(el)el.value=p[k]??'';}
    setSelectVal('part-category', p.category);
    const ht=document.getElementById('part-prix-ht');if(ht)ht.checked=false;
    const prev=document.getElementById('part-ttc-preview');if(prev)prev.style.display='none';
    if(p.photo){$('#part-photo-preview').src=UPLOADS+p.photo;$('#part-photo-preview').style.display='block';}
    else{$('#part-photo-preview').style.display='none';}
    openModal('modal-part');
  }).catch(e=>toast(e.message,'error'));
}
async function savePart(){
  const id=$('#form-part-id').value;
  const fd=new FormData($('#form-part'));
  if(document.getElementById('part-prix-ht')?.checked){
    const htPrice=parseFloat(fd.get('price'))||0;
    fd.set('price',(htPrice*1.2).toFixed(2));
  }
  try{
    if(id){
      const d={};for(const[k,v]of fd.entries())d[k]=v;
      await api('parts','PUT',d,'&id='+id);
      const photoFile=$('#part-photo').files[0];
      if(photoFile){const pfd=new FormData();pfd.append('photo',photoFile);await fetch(API+'?action=upload_part_photo&id='+id,{method:'POST',body:pfd});}
      toast('Pièce modifiée');
    }else{
      await api('parts','POST',fd);
      toast('Pièce ajoutée');
    }
    closeModal('modal-part');
    if(currentPage==='maintenance')loadMaintenanceDetail(currentMaintenanceId);
    else if(currentPage==='vehicle')loadVehicleDetail(currentVehicleId);
    else loadParts();
  }catch(e){toast(e.message,'error');}
}
async function deletePart(id){
  if(!confirm('Supprimer cette pièce ?'))return;
  try{
    await api('parts','DELETE',null,'&id='+id);
    toast('Pièce supprimée');
    if(currentPage==='maintenance')loadMaintenanceDetail(currentMaintenanceId);
    else if(currentPage==='vehicle')loadVehicleDetail(currentVehicleId);
    else loadParts();
  }catch(e){toast(e.message,'error');}
}

// ─── UPLOAD PHOTO ─────────────────────────────────────────────────────────────
function openUploadPhoto(id){$('#upload-vehicle-id').value=id;openModal('modal-upload-photo');}
async function doUploadPhoto(){
  const id=$('#upload-vehicle-id').value;
  const file=$('#upload-photo-file').files[0];
  if(!file){toast('Choisissez une photo','error');return;}
  const fd=new FormData();fd.append('photo',file);
  try{
    await fetch(API+'?action=upload_vehicle_photo&id='+id,{method:'POST',body:fd});
    toast('Photo mise à jour');closeModal('modal-upload-photo');
    loadVehicleDetail(id);
  }catch(e){toast(e.message,'error');}
}

function setVehicleDocTabBadge(v){
  const el=document.getElementById('vehicle-docs-tab-count');
  if(!el)return;
  const n=Number(v.vehicle_docs_count)||0;
  el.textContent=n>0?'('+n+')':'';
}

async function loadVehicleDocuments(){
  if(!currentVehicleId)return;
  try{
    const list=await api('garage_documents','GET',null,'&vehicle_id='+currentVehicleId+'&vehicle_only=1');
    renderGarageDocList('vehicle-documents-list',list);
  }catch(e){toast(e.message,'error');}
}

async function loadMaintenanceDocuments(){
  if(!currentMaintenanceId)return;
  try{
    const list=await api('garage_documents','GET',null,'&maintenance_id='+currentMaintenanceId);
    renderGarageDocList('maintenance-documents-list',list);
  }catch(e){toast(e.message,'error');}
}

function renderGarageDocList(elId,list){
  const el=document.getElementById(elId);
  if(!el)return;
  if(!list||!list.length){
    el.innerHTML='<div class="empty-state garage-doc-empty"><p>Aucun document pour l’instant</p></div>';
    return;
  }
  el.innerHTML='<ul class="garage-doc-list">'+
    list.map(d=>{
      const href=API+'?action=garage_document&id='+encodeURIComponent(d.id);
      const title=escHtml(d.label||d.original_name||d.filename||'Document');
      const meta=fmtDate(d.created_at)+' · '+formatBytes(d.size||0);
      return '<li class="garage-doc-item">'+
        '<a class="garage-doc-link" href="'+href+'" target="_blank" rel="noopener noreferrer">📄 '+title+'</a>'+
        '<span class="garage-doc-meta">'+meta+'</span>'+
        '<button type="button" class="btn btn-danger btn-sm btn-icon" onclick="deleteGarageDocument('+parseInt(d.id,10)+')" title="Supprimer">🗑️</button>'+
      '</li>';
    }).join('')+
  '</ul>';
}

async function uploadVehicleDocument(){
  const inp=document.getElementById('vehicle-doc-file');
  if(!inp||!inp.files[0]){toast('Choisissez un fichier','error');return;}
  const fd=new FormData();
  fd.append('vehicle_id',String(currentVehicleId));
  fd.append('file',inp.files[0]);
  const lab=document.getElementById('vehicle-doc-label')?.value.trim();
  if(lab)fd.append('label',lab);
  try{
    const r=await fetch(API+'?action=garage_documents',{method:'POST',body:fd});
    const j=await r.json();
    if(!j.ok)throw new Error(j.error||'Erreur');
    toast('Document ajouté');
    inp.value='';
    const ll=document.getElementById('vehicle-doc-label');if(ll)ll.value='';
    const v=await api('vehicles','GET',null,'&id='+currentVehicleId);
    renderVehicleHeader(v);
    setVehicleDocTabBadge(v);
    await loadVehicleDocuments();
  }catch(e){toast(e.message,'error');}
}

async function uploadMaintenanceDocument(){
  const inp=document.getElementById('maint-doc-file');
  if(!inp||!inp.files[0]){toast('Choisissez un fichier','error');return;}
  if(!currentVehicleId||!currentMaintenanceId){toast('Contexte manquant','error');return;}
  const fd=new FormData();
  fd.append('vehicle_id',String(currentVehicleId));
  fd.append('maintenance_id',String(currentMaintenanceId));
  fd.append('file',inp.files[0]);
  const lab=document.getElementById('maint-doc-label')?.value.trim();
  if(lab)fd.append('label',lab);
  try{
    const r=await fetch(API+'?action=garage_documents',{method:'POST',body:fd});
    const j=await r.json();
    if(!j.ok)throw new Error(j.error||'Erreur');
    toast('Document ajouté');
    inp.value='';
    const ll=document.getElementById('maint-doc-label');if(ll)ll.value='';
    const m=await api('maintenances','GET',null,'&id='+currentMaintenanceId);
    renderMaintenanceDetailHeader(m);
    await loadMaintenanceDocuments();
  }catch(e){toast(e.message,'error');}
}

async function deleteGarageDocument(id){
  if(!confirm('Supprimer ce document ?'))return;
  try{
    await api('garage_documents','DELETE',null,'&id='+id);
    toast('Document supprimé');
    if(currentPage==='vehicle'){
      const v=await api('vehicles','GET',null,'&id='+currentVehicleId);
      renderVehicleHeader(v);
      setVehicleDocTabBadge(v);
      await loadVehicleDocuments();
    }else if(currentPage==='maintenance'){
      const m=await api('maintenances','GET',null,'&id='+currentMaintenanceId);
      renderMaintenanceDetailHeader(m);
      await loadMaintenanceDocuments();
    }
  }catch(e){toast(e.message,'error');}
}

// ─── TABS ────────────────────────────────────────────────────────────────────
function switchTab(tab){
  $$('.tab-btn').forEach(b=>b.classList.remove('active'));
  $$('.tab-pane').forEach(p=>p.classList.remove('active'));
  document.querySelector('.tab-btn[data-tab="'+tab+'"]')?.classList.add('active');
  document.getElementById('tab-'+tab)?.classList.add('active');
  if(tab==='documents'&&currentVehicleId)loadVehicleDocuments();
}

// ─── PHOTO PREVIEW ────────────────────────────────────────────────────────────
function previewPhoto(inputId,previewId){
  const file=document.getElementById(inputId).files[0];if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{const img=document.getElementById(previewId);img.src=e.target.result;img.style.display='block';};
  reader.readAsDataURL(file);
}

// ─── INIT ────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded',()=>{
  $$('.nav-link').forEach(n=>n.addEventListener('click',()=>navigate(n.dataset.page)));
  $$('.modal-backdrop').forEach(m=>m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show');}));
  navigate('dashboard');
});