// «Эффективность» — коэффициент, лимит нагрузки и сигналы невыполнения (Модуль 1 + 4).

function EfficiencyPage() {
  const [data, setData] = React.useState(null);
  const [monitor, setMonitor] = React.useState({ rows: [] });
  const [interval, setIntervalSel] = React.useState("month");
  const [testFor, setTestFor] = React.useState(null);

  const load = React.useCallback(() => {
    if (!window.API) return;
    Promise.all([
      window.API.efficiency().catch(() => ({ rows: [] })),
      window.API.monitoring(interval).catch(() => ({ rows: [] })),
    ]).then(([eff, mon]) => { setData(eff); setMonitor(mon || { rows: [] }); });
  }, [interval]);
  React.useEffect(() => { load(); }, [load]);

  const sigByPerson = {};
  (monitor.rows || []).forEach(m => { sigByPerson[m.person] = m; });

  if (!data) {
    return (
      <div className="page page-fade">
        <div className="page-head"><div><h1 className="page-title">Эффективность</h1><p className="page-subtitle">Тест онбординга · коэффициент · загрузка</p></div></div>
        <PageLoading label="Загружаем эффективность…" />
      </div>
    );
  }

  // Баллы/коэффициент теста видят только руководители (admin/контроль); остальным —
  // лишь факт прохождения (по требованию заказчика баллы скрыты).
  const canSeeScores = window.ME && (window.ME.role === "admin" || window.ME.role === "controller");

  const rows = (data.rows || []).slice().sort((a, b) => {
    const oa = a.overLimit ? 1 : 0, ob = b.overLimit ? 1 : 0;
    if (oa !== ob) return ob - oa;
    return (b.coefficient || 0) - (a.coefficient || 0);
  });
  const tested = rows.filter(r => r.hasTest).length;
  const over = rows.filter(r => r.overLimit).length;
  const signaled = (monitor.rows || []).filter(m => m.signal).length;

  const coefColor = (c) => c >= 70 ? "var(--ok)" : c >= 45 ? "var(--warn)" : "var(--err)";

  return (
    <div className="page page-fade">
      <div className="page-head">
        <div>
          <h1 className="page-title">Эффективность и нагрузка</h1>
          <p className="page-subtitle">Тест онбординга · коэффициент · загрузка по дням (по трудозатратам) · {tested} протестировано</p>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <select className="fld" style={{ width: 150 }} value={interval} onChange={e => setIntervalSel(e.target.value)}>
            <option value="month">Невыполнение: месяц</option>
            <option value="quarter">Невыполнение: квартал</option>
          </select>
          <button className="btn btn-outline" onClick={load}><I.Refresh size={14} /> Обновить</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 12, marginBottom: 16 }}>
        <StatCard label="Протестировано" value={`${tested} / ${rows.length}`} icon={<I.Gauge size={16} />} />
        <StatCard label="Перегружены (пик дня)" value={over} color={over ? "var(--err)" : "var(--ok)"} icon={<I.Alert size={16} />} />
        <StatCard label="Сигналы невыполнения" value={signaled} color={signaled ? "var(--err)" : "var(--ok)"} icon={<I.BarChart size={16} />} />
      </div>

      <Card bodyStyle={{ padding: 0 }}>
        <div className="eff-row eff-head">
          <div>Сотрудник</div><div>Эффективность</div><div>Загрузка (пик/день)</div><div>Невыполнение</div><div></div>
        </div>
        {rows.map(r => {
          const sig = sigByPerson[r.person];
          return (
            <div key={r.person} className="eff-row">
              <div style={{ minWidth: 0 }}>
                <div style={{ fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.person}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-400)" }}>{r.dept || "—"}</div>
              </div>
              <div>
                {r.hasTest ? (
                  canSeeScores ? (
                    <div>
                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12 }}>
                        <span style={{ color: coefColor(r.coefficient), fontWeight: 600 }}>{r.coefficient}%</span>
                        <span style={{ color: "var(--ink-300)", fontSize: 10.5 }}>{r.takenAt ? r.takenAt.split(" ")[0] : ""}</span>
                      </div>
                      <div className="progress-track" style={{ marginTop: 3 }}>
                        <div className="progress-fill" style={{ width: r.coefficient + "%", background: coefColor(r.coefficient) }} />
                      </div>
                    </div>
                  ) : (
                    <span className="pill ok" style={{ fontSize: 10.5 }} title="Баллы теста видит только руководитель">тест пройден{r.takenAt ? ` · ${r.takenAt.split(" ")[0]}` : ""}</span>
                  )
                ) : <span style={{ fontSize: 12, color: "var(--ink-300)" }}>тест не пройден</span>}
                <div style={{ fontSize: 11, color: "var(--ink-400)", marginTop: 3 }}>
                  выполнено {r.completed} · {r.perWeek} зад/нед{r.hours ? ` · ${r.hours} ч` : ""}
                </div>
              </div>
              <div style={{ fontSize: 13 }}>
                {r.peakDay ? (
                  <>
                    <span style={{ color: r.overLimit ? "var(--err)" : "var(--ink-700)", fontWeight: r.overLimit ? 600 : 400 }}>
                      пик {r.peakHours} ч{r.peakCount > 1 ? ` · ${r.peakCount} зад.` : ""}
                    </span>
                    <div style={{ fontSize: 11, color: "var(--ink-400)" }}>{r.peakDay} · норма {r.workdayHours} ч</div>
                  </>
                ) : <span style={{ color: "var(--ink-300)", fontSize: 12 }}>нет задач со сроком</span>}
                <div style={{ fontSize: 11, color: "var(--ink-400)" }}>активных всего: {r.activeTasks}</div>
                {r.overLimit && <div style={{ fontSize: 11, color: "var(--err)", marginTop: 1 }}>перегружен в пик</div>}
              </div>
              <div style={{ minWidth: 0 }}>
                {sig && sig.considered > 0
                  ? <span className={`pill ${sig.signal ? "err" : sig.pct >= 15 ? "warn" : "ok"}`} title={`не выполнено ${sig.notDone} из ${sig.considered}${sig.excluded ? `, исключено по отсутствию ${sig.excluded}` : ""}`}>{sig.pct}%{sig.signal ? " · сигнал" : ""}</span>
                  : <span style={{ fontSize: 12, color: "var(--ink-300)" }}>—</span>}
              </div>
              <div style={{ textAlign: "right" }}>
                <button className="btn btn-ghost" style={{ padding: "4px 10px", fontSize: 12 }} onClick={() => setTestFor(r.person)}>{r.hasTest ? "Перетест" : "Тест"}</button>
              </div>
              {r.overLimit && r.recommendation && (
                <div style={{ gridColumn: "1 / -1", fontSize: 12, color: "var(--ink-600)", background: "#fbf3e8", borderRadius: "var(--r-md)", padding: "6px 10px", marginTop: 2 }}>
                  <I.Sparkle size={11} /> {r.recommendation}
                </div>
              )}
            </div>
          );
        })}
        {rows.length === 0 && <div style={{ padding: 18, color: "var(--ink-400)", fontSize: 13 }}>Нет сотрудников.</div>}
      </Card>

      {testFor && <EffTestModal person={testFor} onClose={() => setTestFor(null)} onDone={() => { setTestFor(null); load(); }} />}
    </div>
  );
}

