// gp-help.jsx — base de connaissances centralisée (aide / tutoriels / doc)
// Bouton « Aide » par catégorie d'estimation → tiroir de ressources :
// doc technique, guides de soumission, procédures de calcul, exemples,
// vidéos de formation, rappels & bonnes pratiques.
// ───────────────────────────────────────────────────────────────
const { Icon: HIcon, moduleById: hModById } = window;

// ── Contenu : par module/catégorie, sinon gabarit générique ────
// Chaque sujet = { docs[], guides[], calc[], examples[], videos[], tips[] }
const KB = {
  toiture: {
    intro: "Tout pour estimer une toiture : composants, méthode de comptage des pans et pénétrations, et façon de soumissionner chaque poste.",
    videos: [
      { t: 'Anatomie d’une toiture isolée', dur: '6:12', desc: 'Pontage, pare-air, isolation, ventilation, membrane — chaque couche expliquée.', tag: 'Composants' },
      { t: 'Compter les pans et les pénétrations', dur: '8:40', desc: 'Méthode de relevé pan par pan, puits de lumière, évents et cheminées.', tag: 'Comptage' },
      { t: 'Soumissionner la toiture', dur: '5:28', desc: 'Du relevé au bordereau : sacs de cellulose, déflecteurs, surplus.', tag: 'Soumission' },
    ],
    docs: [
      { t: 'Fiche technique — Cellulose soufflée R-60', meta: 'PDF · 4 p.' },
      { t: 'Tableau des valeurs R par épaisseur', meta: 'PDF · 1 p.' },
      { t: 'Détails de ventilation de toiture', meta: 'PDF · 6 p.' },
    ],
    guides: [
      { t: 'Guide de soumission — Toiture', meta: '12 étapes' },
      { t: 'Checklist avant envoi au client', meta: '8 points' },
    ],
    calc: [
      { s: 'Mesurer la surface projetée de chaque pan (longueur × largeur au plan).' },
      { s: 'Appliquer le facteur de pente pour obtenir la surface réelle.' },
      { s: 'Soustraire les pénétrations > 1 pi² (puits de lumière, trémies).' },
      { s: 'Diviser par le rendement de la recette (ex. 1 sac / 42 pi² @ R-60).' },
      { s: 'Ajouter le surplus/pertes (typique 5–8 %).' },
    ],
    examples: [
      { t: 'Bungalow 2 pans — 1 095 pi²', desc: '26 sacs cellulose + 46 déflecteurs, surplus 6 %.' },
      { t: 'Toiture cathédrale complexe', desc: 'Comptage pan par pan avec 3 puits de lumière déduits.' },
    ],
    tips: [
      'Toujours estimer en surface réelle (avec pente), pas en surface projetée.',
      'Prévoir les déflecteurs sur tout le périmètre ventilé, pas seulement les coins.',
      'Vérifier l’accès au comble — il influence la main-d’œuvre, pas la quantité.',
    ],
  },
  murs: {
    intro: "Estimer les murs hors sol : surface nette, sections par niveau, ouvertures à retrancher et choix d’assemblage.",
    videos: [
      { t: 'Relever les murs par section', dur: '7:05', desc: 'Découper par niveau et par face, additionner les surfaces brutes.', tag: 'Comptage' },
      { t: 'Retrancher les ouvertures', dur: '4:18', desc: 'Portes, fenêtres : quand et comment les déduire correctement.', tag: 'Méthode' },
    ],
    docs: [
      { t: 'Assemblages de murs — valeurs R', meta: 'PDF · 3 p.' },
      { t: 'Fiche cellulose haute densité 4 lb/pi³', meta: 'PDF · 2 p.' },
    ],
    guides: [{ t: 'Guide de soumission — Murs hors sol', meta: '10 étapes' }],
    calc: [
      { s: 'Surface brute = Σ (longueur × hauteur) de chaque section de mur.' },
      { s: 'Surface des ouvertures = Σ (largeur × hauteur) des portes et fenêtres.' },
      { s: 'Surface nette = brute − ouvertures.' },
      { s: 'Quantité = surface nette ÷ rendement de la recette + surplus.' },
    ],
    examples: [{ t: 'Maison 2 étages — 1 850 pi² nets', desc: 'Après déduction de 34 ouvertures.' }],
    tips: [
      'Ne pas oublier les murs de garage chauffé dans la surface nette.',
      'Les petites ouvertures (< 1 pi²) se négligent généralement.',
    ],
  },
  fondation: {
    intro: "Estimer l’isolation de fondation : périmètre × hauteur, drainage et panneau semi-rigide.",
    videos: [{ t: 'Isoler une fondation', dur: '6:50', desc: 'Périmètre, hauteur enfouie, drainage et protection.', tag: 'Composants' }],
    docs: [{ t: 'Panneau semi-rigide R-14 — fiche', meta: 'PDF · 2 p.' }],
    guides: [{ t: 'Guide de soumission — Fondation', meta: '9 étapes' }],
    calc: [
      { s: 'Périmètre de fondation au plan (pi lin.).' },
      { s: 'Surface = périmètre × hauteur isolée.' },
      { s: 'Quantité de panneaux = surface ÷ rendement + surplus.' },
    ],
    examples: [{ t: 'Fondation 141 pi lin. × 8 pi', desc: '1 180 pi² isolés, drainage périmétrique inclus.' }],
    tips: ['Mesurer la hauteur réellement isolée, pas la hauteur totale du mur.'],
  },
  membranes: {
    intro: "Estimer l’étanchéité à l’air et le pare-intempéries : surface d’enveloppe + périmètre de raccords.",
    videos: [{ t: 'Étanchéité à l’air — méthode', dur: '9:15', desc: 'Surfaces continues, raccords, rubans et cartouches.', tag: 'Méthode' }],
    docs: [{ t: 'Système Pro Clima — guide pose', meta: 'PDF · 8 p.' }],
    guides: [{ t: 'Guide de soumission — Membranes', meta: '11 étapes' }],
    calc: [
      { s: 'Surface d’enveloppe étanche continue (murs + plafond).' },
      { s: 'Périmètre de raccords (planchers, ouvertures) pour rubans et cartouches.' },
      { s: 'Quantités = surface ÷ rendement membrane + raccords ÷ rendement ruban.' },
    ],
    examples: [{ t: 'Enveloppe 4 054 pi² · 412 pi lin.', desc: 'Membrane + Tescon Vana + Contega HF.' }],
    tips: ['Compter les rubans au périmètre de chaque rouleau, pas seulement les coins.'],
  },
};

