// === Sections B: Activities + SMART, GANTT, Budget ===

function ActivitiesSection({ state, update, go }) {
  const addActivity = () => {
    update(s => ({
      ...s,
      activities: [...s.activities, {
        id: Date.now(),
        name: "", duration: "", result: "", budget: "",
        start: 1, end: 3,
        smart: { s: false, m: false, a: false, r: false, t: false }
      }]
    }));
  };
  const updateActivity = (id, patch) => {
    update(s => ({
      ...s,
      activities: s.activities.map(a => a.id === id ? { ...a, ...patch } : a)
    }));
  };
  const removeActivity = (id) => {
    update(s => ({ ...s, activities: s.activities.filter(a => a.id !== id) }));
  };

  return (
    <div>
      <SectionHead num="04" title="Planul de activități"
        lede="CE? + CUM? Obiective specifice formulate SMART, fiecare cu activități, durată, rezultate și buget."
        maxPages={2} />

      <Card title="Obiectivul general">
        <Field label="Formulează obiectivul general" help="Corespunde scopului proiectului. Este atins prin agregarea obiectivelor specifice.">
          <TextArea rows={2}
            value={state.generalObjective}
            onChange={v => update(s => ({ ...s, generalObjective: v }))}
            placeholder="Reducerea consumului energetic cu 35% prin digitalizarea secției de asamblare în 12 luni." />
        </Field>
      </Card>

      <Card title="SMART — cele 5 criterii pe care le verificăm" sub="REFERINȚĂ">
        <div className="smart-row">
          <span className="smart-letter">S</span>
          <span className="smart-name">Specific</span>
          <span className="smart-desc">Trebuie să specifice clar ce vor să atingă — verb de acțiune + minim 4 cuvinte descriptive.</span>
          <span className="smart-state"></span>
        </div>
        <div className="smart-row">
          <span className="smart-letter">M</span>
          <span className="smart-name">Measurable</span>
          <span className="smart-desc">Trebuie să poți măsura dacă îndeplinești obiectivul — un număr sau un rezultat concret.</span>
          <span className="smart-state"></span>
        </div>
        <div className="smart-row">
          <span className="smart-letter">A</span>
          <span className="smart-name">Achievable</span>
          <span className="smart-desc">Sunt obiectivele stabilite de atins și realizabile?</span>
          <span className="smart-state"></span>
        </div>
        <div className="smart-row">
          <span className="smart-letter">R</span>
          <span className="smart-name">Realistic</span>
          <span className="smart-desc">Poți realiza obiectivele cu resursele și bugetul pe care le ai?</span>
          <span className="smart-state"></span>
        </div>
        <div className="smart-row">
          <span className="smart-letter">T</span>
          <span className="smart-name">Time-bound</span>
          <span className="smart-desc">Când dorești să atingi obiectivele? Durata proiectului ≤ 12 luni.</span>
          <span className="smart-state"></span>
        </div>
      </Card>

      <Card title={`Activități (${state.activities.length})`}
        sub="VALIDARE SMART AUTOMATĂ"
        action={<button className="btn small" onClick={addActivity}>+ Adaugă activitate</button>}>
        <div className="stack" style={{gap: 14}}>
          {state.activities.map((a, i) => (
            <ActivityCard key={a.id} idx={i+1} activity={a}
              onChange={patch => updateActivity(a.id, patch)}
              onRemove={() => removeActivity(a.id)} />
          ))}
          {state.activities.length === 0 && (
            <div style={{padding: 20, textAlign: "center", color: "var(--ink-3)"}}>
              Nicio activitate. <button className="btn small ghost" onClick={addActivity}>Adaugă prima</button>
            </div>
          )}
        </div>
      </Card>

      <FootNav onPrev={() => go("needs")} onNext={() => go("gantt")} prev="Analiză nevoi" next="Diagrama Gantt" />
    </div>
  );
}

