// === Sections C: Management, Risk, Export ===

function ManagementSection({ state, update, go }) {
  const m = state.management;
  const setMgmt = (k, v) => update(s => ({ ...s, management: { ...s.management, [k]: v }}));

  const updateMember = (i, patch) => {
    update(s => ({
      ...s,
      management: {
        ...s.management,
        members: s.management.members.map((mm, idx) => idx === i ? { ...mm, ...patch } : mm)
      }
    }));
  };
  const addMember = () => {
    update(s => ({
      ...s,
      management: { ...s.management, members: [...s.management.members, { role: "Nou rol", name: "" }] }
    }));
  };
  const removeMember = (i) => {
    update(s => ({
      ...s,
      management: { ...s.management, members: s.management.members.filter((_, idx) => idx !== i) }
    }));
  };

  return (
    <div>
      <SectionHead num="07" title="Managementul de proiect"
        lede="Organigrama, comunicarea internă, monitorizarea derulării și planul de evaluare."
        maxPages={1} />

      <Card title="Organigrama proiectului" sub="FLUX DECIZIONAL"
        action={<button className="btn small" onClick={addMember}>+ Adaugă rol</button>}>
        <Field label="Coordonator / Lead (decident principal)">
          <TextInput value={m.leader} onChange={v => setMgmt("leader", v)} placeholder="Nume + funcție — ex. Prof. Dr. Ing. Andrei Pop, Director general" />
        </Field>

        <div className="org-tree" style={{marginTop: 20}}>
          <div className="org-row">
            <div className="org-node lead">
              <div className="org-node-role">Coordonator</div>
              <div className="org-node-name">{m.leader || <span style={{opacity: 0.5}}>—</span>}</div>
            </div>
          </div>
          <div className="org-row">
            {m.members.map((mb, i) => (
              <div key={i} className="org-node">
                <div className="org-node-role" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                  <input value={mb.role} onChange={e => updateMember(i, { role: e.target.value })}
                    style={{fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--mono)", fontWeight: 400}} />
                  <button onClick={() => removeMember(i)} style={{background: "transparent", border: 0, color: "var(--ink-4)", cursor: "pointer", padding: 0, fontSize: 14}}>×</button>
                </div>
                <input value={mb.name} onChange={e => updateMember(i, { name: e.target.value })} placeholder="Nume membru..." />
              </div>
            ))}
          </div>
        </div>
      </Card>

      <Card title="Organizarea comunicării">
        <Field label="Cum se comunică în proiect? Cu cine?" help="Ședințe săptămânale, canal Slack/Teams, rapoarte lunare către finanțator, etc.">
          <TextArea value={m.communication} onChange={v => setMgmt("communication", v)} rows={3}
            placeholder="Ședințe de coordonare săptămânale; rapoarte lunare către management; comunicare zilnică pe Microsoft Teams; minute la fiecare întâlnire arhivate pe SharePoint." />
        </Field>
      </Card>

      <Card title="Monitorizare și evaluare">
        <Field label="Monitorizare internă — instrumente și rezultate" help="Cum se supraveghează derularea activităților conform Planului.">
          <TextArea value={m.monitoring} onChange={v => setMgmt("monitoring", v)} rows={3}
            placeholder="Rapoarte de progres lunare; KPI-uri pe activitate (% din ținta lunară); audit intern trimestrial; audit extern la mijloc și final de proiect." />
        </Field>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 10}}>
          <div style={{padding: 14, border: "1px solid var(--line)", borderRadius: 8, background: "var(--bg-elevated)"}}>
            <div className="eyebrow" style={{marginBottom: 6}}>Evaluare internă</div>
            <p className="tight" style={{fontSize: 13, color: "var(--ink-2)"}}>
              Realizată de echipa de management. Verifică încadrarea în timp, buget și rezultate.
            </p>
          </div>
          <div style={{padding: 14, border: "1px solid var(--line)", borderRadius: 8, background: "var(--bg-elevated)"}}>
            <div className="eyebrow" style={{marginBottom: 6}}>Evaluare externă · Audit</div>
            <p className="tight" style={{fontSize: 13, color: "var(--ink-2)"}}>
              Auditor extern independent (financiar + tehnic). Obligatorie pentru proiectele finanțate.
            </p>
          </div>
        </div>
      </Card>

      <FootNav onPrev={() => go("budget")} onNext={() => go("risk")} prev="Buget" next="Analiză risc" />
    </div>
  );
}

