{% extends '@App/partials/base.html.twig' %}

{% block content %}
<div class="body-wrapper"
     data-controller="projet-tools-export report-job"
     data-projet-tools-export-start-url-value="{{ path('projet_export_zip_start', { id: projet.idtoken }) }}"
     data-projet-tools-export-steps-value='[{"key":"prepare","label":"Préparation","weight":5},{"key":"excel","label":"Génération Excel","weight":20},{"key":"collect_docs","label":"Collecte des documents","weight":20},{"key":"collect_photos","label":"Collecte des photos","weight":15},{"key":"collect_attachments","label":"Collecte des pièces jointes","weight":10},{"key":"zip_build","label":"Construction du ZIP","weight":25},{"key":"finalize","label":"Finalisation","weight":5}]'
     data-projet-tools-export-csrf-value="{{ csrf_token('export_zip_' ~ projet.idtoken) }}"
     data-report-job-start-url-value="{{ path('projet_reports_start', { id: projet.idtoken }) }}"
     data-report-job-list-url-value="{{ path('projet_reports_list', { id: projet.idtoken }) }}"
     data-report-job-status-url-template-value="{{ path('project_reports_status', { jobId: '__JOB__' }) }}"
     data-report-job-csrf-value="{{ csrf_token('project_reports_' ~ projet.idtoken) }}">

  <div class="container-fluid">

    <div class="mb-4">
      <h2 class="fw-bold mb-1">Outils</h2>
      <p class="text-muted mb-0">Centralisez vos exports, documents, rapports et actions de maintenance</p>
    </div>

    <div class="card border rounded-4 mb-4">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
          <div class="d-flex align-items-start gap-3">
            <div class="rounded-3 bg-danger-subtle text-danger d-flex align-items-center justify-content-center" style="width:52px;height:52px;">
              <i class="ti ti-file-type-pdf fs-6"></i>
            </div>
            <div>
              <h3 class="mb-1">Rapports PDF</h3>
              <p class="text-muted mb-0">Générez des rapports professionnels personnalisés</p>
            </div>
          </div>
          <a href="#history-reports" class="text-success fw-semibold text-decoration-none">Voir l’historique</a>
        </div>

        <div class="row g-3">
          <div class="col-lg-3 col-md-6">
            <div class="border rounded-4 p-3 h-100 d-flex flex-column">
              <div class="rounded-3 bg-primary-subtle text-primary d-flex align-items-center justify-content-center mb-3" style="width:42px;height:42px;"><i class="ti ti-chart-donut-3"></i></div>
              <h4 class="mb-2">Bilan projet</h4>
              <p class="text-muted mb-2">Vue d'ensemble complète de votre projet</p>
              <ul class="small text-muted ps-3 mb-3">
                <li>KPI et métriques globales</li>
                <li>Synthèse partenaires</li>
                <li>Graphiques de performance</li>
              </ul>
              <button type="button"
                      class="btn btn-success mt-auto"
                      data-bs-toggle="modal"
                      data-bs-target="#reportConfigModal"
                      data-type="BILAN_PROJET"
                      data-title="Bilan projet"
                      data-action="click->report-job#openConfig">
                Configurer
              </button>
            </div>
          </div>

          <div class="col-lg-3 col-md-6">
            <div class="border rounded-4 p-3 h-100 d-flex flex-column">
              <div class="rounded-3 bg-purple-subtle text-purple d-flex align-items-center justify-content-center mb-3" style="width:42px;height:42px;"><i class="ti ti-users-group"></i></div>
              <h4 class="mb-2">Partenaire par partenaire</h4>
              <p class="text-muted mb-2">Détail individualisé par partenaire</p>
              <ul class="small text-muted ps-3 mb-3">
                <li>Fiche détaillée par partenaire</li>
                <li>Apports et contreparties</li>
                <li>Documents associés</li>
              </ul>
              <button type="button"
                      class="btn btn-success mt-auto"
                      data-bs-toggle="modal"
                      data-bs-target="#reportConfigModal"
                      data-type="PARTENAIRE"
                      data-title="Rapport partenaires"
                      data-action="click->report-job#openConfig">
                Configurer
              </button>
            </div>
          </div>

          <div class="col-lg-3 col-md-6">
            <div class="border rounded-4 p-3 h-100 d-flex flex-column">
              <div class="rounded-3 bg-success-subtle text-success d-flex align-items-center justify-content-center mb-3" style="width:42px;height:42px;"><i class="ti ti-calculator"></i></div>
              <h4 class="mb-2">Compta / Administratif</h4>
              <p class="text-muted mb-2">Rapport comptable et administratif complet</p>
              <ul class="small text-muted ps-3 mb-3">
                <li>Flux financiers détaillés</li>
                <li>Documents réglementaires</li>
                <li>Conformité fiscale</li>
              </ul>
              <button type="button"
                      class="btn btn-success mt-auto"
                      data-bs-toggle="modal"
                      data-bs-target="#reportConfigModal"
                      data-type="COMPTA_ADMIN"
                      data-title="Rapport comptable"
                      data-action="click->report-job#openConfig">
                Configurer
              </button>
            </div>
          </div>

          <div class="col-lg-3 col-md-6">
            <div class="border rounded-4 p-3 h-100 d-flex flex-column">
              <div class="rounded-3 bg-warning-subtle text-warning d-flex align-items-center justify-content-center mb-3" style="width:42px;height:42px;"><i class="ti ti-alert-triangle"></i></div>
              <h4 class="mb-2">Retards & risques</h4>
              <p class="text-muted mb-2">Identification des points d'attention</p>
              <ul class="small text-muted ps-3 mb-3">
                <li>Contreparties en retard</li>
                <li>Documents manquants</li>
                <li>Alertes de conformité</li>
              </ul>
              <button type="button"
                      class="btn btn-success mt-auto"
                      data-bs-toggle="modal"
                      data-bs-target="#reportConfigModal"
                      data-type="RETARDS_RISQUES"
                      data-title="Rapport retards"
                      data-action="click->report-job#openConfig">
                Configurer
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card border rounded-4 mb-4">
      <div class="card-body d-flex flex-wrap align-items-center gap-2">
        <button type="button"
                class="btn btn-success rounded-3"
                data-bs-toggle="modal"
                data-bs-target="#projectExportProgressModal"
                data-action="click->projet-tools-export#open">
          <i class="ti ti-download me-1"></i>Export complet ZIP
        </button>
        <button type="button" class="btn btn-light border rounded-3" disabled><i class="ti ti-file-description me-1"></i>Générer pack documents</button>
        <button type="button" class="btn btn-light border rounded-3" disabled><i class="ti ti-report-analytics me-1"></i>Bilan partenaires</button>
        <button type="button" class="btn btn-light border rounded-3" disabled><i class="ti ti-search me-1"></i>Détecter doublons</button>
        <button type="button" class="btn btn-light border rounded-3" disabled><i class="ti ti-lock me-1"></i>Clôturer projet</button>
      </div>
    </div>

    <div class="card border rounded-4" id="history-reports">
      <div class="card-body">
        <h4 class="mb-3">Historique des rapports générés</h4>
        <div class="table-responsive">
          <table class="table align-middle">
            <thead>
              <tr>
                <th>Type</th>
                <th>Date</th>
                <th>Statut</th>
                <th>Taille</th>
                <th>ID Job</th>
                <th class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody data-report-job-target="historyBody">
              <tr><td colspan="6" class="text-center text-muted py-3">Chargement…</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="reportConfigModal" tabindex="-1" aria-hidden="true" data-report-job-target="configModal">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
      <div class="modal-content border rounded-4">
        <div class="modal-header">
          <h5 class="modal-title">Configuration du rapport PDF</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <form class="modal-body">
          <input type="hidden" data-report-job-target="typeInput">

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Titre</label>
              <input type="text" class="form-control" data-report-job-target="titleInput" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Logo</label>
              <select class="form-select" data-report-job-target="logoInput">
                <option value="organisateur">Organisateur</option>
                <option value="projet">Projet</option>
              </select>
            </div>

            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea class="form-control" rows="2" data-report-job-target="descriptionInput" placeholder="Description affichée sur la couverture"></textarea>
            </div>

            <div class="col-md-6">
              <label class="form-label">Date début</label>
              <input type="date" class="form-control" data-report-job-target="dateStartInput">
            </div>
            <div class="col-md-6">
              <label class="form-label">Date fin</label>
              <input type="date" class="form-control" data-report-job-target="dateEndInput">
            </div>

            <div class="col-md-6">
              <label class="form-label">Partenaires</label>
              <select class="form-select" data-report-job-target="partnersModeInput">
                <option value="all">Tous</option>
                <option value="selection">Sélection (idtoken séparés par virgule)</option>
                <option value="tags">Par tags</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Niveau de détail</label>
              <select class="form-select" data-report-job-target="detailInput">
                <option value="compact">Compact</option>
                <option value="standard" selected>Standard</option>
                <option value="detailed">Détaillé</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label">IDs partenaires (optionnel)</label>
              <input type="text" class="form-control" placeholder="id1,id2,id3" data-report-job-target="partnerIdsInput">
            </div>
            <div class="col-md-6">
              <label class="form-label">Tags (optionnel)</label>
              <input type="text" class="form-control" placeholder="premium,2026" data-report-job-target="tagsInput">
            </div>

            <div class="col-md-4">
              <label class="form-label">Limite images</label>
              <input type="number" class="form-control" min="0" max="120" value="12" data-report-job-target="maxImagesInput">
            </div>
            <div class="col-md-8 d-flex flex-wrap align-items-end gap-3">
              <div class="form-check form-switch"><input class="form-check-input" type="checkbox" checked data-report-job-target="includeChartsInput"><label class="form-check-label">Inclure graphiques</label></div>
              <div class="form-check form-switch"><input class="form-check-input" type="checkbox" checked data-report-job-target="includeTablesInput"><label class="form-check-label">Inclure tables</label></div>
              <div class="form-check form-switch"><input class="form-check-input" type="checkbox" data-report-job-target="includeGalleryInput"><label class="form-check-label">Inclure galerie</label></div>
              <div class="form-check form-switch"><input class="form-check-input" type="checkbox" data-report-job-target="includeAnnexesInput"><label class="form-check-label">Inclure annexes</label></div>
            </div>
          </div>

          <div class="alert alert-danger d-none mt-3" data-report-job-target="configErrorBox"></div>

          <div class="modal-footer px-0 pb-0 mt-4">
            <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Annuler</button>
            <button type="button"
                    class="btn btn-success"
                    data-report-job-target="startBtn"
                    data-action="click->report-job#start">
              <i class="ti ti-player-play me-1"></i>Générer
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="reportProgressModal" tabindex="-1" aria-hidden="true" data-report-job-target="progressModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content border rounded-4">
        <div class="modal-header">
          <h5 class="modal-title">Génération du rapport PDF</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <p class="text-muted mb-3" data-report-job-target="message">Initialisation...</p>
          <div class="progress mb-2" style="height:10px;">
            <div class="progress-bar bg-success" style="width:0%" data-report-job-target="globalBar"></div>
          </div>
          <div class="text-end mb-3"><span class="fw-semibold" data-report-job-target="globalText">0%</span></div>

          <ul class="list-group list-group-flush" data-report-job-target="stepsList"></ul>

          <div class="alert alert-danger mt-3 d-none" data-report-job-target="progressErrorBox"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Fermer</button>
          <a class="btn btn-success d-none" data-report-job-target="downloadBtn"><i class="ti ti-download me-1"></i>Télécharger le fichier</a>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="projectExportProgressModal" tabindex="-1" aria-hidden="true" data-projet-tools-export-target="modal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content border rounded-4">
        <div class="modal-header">
          <h5 class="modal-title">Export du projet</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer" data-projet-tools-export-target="closeBtn"></button>
        </div>
        <div class="modal-body">
          <p class="text-muted mb-3">Préparation des fichiers d’export en cours...</p>
          <div class="progress mb-3" style="height:10px;"><div class="progress-bar bg-success" style="width:0%" data-projet-tools-export-target="globalBar"></div></div>
          <div class="d-flex justify-content-between align-items-center mb-3"><span class="small text-muted">Progression globale</span><span class="fw-semibold" data-projet-tools-export-target="globalText">0%</span></div>
          <div class="border rounded-3 p-3 bg-light-subtle"><ul class="list-group list-group-flush" data-projet-tools-export-target="stepsList"></ul></div>
          <div class="alert alert-danger mt-3 d-none" data-projet-tools-export-target="errorBox"></div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-light border" data-bs-dismiss="modal" data-projet-tools-export-target="cancelBtn">Fermer</button>
          <div class="d-flex gap-2">
            <button type="button" class="btn btn-success" data-projet-tools-export-target="startBtn" data-action="click->projet-tools-export#start"><i class="ti ti-player-play me-1"></i>Lancer l'export</button>
            <a class="btn btn-success d-none"
               data-turbo="false"
               data-projet-tools-export-target="downloadBtn"
               data-action="click->projet-tools-export#download">
              <i class="ti ti-download me-1"></i>Télécharger le fichier
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}