function formatStatus(status) {
  const map = {
    soumis: 'Soumise',
    prise_en_charge: 'Prise en charge',
    assigne_technicien: 'Technicien assigné',
    en_cours: 'En cours',
    resolu: 'Résolue',
    ferme: 'Fermée',
  };
  return map[status] || status || '—';
}

function getIncidentStats(incidents) {
  const treatedStatuses = new Set(['resolu', 'ferme']);
  const total = incidents.length;
  const treated = incidents.filter((item) => treatedStatuses.has(String(item.status || '').toLowerCase())).length;
  const inProgress = total - treated;

  return { total, inProgress, treated };
}

function getCompletionRate(stats) {
  if (!stats.total) {
    return 0;
  }
  return Math.round((stats.treated / stats.total) * 100);
}

function getStatusTone(status) {
  const normalized = String(status || '').toLowerCase();
  if (normalized === 'resolu' || normalized === 'ferme') {
    return 'is-treated';
  }
  if (normalized === 'prise_en_charge' || normalized === 'assigne_technicien' || normalized === 'en_cours') {
    return 'is-progress';
  }
  return 'is-pending';
}

export async function renderDashboard(root, { client, incidents = [], unreadCount = 0 }) {
  const latest = incidents.slice(0, 3);
  const stats = getIncidentStats(incidents);
  const completionRate = getCompletionRate(stats);
  const latestUpdate = latest[0]?.updated_at || latest[0]?.created_at || null;
  const firstName = escapeHtml((client?.full_name || '').split(' ')[0] || 'client');
  root.innerHTML = `
    <section class="screen-stack">
      <div class="public-dashboard-hero public-dashboard-hero-rich">
        <div class="public-dashboard-hero-main">
          <div>
            <span class="public-hero-pill">Bonjour ${firstName}</span>
            <h2>Tableau de bord e-Intervention</h2>
            <p>Visualisez l'état de vos demandes FTTH, suivez leur prise en charge et accédez rapidement à l'action client la plus utile.</p>
          </div>
          <div class="public-dashboard-actions">
            <a class="btn btn-primary public-cta" href="#/declare"><i class="fas fa-plus"></i> Déclarer un incident</a>
            <a class="public-ghost-cta" href="#/history"><i class="fas fa-clock-rotate-left"></i> Consulter l'historique</a>
          </div>
        </div>
        <div class="public-dashboard-hero-side">
          <article class="public-dashboard-ring-card">
            <div class="public-dashboard-ring" style="--progress:${completionRate}">
              <div>
                <strong>${completionRate}%</strong>
                <span>traités</span>
              </div>
            </div>
            <p>${stats.treated} incident(s) clôturé(s) ou résolu(s) sur ${stats.total} déclaré(s).</p>
            <div class="public-dashboard-ring-meta">
              <span><i class="fas fa-bell"></i> ${unreadCount} notification(s) non lue(s)</span>
              <span><i class="fas fa-clock"></i> ${escapeHtml(latestUpdate ? formatDateTime(latestUpdate) : 'Aucune mise à jour')}</span>
            </div>
          </article>
        </div>
      </div>

      <div class="public-section-card public-dashboard-board public-dashboard-board-rich">
        <div class="public-section-head stacked">
          <div>
            <h3>Tableau de bord incidents</h3>
            <p>Trois indicateurs prioritaires pour piloter votre espace client en un coup d'oeil.</p>
          </div>
        </div>
        <div class="public-kpi-grid public-kpi-grid-main">
          <article class="public-kpi-card public-kpi-card-main public-kpi-card-feature total-tone">
            <div class="public-kpi-icon"><i class="fas fa-layer-group"></i></div>
            <span>Nombre total d'incidents</span>
            <strong>${stats.total}</strong>
            <small>Toutes vos demandes enregistrées dans e-Intervention</small>
          </article>
          <article class="public-kpi-card public-kpi-card-main public-kpi-card-feature accent-warm in-progress-tone">
            <div class="public-kpi-icon"><i class="fas fa-arrows-rotate"></i></div>
            <span>Incidents en cours</span>
            <strong>${stats.inProgress}</strong>
            <small>Demandes en attente, prises en charge ou en traitement</small>
          </article>
          <article class="public-kpi-card public-kpi-card-main public-kpi-card-feature accent-soft treated-tone">
            <div class="public-kpi-icon"><i class="fas fa-circle-check"></i></div>
            <span>Incidents traités</span>
            <strong>${stats.treated}</strong>
            <small>Demandes résolues ou fermées</small>
          </article>
        </div>
        <div class="public-dashboard-insight-grid">
          <article class="public-dashboard-insight-card">
            <div class="public-dashboard-insight-head">
              <strong>Progression globale</strong>
              <span>${completionRate}%</span>
            </div>
            <div class="public-dashboard-progress"><span style="width:${completionRate}%"></span></div>
            <p>Le taux de résolution reflète la part de vos demandes déjà traitées par les équipes.</p>
          </article>
          <article class="public-dashboard-insight-card">
            <div class="public-dashboard-insight-head">
              <strong>Tendance actuelle</strong>
              <span>${stats.inProgress > stats.treated ? 'Suivi en cours' : 'Traitement maîtrisé'}</span>
            </div>
            <p>${stats.inProgress > stats.treated ? 'Vos demandes actives sont encore majoritaires et progressent dans le circuit de prise en charge.' : 'La majorité de vos demandes ont déjà été résolues ou fermées.'}</p>
          </article>
        </div>
      </div>

      <div class="public-section-card">
        <div class="public-section-head">
          <div>
            <h3>Dernières déclarations</h3>
            <p>Les statuts ci-dessous sont mis à jour depuis le module Maintenance FTTH B2B.</p>
          </div>
          <a class="btn btn-sm btn-outline-secondary" href="#/history">Tout voir</a>
        </div>
        ${latest.length ? latest.map((item) => `
          <a class="public-history-card compact public-history-card-dashboard ${getStatusTone(item.status)} public-history-card-link" href="#/incident?id=${Number(item.id || 0)}">
            <div class="public-history-main">
              <strong>${escapeHtml(item.subject || 'Incident client')}</strong>
              <span class="public-status-chip status-${escapeHtml(String(item.status || '').toLowerCase())}">${escapeHtml(formatStatus(item.status))}</span>
            </div>
            <div class="public-history-meta">
              <span><i class="fas fa-hashtag"></i> ${escapeHtml(item.ref_code || ('FTTH-' + item.ticket_id))}</span>
              <span><i class="fas fa-camera"></i> ${Number(item.photo_count || 0)} photo(s)</span>
              <span><i class="fas fa-calendar-day"></i> ${escapeHtml(formatDateTime(item.created_at))}</span>
            </div>
          </a>
        `).join('') : '<div class="public-empty-state">Aucune demande soumise pour le moment.</div>'}
      </div>
    </section>
  `;
}

function formatDateTime(value) {
  if (!value) {
    return '—';
  }
  const date = new Date(String(value).replace(' ', 'T'));
  if (Number.isNaN(date.getTime())) {
    return value;
  }
  return date.toLocaleString('fr-FR', { dateStyle: 'medium', timeStyle: 'short' });
}

function escapeHtml(value) {
  return String(value ?? '')
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#039;');
}