function RiskSection({ state, update, go }) {
  const risks = state.risks;
  const addRisk = () => {
    update(s => ({
      ...s,
      risks: [...s.risks, { id: Date.now(), name: "", strategy: "", effect: "", prob: 3, impact: 3 }]
    }));
  };
  const updateRisk = (id, patch) => {
    update(s => ({ ...s, risks: s.risks.map(r => r.id === id ? { ...r, ...patch } : r) }));
  };
  const removeRisk = (id) => update(s => ({ ...s, risks: s.risks.filter(r => r.id !== id) }));

  // group risks for matrix
  const matrix = {};
  risks.forEach(r => {
    if (!r.name) return;
    const key = `${r.prob}-${r.impact}`;
    matrix[key] = matrix[key] || [];
    matrix[key].push(r);
  });

  const riskLevel = (p, i) => {
    const v = p * i;
    if (v >= 16) return 5;
    if (v >= 10) return 4;
    if (v >= 6) return 3;
    if (v >= 3) return 2;
    return 1;
  };

  return (
    <div>
      <SectionHead num="08" title="Managementul riscului"
        lede="Identifică, măsoară și planifică strategii de răspuns pentru fiecare risc."
        maxPages={2} />

      <Card title="Matrice risc — Probabilitate × Impact" sub="HEATMAP 5×5">
        <div className="risk-matrix-wrap">
          <div className="risk-y-axis">PROBABILITATE →</div>
          <div className="risk-matrix">
            {[5,4,3,2,1].map(p => (
              <React.Fragment key={p}>
                <div className="risk-y-label">{p}</div>
                {[1,2,3,4,5].map(i => {
                  const key = `${p}-${i}`;
                  const cellRisks = matrix[key] || [];
                  const level = riskLevel(p, i);
                  return (
                    <div key={i} className={`risk-cell s${level}`}>
                      {cellRisks.map(r => (
                        <span key={r.id} className="risk-chip" title={r.name}>
                          R{risks.findIndex(x => x.id === r.id) + 1}
                        </span>
                      ))}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
            <div></div>
            {[1,2,3,4,5].map(i => <div key={i} className="risk-x-label">{i}</div>)}
          </div>
        </div>
        <div style={{textAlign: "center", fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 0}}>← IMPACT</div>

        <div style={{display: "flex", gap: 18, justifyContent: "center", marginTop: 16, fontSize: 11, fontFamily: "var(--mono)", color: "var(--ink-3)"}}>
          <span style={{display: "flex", alignItems: "center", gap: 6}}><span style={{width: 12, height: 12, background: "#cde6c8"}}></span>Foarte scăzut</span>
          <span style={{display: "flex", alignItems: "center", gap: 6}}><span style={{width: 12, height: 12, background: "#fbeed6"}}></span>Mediu</span>
          <span style={{display: "flex", alignItems: "center", gap: 6}}><span style={{width: 12, height: 12, background: "#e8a59a"}}></span>Critic</span>
        </div>
      </Card>

      <Card title={`Registru riscuri (${risks.length})`}
        sub="IERARHIZATE DUPĂ EXPUNERE"
        action={<button className="btn small" onClick={addRisk}>+ Adaugă risc</button>}>
        <div className="stack" style={{gap: 14}}>
          {risks
            .map((r, i) => ({ ...r, _idx: i }))
            .sort((a, b) => (b.prob * b.impact) - (a.prob * a.impact))
            .map(r => (
            <RiskCard key={r.id} risk={r} idx={r._idx + 1}
              onChange={patch => updateRisk(r.id, patch)}
              onRemove={() => removeRisk(r.id)} />
          ))}
        </div>
      </Card>

      <FootNav onPrev={() => go("mgmt")} onNext={() => go("export")} prev="Management" next="Document final" />
    </div>
  );
}

function RiskCard({ risk, idx, onChange, onRemove }) {
  const exposure = risk.prob * risk.impact;
  const lvl = exposure >= 16 ? "critic" : exposure >= 10 ? "ridicat" : exposure >= 6 ? "mediu" : exposure >= 3 ? "scăzut" : "minim";
  const lvlKind = exposure >= 16 ? "bad" : exposure >= 10 ? "warn" : exposure >= 3 ? "info" : "ok";

  return (
    <div style={{border: "1px solid var(--line)", borderRadius: 10, padding: 16, background: "var(--bg-elevated)"}}>
      <div style={{display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10}}>
        <div style={{display: "flex", gap: 10, alignItems: "baseline"}}>
          <span style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)"}}>R{idx}</span>
          <span style={{fontFamily: "var(--serif)", fontSize: 16}}>Risc {idx}</span>
        </div>
        <div style={{display: "flex", gap: 8, alignItems: "center"}}>
          <Pill kind={lvlKind}>Expunere: {exposure}/25 · {lvl}</Pill>
          <button className="btn icon" onClick={onRemove}>×</button>
        </div>
      </div>
      <Field label="Risc identificat">
        <TextInput value={risk.name} onChange={v => onChange({ name: v })} placeholder="ex. Întârziere livrare echipamente cheie" />
      </Field>
      <div className="field-row">
        <Field label="Strategie de răspuns" help="Mitigate, Avoid, Transfer, Accept">
          <TextArea rows={2} value={risk.strategy} onChange={v => onChange({ strategy: v })} placeholder="Două surse paralele de aprovizionare; comandă cu 2 luni înainte de necesitate." />
        </Field>
        <Field label="Efect al strategiei aplicate">
          <TextArea rows={2} value={risk.effect} onChange={v => onChange({ effect: v })} placeholder="Reducere probabilitate de la 4 la 2; impact rămâne 3." />
        </Field>
      </div>
      <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 6}}>
        <div>
          <label className="lbl">Probabilitate: <strong>{risk.prob}</strong>/5</label>
          <input type="range" min="1" max="5" value={risk.prob} onChange={e => onChange({ prob: +e.target.value })} style={{width: "100%"}} />
          <div style={{display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)"}}>
            <span>Rar</span><span>Frecvent</span>
          </div>
        </div>
        <div>
          <label className="lbl">Impact: <strong>{risk.impact}</strong>/5</label>
          <input type="range" min="1" max="5" value={risk.impact} onChange={e => onChange({ impact: +e.target.value })} style={{width: "100%"}} />
          <div style={{display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)"}}>
            <span>Minor</span><span>Catastrofal</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ExportSection({ state, update, go, reset }) {
  const s = state;
  const totalBudget = s.budget.items.reduce((a, b) => a + (s.budget.total * b.pct / 100), 0);
  const completed = SECTIONS.slice(1, -1).filter(sec => sectionComplete(sec.id, s)).length;
  const pct = Math.round((completed / 8) * 100);
  const printIt = () => window.print();

  return (
    <div>
      <SectionHead num="09" title="Document final"
        lede="Previzualizare consolidată a propunerii de proiect. Tipărește direct cu Ctrl+P sau folosește butonul." />

      <div style={{display: "grid", gridTemplateColumns: "1fr auto", gap: 14, marginBottom: 24, alignItems: "center", padding: "18px 22px", background: "var(--accent-soft)", border: "1px solid #b8becc", borderRadius: 12}}>
        <div>
          <div style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 4}}>
            Progres total
          </div>
          <div style={{fontFamily: "var(--serif)", fontSize: 22, color: "var(--accent)"}}>
            {completed} / 8 secțiuni complete ({pct}%)
          </div>
          {completed < 8 && (
            <div style={{fontSize: 12, color: "var(--ink-2)", marginTop: 4}}>
              Secțiuni incomplete: {SECTIONS.slice(1, -1).filter(sec => !sectionComplete(sec.id, s)).map(sec => sec.label).join(", ")}
            </div>
          )}
        </div>
        <div style={{display: "flex", gap: 8}}>
          <button className="btn ghost" onClick={() => { if (confirm("Resetezi toate datele?")) reset(); }}>Reset</button>
          <button className="btn" onClick={printIt}>Tipărește / PDF</button>
        </div>
      </div>

      <div className="preview-doc" id="finalDoc">
        <div style={{textAlign: "center", paddingBottom: 80, paddingTop: 30, borderBottom: "1px dashed #ccc"}}>
          <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 30, color: "#666"}}>Coperta</div>
          <h1 style={{fontSize: 28, lineHeight: 1.2}}>{s.org.projectTitle || "[Titlul proiectului]"}</h1>
          <div style={{marginTop: 60, fontSize: 14}}>
            <div>Elaborat de:</div>
            <div style={{marginTop: 8, fontWeight: 700, fontSize: 16}}>{s.org.authorName || "[Nume Prenume]"}</div>
            <div style={{marginTop: 4, fontStyle: "italic", color: "#888"}}>(semnătură)</div>
          </div>
          <div style={{marginTop: 80, fontSize: 12, color: "#555"}}>
            {s.org.location || "—"} / {s.org.date}
          </div>
        </div>

        <h2>1. Date despre organizație</h2>
        <table>
          <tbody>
            <tr><th style={{width: "30%"}}>Denumire</th><td>{s.org.name || "—"}</td></tr>
            <tr><th>Localizare</th><td>{s.org.locality}, jud. {s.org.county}</td></tr>
            <tr><th>Obiect de activitate</th><td>{s.org.activity || "—"}</td></tr>
            <tr><th>Număr de angajați</th><td>{s.org.employees || "—"}</td></tr>
            <tr><th>Cifră de afaceri</th><td>{s.org.turnover ? `${s.org.turnover} RON` : "—"}</td></tr>
            <tr><th>Profit</th><td>{s.org.profit ? `${s.org.profit} RON` : "—"}</td></tr>
            <tr><th>Produse / servicii</th><td>{s.org.product || "—"}</td></tr>
          </tbody>
        </table>

        <h2>2. Scopul proiectului</h2>
        <p>{s.scope.text || <em style={{color: "#888"}}>[Scopul nu a fost formulat]</em>}</p>

        <h2>3. Analiza de nevoi</h2>
        <p><strong>Inovație:</strong> {s.needs.innovation || "—"}</p>
        <p><strong>Beneficiari:</strong> {s.needs.beneficiaries || "—"}</p>
        <p><strong>Resurse:</strong> {s.needs.resources || "—"}</p>

        <p style={{marginTop: 14, fontWeight: 700}}>Matrice SWOT:</p>
        <table>
          <thead>
            <tr><th>Strengths</th><th>Weaknesses</th><th>Opportunities</th><th>Threats</th></tr>
          </thead>
          <tbody>
            <tr>
              <td>{s.needs.swot.s.map(i => <div key={i.id}>· {i.text}</div>)}</td>
              <td>{s.needs.swot.w.map(i => <div key={i.id}>· {i.text}</div>)}</td>
              <td>{s.needs.swot.o.map(i => <div key={i.id}>· {i.text}</div>)}</td>
              <td>{s.needs.swot.t.map(i => <div key={i.id}>· {i.text}</div>)}</td>
            </tr>
          </tbody>
        </table>

        <h2>4. Planul de activități</h2>
        <p><strong>Obiectiv general:</strong> {s.generalObjective || "—"}</p>
        <table>
          <thead>
            <tr><th>#</th><th>Activitate</th><th>Durată</th><th>Rezultat</th><th>Buget (RON)</th></tr>
          </thead>
          <tbody>
            {s.activities.map((a, i) => (
              <tr key={a.id}>
                <td>A{i+1}</td>
                <td>{a.name || "—"}</td>
                <td>{a.duration || "—"}</td>
                <td>{a.result || "—"}</td>
                <td>{a.budget ? Number(a.budget).toLocaleString("ro-RO") : "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <h2>5. Diagrama GANTT</h2>
        <table style={{fontSize: 10}}>
          <thead>
            <tr>
              <th>Activitate</th>
              {MONTHS.map(m => <th key={m} style={{textAlign: "center"}}>{m}</th>)}
            </tr>
          </thead>
          <tbody>
            {s.activities.map((a, i) => (
              <tr key={a.id}>
                <td style={{fontWeight: 700}}>A{i+1}</td>
                {MONTHS.map((_, mi) => {
                  const m = mi + 1;
                  const on = m >= a.start && m <= a.end;
                  return <td key={mi} style={{background: on ? "#333" : "transparent", textAlign: "center", height: 22}}></td>;
                })}
              </tr>
            ))}
          </tbody>
        </table>

        <h2>6. Plan financiar</h2>
        <p><strong>Buget total:</strong> {Number(s.budget.total).toLocaleString("ro-RO")} RON</p>
        <table>
          <thead>
            <tr><th>Titlu bugetar</th><th>%</th><th>Sumă (RON)</th></tr>
          </thead>
          <tbody>
            {s.budget.items.map(it => (
              <tr key={it.id}>
                <td>{it.title}</td>
                <td>{it.pct}%</td>
                <td>{Math.round(s.budget.total * it.pct / 100).toLocaleString("ro-RO")}</td>
              </tr>
            ))}
            <tr style={{fontWeight: 700}}>
              <td>TOTAL</td>
              <td>{s.budget.items.reduce((a,b)=>a+(+b.pct||0),0)}%</td>
              <td>{Math.round(totalBudget).toLocaleString("ro-RO")}</td>
            </tr>
          </tbody>
        </table>

        <h2>7. Management de proiect</h2>
        <p><strong>Coordonator:</strong> {s.management.leader || "—"}</p>
        <p><strong>Echipă:</strong></p>
        <ul>
          {s.management.members.map((m, i) => <li key={i}><strong>{m.role}:</strong> {m.name || "—"}</li>)}
        </ul>
        <p><strong>Comunicare:</strong> {s.management.communication || "—"}</p>
        <p><strong>Monitorizare:</strong> {s.management.monitoring || "—"}</p>

        <h2>8. Analiza de risc</h2>
        <table>
          <thead>
            <tr><th>#</th><th>Risc</th><th>P×I</th><th>Strategie</th><th>Efect</th></tr>
          </thead>
          <tbody>
            {s.risks
              .map((r, i) => ({ ...r, _idx: i }))
              .sort((a, b) => (b.prob * b.impact) - (a.prob * a.impact))
              .map(r => (
                <tr key={r.id}>
                  <td>R{r._idx + 1}</td>
                  <td>{r.name || "—"}</td>
                  <td>{r.prob}×{r.impact} = {r.prob * r.impact}</td>
                  <td>{r.strategy || "—"}</td>
                  <td>{r.effect || "—"}</td>
                </tr>
            ))}
          </tbody>
        </table>
      </div>

      <FootNav onPrev={() => go("risk")} onNext={() => go("intro")} prev="Risc" next="Acasă" />
    </div>
  );
}

Object.assign(window, { ManagementSection, RiskSection, ExportSection });