function ActivityCard({ idx, activity, onChange, onRemove }) {
  const smart = evaluateSMART(activity);
  const score = Object.values(smart).filter(Boolean).length;
  const allOk = score === 5;
  return (
    <div style={{border: `1px solid ${allOk ? "#b2d4af" : "var(--line)"}`, borderRadius: 10, padding: 16, background: allOk ? "rgba(178, 212, 175, 0.08)" : "var(--bg-elevated)"}}>
      <div style={{display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12}}>
        <div style={{display: "flex", gap: 10, alignItems: "baseline"}}>
          <span style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)"}}>A{idx}</span>
          <span style={{fontFamily: "var(--serif)", fontSize: 16}}>Activitate {idx}</span>
        </div>
        <div style={{display: "flex", gap: 8, alignItems: "center"}}>
          <Pill kind={allOk ? "ok" : score >= 3 ? "warn" : "bad"}>SMART {score}/5</Pill>
          <button className="btn icon" onClick={onRemove} title="Șterge">×</button>
        </div>
      </div>
      <div className="field-row">
        <Field label="Denumire activitate">
          <TextInput value={activity.name} onChange={v => onChange({ name: v })} placeholder="ex. Implementarea sistemului de monitorizare energetică în secția A" />
        </Field>
        <Field label="Durată">
          <TextInput value={activity.duration} onChange={v => onChange({ duration: v })} placeholder="L1 – L4" />
        </Field>
      </div>
      <div className="field-row">
        <Field label="Rezultat măsurabil">
          <TextInput value={activity.result} onChange={v => onChange({ result: v })} placeholder="ex. 12 senzori instalați, 1 dashboard funcțional" />
        </Field>
        <Field label="Buget (RON)">
          <TextInput type="number" value={activity.budget} onChange={v => onChange({ budget: v })} placeholder="25000" />
        </Field>
      </div>

      <div style={{marginTop: 4, display: "flex", gap: 6, flexWrap: "wrap"}}>
        {[
          { k: "s", n: "S", t: "Specific" },
          { k: "m", n: "M", t: "Measurable" },
          { k: "a", n: "A", t: "Achievable" },
          { k: "r", n: "R", t: "Realistic" },
          { k: "t", n: "T", t: "Time-bound" }
        ].map(({k, n, t}) => (
          <span key={k} title={t} style={{
            fontFamily: "var(--mono)",
            fontSize: 11,
            padding: "4px 8px",
            borderRadius: 4,
            background: smart[k] ? "var(--good-soft)" : "var(--bg-elevated)",
            color: smart[k] ? "var(--good)" : "var(--ink-4)",
            border: `1px solid ${smart[k] ? "#b2d4af" : "var(--line-2)"}`
          }}>
            {smart[k] ? "✓" : "○"} {n} <span style={{opacity: 0.6, marginLeft: 2}}>{t}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function GanttSection({ state, update, go }) {
  const updateActivity = (id, patch) => {
    update(s => ({ ...s, activities: s.activities.map(a => a.id === id ? { ...a, ...patch } : a) }));
  };

  // detect cascade (each activity starts >= previous activity start)
  const acts = state.activities;
  const cascadeOk = acts.every((a, i) => i === 0 || a.start >= acts[i-1].start);

  return (
    <div>
      <SectionHead num="05" title="Diagrama GANTT"
        lede='Toate activitățile pe 12 luni. Click pe o celulă pentru a marca începutul, încă un click pentru sfârșit. Activitățile trebuie să fie "în cascadă".'
        maxPages={1} />

      {!cascadeOk && (
        <div className="banner-warn">
          Activitățile nu sunt <strong>în cascadă</strong>. Reordonează-le sau ajustează lunile de start: fiecare activitate ar trebui să înceapă la sau după activitatea anterioară.
        </div>
      )}

      <Card title="Plan temporal — 12 luni"
        action={<Pill kind={cascadeOk ? "ok" : "warn"}>{cascadeOk ? "✓ În cascadă" : "Verifică ordinea"}</Pill>}>
        <div className="gantt-wrap">
          <div className="gantt">
            <div className="gantt-cell gantt-head" style={{justifyContent: "flex-start"}}>Activitate</div>
            {MONTHS.map(m => <div key={m} className="gantt-cell gantt-head">{m}</div>)}
            <div className="gantt-cell gantt-head"></div>
            {acts.map((a, idx) => (
              <GanttRow key={a.id} activity={a} idx={idx+1} onUpdate={patch => updateActivity(a.id, patch)} />
            ))}
          </div>
        </div>

        {acts.length === 0 && (
          <div style={{padding: 24, textAlign: "center", color: "var(--ink-3)"}}>
            Adaugă activități în <a href="#" onClick={e => {e.preventDefault(); go("activities");}}>secțiunea Plan activități</a> ca să apară aici.
          </div>
        )}

        <div className="help" style={{marginTop: 14}}>
          <strong>Cum se folosește:</strong> click pe celula de start, apoi click pe celula de end pentru a defini intervalul. Toate activitățile trebuie să încapă în 12 luni (durata maximă a proiectului).
        </div>
      </Card>

      <FootNav onPrev={() => go("activities")} onNext={() => go("budget")} prev="Activități" next="Buget" />
    </div>
  );
}

function GanttRow({ activity, idx, onUpdate }) {
  const [clickState, setClickState] = React.useState("idle"); // idle, picked-start

  const handleClick = (m) => {
    if (clickState === "idle") {
      onUpdate({ start: m, end: m });
      setClickState("picked-start");
    } else {
      // second click - set end
      if (m < activity.start) {
        onUpdate({ start: m, end: activity.start });
      } else {
        onUpdate({ end: m });
      }
      setClickState("idle");
    }
  };

  return (
    <div className="gantt-row">
      <div className="gantt-cell gantt-name">
        <span style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", marginRight: 6}}>A{idx}</span>
        {activity.name || <span style={{color: "var(--ink-4)", fontStyle: "italic"}}>Fără denumire</span>}
      </div>
      {MONTHS.map((_, i) => {
        const m = i + 1;
        const on = m >= activity.start && m <= activity.end;
        const isStart = m === activity.start;
        const isEnd = m === activity.end;
        const single = activity.start === activity.end;
        const cls = `gantt-cell gantt-month ${on ? "on" : ""} ${isStart ? "start" : ""} ${isEnd ? "end" : ""} ${single ? "single" : ""}`;
        return (
          <div key={m} className={cls} onClick={() => handleClick(m)} title={`Luna ${m}`}></div>
        );
      })}
      <div className="gantt-cell"></div>
    </div>
  );
}

function BudgetSection({ state, update, go }) {
  const total = state.budget.total;
  const items = state.budget.items;
  const sumPct = items.reduce((a, b) => a + (+b.pct || 0), 0);
  const balanced = sumPct === 100;

  const updateItem = (id, pct) => {
    update(s => ({
      ...s,
      budget: { ...s.budget, items: s.budget.items.map(it => it.id === id ? { ...it, pct: +pct || 0 } : it) }
    }));
  };
  const setTotal = (v) => update(s => ({ ...s, budget: { ...s.budget, total: +v || 0 }}));

  return (
    <div>
      <SectionHead num="06" title="Planul financiar / Bugetul"
        lede="Bune practici PM recomandă procente specifice pentru fiecare categorie. Calculatorul îți arată dacă te încadrezi."
        maxPages={2} />

      <div className="budget-summary">
        <div className="budget-stat">
          <div className="budget-stat-label">Buget total propus</div>
          <div className="budget-stat-val" style={{display: "flex", alignItems: "baseline", gap: 4}}>
            <input className="txt" type="number" value={total} onChange={e => setTotal(e.target.value)}
              style={{fontFamily: "var(--serif)", fontSize: 28, padding: "2px 4px", border: 0, background: "transparent", width: 140, fontWeight: 400}} />
            <span className="unit">RON</span>
          </div>
        </div>
        <div className="budget-stat">
          <div className="budget-stat-label">Suma procente</div>
          <div className="budget-stat-val" style={{color: balanced ? "var(--good)" : "var(--warn)"}}>
            {sumPct}<span className="unit">% din 100%</span>
          </div>
        </div>
        <div className="budget-stat">
          <div className="budget-stat-label">Stare</div>
          <div className="budget-stat-val" style={{fontSize: 22, marginTop: 4}}>
            {balanced ? <Pill kind="ok">✓ Echilibrat</Pill> : sumPct > 100 ? <Pill kind="bad">Peste 100%</Pill> : <Pill kind="warn">Lipsă {100-sumPct}%</Pill>}
          </div>
        </div>
      </div>

      <Card title="Distribuție pe titluri bugetare" sub="CORELAT CU GANTT">
        {items.map((it, idx) => {
          const inRange = it.pct >= it.min && it.pct <= it.max;
          const ron = Math.round(total * it.pct / 100);
          return (
            <div key={it.id} className="budget-row">
              <span className="num">{idx + 1}.</span>
              <div>
                <div className="title">{it.title}</div>
                <div className="desc">{it.desc}</div>
              </div>
              <span className="range">recomandat {it.min}–{it.max}%</span>
              <div>
                <input className="pct" type="number" min="0" max="100" step="0.5"
                  value={it.pct} onChange={e => updateItem(it.id, e.target.value)} />
                <div style={{fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", textAlign: "right", marginTop: 3}}>
                  ≈ {ron.toLocaleString("ro-RO")} RON
                </div>
              </div>
              <span className={`status-indicator ${inRange ? "" : it.pct < it.min ? "warn" : "bad"}`}
                title={inRange ? "În intervalul recomandat" : it.pct < it.min ? "Sub minim" : "Peste maxim"}></span>
            </div>
          );
        })}
        <div className="budget-row" style={{borderTop: "2px solid var(--ink)", marginTop: 8, paddingTop: 14}}>
          <span></span>
          <span className="title" style={{fontFamily: "var(--serif)", fontSize: 17}}>TOTAL</span>
          <span></span>
          <div style={{fontFamily: "var(--mono)", fontSize: 16, fontWeight: 600, textAlign: "right"}}>
            {sumPct}%
          </div>
          <span></span>
        </div>
      </Card>

      <Card title="Bune practici" sub="GHID">
        <ul style={{margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.7, color: "var(--ink-2)"}}>
          <li>Cheltuielile de personal trebuie corelate cu Diagrama Gantt — doar pentru lunile în care există activitate.</li>
          <li>Se vor achiziționa <strong>numai dotări justificate</strong> în proiect — nu echipamente generale.</li>
          <li>Mobilitățile nu sunt obligatorii; doar dacă au legătură directă cu proiectul.</li>
          <li>Materialele de informare/publicitate sunt cerute prin Contractul de Finanțare.</li>
        </ul>
      </Card>

      <FootNav onPrev={() => go("gantt")} onNext={() => go("mgmt")} prev="Gantt" next="Management" />
    </div>
  );
}

Object.assign(window, { ActivitiesSection, GanttSection, BudgetSection });