<% layout('layouts/main') %>
<% const staffBase = typeof staffBaseUrl !== 'undefined' ? staffBaseUrl : '/agenda'; %>
<% const checklistItems = (checklist && checklist.items) || []; %>
<% const parseChecklist = (value) => { try { const parsed = JSON.parse(value || '[]'); return Array.isArray(parsed) ? parsed : []; } catch (error) { return []; } }; %>
<div class="app-shell">
  <%- partial('partials/staff-nav') %>
  <section class="content">
    <div class="page-head">
      <div><p class="eyebrow">Intervention</p><h1><%= intervention.service_type %></h1></div>
      <span class="badge"><%= ui.label(intervention.status) %></span>
    </div>
    <div class="panel detail-hero">
      <div>
        <h2><%= intervention.first_name %> <%= intervention.last_name %></h2>
        <p><%= intervention.address || [intervention.profile_address, intervention.postal_code, intervention.city].filter(Boolean).join(', ') || 'Adresse non renseignée' %></p>
      </div>
      <div class="actions inline-actions">
        <% if (intervention.phone) { %>
          <a class="button secondary" href="tel:<%= ui.phoneHref(intervention.phone) %>">Appeler</a>
          <a class="button secondary" target="_blank" rel="noopener" href="<%= ui.whatsappHref(intervention.phone, `Bonjour, je vous contacte au sujet de votre intervention ${currentCompany ? currentCompany.name : 'SaaS DEMO'}.`) %>">WhatsApp</a>
        <% } %>
      </div>
    </div>
    <div class="panel">
      <div class="detail-grid">
        <div class="detail-item"><span>Date</span><strong><%= ui.date(intervention.starts_at, true) %></strong></div>
        <div class="detail-item"><span>Fin estimée</span><strong><%= ui.date(intervention.ends_at, true) %></strong></div>
        <div class="detail-item"><span>Équipe</span><strong><%= intervention.team_names || 'Non assignée' %></strong></div>
        <div class="detail-item"><span>Tarif horaire</span><strong><%= ui.money(intervention.hourly_rate) %></strong></div>
        <div class="detail-item"><span>Durée saisie</span><strong><%= Math.floor((intervention.actual_duration_minutes || 0) / 60) %>h<%= String((intervention.actual_duration_minutes || 0) % 60).padStart(2, '0') %></strong></div>
        <% if (intervention.client_comment) { %><div class="detail-item full"><span>Commentaire client</span><strong><%= intervention.client_comment %></strong></div><% } %>
      </div>
    </div>
    <div class="panel field-report-panel">
      <div class="section-heading compact-heading">
        <p class="eyebrow">PWA terrain</p>
        <h2>Rapport d’intervention</h2>
        <p>Notes rapides pour documenter le chantier et préparer la facturation ou le suivi client.</p>
      </div>
      <form method="post" action="<%= staffBase %>/interventions/<%= intervention.id %>/rapport" class="form-grid field-report-form" enctype="multipart/form-data" data-signature-form>
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="form-grid two">
          <label>État à l’arrivée<select name="arrival_status">
            <option value="ok">Accès OK</option>
            <option value="client_absent">Client absent</option>
            <option value="acces_bloque">Accès bloqué</option>
            <option value="surprise_chantier">Imprévu chantier</option>
          </select></label>
          <label>Nom du signataire client<input name="client_signature_name" placeholder="Nom, prénom"></label>
        </div>
        <div class="field-checklist">
          <div class="compact-heading">
            <div>
              <h3><%= checklist?.name || 'Checklist intervention' %></h3>
              <p class="muted">La liste est paramétrable par l’administration et les chefs d’équipe.</p>
            </div>
          </div>
          <% checklistItems.forEach((item, index) => { %>
            <article>
              <input type="hidden" name="checklist_item" value="<%= item.label %>">
              <label class="check premium-check small"><input type="checkbox" name="checklist_done" value="<%= index %>"><span><strong><%= item.label %></strong><small><%= item.required ? 'Point attendu' : 'Optionnel selon intervention' %></small></span></label>
              <input name="checklist_note" placeholder="Note optionnelle">
            </article>
          <% }) %>
        </div>
        <div class="form-grid two">
          <label>Photo avant<input type="file" name="before_photo" accept="image/jpeg,image/png,image/webp,application/pdf"></label>
          <label>Photo après<input type="file" name="after_photo" accept="image/jpeg,image/png,image/webp,application/pdf"></label>
        </div>
        <label>Note avant intervention<textarea name="before_note" placeholder="État initial, photos prises, contraintes visibles"></textarea></label>
        <label>Note après intervention<textarea name="after_note" placeholder="Travail effectué, réserves, recommandations"></textarea></label>
        <label>Matériel utilisé<textarea name="materials_used" placeholder="Produits, consommables, pièces, matériel ou outils spécifiques"></textarea></label>
        <div class="signature-pad-block">
          <div class="compact-heading">
            <div>
              <h3>Signature client</h3>
              <p class="muted">Signature tactile depuis téléphone ou tablette pour valider le passage.</p>
            </div>
            <button type="button" class="secondary" data-clear-signature>Effacer</button>
          </div>
          <canvas width="680" height="220" data-signature-canvas aria-label="Zone de signature client"></canvas>
          <input type="hidden" name="client_signature_data" data-signature-input>
        </div>
        <label class="check premium-check"><input type="checkbox" name="customer_visible" value="1" checked><span><strong>Visible dans le suivi client</strong><small>Le rapport pourra être partagé avec le client si l’entreprise le souhaite.</small></span></label>
        <button>Enregistrer le rapport</button>
      </form>
      <div class="report-timeline">
        <% (reports || []).forEach((report) => { %>
          <article>
            <div><strong><%= report.first_name %> <%= report.last_name %></strong><span><%= ui.date(report.created_at, true) %></span></div>
            <p><%= report.after_note || report.before_note || 'Rapport enregistré.' %></p>
            <% const reportChecks = parseChecklist(report.checklist_json); %>
            <% if (reportChecks.length) { %>
              <small><%= reportChecks.filter((item) => item.done).length %>/<%= reportChecks.length %> point(s) validé(s)</small>
            <% } %>
            <% if (report.client_signature_name) { %><small>Signature client: <%= report.client_signature_name %></small><% } %>
            <% if (report.pdf_path) { %><a class="button secondary small" href="<%= staffBase %>/interventions/<%= intervention.id %>/rapports/<%= report.id %>/pdf">PDF rapport</a><% } %>
          </article>
        <% }) %>
        <% if (!(reports || []).length) { %><p class="muted">Aucun rapport terrain enregistré.</p><% } %>
      </div>
    </div>
    <div class="field-actions panel">
      <h2>Actions terrain</h2>
      <% if (intervention.status !== 'terminee') { %>
        <p class="field-status">Quand l’intervention est terminée, saisissez simplement la durée réellement effectuée.</p>
        <form class="form-grid field-finish-form" method="post" action="<%= staffBase %>/interventions/<%= intervention.id %>/terminer">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <label>Durée effectuée<input name="duration" placeholder="Ex. 2h15 ou 2:15" required></label>
          <label>Commentaire de fin<textarea name="work_note" placeholder="Optionnel: informations utiles pour la facturation ou le suivi"><%= intervention.work_note || '' %></textarea></label>
          <button>Je termine</button>
        </form>
      <% } else { %>
        <p class="field-status done">Intervention terminée le <%= ui.date(intervention.completed_at, true) %>.</p>
      <% } %>
    </div>
    <script>
      (() => {
        document.querySelectorAll('[data-signature-form]').forEach((form) => {
          const canvas = form.querySelector('[data-signature-canvas]');
          const input = form.querySelector('[data-signature-input]');
          const clear = form.querySelector('[data-clear-signature]');
          if (!canvas || !input) return;
          const ctx = canvas.getContext('2d');
          let drawing = false;
          let hasInk = false;
          const resize = () => {
            const rect = canvas.getBoundingClientRect();
            if (!rect.width) return;
            const ratio = window.devicePixelRatio || 1;
            const image = canvas.toDataURL();
            canvas.width = Math.max(320, Math.round(rect.width * ratio));
            canvas.height = Math.round(220 * ratio);
            ctx.scale(ratio, ratio);
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#172536';
            if (hasInk) {
              const img = new Image();
              img.onload = () => ctx.drawImage(img, 0, 0, rect.width, 220);
              img.src = image;
            }
          };
          const point = (event) => {
            const rect = canvas.getBoundingClientRect();
            const source = event.touches ? event.touches[0] : event;
            return { x: source.clientX - rect.left, y: source.clientY - rect.top };
          };
          const start = (event) => {
            drawing = true;
            hasInk = true;
            const p = point(event);
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            event.preventDefault();
          };
          const move = (event) => {
            if (!drawing) return;
            const p = point(event);
            ctx.lineTo(p.x, p.y);
            ctx.stroke();
            event.preventDefault();
          };
          const stop = () => { drawing = false; };
          resize();
          window.addEventListener('resize', resize);
          canvas.addEventListener('mousedown', start);
          canvas.addEventListener('mousemove', move);
          canvas.addEventListener('mouseup', stop);
          canvas.addEventListener('mouseleave', stop);
          canvas.addEventListener('touchstart', start, { passive: false });
          canvas.addEventListener('touchmove', move, { passive: false });
          canvas.addEventListener('touchend', stop);
          clear?.addEventListener('click', () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            hasInk = false;
            input.value = '';
          });
          form.addEventListener('submit', () => {
            input.value = hasInk ? canvas.toDataURL('image/png') : '';
          });
        });
      })();
    </script>
  </section>
</div>
