// === Module pages: M2 overview + M1/M3/M4 placeholders ===

function M2OverviewSection({ state, update, go }) {
  const auth = (typeof useAuth === "function") ? useAuth() : { isAuthenticated: false, loading: false };

  const tools = [
    { id: "org", num: "01", title: "Date organizație", desc: "Coperta + identitatea beneficiarului.", group: "Cadru" },
    { id: "scope", num: "02", title: "Scop / Ideea de proiect", desc: "Formulează scopul în max. 50 cuvinte. Validator de lungime.", group: "Cadru" },
    { id: "needs", num: "03", title: "Analiză nevoi & SWOT", desc: "Cele 3 întrebări obligatorii + matrice SWOT cu 4 cadrane.", group: "Cadru" },
    { id: "activities", num: "04", title: "Plan activități (SMART)", desc: "Activități cu validare SMART automată per criteriu.", group: "Execuție" },
    { id: "gantt", num: "05", title: "Diagrama GANTT", desc: "12 luni, activități în cascadă, click-pe-celulă.", group: "Execuție" },
    { id: "budget", num: "06", title: "Plan financiar", desc: "Calculator buget cu validare pe procente recomandate.", group: "Execuție" },
    { id: "mgmt", num: "07", title: "Management proiect", desc: "Organigramă, comunicare, monitorizare & evaluare.", group: "Guvernanță" },
    { id: "risk", num: "08", title: "Analiză de risc", desc: "Heatmap probabilitate × impact 5×5 + registru riscuri.", group: "Guvernanță" }
  ];
  const totalDone = M2_TOOL_IDS.filter(id => sectionComplete(id, state)).length;
  const pct = Math.round((totalDone / 8) * 100);

  // ── Multi-project state ──────────────────────────────────────────────────
  const [projects, setProjects] = React.useState(state.m2?.projectsList || []);
  const [loadingProjects, setLoadingProjects] = React.useState(false);
  const [showNewProjectDialog, setShowNewProjectDialog] = React.useState(false);
  const [newTitle, setNewTitle] = React.useState("");
  const activeId = state.m2?.activeProjectId;
  const activeTitle = state.m2?.activeProjectTitle || "Proiect nesalvat";

  // Refresh project list when auth state changes
  React.useEffect(() => {
    if (!auth.isAuthenticated || !window.Storage?.listProjects) return;
    let cancelled = false;
    setLoadingProjects(true);
    window.Storage.listProjects().then(list => {
      if (cancelled) return;
      setProjects(list || []);
      update(s => ({ ...s, m2: { ...(s.m2 || {}), projectsList: list || [] }}));
      setLoadingProjects(false);
    }).catch(() => { if (!cancelled) setLoadingProjects(false); });
    return () => { cancelled = true; };
  }, [auth.isAuthenticated]);

  // ── Project actions ──────────────────────────────────────────────────────
  const saveCurrentToActive = async () => {
    if (!activeId || !window.Storage?.updateProject) return;
    await window.Storage.updateProject(activeId, {
      data: extractM2ProjectData(state)
    });
  };

  const createNewProject = async () => {
    const title = (newTitle || "").trim() || "Proiect fără titlu";
    if (auth.isAuthenticated && window.Storage?.createProject) {
      // First, save current work to its project if one is active
      await saveCurrentToActive();
      const created = await window.Storage.createProject({
        title,
        data: {} // empty — fresh start
      });
      if (created) {
        // Reset top-level fields to defaults, then switch to new project
        update(s => ({
          ...applyM2ProjectData(s, {}),  // wipes M2 fields to defaults
          m2: {
            ...(s.m2 || {}),
            activeProjectId: created.id,
            activeProjectTitle: created.title,
            projectsList: [created, ...(s.m2?.projectsList || [])]
          }
        }));
        setProjects(prev => [created, ...prev]);
      }
    } else {
      // Anonymous: just reset local fields and set title
      update(s => ({
        ...applyM2ProjectData(s, {}),
        m2: { ...(s.m2 || {}), activeProjectId: null, activeProjectTitle: title }
      }));
    }
    setShowNewProjectDialog(false);
    setNewTitle("");
    go("org"); // jump to first tool
  };

  const switchToProject = async (project) => {
    // Save current work first
    await saveCurrentToActive();
    // Load the target project
    const full = await window.Storage.loadProject(project.id);
    if (!full) return;
    update(s => ({
      ...applyM2ProjectData(s, full.data || {}),
      m2: {
        ...(s.m2 || {}),
        activeProjectId: full.id,
        activeProjectTitle: full.title
      }
    }));
  };

  const deleteProject = async (project) => {
    if (!confirm(`Ștergi definitiv proiectul "${project.title}"? Această acțiune nu poate fi anulată.`)) return;
    const ok = await window.Storage.deleteProject(project.id);
    if (!ok) return;
    setProjects(prev => prev.filter(p => p.id !== project.id));
    // If we deleted the active one, clear state
    if (activeId === project.id) {
      update(s => ({
        ...applyM2ProjectData(s, {}),
        m2: { ...(s.m2 || {}), activeProjectId: null, activeProjectTitle: "" }
      }));
    }
  };

  const duplicateProject = async (project) => {
    const copy = await window.Storage.duplicateProject(project.id);
    if (copy) setProjects(prev => [copy, ...prev]);
  };

  const renameProject = async (project) => {
    const newName = prompt("Nume nou pentru proiect:", project.title);
    if (!newName || newName.trim() === "" || newName === project.title) return;
    const updated = await window.Storage.updateProject(project.id, { title: newName.trim() });
    if (updated) {
      setProjects(prev => prev.map(p => p.id === project.id ? updated : p));
      if (activeId === project.id) {
        update(s => ({ ...s, m2: { ...(s.m2 || {}), activeProjectTitle: updated.title }}));
      }
    }
  };

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Modul 2 · Instrumente de proiect</div>
        <h1 className="section-title">Constructor de propunere de proiect</h1>
        <p className="section-lede">
          8 instrumente interconectate care îți construiesc o propunere completă: de la datele organizației până la analiza de risc. Salvare automată. Export PDF.
        </p>
        <div className="section-meta">
          {auth.isAuthenticated ? (
            <>
              <span>Proiect activ: <strong>{activeTitle}</strong></span>
              <span className="dot"></span>
              <span>Salvare automată în cloud</span>
            </>
          ) : (
            <>
              <span>📄 Document final · Times New Roman 12pt</span>
              <span className="dot"></span>
              <span>Salvare automată în browser</span>
            </>
          )}
        </div>
      </div>

      {/* Multi-project manager — only for logged-in users */}
      {auth.isAuthenticated && (
        <div className="m2-projects-panel">
          <div className="m2-projects-head">
            <div className="eyebrow">Proiectele mele {projects.length > 0 && `(${projects.length})`}</div>
            <button className="btn primary small" onClick={() => setShowNewProjectDialog(true)}>
              + Proiect nou
            </button>
          </div>

          {loadingProjects && <div className="muted" style={{padding: "8px 0"}}>Se încarcă...</div>}

          {!loadingProjects && projects.length === 0 && (
            <div className="m2-projects-empty">
              <p>Încă nu ai niciun proiect salvat. Creează unul ca să începi să lucrezi.</p>
              <button className="btn primary" onClick={() => setShowNewProjectDialog(true)}>
                Creează primul proiect →
              </button>
            </div>
          )}

          {!loadingProjects && projects.length > 0 && (
            <div className="m2-projects-list">
              {projects.map(p => {
                const isActive = activeId === p.id;
                return (
                  <div key={p.id} className={`m2-project-row ${isActive ? "active" : ""}`}>
                    <button className="m2-project-main" onClick={() => !isActive && switchToProject(p)} disabled={isActive}>
                      <div>
                        <div className="m2-project-title">
                          {p.title}
                          {isActive && <span className="m2-project-active-tag">activ</span>}
                        </div>
                        <div className="m2-project-meta">
                          Actualizat {new Date(p.updated_at).toLocaleDateString("ro-RO", { day: "numeric", month: "short" })}
                        </div>
                      </div>
                    </button>
                    <div className="m2-project-actions">
                      <button className="btn ghost small" title="Redenumește" onClick={() => renameProject(p)}>✎</button>
                      <button className="btn ghost small" title="Duplică" onClick={() => duplicateProject(p)}>⎘</button>
                      <button className="btn ghost small" title="Șterge" onClick={() => deleteProject(p)}>✕</button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* New project dialog */}
      {showNewProjectDialog && (
        <div className="auth-modal-backdrop" onClick={() => setShowNewProjectDialog(false)}>
          <div className="auth-modal" onClick={(e) => e.stopPropagation()} style={{maxWidth: 460}}>
            <button className="auth-modal-close" onClick={() => setShowNewProjectDialog(false)}>✕</button>
            <div className="auth-modal-head">
              <h2 className="auth-modal-title">Proiect nou</h2>
              <p className="auth-modal-sub">
                Dă un titlu proiectului. Îl poți schimba oricând.
              </p>
            </div>
            <form onSubmit={(e) => { e.preventDefault(); createNewProject(); }}>
              <input
                className="txt"
                type="text"
                value={newTitle}
                onChange={(e) => setNewTitle(e.target.value)}
                placeholder="Ex: Centru de formare ANC — Iași 2027"
                autoFocus
                style={{marginBottom: 16}}
              />
              <button type="submit" className="btn primary" style={{width: "100%"}}>
                Creează proiect →
              </button>
            </form>
          </div>
        </div>
      )}

      {/* Progress + continue button (only relevant if there's an active project or anon) */}
      {(auth.isAuthenticated ? activeId : true) && (
      <div style={{marginBottom: 24, padding: "18px 22px", background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 12, display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center"}}>
        <div style={{flex: 1}}>
          <div className="eyebrow" style={{marginBottom: 6}}>Progres proiect activ</div>
          <div style={{fontFamily: "var(--serif)", fontSize: 22, marginBottom: 6}}>
            {totalDone === 0 ? "Nu ai început încă" : `${totalDone} din 8 instrumente complete`}
          </div>
          <div className="progress-bar" style={{background: "var(--line)"}}>
            <div className="progress-bar-fill" style={{width: `${pct}%`}}></div>
          </div>
        </div>
        <div style={{display: "flex", gap: 8}}>
          <button className="btn ghost" onClick={() => go("export")}>Document final</button>
          <button className="btn" onClick={() => go(totalDone === 0 ? "org" : (M2_TOOL_IDS.find(id => !sectionComplete(id, state)) || "export"))}>
            {totalDone === 0 ? "Începe →" : "Continuă →"}
          </button>
        </div>
      </div>)}

      <div className="tool-grid">
        {tools.map(t => {
          const done = sectionComplete(t.id, state);
          return (
            <button key={t.id} className={`tool-card ${done ? "done" : ""}`} onClick={() => go(t.id)}>
              <div className="tool-card-head">
                <span className="tool-num">{t.num}</span>
                <span className="tool-group">{t.group}</span>
                {done && <span className="tool-check">✓</span>}
              </div>
              <div className="tool-title">{t.title}</div>
              <div className="tool-desc">{t.desc}</div>
            </button>
          );
        })}
      </div>

      <div style={{marginTop: 32, padding: "20px 22px", background: "var(--accent-soft)", borderRadius: 12, border: "1px solid #b8becc"}}>
        <div className="eyebrow" style={{color: "var(--accent)", marginBottom: 6}}>Tip · Folosire optimă</div>
        <p style={{margin: 0, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55}}>
          Parcurge instrumentele în ordine — fiecare alimentează automat documentul final. Bara laterală îți arată întotdeauna pe ce instrument ești. Datele sunt salvate local, în browser-ul tău — nimic nu pleacă pe server.
        </p>
      </div>
    </div>
  );
}

function ComingSoonSection({ moduleId, go }) {
  const data = {
    m1: {
      code: "M1",
      title: "Teorie interactivă",
      tagline: "Conceptele PM vizualizate, nu citite.",
      desc: "Modulul 1 va aduce teoria PM la viață: definiții animate (ce este un proiect, milestone, WBS), diagrame PERT și CPM cu activități proprii, matricea Eisenhower drag & drop, comparație vizuală organizare piramidală vs. matriceală, plus un glosar searchable de termeni.",
      features: [
        { title: "Diagrama PERT interactivă", desc: "Introduci activități și dependențe, sistemul calculează automat drumul critic." },
        { title: "Matricea Eisenhower drag & drop", desc: "Clasifici sarcini în 4 cadrane: urgent/important — exersezi prioritizarea." },
        { title: "Definiții animate", desc: "Concepte cheie explicate prin micro-animații, nu prin paragrafe lungi." },
        { title: "Glosar de termeni", desc: "Căutare instantă pentru orice termen PM, cu exemple contextuale." },
        { title: "Comparație organizări", desc: "Vizualizare side-by-side: piramidală vs. matriceală — când folosești pe care?" },
        { title: "Quiz integrat", desc: "După fiecare lecție, un quiz scurt pentru a fixa cunoștințele." }
      ],
      eta: "Faza 2 a planului"
    },
    m3: {
      code: "M3",
      title: "Simulator de proiect",
      tagline: "Conduci un proiect virtual. Decizii. Consecințe. Feedback AI.",
      desc: "Inima platformei. Pornești de la kickoff și ai 12 luni virtuale să livrezi un proiect cu buget și timp limitate. Evenimente neprevăzute (întârzieri, fluctuații cost, plecări din echipă) apar dinamic. Fiecare decizie schimbă starea jocului. La final, scor + raport AI explicativ.",
      features: [
        { title: "3+ scenarii generice", desc: "IT, social, infrastructură — aplicabile oricărui domeniu, fără să te lege de o industrie." },
        { title: "Evenimente neprevăzute dinamice", desc: "Sistemul generează crize realiste: furnizor în întârziere, depășiri de buget, riscuri ce se materializează." },
        { title: "Stare în timp real", desc: "Buget rămas, zile rămase, moral echipă, calitate livrabil — toate vizibile în dashboard." },
        { title: "Management de risc activ", desc: "Identifici, evaluezi și aplici strategii. Vezi instant cum se modifică expunerea." },
        { title: "Scor final cu feedback AI", desc: "Algoritm bazat pe încadrare în buget, respectarea termenelor, calitate. Plus explicații." },
        { title: "Replay & comparație", desc: "Rejoacă același scenariu cu decizii diferite. Compari rezultatele." }
      ],
      eta: "Faza 3 a planului"
    },
    m4: {
      code: "M4",
      title: "Gamificare & evaluare",
      tagline: "Quiz-uri, badge-uri, certificat de parcurgere.",
      desc: "Modulul care te ține motivat. Quiz-uri pe subiectele-grilă din materialele acreditate ANC, badge-uri pentru finalizarea modulelor și scoruri ridicate, profil cu progres vizibil, plus certificat de parcurgere la final.",
      features: [
        { title: "Quiz-uri tematice", desc: "Grilă + scenariu, similar examenelor de certificare ANC." },
        { title: "Badge-uri", desc: "Pentru: finalizare modul, scor perfect, streak de 7 zile, primul simulator complet, etc." },
        { title: "Profil cu progres", desc: "Vezi pe ce stai bine și unde mai trebuie să exersezi." },
        { title: "Spaced repetition", desc: "Sistemul reia întrebări pe care le-ai ratat, la intervale crescătoare." },
        { title: "Mock exam ANC", desc: "Simulare completă a examenului de certificare." },
        { title: "Certificat de parcurgere", desc: "PDF verificabil la finalizarea tuturor modulelor." }
      ],
      eta: "Faza 3 a planului"
    }
  };
  const m = data[moduleId];

  return (
    <div>
      <div className="main-head">
        <div className="crumb">{m.code} · În dezvoltare</div>
        <h1 className="section-title">{m.title}</h1>
        <p className="section-lede">{m.tagline}</p>
        <div className="section-meta">
          <span><Pill kind="info">Planificat</Pill></span>
          <span className="dot"></span>
          <span>{m.eta}</span>
        </div>
      </div>

      <div className="soon-hero">
        <div className="soon-hero-bg">
          <div className="soon-code">{m.code}</div>
          <div className="soon-mark">În curând</div>
        </div>
      </div>

      <Card title="Ce va include modulul">
        <p style={{margin: "0 0 18px", color: "var(--ink-2)", fontSize: 14, lineHeight: 1.6}}>{m.desc}</p>
        <div className="feature-grid">
          {m.features.map((f, i) => (
            <div key={i} className="feature-item">
              <div className="feature-num">{String(i+1).padStart(2,"0")}</div>
              <div>
                <div className="feature-title">{f.title}</div>
                <div className="feature-desc">{f.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <div style={{marginTop: 24, padding: "20px 22px", background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 12, display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center"}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 6}}>Între timp</div>
          <div style={{fontFamily: "var(--serif)", fontSize: 18, marginBottom: 4}}>
            Modulul 2 este disponibil complet — încearcă constructorul de propunere
          </div>
          <p className="tight muted" style={{fontSize: 13}}>
            Toate instrumentele (Gantt, SWOT, buget, risc) funcționează 100% acum.
          </p>
        </div>
        <button className="btn" onClick={() => go("m2-overview")}>Deschide M2 →</button>
      </div>
    </div>
  );
}

Object.assign(window, { M2OverviewSection, ComingSoonSection });