<% layout('layouts/main') %>
<% const clientBase = typeof clientBaseUrl !== 'undefined' ? clientBaseUrl : '/client'; %>
<% const p = portal || { buildings: [], tickets: [], reports: [] }; %>
<div class="app-shell">
  <%- partial('partials/client-nav') %>
  <section class="content concierge-client-page">
    <div class="page-head compact-page-head">
      <div>
        <p class="eyebrow">Conciergerie</p>
        <h1>Immeubles, tickets et rapports.</h1>
        <p class="muted">Consultez les suivis d’immeubles liés à votre compte et transmettez une demande à l’équipe.</p>
      </div>
    </div>

    <section class="suite-command-grid advanced-kpis">
      <article><span>Immeubles</span><strong><%= p.buildings.length %></strong><small>Sites liés</small></article>
      <article><span>Tickets</span><strong><%= p.tickets.length %></strong><small>Historique visible</small></article>
      <article><span>Rapports</span><strong><%= p.reports.length %></strong><small>Documents régie</small></article>
    </section>

    <section class="panel">
      <div class="inline-heading"><h2>Nouveau signalement</h2><span class="badge">Portail régie/client</span></div>
      <form method="post" action="<%= clientBase %>/conciergerie/tickets" class="form-grid compact">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="form-grid three">
          <label>Immeuble<select name="building_id"><option value="">Choisir</option><% p.buildings.forEach((building) => { %><option value="<%= building.id %>"><%= building.name %></option><% }) %></select></label>
          <label>Catégorie<select name="category"><option value="ampoule">Ampoule cassée</option><option value="degat">Dégât</option><option value="vandalisme">Vandalisme</option><option value="proprete">Propreté</option><option value="container">Container</option><option value="serrure">Serrure</option><option value="encombrant">Encombrant</option><option value="demande_regie">Demande régie</option><option value="other">Autre</option></select></label>
          <label>Priorité<select name="priority"><option value="normal">Normale</option><option value="high">Haute</option><option value="critical">Critique</option><option value="low">Basse</option></select></label>
        </div>
        <label>Description<textarea name="description" rows="4" required placeholder="Décrivez le problème, l’emplacement et les informations utiles."></textarea></label>
        <button>Envoyer le signalement</button>
      </form>
    </section>

    <section class="panel">
      <div class="inline-heading"><h2>Mes immeubles</h2><span class="badge"><%= p.buildings.length %></span></div>
      <div class="compact-card-grid">
        <% p.buildings.forEach((building) => { %>
          <article class="mini-record"><strong><%= building.name %></strong><span><%= [building.address, building.postal_code, building.city].filter(Boolean).join(', ') %></span><em><%= building.entries_count %> entrée(s), <%= building.floors_count %> étage(s)</em></article>
        <% }) %>
        <% if (!p.buildings.length) { %><div class="empty-state slim"><strong>Aucun immeuble lié</strong><span>L’équipe peut relier vos immeubles depuis l’administration.</span></div><% } %>
      </div>
    </section>

    <section class="panel">
      <div class="inline-heading"><h2>Tickets</h2><span class="badge"><%= p.tickets.length %></span></div>
      <div class="mobile-list compact-list">
        <% p.tickets.forEach((ticket) => { %>
          <article class="list-card slim-card">
            <div class="list-card-head"><div><strong><%= ticket.building_name || 'Immeuble' %> · <%= ui.label(ticket.category) %></strong><span><%= ticket.description %></span></div><span class="badge"><%= ui.label(ticket.status) %></span></div>
          </article>
        <% }) %>
        <% if (!p.tickets.length) { %><div class="empty-state slim"><strong>Aucun ticket</strong><span>Les signalements et demandes apparaîtront ici.</span></div><% } %>
      </div>
    </section>

    <section class="panel">
      <div class="inline-heading"><h2>Rapports régie</h2><span class="badge"><%= p.reports.length %></span></div>
      <div class="mobile-list compact-list">
        <% p.reports.forEach((report) => { %>
          <article class="line-card"><strong><%= report.building_name || 'Rapport' %></strong><span><%= report.period_from || 'Début' %> → <%= report.period_to || 'Aujourd’hui' %></span><a class="button secondary small" href="<%= clientBase %>/conciergerie/rapports/<%= report.id %>/pdf">PDF</a></article>
        <% }) %>
        <% if (!p.reports.length) { %><div class="empty-state slim"><strong>Aucun rapport</strong><span>Les rapports envoyés par l’équipe apparaîtront ici.</span></div><% } %>
      </div>
    </section>
  </section>
</div>
