// === Module 1 - Lessons 1.3 (Eisenhower), 1.4 (Orgs), 1.5 (Glossary) ===

const QUADRANTS = {
  q1: { label: "Q1 · Fă acum", desc: "Urgent + Important", color: "red", advice: "Crize, deadline-uri imediate, probleme critice. Țintește să reduci timpul aici prin Q2." },
  q2: { label: "Q2 · Planifică", desc: "Important, NU urgent", color: "indigo", advice: "Aici trăiește un PM bun. Planificare strategică, învățare, prevenție riscuri. Investește timp aici." },
  q3: { label: "Q3 · Delegă", desc: "Urgent, NU important", color: "coral", advice: "Întreruperi, multe email-uri, ședințe ne-esențiale. Deleagă sau filtrează." },
  q4: { label: "Q4 · Elimină", desc: "Nici urgent, nici important", color: "gray", advice: "Distrageri, scroll fără scop, întâlniri inutile. Spune NU." }
};

function EisenhowerSection({ state, update, go }) {
  const tasks = state.m1.eisenhowerTasks || [];
  const [draggingId, setDraggingId] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(null);
  const [newTask, setNewTask] = React.useState("");

  const setQuadrant = (id, quadrant) => {
    update(s => ({ ...s, m1: { ...s.m1, eisenhowerTasks: s.m1.eisenhowerTasks.map(t => t.id === id ? { ...t, quadrant } : t) }}));
  };
  const addTask = () => {
    if (!newTask.trim()) return;
    update(s => ({ ...s, m1: { ...s.m1, eisenhowerTasks: [...s.m1.eisenhowerTasks, { id: Date.now(), text: newTask.trim(), quadrant: null }] }}));
    setNewTask("");
  };
  const removeTask = (id) => {
    update(s => ({ ...s, m1: { ...s.m1, eisenhowerTasks: s.m1.eisenhowerTasks.filter(t => t.id !== id) }}));
  };
  const reset = () => {
    update(s => ({ ...s, m1: { ...s.m1, eisenhowerTasks: s.m1.eisenhowerTasks.map(t => ({ ...t, quadrant: null })) }}));
  };

  const unassigned = tasks.filter(t => !t.quadrant);
  const placed = tasks.filter(t => t.quadrant);
  const byQuadrant = {
    q1: tasks.filter(t => t.quadrant === "q1"),
    q2: tasks.filter(t => t.quadrant === "q2"),
    q3: tasks.filter(t => t.quadrant === "q3"),
    q4: tasks.filter(t => t.quadrant === "q4")
  };

  const onDragStart = (id) => (e) => {
    setDraggingId(id);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", String(id));
  };
  const onDrop = (quadrant) => (e) => {
    e.preventDefault();
    const id = +(e.dataTransfer.getData("text/plain") || draggingId);
    if (id) setQuadrant(id, quadrant);
    setDraggingId(null);
    setDragOver(null);
  };
  const onDragOver = (q) => (e) => {
    e.preventDefault();
    setDragOver(q);
  };

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Lecția 1.3 · Modul 1</div>
        <h1 className="section-title">Matricea Eisenhower</h1>
        <p className="section-lede">
          Trage fiecare sarcină în cadranul corespunzător. Două axe: <strong>urgent</strong> (în partea de sus) și <strong>important</strong> (în partea stângă). Apoi aplică strategia dictată de cadran.
        </p>
        <div className="section-meta">
          <span><Pill kind="info">Drag & drop</Pill></span>
          <span className="dot"></span>
          <span>{placed.length} / {tasks.length} sarcini plasate</span>
        </div>
      </div>

      <div className="eis-wrap">
        <div className="eis-pool">
          <h4 style={{margin: "0 0 10px", fontFamily: "var(--display)", fontSize: 15, fontWeight: 600}}>Sarcini de clasificat <Pill>{unassigned.length}</Pill></h4>
          <div className="eis-pool-list">
            {unassigned.length === 0 && <div style={{color: "var(--ink-3)", fontSize: 12, fontStyle: "italic"}}>Toate sarcinile sunt plasate.</div>}
            {unassigned.map(t => (
              <div key={t.id} className="eis-task" draggable onDragStart={onDragStart(t.id)}>
                <span className="eis-grip">⋮⋮</span>
                <span>{t.text}</span>
                <button onClick={() => removeTask(t.id)} className="eis-remove">×</button>
              </div>
            ))}
          </div>
          <div className="eis-add">
            <input value={newTask} onChange={e => setNewTask(e.target.value)} placeholder="Adaugă o sarcină proprie..."
              onKeyDown={e => { if (e.key === "Enter") addTask(); }} />
            <button className="btn small" onClick={addTask}>+</button>
          </div>
          <button className="btn ghost small" onClick={reset} style={{marginTop: 10, width: "100%"}}>↻ Resetează plasarea</button>
        </div>

        <div className="eis-matrix">
          <div className="eis-axis-x">URGENT →</div>
          <div className="eis-axis-y">IMPORTANT →</div>
          <div className="eis-grid">
            {["q1","q2","q3","q4"].map(q => (
              <div key={q}
                className={`eis-quadrant eis-${q} ${dragOver === q ? "drag-over" : ""}`}
                onDrop={onDrop(q)}
                onDragOver={onDragOver(q)}
                onDragLeave={() => setDragOver(null)}>
                <div className="eis-q-head">
                  <div className="eis-q-label">{QUADRANTS[q].label}</div>
                  <div className="eis-q-desc">{QUADRANTS[q].desc}</div>
                </div>
                <div className="eis-q-tasks">
                  {byQuadrant[q].map(t => (
                    <div key={t.id} className="eis-task placed" draggable onDragStart={onDragStart(t.id)}>
                      <span>{t.text}</span>
                      <button onClick={() => setQuadrant(t.id, null)} className="eis-remove" title="Înapoi la pool">↩</button>
                    </div>
                  ))}
                </div>
                <div className="eis-q-advice">{QUADRANTS[q].advice}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <Card title="Cum gândește un PM pe Eisenhower" sub="STRATEGIE">
        <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14}}>
          {Object.entries(QUADRANTS).map(([k, q]) => (
            <div key={k} style={{padding: 14, background: "var(--bg-elevated)", borderRadius: 10, border: "1px solid var(--line)"}}>
              <div className={`eis-mini-tag eis-${k}`}>{q.label}</div>
              <p style={{margin: "8px 0 0", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5}}>{q.advice}</p>
            </div>
          ))}
        </div>
      </Card>

      <div className="foot-actions">
        <button className="btn ghost" onClick={() => go("m1-pert")}>← PERT</button>
        <button className="btn primary" onClick={() => { markM1LessonDone("m1-eisenhower", update); go("m1-orgs"); }}>Continuă: Organigrame →</button>
      </div>
    </div>
  );
}

