import { remindIncident } from '../api.js';

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 || '—';
}

export async function renderIncidentDetail(root, { incidentId, incidents = [], fetchIncidentDetail }) {
  if (!incidentId) {
    root.innerHTML = '<div class="public-empty-state">Demande introuvable.</div>';
    return;
  }

  root.innerHTML = `
    <section class="screen-stack">
      <div class="public-section-card public-section-card-hero">
        <div class="public-section-head stacked">
          <div>
            <span class="public-hero-pill">Suivi détaillé</span>
            <h2>Détail de votre demande</h2>
            <p>Retrouvez ici toutes les informations transmises, l’état de prise en charge et les pièces jointes envoyées.</p>
          </div>
          <a class="btn btn-sm btn-outline-secondary" href="#/history">Retour à l’historique</a>
        </div>
      </div>
      <div class="public-empty-state">Chargement du détail…</div>
    </section>
  `;

  const fallbackIncident = incidents.find((item) => Number(item.id || 0) === incidentId) || null;

  try {
    const response = await fetchIncidentDetail(incidentId);
    const incident = response?.incident || fallbackIncident;
    const photos = response?.photos || [];
    let currentFollowups = response?.followups || [];
    const supportEmail = String(response?.support?.email || '').trim();
    const canRemind = !['resolu', 'ferme'].includes(String(incident?.status || ''));

    if (!incident) {
      root.innerHTML = '<div class="public-empty-state">Demande introuvable.</div>';
      return;
    }

    root.innerHTML = `
      <section class="screen-stack">
        <div class="public-section-card public-section-card-hero">
          <div class="public-section-head stacked">
            <div>
              <span class="public-hero-pill">Suivi détaillé</span>
              <h2>${escapeHtml(incident.subject || 'Incident client')}</h2>
              <p>${escapeHtml(incident.description || 'Aucun commentaire détaillé transmis.')}</p>
            </div>
            <a class="btn btn-sm btn-outline-secondary" href="#/history">Retour à l’historique</a>
          </div>
        </div>

        <div class="public-kpi-grid public-detail-kpi-grid">
          <article class="public-kpi-card public-detail-kpi-card">
            <span>Référence ticket</span>
            <strong>${escapeHtml(incident.ref_code || ('FTTH-' + incident.ticket_id))}</strong>
            <small>Identifiant FTTH associé à votre demande</small>
          </article>
          <article class="public-kpi-card public-detail-kpi-card">
            <span>Statut actuel</span>
            <strong>${escapeHtml(formatStatus(incident.status))}</strong>
            <small>${escapeHtml(incident.updated_at ? 'Mis à jour le ' + formatDateTime(incident.updated_at) : 'En attente de mise à jour')}</small>
          </article>
          <article class="public-kpi-card public-detail-kpi-card">
            <span>Photos envoyées</span>
            <strong>${Number((response?.photos || []).length || incident.photo_count || 0)}</strong>
            <small>Pièces jointes enregistrées lors de la déclaration</small>
          </article>
        </div>

        <div class="public-section-card public-detail-actions-panel">
          <div class="public-section-head stacked">
            <div>
              <h3>Actions sur la demande</h3>
              <p>Relancez votre dossier ou contactez le support si vous avez besoin d'un complément de prise en charge.</p>
            </div>
          </div>
          <div class="public-detail-actions-grid">
            <button class="public-cta public-cta-soft" id="btnRemind" type="button" ${canRemind ? '' : 'disabled'}>
              <i class="fas fa-bullhorn"></i>
              <span>${canRemind ? 'Déclarer une relance' : 'Demande déjà clôturée'}</span>
            </button>
            ${supportEmail ? `
              <a class="btn btn-outline-secondary public-detail-support-link" href="mailto:${escapeHtml(supportEmail)}?subject=${encodeURIComponent('e-Intervention - Assistance sur la demande #' + incident.id)}">
                <i class="fas fa-headset"></i>
                <span>Contacter le support</span>
              </a>
            ` : `
              <a class="btn btn-outline-secondary public-detail-support-link" href="#/declare">
                <i class="fas fa-circle-plus"></i>
                <span>Créer une nouvelle demande</span>
              </a>
            `}
          </div>
          <div class="public-inline-note public-inline-note-strong public-detail-followup-note" id="detailActionFeedback" hidden></div>
        </div>

        <div class="public-section-card public-detail-panel">
          <div class="public-section-head stacked">
            <div>
              <h3>Informations de prise en charge</h3>
              <p>Les équipes utilisent ces informations pour qualifier et traiter votre demande.</p>
            </div>
          </div>
          <div class="public-detail-grid">
            <div class="public-detail-row"><span>Adresse client</span><strong>${escapeHtml(incident.client_address || 'Adresse à confirmer')}</strong></div>
            <div class="public-detail-row"><span>Nature d’intervention</span><strong>${escapeHtml(incident.nature_intervention || 'Maintenance FTTH B2B')}</strong></div>
            <div class="public-detail-row"><span>Date de création</span><strong>${escapeHtml(formatDateTime(incident.created_at))}</strong></div>
            <div class="public-detail-row"><span>Dernière mise à jour</span><strong>${escapeHtml(formatDateTime(incident.updated_at || incident.created_at))}</strong></div>
            ${incident.operator_notes ? `<div class="public-detail-note"><span>Note opérateur</span><p>${escapeHtml(incident.operator_notes)}</p></div>` : ''}
          </div>
        </div>

        <div class="public-section-card public-detail-panel">
          <div class="public-section-head">
            <div>
              <h3>Historique des relances</h3>
              <p>Retrouvez ici les relances que vous avez déjà transmises au support pour cette demande.</p>
            </div>
          </div>
          <div class="public-detail-followups" id="followupTimeline">
            ${renderFollowups(currentFollowups)}
          </div>
        </div>

        <div class="public-section-card public-detail-panel">
          <div class="public-section-head">
            <div>
              <h3>Photos et commentaires</h3>
              <p>Chaque pièce jointe correspond à une photo ou un commentaire transmis lors de votre déclaration.</p>
            </div>
          </div>
          <div class="screen-stack">
            ${photos.length ? photos.map((photo, index) => `
              <article class="public-photo-card public-detail-photo-card">
                ${photo.photo_url ? `<img class="public-detail-photo-image" src="${escapeHtml(photo.photo_url)}" alt="Photo ${index + 1}">` : ''}
                <div class="public-photo-meta">
                  <strong>Photo ${index + 1}</strong>
                  <span>${escapeHtml(formatDateTime(photo.created_at))}</span>
                </div>
                <p>${escapeHtml(photo.comment || 'Aucun commentaire sur cette photo.')}</p>
              </article>
            `).join('') : '<div class="public-empty-state">Aucune photo enregistrée sur cette demande.</div>'}
          </div>
        </div>
      </section>
    `;

    const remindButton = root.querySelector('#btnRemind');
    const feedbackBox = root.querySelector('#detailActionFeedback');
    const followupTimeline = root.querySelector('#followupTimeline');

    remindButton?.addEventListener('click', async () => {
      if (!canRemind) {
        return;
      }

      const followupMessage = window.prompt('Précisez si besoin le motif de votre relance.', 'Merci de revenir vers moi sur cette demande.');
      if (followupMessage === null) {
        return;
      }

      remindButton.disabled = true;
      try {
        const remindResponse = await remindIncident({
          incident_id: incidentId,
          message: followupMessage,
        });
        feedbackBox.hidden = false;
        feedbackBox.innerHTML = `<i class="fas fa-circle-check"></i><div>${escapeHtml(remindResponse?.message || 'Votre relance a été envoyée au support.')}</div>`;
        const followup = remindResponse?.followup;
        if (followup && followupTimeline) {
          currentFollowups = [followup, ...currentFollowups];
          followupTimeline.innerHTML = renderFollowups(currentFollowups);
        }
      } catch (error) {
        feedbackBox.hidden = false;
        feedbackBox.innerHTML = `<i class="fas fa-circle-exclamation"></i><div>${escapeHtml(error?.data?.error === 'incident_closed' ? 'Cette demande est déjà clôturée.' : 'Impossible de transmettre la relance pour le moment.')}</div>`;
      } finally {
        remindButton.disabled = false;
      }
    });
  } catch {
    if (!fallbackIncident) {
      root.innerHTML = '<div class="public-empty-state">Impossible de charger le détail de cette demande.</div>';
      return;
    }

    root.innerHTML = `
      <section class="screen-stack">
        <div class="public-section-card public-section-card-hero">
          <div class="public-section-head stacked">
            <div>
              <span class="public-hero-pill">Suivi détaillé</span>
              <h2>${escapeHtml(fallbackIncident.subject || 'Incident client')}</h2>
              <p>${escapeHtml(fallbackIncident.description || 'Aucun commentaire détaillé transmis.')}</p>
            </div>
            <a class="btn btn-sm btn-outline-secondary" href="#/history">Retour à l’historique</a>
          </div>
        </div>
        <div class="public-empty-state">Le détail enrichi est momentanément indisponible, mais votre demande reste visible dans l’historique.</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;');
}

function renderFollowups(followups) {
  if (!followups.length) {
    return '<div class="public-empty-state public-empty-state-inline">Aucune relance envoyée pour le moment.</div>';
  }

  return followups.map((followup) => `
    <article class="public-followup-item" data-followup-id="${Number(followup.id || 0)}" data-followup-created-at="${escapeHtml(followup.created_at || '')}" data-followup-message="${escapeHtml(followup.message || '')}">
      <div class="public-followup-item-head">
        <strong>Relance client</strong>
        <span>${escapeHtml(formatDateTime(followup.created_at))}</span>
      </div>
      <p>${escapeHtml(followup.message || 'Relance demandée depuis l\'application client.')}</p>
    </article>
  `).join('');
}