// Gabarit générique paramétré par le nom du module
function kbFor(topic) {
  const mod = hModById ? hModById(topic) : null;
  const name = mod ? mod.name : (topic && topic.replace(/^cat:/, '')) || 'cet élément';
  const mat = mod && mod.mat;
  if (KB[topic]) return { name, mat, ...KB[topic] };
  return {
    name, mat,
    intro: `Méthode d’estimation pour « ${name} » : composants, relevé, calcul et soumission.`,
    videos: [
      { t: `Comprendre « ${name} »`, dur: '5:00', desc: 'Composants et terminologie du poste.', tag: 'Composants' },
      { t: 'Méthode de comptage', dur: '6:30', desc: 'Comment relever et compter correctement.', tag: 'Comptage' },
    ],
    docs: [{ t: `Fiche technique — ${mat || name}`, meta: 'PDF' }],
    guides: [{ t: `Guide de soumission — ${name}`, meta: 'Étapes' }],
    calc: [
      { s: 'Relever la grandeur pilote (surface, périmètre ou compte) au plan.' },
      { s: 'Appliquer la recette / le rendement du matériau.' },
      { s: 'Ajouter le surplus/pertes selon le contexte.' },
    ],
    examples: [{ t: 'Exemple à venir', desc: 'Des exemples pratiques seront ajoutés pour ce poste.' }],
    tips: ['Toujours lier les relevés au plan pour garder la traçabilité.'],
  };
}

// ── Bouton « Aide » réutilisable (dispatch un event global) ────
function HelpButton({ topic, label = 'Aide', compact = false }) {
  const open = () => window.dispatchEvent(new CustomEvent('gp:help', { detail: { topic } }));
  if (compact)
  return <button className="help-btn-sm" onClick={(e) => { e.stopPropagation(); open(); }} title="Aide & tutoriels"><HIcon n="help" style={{ width: 14, height: 14 }} /></button>;

  return (
    <button className="btn help-btn" onClick={open} title="Aide, tutoriels & documentation">
      <HIcon n="help" /> {label}
    </button>);

}

// ── Tiroir : base de connaissances ─────────────────────────────
const KB_SECTIONS = [
{ id: 'videos', icon: 'play', label: 'Vidéos de formation' },
{ id: 'calc', icon: 'calc', label: 'Calcul & comptage' },
{ id: 'guides', icon: 'receipt', label: 'Guides de soumission' },
{ id: 'docs', icon: 'book', label: 'Documentation technique' },
{ id: 'examples', icon: 'file', label: 'Exemples pratiques' },
{ id: 'tips', icon: 'bulb', label: 'Rappels & bonnes pratiques' }];


