<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content client-360">
    <div class="page-head">
      <div><p class="eyebrow">Fiche client 360°</p><h1><%= client.first_name %> <%= client.last_name %></h1></div>
      <div class="actions">
        <a class="button secondary" href="#modifier" data-open-details="#modifier">Modifier</a>
        <span class="badge"><%= ui.label(client.status) %></span>
      </div>
    </div>

    <div class="panel detail-hero">
      <div>
        <h2><%= client.company_name || `${client.first_name} ${client.last_name}` %></h2>
        <p>
          <% if (!ui.isInternalEmail(client.email)) { %><a href="mailto:<%= client.email %>"><%= client.email %></a><br><% } else { %><span class="muted">Email non renseigné</span><br><% } %>
          <a href="tel:<%= ui.phoneHref(client.phone) %>"><%= client.phone || 'Téléphone non renseigné' %></a>
        </p>
        <p class="muted"><%= [client.address, client.postal_code, client.city].filter(Boolean).join(' ') || 'Adresse non renseignée' %></p>
      </div>
      <div class="actions inline-actions">
        <% if (client.phone) { %><a class="button secondary" href="tel:<%= ui.phoneHref(client.phone) %>">Appeler</a><a class="button secondary" target="_blank" rel="noopener" href="<%= ui.whatsappHref(client.phone, `Bonjour, ${currentCompany ? currentCompany.name : 'SaaS DEMO'} vous contacte au sujet de votre dossier.`) %>">WhatsApp</a><% } %>
        <% if (!ui.isInternalEmail(client.email)) { %><a class="button secondary" href="mailto:<%= client.email %>">Email</a><% } %>
        <% if (!ui.isInternalEmail(client.email)) { %>
          <form method="post" action="<%= adminBase %>/clients/<%= client.id %>/invitation">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button class="secondary">Invitation portail</button>
          </form>
        <% } %>
        <a class="button" href="<%= adminBase %>/devis/nouveau?client=<%= client.id %>">Créer un devis</a>
      </div>
    </div>

    <div class="stat-grid">
      <div class="stat"><strong><%= requests.length %></strong><span>Demandes</span></div>
      <div class="stat"><strong><%= quotes.length %></strong><span>Devis</span></div>
      <div class="stat"><strong><%= interventions.length %></strong><span>Interventions</span></div>
      <div class="stat"><strong><%= ui.money(summary.unpaid.amount) %></strong><span>Solde ouvert</span></div>
      <div class="stat"><strong><%= ui.duration(summary.monthHours.minutes) %></strong><span>Heures ce mois</span></div>
      <div class="stat"><strong><%= ui.money(summary.acceptedQuotes.amount) %></strong><span>Devis acceptés</span></div>
    </div>

    <section class="grid cards client-overview-grid">
      <article class="panel compact-panel">
        <div class="inline-heading"><h2>Coordonnées</h2><span class="badge"><%= ui.label(client.client_type || 'particulier') %></span></div>
        <div class="detail-grid compact">
          <div class="detail-item"><span>Nom</span><strong><%= client.first_name %> <%= client.last_name %></strong></div>
          <div class="detail-item"><span>Entreprise</span><strong><%= client.company_name || 'Particulier' %></strong></div>
          <div class="detail-item"><span>Email</span><strong><%= ui.isInternalEmail(client.email) ? 'Non renseigné' : client.email %></strong></div>
          <div class="detail-item"><span>Téléphone</span><strong><%= client.phone || 'Non renseigné' %></strong></div>
        </div>
      </article>
      <article class="panel compact-panel">
        <div class="inline-heading"><h2>Adresse & facturation</h2><span class="badge"><%= summary.unpaid.total || 0 %> ouvert(s)</span></div>
        <div class="detail-grid compact">
          <div class="detail-item full"><span>Adresse</span><strong><%= [client.address, client.postal_code, client.city].filter(Boolean).join(' ') || 'Adresse non renseignée' %></strong></div>
          <div class="detail-item"><span>Solde ouvert</span><strong><%= ui.money(summary.unpaid.amount) %></strong></div>
          <div class="detail-item"><span>Chiffre accepté</span><strong><%= ui.money(summary.acceptedQuotes.amount) %></strong></div>
        </div>
      </article>
      <article class="panel compact-panel">
        <div class="inline-heading"><h2>Portail client</h2><span class="badge"><%= ui.isInternalEmail(client.email) ? 'Interne' : 'Invitable' %></span></div>
        <div class="detail-grid compact">
          <div class="detail-item"><span>Statut compte</span><strong><%= ui.label(client.status) %></strong></div>
          <div class="detail-item"><span>Confidentialité</span><strong><%= client.consent_privacy ? 'Acceptée' : 'À valider' %></strong></div>
          <div class="detail-item"><span>Suppression</span><strong><%= client.deletion_requested_at ? ui.date(client.deletion_requested_at, true) : 'Aucune demande' %></strong></div>
          <div class="detail-item"><span>Anonymisation</span><strong><%= client.anonymized_at ? ui.date(client.anonymized_at, true) : 'Non anonymisé' %></strong></div>
        </div>
      </article>
      <article class="panel compact-panel">
        <div class="inline-heading"><h2>Note interne</h2><a href="#modifier" data-open-details="#modifier">Modifier</a></div>
        <p class="client-note-readonly"><%= client.internal_note || 'Aucune note interne pour ce client.' %></p>
      </article>
    </section>

    <details class="panel slim-drawer client-edit-drawer" id="modifier">
      <summary><span><strong>Modifier la fiche client</strong><small>Identité, coordonnées, statut, adresse et note interne</small></span></summary>
      <form method="post" class="form-grid client-edit-form">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="form-grid two">
          <label>Type de client
            <select name="client_type" data-client-type>
              <option value="particulier" <%= client.client_type !== 'entreprise' ? 'selected' : '' %>>Particulier</option>
              <option value="entreprise" <%= client.client_type === 'entreprise' ? 'selected' : '' %>>Entreprise</option>
            </select>
          </label>
          <label>Statut
            <select name="status">
              <option value="active" <%= client.status === 'active' ? 'selected' : '' %>>Actif</option>
              <option value="blocked" <%= client.status === 'blocked' ? 'selected' : '' %>>Bloqué</option>
            </select>
          </label>
        </div>
        <label data-company-field>Nom de l’entreprise<input name="company_name" value="<%= client.company_name || '' %>"></label>
        <div class="form-grid two">
          <label>Prénom<input name="first_name" value="<%= client.first_name || '' %>" required></label>
          <label>Nom<input name="last_name" value="<%= client.last_name || '' %>" required></label>
        </div>
        <div class="form-grid two">
          <label>Email<input type="email" name="email" value="<%= ui.isInternalEmail(client.email) ? '' : (client.email || '') %>" placeholder="Optionnel si le client n’en a pas"></label>
          <label>Téléphone<input name="phone" value="<%= client.phone || '' %>" inputmode="tel"></label>
        </div>
        <label>Adresse<input name="address" value="<%= client.address || '' %>"></label>
        <div class="form-grid two">
          <label>NPA<input name="postal_code" value="<%= client.postal_code || '' %>" inputmode="numeric"></label>
          <label>Ville<input name="city" value="<%= client.city || '' %>"></label>
        </div>
        <label>Note interne<textarea name="internal_note"><%= client.internal_note || '' %></textarea></label>
        <button>Enregistrer la fiche client</button>
      </form>
    </details>

    <div class="grid cards">
      <section class="panel">
        <h2>Pipeline client</h2>
        <div class="mini-timeline">
          <% requests.slice(0,4).forEach(r=>{ %><a href="<%= adminBase %>/demandes/<%= r.id %>"><span>Demande</span><strong><%= r.service_type %></strong><small><%= ui.label(r.status) %></small></a><% }) %>
          <% quotes.slice(0,4).forEach(q=>{ %><a href="<%= adminBase %>/devis/<%= q.id %>"><span>Devis</span><strong><%= q.quote_number %></strong><small><%= ui.label(q.status) %> · <%= ui.money(q.total) %></small></a><% }) %>
          <% interventions.slice(0,4).forEach(i=>{ %><a href="<%= adminBase %>/interventions/<%= i.id %>"><span>Intervention</span><strong><%= i.service_type %></strong><small><%= ui.date(i.starts_at, true) %></small></a><% }) %>
          <% invoices.slice(0,4).forEach(i=>{ %><a href="<%= adminBase %>/factures/<%= i.id %>"><span>Facture</span><strong><%= i.invoice_number %></strong><small><%= ui.label(i.status) %> · <%= ui.money(i.total) %></small></a><% }) %>
        </div>
      </section>
      <section class="panel">
        <h2>Activité & messages</h2>
        <% threads.forEach(t=>{ %><p><a href="<%= adminBase %>/messages/<%= t.id %>"><strong><%= t.subject %></strong></a><br><span class="muted"><%= ui.label(t.status) %> · <%= ui.date(t.updated_at || t.created_at, true) %></span></p><% }) %>
        <% reviews.forEach(r=>{ %><p><strong>Avis <%= r.rating %>/5</strong><br><span class="muted"><%= r.private_comment || 'Sans commentaire' %></span></p><% }) %>
        <% activity.forEach(a=>{ %><p><strong><%= ui.label(a.action) %></strong><br><span class="muted"><%= ui.date(a.created_at, true) %></span></p><% }) %>
        <% if (!threads.length && !reviews.length && !activity.length) { %><p class="muted">Aucune activité récente.</p><% } %>
      </section>
    </div>

    <h2>Demandes</h2>
    <div class="mobile-list compact-list">
      <% requests.forEach(r=>{ %><article class="list-card"><div class="list-card-head"><div><strong><a href="<%= adminBase %>/demandes/<%= r.id %>"><%= r.service_type %></a></strong><span><%= ui.date(r.created_at) %></span></div><span class="badge"><%= ui.label(r.status) %></span></div></article><% }) %>
      <% if (!requests.length) { %><div class="empty-state"><strong>Aucune demande</strong><span>Les demandes de devis de ce client apparaîtront ici.</span></div><% } %>
    </div>

    <h2>Devis, factures et interventions</h2>
    <div class="grid cards">
      <section class="panel">
        <h3>Devis</h3>
        <% quotes.forEach(q=>{ %><p><a href="<%= adminBase %>/devis/<%= q.id %>"><strong><%= q.quote_number %></strong></a><br><span class="muted"><%= ui.label(q.status) %> · <%= ui.money(q.total) %></span></p><% }) %>
        <% if (!quotes.length) { %><p class="muted">Aucun devis.</p><% } %>
      </section>
      <section class="panel">
        <h3>Factures</h3>
        <% invoices.forEach(i=>{ %><p><a href="<%= adminBase %>/factures/<%= i.id %>"><strong><%= i.invoice_number %></strong></a><br><span class="muted"><%= ui.label(i.status) %> · <%= ui.money(i.total) %></span></p><% }) %>
        <% if (!invoices.length) { %><p class="muted">Aucune facture.</p><% } %>
      </section>
      <section class="panel">
        <h3>Interventions</h3>
        <% interventions.slice(0,8).forEach(i=>{ %><p><a href="<%= adminBase %>/interventions/<%= i.id %>"><strong><%= ui.date(i.starts_at, true) %></strong></a><br><span class="muted"><%= i.service_type %> · <%= i.team_names || 'Non assignée' %> · <%= ui.label(i.status) %></span></p><% }) %>
        <% if (!interventions.length) { %><p class="muted">Aucune intervention.</p><% } %>
      </section>
    </div>

    <div class="actions danger-actions">
      <form method="post" action="<%= adminBase %>/clients/<%= client.id %>/toggle" data-confirm="Confirmer le changement de statut du client ?"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="secondary"><%= client.status === 'active' ? 'Bloquer le client' : 'Débloquer le client' %></button></form>
      <form method="post" action="<%= adminBase %>/clients/<%= client.id %>/anonymiser" data-confirm="Anonymiser ce client ? Cette action est sensible."><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="secondary">Anonymiser</button></form>
    </div>
    <script>
      (() => {
        document.querySelectorAll('[data-open-details]').forEach((trigger) => {
          trigger.addEventListener('click', () => {
            const panel = document.querySelector(trigger.dataset.openDetails);
            if (panel && panel.tagName === 'DETAILS') panel.open = true;
          });
        });
      })();
    </script>
  </section>
</div>