function OrgsSection({ state, update, go }) {
  return (
    <div>
      <div className="main-head">
        <div className="crumb">Lecția 1.4 · Modul 1</div>
        <h1 className="section-title">Organigrame · Piramidală vs. Matriceală</h1>
        <p className="section-lede">
          Două moduri fundamentale de a organiza o echipă pe proiect. Care e mai bună? <em>Depinde</em>. Aici vezi avantajele, dezavantajele și când se folosește fiecare.
        </p>
      </div>

      <div className="orgs-compare">
        {/* Piramidală */}
        <div className="org-block">
          <div className="org-block-head">
            <div className="org-block-num">A</div>
            <div>
              <h3 className="org-block-title">Piramidală (funcțională)</h3>
              <div className="org-block-sub">Comandă & control · linie clară</div>
            </div>
          </div>
          <div className="org-diagram pyramid">
            <div className="org-level org-level-1">
              <div className="org-box ceo">Director General</div>
            </div>
            <div className="org-level org-level-2">
              <div className="org-box manager">Manager Dept. A</div>
              <div className="org-box manager">Manager Dept. B</div>
              <div className="org-box manager">Manager Dept. C</div>
            </div>
            <div className="org-level org-level-3">
              <div className="org-box ic">Angajat</div>
              <div className="org-box ic">Angajat</div>
              <div className="org-box ic">Angajat</div>
              <div className="org-box ic">Angajat</div>
              <div className="org-box ic">Angajat</div>
              <div className="org-box ic">Angajat</div>
            </div>
          </div>
          <div className="org-pros-cons">
            <div className="org-pros">
              <div className="org-pc-label good">✓ Avantaje</div>
              <ul>
                <li>Autoritate clară — fiecare are un singur șef</li>
                <li>Specializare profundă în departamente</li>
                <li>Cariere predictibile pentru angajați</li>
                <li>Decizii rapide pe linia ierarhică</li>
              </ul>
            </div>
            <div className="org-cons">
              <div className="org-pc-label bad">✗ Dezavantaje</div>
              <ul>
                <li>Silos între departamente — colaborare slabă</li>
                <li>PM-ul are autoritate redusă pe resurse externe</li>
                <li>Proiectele transversale suferă</li>
                <li>Schimbarea e lentă</li>
              </ul>
            </div>
          </div>
          <div className="org-when">
            <strong>Când:</strong> producție stabilă, operațiuni repetitive, organizații mari cu specialități clare (banci, fabrici).
          </div>
        </div>

        {/* Matriceală */}
        <div className="org-block">
          <div className="org-block-head">
            <div className="org-block-num accent">B</div>
            <div>
              <h3 className="org-block-title">Matriceală</h3>
              <div className="org-block-sub">Două axe · proiect × funcție</div>
            </div>
          </div>
          <div className="org-diagram matrix">
            <div className="matrix-grid">
              <div className="matrix-header"></div>
              <div className="matrix-header">Dept. A</div>
              <div className="matrix-header">Dept. B</div>
              <div className="matrix-header">Dept. C</div>
              <div className="matrix-row-label">Proiect 1</div>
              <div className="matrix-cell"><div className="matrix-dot p1"></div></div>
              <div className="matrix-cell"><div className="matrix-dot p1"></div></div>
              <div className="matrix-cell"></div>
              <div className="matrix-row-label">Proiect 2</div>
              <div className="matrix-cell"><div className="matrix-dot p2"></div></div>
              <div className="matrix-cell"></div>
              <div className="matrix-cell"><div className="matrix-dot p2"></div></div>
              <div className="matrix-row-label">Proiect 3</div>
              <div className="matrix-cell"></div>
              <div className="matrix-cell"><div className="matrix-dot p3"></div></div>
              <div className="matrix-cell"><div className="matrix-dot p3"></div></div>
            </div>
            <div className="matrix-legend">Fiecare angajat are <strong>doi șefi</strong>: managerul de departament + project manager.</div>
          </div>
          <div className="org-pros-cons">
            <div className="org-pros">
              <div className="org-pc-label good">✓ Avantaje</div>
              <ul>
                <li>Resurse partajate — eficiență economică</li>
                <li>Colaborare cross-funcțională naturală</li>
                <li>Flexibilitate mare la priorități noi</li>
                <li>PM-ul are autoritate reală pe proiect</li>
              </ul>
            </div>
            <div className="org-cons">
              <div className="org-pc-label bad">✗ Dezavantaje</div>
              <ul>
                <li>Conflicte de autoritate (cei doi șefi)</li>
                <li>Suprasolicitarea angajaților</li>
                <li>Necesită maturitate organizațională</li>
                <li>Decizii mai lente prin compromis</li>
              </ul>
            </div>
          </div>
          <div className="org-when">
            <strong>Când:</strong> companii cu multe proiecte simultane, IT, consultanță, R&D, organizații care concurează pe inovație.
          </div>
        </div>
      </div>

      <Card title="Subtipuri de matriceală" sub="NUANȚE">
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14}}>
          <div className="org-subtype">
            <div className="org-subtype-tag">Slabă</div>
            <p>PM-ul are rol de <strong>coordonator</strong>. Managerii funcționali păstrează autoritatea pe resurse.</p>
          </div>
          <div className="org-subtype highlight">
            <div className="org-subtype-tag">Echilibrată</div>
            <p>PM-ul împarte autoritatea cu managerii funcționali. <strong>Cea mai populară</strong>, dar și cea mai dificilă.</p>
          </div>
          <div className="org-subtype">
            <div className="org-subtype-tag">Puternică</div>
            <p>PM-ul are <strong>autoritate principală</strong> pe resurse și buget. Aproape ca o organizație orientată pe proiect.</p>
          </div>
        </div>
      </Card>

      <div className="foot-actions">
        <button className="btn ghost" onClick={() => go("m1-eisenhower")}>← Eisenhower</button>
        <button className="btn primary" onClick={() => { markM1LessonDone("m1-orgs", update); go("m1-glossary"); }}>Continuă: Glosar →</button>
      </div>
    </div>
  );
}