function KnowledgeBase() {
  const [topic, setTopic] = React.useState(null);
  const [sec, setSec] = React.useState('videos');
  React.useEffect(() => {
    const onOpen = (e) => { setTopic(e.detail.topic || '_'); setSec('videos'); };
    window.addEventListener('gp:help', onOpen);
    const onKey = (e) => { if (e.key === 'Escape') setTopic(null); };
    window.addEventListener('keydown', onKey);
    return () => { window.removeEventListener('gp:help', onOpen); window.removeEventListener('keydown', onKey); };
  }, []);
  if (topic == null) return null;
  const kb = kbFor(topic);
  const mod = hModById ? hModById(topic) : null;

  const avail = KB_SECTIONS.filter((s) => (kb[s.id] || []).length > 0);

  return (
    <div className="kb-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) setTopic(null); }}>
      <div className="kb-drawer" role="dialog" aria-label="Base de connaissances">
        <div className="kb-head">
          <div className="kb-head-l">
            <div className="kb-head-ic"><HIcon n={mod ? mod.icon : 'grad'} /></div>
            <div>
              <div className="kb-head-tt">Base de connaissances</div>
              <div className="kb-head-sub">{kb.name}{kb.mat ? ` · ${kb.mat}` : ''}</div>
            </div>
          </div>
          <button className="kb-x" onClick={() => setTopic(null)} aria-label="Fermer">✕</button>
        </div>

        <div className="kb-intro">{kb.intro}</div>

        <div className="kb-tabs">
          {avail.map((s) =>
          <button key={s.id} className={'kb-tab' + (sec === s.id ? ' on' : '')} onClick={() => setSec(s.id)}>
              <HIcon n={s.icon} style={{ width: 14, height: 14 }} /> {s.label}
              <span className="kb-tab-n">{(kb[s.id] || []).length}</span>
            </button>
          )}
        </div>

        <div className="kb-body">
          {sec === 'videos' &&
          <div className="kb-videos">
              {kb.videos.map((v, i) =>
            <button className="kb-video" key={i}>
                  <div className="kb-video-thumb">
                    <span className="kb-play"><HIcon n="play" style={{ width: 18, height: 18 }} /></span>
                    <span className="kb-video-dur">{v.dur}</span>
                    {v.tag && <span className="kb-video-tag">{v.tag}</span>}
                  </div>
                  <div className="kb-video-tx">
                    <div className="kb-video-t">{v.t}</div>
                    <div className="kb-video-d">{v.desc}</div>
                  </div>
                </button>
            )}
            </div>
          }

          {sec === 'calc' &&
          <ol className="kb-steps">
              {kb.calc.map((c, i) =>
            <li key={i}><span className="kb-step-n">{i + 1}</span><span>{c.s}</span></li>
            )}
            </ol>
          }

          {(sec === 'guides' || sec === 'docs') &&
          <div className="kb-list">
              {kb[sec].map((d, i) =>
            <button className="kb-doc" key={i}>
                  <span className="kb-doc-ic"><HIcon n={sec === 'docs' ? 'book' : 'receipt'} style={{ width: 16, height: 16 }} /></span>
                  <span className="kb-doc-tx"><span className="kb-doc-t">{d.t}</span><span className="kb-doc-m">{d.meta}</span></span>
                  <HIcon n="chev" style={{ width: 15, height: 15, opacity: .4 }} />
                </button>
            )}
            </div>
          }

          {sec === 'examples' &&
          <div className="kb-ex-grid">
              {kb.examples.map((x, i) =>
            <div className="kb-ex" key={i}>
                  <div className="kb-ex-t"><HIcon n="file" style={{ width: 14, height: 14 }} /> {x.t}</div>
                  <div className="kb-ex-d">{x.desc}</div>
                </div>
            )}
            </div>
          }

          {sec === 'tips' &&
          <div className="kb-tips">
              {kb.tips.map((t, i) =>
            <div className="kb-tip" key={i}><span className="kb-tip-ic"><HIcon n="bulb" style={{ width: 14, height: 14 }} /></span>{t}</div>
            )}
            </div>
          }
        </div>

        <div className="kb-foot">
          <span><HIcon n="grad" style={{ width: 14, height: 14 }} /> Référence continue — revenez vous former au besoin.</span>
          <button className="btn ghost"><HIcon n="globe" style={{ width: 14, height: 14 }} /> Tout le centre d’aide</button>
        </div>
      </div>
    </div>);

}

Object.assign(window, { KB, kbFor, HelpButton, KnowledgeBase });