// StatCard — small KPI tile reused on the analytics tabs.
function StatCard({ label, value, icon, color }) {
  return (
    <div className="card" style={{ padding: "14px 16px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "var(--ink-400)", textTransform: "uppercase", letterSpacing: ".04em" }}>{icon} {label}</div>
      <div style={{ fontSize: 24, fontWeight: 600, marginTop: 6, color: color || "var(--ink-700)", fontFamily: "var(--serif)" }}>{value}</div>
    </div>
  );
}

// EffTestModal — 15–20 вопросов онбординга; результат → коэффициент + лимит.
function EffTestModal({ person, onClose, onDone }) {
  const [questions, setQuestions] = React.useState(null);
  const [answers, setAnswers] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [err, setErr] = React.useState("");

  React.useEffect(() => {
    if (!window.API || !window.API.effQuestions) return;
    window.API.effQuestions().then(d => setQuestions(d.questions || [])).catch(() => setQuestions([]));
  }, []);

  const allAnswered = questions && questions.every(q => answers[q.id] != null);
  const submit = async () => {
    if (!allAnswered) { setErr("Ответьте на все вопросы"); return; }
    setBusy(true); setErr("");
    try {
      const arr = questions.map(q => answers[q.id]);
      const res = await window.API.submitEffTest(person, arr);
      setResult(res);
    } catch (e) { setErr(String((e && e.message) || e)); }
    finally { setBusy(false); }
  };

  return (
    <div className="tg-overlay open" style={{ background: "rgba(13,22,32,.5)", display: "grid", placeItems: "center", zIndex: 260 }} onClick={onClose}>
      <div className="card" style={{ width: 620, maxWidth: "94vw", maxHeight: "90vh", display: "flex", flexDirection: "column", boxShadow: "var(--sh-3)" }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <div style={{ flex: 1 }}><h3 className="card-title">Тест эффективности · {person}</h3><p className="card-sub">Оценка при приёме / повторно по инициативе сотрудника</p></div>
          <button className="icon-btn" style={{ color: "var(--ink-400)" }} onClick={onClose}><I.X size={18} /></button>
        </div>
        <div className="card-body" style={{ overflowY: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
          {result ? (
            /* Баллы тестируемому не показываются (скрыты по требованию): результат
               виден руководителю в таблице «Эффективность». */
            <div style={{ textAlign: "center", padding: "22px 0" }}>
              <div style={{ width: 52, height: 52, borderRadius: "50%", background: "var(--ok-soft)", color: "var(--ok)", display: "grid", placeItems: "center", margin: "0 auto 12px" }}>
                <I.CheckCircle size={26} />
              </div>
              <div style={{ fontSize: 17, fontWeight: 600, fontFamily: "var(--serif)" }}>Тест завершён</div>
              <div style={{ fontSize: 13, color: "var(--ink-400)", marginTop: 6, maxWidth: 380, marginLeft: "auto", marginRight: "auto" }}>
                Ответы сохранены. Результаты тестирования обрабатываются системой и доступны руководителю.
              </div>
            </div>
          ) : !questions ? (
            <div style={{ color: "var(--ink-400)", fontSize: 13 }}>Загрузка вопросов…</div>
          ) : (
            questions.map((q, i) => (
              <div key={q.id}>
                <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 6 }}>{i + 1}. {q.q}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  {q.options.map((o, oi) => (
                    <label key={oi} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, cursor: "pointer", padding: "4px 8px", borderRadius: 6, background: answers[q.id] === oi ? "var(--accent-soft)" : "transparent" }}>
                      <input type="radio" name={"q" + q.id} checked={answers[q.id] === oi} onChange={() => setAnswers(a => ({ ...a, [q.id]: oi }))} />
                      {o.text}
                    </label>
                  ))}
                </div>
              </div>
            ))
          )}
          {err && <div style={{ color: "var(--err)", fontSize: 12.5 }}>{err}</div>}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, padding: "12px 20px", borderTop: "1px solid var(--ink-100)" }}>
          <span style={{ fontSize: 12, color: "var(--ink-400)" }}>{questions && !result ? `Отвечено ${Object.keys(answers).length} из ${questions.length}` : ""}</span>
          {result
            ? <button className="btn btn-accent" onClick={onDone}><I.Check size={14} /> Готово</button>
            : <button className="btn btn-accent" onClick={submit} disabled={busy || !allAnswered}><I.Check size={14} /> {busy ? "Расчёт…" : "Завершить тест"}</button>}
        </div>
      </div>
    </div>
  );
}

window.EfficiencyPage = EfficiencyPage;