const GLOSSARY = [
  { term: "Baseline", cat: "Planificare", def: "Versiunea aprobată a planului inițial. Comparativul împotriva căruia măsori progresul real.", ex: "Bugetul aprobat la kickoff = baseline financiar. Orice depășire se calculează față de el." },
  { term: "Crashing", cat: "Programare", def: "Reducerea duratei proiectului prin alocarea de resurse suplimentare (oameni, ore suplimentare). Costă mai mult.", ex: "Adaugi 2 dezvoltatori la o activitate critică ca să o termini cu 5 zile mai devreme — dar plătești 30% mai mult." },
  { term: "Fast-tracking", cat: "Programare", def: "Reducerea duratei prin paralelizarea activităților care în mod normal ar fi fost secvențiale. Crește riscul.", ex: "Începi implementarea backend înainte ca designul final să fie aprobat — riști rework dacă designul se schimbă." },
  { term: "Float (slack)", cat: "Programare", def: "Câte zile poate fi întârziată o activitate fără să afecteze data de finalizare a proiectului.", ex: "Activitate cu float = 3 zile. Poți să o începi cu max. 3 zile mai târziu fără probleme." },
  { term: "Drum critic", cat: "Programare", def: "Lanțul cel mai lung de activități dependente. Orice întârziere aici întârzie tot proiectul.", ex: "În 80% din proiecte, drumul critic conține 20% din activități — pe acelea le monitorizezi obsesiv." },
  { term: "Earned Value (EV)", cat: "Control", def: "Valoarea muncii efectiv realizate, măsurată în bani. Ți se spune cât din buget e legitim cheltuit.", ex: "Ai cheltuit 60.000 RON, dar EV = 50.000 RON → ai depășit cu 10.000 RON pentru cât ai produs." },
  { term: "CPI · Cost Performance Index", cat: "Control", def: "EV / AC (Actual Cost). >1 = sub buget, <1 = peste buget.", ex: "CPI = 0.85 înseamnă că obții doar 85 bani de valoare pentru fiecare leu cheltuit." },
  { term: "SPI · Schedule Performance Index", cat: "Control", def: "EV / PV (Planned Value). >1 = înainte de program, <1 = în întârziere.", ex: "SPI = 0.7 → ai realizat doar 70% din munca planificată pentru perioada curentă." },
  { term: "Scope creep", cat: "Risc", def: "Creșterea necontrolată a scope-ului proiectului fără ajustarea de timp/buget/resurse.", ex: "Clientul cere „doar o mică funcție în plus” de 5 ori — proiectul depășește cu 40%." },
  { term: "Gold plating", cat: "Risc", def: "Echipa adaugă funcționalități nesolicitate, crezând că „mai mult e mai bine”. Periculos.", ex: "Designerul adaugă 3 animații care nu erau cerute — întârzie livrarea cu o săptămână." },
  { term: "RACI", cat: "Roluri", def: "Matrice de roluri: Responsible (face), Accountable (răspunde), Consulted (consultat), Informed (informat).", ex: "PM = Accountable pe livrarea proiectului. Echipa = Responsible pe execuție. Sponsorul = Informed." },
  { term: "Sponsor", cat: "Roluri", def: "Persoana cu autoritate decizională maximă pe proiect. Asigură finanțarea și deblochează problemele politice.", ex: "Sponsorul aprobă buget suplimentar și mediază conflicte între departamente." },
  { term: "Charter (carta proiectului)", cat: "Documentație", def: "Documentul de inițiere. Definește scopul, sponsorul, autoritatea PM-ului, constrângerile.", ex: "Fără charter semnat = proiectul nu există oficial. Primul document obligatoriu." },
  { term: "Lessons learned", cat: "Închidere", def: "Documentul de la final care captează ce a mers bine, ce nu, și ce să schimbi data viitoare.", ex: "După proiect: „Estimarea inițială a fost cu 30% sub real. Pe viitor adăugăm 30% buffer pe estimări noi.”" },
  { term: "Kick-off", cat: "Inițiere", def: "Ședința oficială de start a proiectului. Toți stakeholderii prezenți. Aliniere pe scope, obiective, roluri.", ex: "Kick-off bun = jumătate de proiect câștigat. Investește 4 ore aici, economisești săptămâni." },
  { term: "Risk register", cat: "Risc", def: "Documentul cu toate riscurile identificate: probabilitate, impact, strategie de răspuns, proprietar.", ex: "Risc: „Plecare key developer”. Probabilitate: 3/5. Impact: 5/5. Strategie: documentare + backup." }
];

