<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{APPLICATION_NAME}} - Analyse métier</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose' });</script>
    <style>
<!-- CSS_PLACEHOLDER -->
    </style>
</head>
<body>
    <div class="app">
        <!-- ============================================
             HEADER
             ============================================ -->
        <header class="header" role="banner">
            <button class="hamburger-btn" onclick="toggleMobileSidebar()" aria-label="Ouvrir le menu de navigation">&#9776;</button>
            <div class="header-logo" aria-hidden="true">BA</div>
            <span class="header-title">Analyse métier</span>
            <div class="header-sep"></div>
            <span class="header-app-name" id="appName">{{APPLICATION_NAME}}</span>
            <div class="header-spacer"></div>
            <div class="header-actions">
                <button class="btn btn-sm" onclick="resetToEmbedded()" title="Réinitialiser depuis les données d'origine (supprime les modifications locales)" aria-label="Réinitialiser les données">Reset</button>
                <button class="btn btn-sm" onclick="saveToLocalStorage()" title="Sauvegarder les modifications dans le navigateur" aria-label="Sauvegarder">Sauvegarder</button>
                <button class="btn btn-sm btn-review" onclick="saveReviewJSON()" title="Sauvegarder les corrections pour créer une nouvelle version" aria-label="Sauvegarder les corrections">Sauvegarder corrections</button>
                <button class="btn btn-sm btn-primary" onclick="exportJSON()" title="Exporter les données au format JSON pour l'extraction" aria-label="Exporter en JSON">Exporter JSON</button>
                <button class="btn btn-sm review-toggle-btn" id="reviewToggleBtn" onclick="toggleReviewPanel()" title="Ouvrir/fermer le panneau de review" aria-label="Panneau de review">
                    Review
                    <span class="review-badge hidden" id="reviewBadge" aria-live="polite">0</span>
                </button>
            </div>
        </header>

        <div class="body" id="appBody">
            <!-- ============================================
                 SIDEBAR - Navigation hiérarchique
                 ============================================ -->
            <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleMobileSidebar()"></div>
            <aside class="sidebar" id="sidebarAside" role="navigation" aria-label="Navigation principale">
                <!-- Application Name -->
                <div class="sidebar-header">
                    <span class="sidebar-app-name" id="sidebarAppName">{{APPLICATION_NAME}}</span>
                </div>
                <!-- Search -->
                <div class="sidebar-search">
                    <input type="search" id="sidebarSearchInput" placeholder="Rechercher..." oninput="filterNavItems(this.value)" aria-label="Rechercher dans le document">
                </div>
                <!-- Dynamic Tree Navigation -->
                <div id="sidebarNav">
                    <!-- Populated by buildNavTree() -->
                </div>
            </aside>

            <!-- ============================================
                 MAIN CONTENT
                 ============================================ -->
            <main class="main" id="mainContent" role="main">

                <!-- SECTION: Contexte (merged: problem + current + vision) -->
                <div class="section" id="cadrage-context">
                    <h2 class="section-title">Contexte du projet</h2>
                    <p class="section-subtitle">Vue synthétique du besoin : problème, situation actuelle et objectif visé.</p>

                    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;">
                        <div class="card" style="border-left:3px solid #f87171;">
                            <div class="card-label" style="color:#f87171;">Problème identifié</div>
                            <div class="editable" contenteditable="true" data-field="context.problem" data-placeholder="Quel problème ce projet doit-il résoudre ?"></div>
                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
                                <strong>Déclencheur :</strong>
                                <div class="editable" contenteditable="true" data-field="context.trigger" data-placeholder="Événement déclencheur" style="display:inline;"></div>
                            </div>
                        </div>

                        <div class="card" style="border-left:3px solid #facc15;">
                            <div class="card-label" style="color:#facc15;">Aujourd'hui</div>
                            <div class="editable" contenteditable="true" data-field="context.currentSituation" data-placeholder="Comment les choses fonctionnent actuellement ?"></div>
                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
                                <strong>Points douleur :</strong>
                                <div class="editable" contenteditable="true" data-field="context.painPoints" data-placeholder="Problemes recurrents" style="display:inline;"></div>
                            </div>
                        </div>

                        <div class="card" style="border-left:3px solid #4ade80;">
                            <div class="card-label" style="color:#4ade80;">Objectif</div>
                            <div class="editable" contenteditable="true" data-field="context.desiredSituation" data-placeholder="Que doit permettre le système cible ?"></div>
                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
                                <strong>Critères :</strong>
                                <div class="editable" contenteditable="true" data-field="context.acceptanceCriteria" data-placeholder="Critères de succès" style="display:inline;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION: Parties prenantes -->
                <div class="section" id="cadrage-stakeholders" style="display:none;">
                    <h2 class="section-title">Parties prenantes</h2>
                    <p class="section-subtitle">Toutes les personnes concernées par ce projet et leurs besoins.</p>

                    <div class="stakeholder-grid" id="stakeholderGrid">
                        <!-- Populated dynamically -->
                    </div>

                    <button class="add-btn" onclick="toggleForm('addStakeholderForm')">+ Ajouter un profil utilisateur</button>

                    <div class="inline-form" id="addStakeholderForm">
                        <div class="inline-form-title">Nouveau profil utilisateur</div>
                        <div class="form-group">
                            <label class="form-label">Titre du profil (exemple : Responsable de production)</label>
                            <input type="text" class="form-input" id="sh-role" placeholder="Titre ou description du profil">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Fonction dans l'entreprise</label>
                            <input type="text" class="form-input" id="sh-function" placeholder="Ce qu'il fait dans l'organisation">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Tâches principales (une par ligne)</label>
                            <textarea class="form-textarea" id="sh-tasks" placeholder="Tâche 1&#10;Tâche 2&#10;Tâche 3"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Fréquence d'utilisation</label>
                                <select class="form-select" id="sh-frequency">
                                    <option value="daily">Quotidienne</option>
                                    <option value="weekly">Hebdomadaire</option>
                                    <option value="monthly">Mensuelle</option>
                                    <option value="occasional">Occasionnelle</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Niveau d'accès</label>
                                <select class="form-select" id="sh-access">
                                    <option value="admin">Administration complète</option>
                                    <option value="manager">Supervision et validation</option>
                                    <option value="contributor">Saisie et modification</option>
                                    <option value="viewer">Consultation seule</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Frustrations actuelles</label>
                            <textarea class="form-textarea" id="sh-frustrations" placeholder="Quelles sont les 2-3 plus grandes frustrations de ce profil avec la façon de travailler actuelle ?"></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="btn" onclick="toggleForm('addStakeholderForm')">Annuler</button>
                            <button class="btn btn-primary" onclick="addStakeholder()">Ajouter ce profil</button>
                        </div>
                    </div>
                </div>

                <!-- SECTION: Périmètre fonctionnel -->
                <div class="section" id="cadrage-scope" style="display:none;">
                    <h2 class="section-title">Périmètre fonctionnel</h2>
                    <p class="section-subtitle">Ce que le système doit faire et ne pas faire.</p>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">
                        <span style="color: #60a5fa;">&#9632;</span> Dans le périmètre
                    </h3>
                    <div id="scopeInScope" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addScopeForm-inscope')">+ Ajouter une fonctionnalité</button>
                    <div class="inline-form" id="addScopeForm-inscope">
                        <div class="form-group"><label class="form-label">Nom de la fonctionnalité</label><input type="text" class="form-input" id="scope-name-inscope" placeholder="Ex: Gestion des commandes"></div>
                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-inscope" placeholder="Courte description"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-inscope')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('inscope')">Ajouter</button></div>
                    </div>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
                        <span style="color: #94a3b8;">&#9632;</span> Hors périmètre
                    </h3>
                    <div id="scopeOutOfScope" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addScopeForm-outofscope')">+ Ajouter une exclusion</button>
                    <div class="inline-form" id="addScopeForm-outofscope">
                        <div class="form-group"><label class="form-label">Élément hors périmètre</label><input type="text" class="form-input" id="scope-name-outofscope" placeholder="Ex: Gestion de la paie"></div>
                        <div class="form-group"><label class="form-label">Raison (optionnel)</label><input type="text" class="form-input" id="scope-desc-outofscope" placeholder="Pourquoi hors périmètre"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-outofscope')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('outofscope')">Ajouter</button></div>
                    </div>
                </div>

                <!-- SECTION: Critères de réussite -->
                <div class="section" id="cadrage-success" style="display:none;">
                    <h2 class="section-title">Critères de réussite</h2>
                    <p class="section-subtitle">Comment mesurer objectivement que le projet est un succès.</p>

                    <div class="card">
                        <div class="card-label">Définition du succès</div>
                        <div class="editable" contenteditable="true" data-field="success.definition" data-placeholder="Comment saurez-vous que le projet est un succès ? Quel changement concret observerez-vous ?"></div>
                    </div>

                    <div class="card" data-vibe-hide>
                        <div class="card-label">Objectifs mesurables</div>
                        <div class="editable" contenteditable="true" data-field="success.metrics" data-placeholder="Quels chiffres présenteriez-vous à votre direction pour prouver le succès ? (temps, erreurs, satisfaction...)"></div>
                    </div>

                    <div class="card" data-vibe-hide>
                        <div class="card-label">Délai d'évaluation</div>
                        <div class="editable" contenteditable="true" data-field="success.timeline" data-placeholder="Au bout de combien de temps pourrez-vous juger si ça fonctionne ? 1 semaine ? 1 mois ? 3 mois ?"></div>
                    </div>

                    <div class="card" data-vibe-hide>
                        <div class="card-label">Conditions minimales de mise en service</div>
                        <div class="editable" contenteditable="true" data-field="success.minimumConditions" data-placeholder="Quelles conditions minimales pour mettre le système en service ? (fonctionnalités présentes, données migrées, formation faite...)"></div>
                    </div>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 2rem 0 0.75rem;">Critères d'acceptation</h3>
                    <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Critères concrets et mesurables pour valider le succès du projet.</p>
                    <div id="criteriaList" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addCriterionForm')">+ Ajouter un critère d'acceptation</button>
                    <div class="inline-form" id="addCriterionForm">
                        <div class="form-group"><label class="form-label">Critère (mesurable)</label><input type="text" class="form-input" id="criterion-text" placeholder="Ex: 80% des employés saisissent leurs heures chaque semaine"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addCriterionForm')">Annuler</button><button class="btn btn-primary" onclick="addCriterion()">Ajouter</button></div>
                    </div>
                </div>

                <!-- ================================================================
                     PHASE 2 : DECOMPOSITION
                     ================================================================ -->

                <!-- SECTION: Domaines fonctionnels -->
                <div class="section" id="decomp-modules" style="display:none;">
                    <h2 class="section-title">Domaines fonctionnels</h2>
                    <p class="section-subtitle">Identifiez les grands domaines de votre application. Chaque domaine regroupe des fonctionnalités cohérentes et indépendantes.</p>

                    <div class="module-grid" id="moduleGrid">
                        <!-- Populated dynamically -->
                    </div>

                    <button class="add-btn" onclick="toggleForm('addModuleForm')" style="margin-top:1rem;">+ Ajouter un domaine fonctionnel</button>

                    <div class="inline-form" id="addModuleForm">
                        <div class="inline-form-title">Nouveau domaine fonctionnel</div>
                        <div class="form-group">
                            <label class="form-label">Nom du domaine (exemple : Gestion des commandes)</label>
                            <input type="text" class="form-input" id="mod-name" placeholder="Nom clair et explicite">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Description en une ou deux phrases</label>
                            <textarea class="form-textarea" id="mod-desc" placeholder="À quoi sert ce domaine ? Quel problème résout-il ?"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Type de domaine</label>
                                <select class="form-select" id="mod-type">
                                    <option value="data-centric">Gestion de données (listes, fiches, formulaires)</option>
                                    <option value="workflow">Processus métier (étapes, validations, approbations)</option>
                                    <option value="reporting">Tableaux de bord et rapports</option>
                                    <option value="integration">Intégration avec des systèmes externes</option>
                                    <option value="full-module">Domaine complet (données + processus + rapports)</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Principales données gérées (une par ligne)</label>
                            <textarea class="form-textarea" id="mod-entities" placeholder="Commande&#10;Ligne de commande&#10;Facture"></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="btn" onclick="toggleForm('addModuleForm')">Annuler</button>
                            <button class="btn btn-primary" onclick="addModule()">Ajouter ce domaine</button>
                        </div>
                    </div>
                </div>

                <!-- SECTION: Dépendances -->
                <div class="section" id="decomp-dependencies" style="display:none;">
                    <h2 class="section-title">Dépendances entre domaines</h2>
                    <p class="section-subtitle">Indiquez quels domaines dépendent d'autres domaines. Par exemple, les Commandes dépendent des Clients et des Produits.</p>

                    <div id="depGraphContainer">
                        <div class="dep-graph" id="depGraph">
                            <p style="color:var(--text-muted);text-align:center;padding:2rem;">Ajoutez des domaines fonctionnels pour visualiser les dépendances.</p>
                        </div>
                    </div>

                    <div style="margin-top:1.5rem;">
                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ajouter une dépendance</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Ce domaine...</label>
                                <select class="form-select" id="dep-from"></select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">...dépend de</label>
                                <select class="form-select" id="dep-to"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Nature de la dépendance</label>
                            <input type="text" class="form-input" id="dep-desc" placeholder="Exemple : La commande référence un client existant">
                        </div>
                        <button class="btn btn-primary" onclick="addDependency()" style="margin-top:0.5rem;">Ajouter cette dépendance</button>
                    </div>

                    <div id="depList" style="margin-top:1.5rem;"></div>

                    <div style="margin-top:2rem;">
                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ordre de traitement proposé</h3>
                        <p class="section-subtitle">Les domaines sont traités dans l'ordre de leurs dépendances : les fondations d'abord, puis les domaines qui en dépendent.</p>
                        <div id="processingOrder" class="process-flow"></div>
                    </div>
                </div>

                <!-- ================================================================
                     PHASE 3 : SPECIFICATION PAR MODULE
                     ================================================================ -->

                <!-- Container dynamique pour les specs de chaque module -->
                <div id="moduleSpecContainer">
                    <!-- Generated dynamically by renderModuleSpec() -->
                </div>

                <!-- ================================================================
                     PHASE 4 : CONSOLIDATION
                     ================================================================ -->

                <!-- SECTION: Modèle de données -->
                <div class="section" id="consol-datamodel" style="display:none;">
                    <h2 class="section-title">Modèle de données</h2>
                    <p class="section-subtitle">Vue d'ensemble de toutes les entités métier, leurs attributs et leurs relations entre domaines.</p>
                    <div id="dataModelContainer">
                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Le modèle de données sera généré à partir des spécifications de chaque domaine.</p>
                    </div>
                </div>

                <!-- SECTION: Interactions cross-module -->
                <div class="section" id="consol-interactions" style="display:none;">
                    <h2 class="section-title">Interactions entre domaines</h2>
                    <p class="section-subtitle">Vue d'ensemble de la façon dont les domaines communiquent et partagent des données.</p>
                    <div id="consolInteractions">
                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Les interactions seront calculées automatiquement à partir des dépendances et des données partagées entre domaines.</p>
                    </div>
                </div>

                <!-- SECTION: Cohérence des accès -->
                <div class="section" id="consol-permissions" style="display:none;">
                    <h2 class="section-title">Cohérence des droits d'accès</h2>
                    <p class="section-subtitle">Vérification que les profils utilisateurs ont des droits cohérents dans tous les domaines.</p>
                    <div id="consolPermissions">
                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">La cohérence sera vérifiée quand les permissions de chaque domaine seront définies.</p>
                    </div>
                </div>

                <!-- SECTION: Parcours bout en bout -->
                <div class="section" id="consol-flows" style="display:none;">
                    <h2 class="section-title">Parcours bout en bout</h2>
                    <p class="section-subtitle">Les processus métier qui traversent plusieurs domaines, de bout en bout.</p>

                    <div id="e2eFlowsList"></div>

                    <button class="add-btn" onclick="toggleForm('addFlowForm')">+ Ajouter un parcours</button>

                    <div class="inline-form" id="addFlowForm">
                        <div class="inline-form-title">Nouveau parcours bout en bout</div>
                        <div class="form-group">
                            <label class="form-label">Nom du parcours (exemple : De la commande à la facture)</label>
                            <input type="text" class="form-input" id="flow-name" placeholder="Nom descriptif du parcours">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Étapes du parcours (une par ligne : Domaine - Action)</label>
                            <textarea class="form-textarea" id="flow-steps" placeholder="Clients - Le client existe dans le système&#10;Commandes - Créer la commande&#10;Commandes - Valider la commande&#10;Factures - Générer la facture"></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Qui intervient dans ce parcours ?</label>
                            <input type="text" class="form-input" id="flow-actors" placeholder="Exemple : Contributeur (création), Responsable (validation)">
                        </div>
                        <div class="form-actions">
                            <button class="btn" onclick="toggleForm('addFlowForm')">Annuler</button>
                            <button class="btn btn-primary" onclick="addE2EFlow()">Ajouter ce parcours</button>
                        </div>
                    </div>
                </div>

                <!-- ================================================================
                     PHASE 5 : SYNTHESE
                     ================================================================ -->

                <div class="section" id="handoff-summary" style="display:none;">
                    <h2 class="section-title">Synthèse de l'analyse</h2>
                    <p class="section-subtitle">Vue d'ensemble de toute l'analyse métier, prête pour le développement.</p>

                    <div class="card" style="margin-bottom:1.5rem;" id="progressIndicator">
                        <!-- Populated by renderProgressIndicator() -->
                    </div>

                    <div class="stat-grid" id="handoffStats">
                        <!-- Populated dynamically -->
                    </div>

                    <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Domaines par ordre de traitement</h3>
                    <div id="handoffModuleList"></div>

                    <h3 style="color:var(--text-bright);font-size:1rem;margin:1.5rem 0 0.75rem;">Couverture du besoin initial</h3>
                    <div class="card">
                        <div class="card-label">Matrice de couverture</div>
                        <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem;">Chaque besoin du cadrage est couvert par au moins un domaine et un cas d'utilisation.</p>
                        <div id="coverageMatrix"></div>
                    </div>

                    <div style="margin-top:2rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;text-align:center;">
                        <p style="color:var(--text-bright);font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;">Analyse prête pour l'extraction</p>
                        <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Exportez le fichier JSON pour lancer la génération automatique du système.</p>
                        <button class="btn btn-primary" onclick="exportJSON()" style="font-size:0.9rem;padding:0.6rem 1.5rem;">Exporter l'analyse complète en JSON</button>
                    </div>
                </div>

            </main>

            <!-- ============================================
                 REVIEW PANEL (right sidebar)
                 ============================================ -->
            <aside class="review-panel" id="reviewPanel" role="complementary" aria-label="Panneau de review">
                <div class="review-panel-header">
                    <span class="review-panel-title">Review</span>
                    <button class="review-panel-close" onclick="toggleReviewPanel()" title="Fermer" aria-label="Fermer le panneau de review">&times;</button>
                </div>
                <div class="review-filters">
                    <button class="review-filter-btn active" onclick="filterReviewComments('all')" data-filter="all">Tous</button>
                    <button class="review-filter-btn" onclick="filterReviewComments('to-review')" data-filter="to-review">À revoir</button>
                    <button class="review-filter-btn" onclick="filterReviewComments('validated')" data-filter="validated">Validés</button>
                </div>
                <div class="review-comments" id="reviewCommentsList">
                    <div class="review-empty">Aucun commentaire pour le moment.</div>
                </div>
                <div class="review-stats" id="reviewStats">
                    <div class="review-stat">
                        <div class="review-stat-value" id="reviewStatTotal">0</div>
                        <div class="review-stat-label">Total</div>
                    </div>
                    <div class="review-stat">
                        <div class="review-stat-value" id="reviewStatToReview">0</div>
                        <div class="review-stat-label">À revoir</div>
                    </div>
                    <div class="review-stat">
                        <div class="review-stat-value" id="reviewStatValidated">0</div>
                        <div class="review-stat-label">Validés</div>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <!-- Notification -->
    <div class="notification notification-success" id="notification"></div>

    <script>
<!-- JS_PLACEHOLDER -->
    </script>
</body>
</html>