function GlossarySection({ state, update, go }) {
  const [query, setQuery] = React.useState("");
  const [cat, setCat] = React.useState("all");

  const categories = ["all", ...Array.from(new Set(GLOSSARY.map(g => g.cat)))];
  const filtered = GLOSSARY.filter(g => {
    const matchQ = !query || g.term.toLowerCase().includes(query.toLowerCase()) || g.def.toLowerCase().includes(query.toLowerCase());
    const matchC = cat === "all" || g.cat === cat;
    return matchQ && matchC;
  });

  const markSeen = (term) => {
    update(s => {
      if ((s.m1.glossarySeen || []).includes(term)) return s;
      return { ...s, m1: { ...s.m1, glossarySeen: [...(s.m1.glossarySeen || []), term] }};
    });
  };

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Lecția 1.5 · Modul 1</div>
        <h1 className="section-title">Glosar de termeni PM</h1>
        <p className="section-lede">
          {GLOSSARY.length} termeni esențiali pe care îi auzi în orice ședință. Caută, filtrează după categorie, citește exemplul.
        </p>
      </div>

      <div className="glossary-controls">
        <input className="txt glossary-search" placeholder={`Caută în ${GLOSSARY.length} termeni... (ex. "drum critic", "scope")`}
          value={query} onChange={e => setQuery(e.target.value)} />
        <div className="cat-pills">
          {categories.map(c => (
            <button key={c} className={`cat-pill ${cat === c ? "active" : ""}`} onClick={() => setCat(c)}>
              {c === "all" ? `Toate (${GLOSSARY.length})` : `${c} (${GLOSSARY.filter(g => g.cat === c).length})`}
            </button>
          ))}
        </div>
      </div>

      <div className="glossary-list">
        {filtered.length === 0 && (
          <div style={{padding: 40, textAlign: "center", color: "var(--ink-3)"}}>
            Niciun termen găsit pentru „{query}".
          </div>
        )}
        {filtered.map(g => (
          <details key={g.term} className="glossary-item" onToggle={(e) => { if (e.target.open) markSeen(g.term); }}>
            <summary>
              <div className="g-head">
                <span className="g-term">{g.term}</span>
                <span className="g-cat">{g.cat}</span>
              </div>
              <div className="g-def">{g.def}</div>
            </summary>
            <div className="g-example">
              <span className="g-example-label">Exemplu</span>
              <span>{g.ex}</span>
            </div>
          </details>
        ))}
      </div>

      <div className="foot-actions">
        <button className="btn ghost" onClick={() => go("m1-orgs")}>← Organigrame</button>
        <button className="btn primary" onClick={() => { markM1LessonDone("m1-glossary", update); go("m1-quiz"); }}>Continuă: Quiz →</button>
      </div>
    </div>
  );
}

Object.assign(window, { EisenhowerSection, OrgsSection, GlossarySection, GLOSSARY });