// consequence-class.jsx — клас наслідків як рухоме поле об'єкта + неруйнівне до-налаштування
// Демонструє логіку, узгоджену в чаті:
//  • клас попередній (із Завдання) → уточнюється розрахунком (в обидва боки)
//  • обсяг експертизи ВИВОДИТЬСЯ з класу (а не зашитий у шаблон)
//  • зміна класу не перестворює проєкт, а пропонує ДЕЛЬТУ і зберігає зроблене

// ---- Дельта складу робіт між двома обсягами експертизи ----
window.expertiseDelta = function (oldScope, newScope) {
  const stageOf = (sc) => window.getStageTemplate(window.EXPERTISE_STAGE_FOR_SCOPE[sc]);
  const oldIds = (oldScope && stageOf(oldScope)?.taskTemplateIds) || [];
  const newIds = (newScope && stageOf(newScope)?.taskTemplateIds) || [];
  const added = newIds.filter(id => !oldIds.includes(id)).map(window.getTaskTemplate).filter(Boolean);
  const removed = oldIds.filter(id => !newIds.includes(id)).map(window.getTaskTemplate).filter(Boolean);
  return { added, removed };
};

// =====================================================================
// ПАНЕЛЬ КЛАСУ НАСЛІДКІВ — у розгорнутій картці об'єкта
// =====================================================================
function ConsequenceClassPanel({ obj, onRefine }) {
  const history = obj.gradeHistory || [{ value: obj.grade, kind: "preliminary", date: "", by: "", basis: "—" }];
  const last = history[history.length - 1];
  const kind = obj.gradeKind || last.kind || "preliminary";
  const scope = obj.expertiseScope;
  const scopeLabel = window.EXPERTISE_SCOPE_LABELS[scope]?.full || "—";
  const isSchema = obj.workType === "schema";

  const kindMeta = kind === "calculated"
    ? { label: "Уточнений розрахунком", tone: "live" }
    : { label: "Попередній — із Завдання на проєктування", tone: "warn" };

  if (isSchema) {
    return (
      <div className="cc-panel">
        <div className="cc-panel-head">
          <span className="cc-panel-title">Клас наслідків</span>
        </div>
        <div className="cc-empty">Схема намірів забудови — клас наслідків не визначається (будівельний паспорт без експертизи).</div>
      </div>
    );
  }

  return (
    <div className="cc-panel">
      <div className="cc-panel-head">
        <span className="cc-panel-title">Клас наслідків</span>
        <button className="btn btn-sm" onClick={onRefine}>Уточнити розрахунком →</button>
      </div>

      <div className="cc-current">
        <div className="cc-grade-badge">{obj.grade}</div>
        <div className="cc-current-meta">
          <span className={`status-tag tone-${kindMeta.tone}`}>{kindMeta.label}</span>
          <div className="cc-scope">Обсяг експертизи: <b>{scopeLabel}</b></div>
        </div>
      </div>

      <div className="cc-journal">
        <div className="cc-journal-label">Журнал змін</div>
        {history.map((h, i) => {
          const who = window.getTeam(h.by);
          const prev = i > 0 ? history[i - 1] : null;
          const changed = prev && prev.value !== h.value;
          return (
            <div key={i} className="cc-journal-row">
              <div className="cc-journal-dot" data-kind={h.kind}></div>
              <div className="cc-journal-body">
                <div className="cc-journal-top">
                  <span className="cc-journal-val">
                    {changed && <span className="cc-journal-from">{prev.value} →</span>} {h.value}
                  </span>
                  <span className="cc-journal-kind">{h.kind === "calculated" ? "розрахунок" : "попередній"}</span>
                  {h.date && <span className="cc-journal-date">{window.fmtDate ? window.fmtDate(h.date) : h.date}</span>}
                </div>
                <div className="cc-journal-basis">{h.basis}{who ? ` · ${who.initials}` : ""}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.ConsequenceClassPanel = ConsequenceClassPanel;


// =====================================================================
// МОДАЛКА: УТОЧНЕННЯ КЛАСУ → ДЕЛЬТА → ПІДТВЕРДЖЕННЯ
// =====================================================================
function ConsequenceClassModal({ obj, tasks, onClose, onConfirm }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const [grade, setGrade] = React.useState(obj.grade);
  const [complexTechno, setComplexTechno] = React.useState(obj.expertiseScope === "strength");
  const [basis, setBasis] = React.useState("");

  const oldScope = obj.expertiseScope;
  const newScope = window.expertiseScopeForGrade(grade, { complexTechno });
  const scopeChanged = oldScope !== newScope;
  const gradeChanged = grade !== obj.grade;
  const { added, removed } = window.expertiseDelta(oldScope, newScope);

  // вже наявні задачі експертизи цього об'єкта — щоб показати, що збережеться
  const objExpertiseTasks = (tasks || []).filter(t => t.obj === obj.id && t.stage === "expertise");
  const doneCount = objExpertiseTasks.filter(t => t.status === "done").length;

  const SC = window.EXPERTISE_SCOPE_LABELS;
  const canConfirm = (gradeChanged || scopeChanged) && basis.trim().length > 0;

  const submit = () => {
    if (!canConfirm) return;
    onConfirm({ grade, scope: newScope, basis: basis.trim(), added, removed });
  };

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal cc-modal" style={{maxWidth: 640, inset: "auto", top: 64, bottom: 64, left: "50%", transform: "translateX(-50%)", width: "calc(100% - 64px)"}}>
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div>
            <div style={{fontSize: 14, fontWeight: 600}}>Уточнення класу наслідків</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>{obj.code} · {obj.name}</div>
          </div>
        </div>

        <div style={{flex: 1, overflowY: "auto", padding: "22px 26px"}}>
          {/* Вибір класу */}
          <div className="cc-field">
            <label className="cc-field-label">Клас наслідків за розрахунком</label>
            <div className="cc-grade-pick">
              {["СС1", "СС2", "СС3"].map(g => (
                <button key={g}
                  className={`cc-grade-opt ${grade === g ? "is-on" : ""}`}
                  onClick={() => setGrade(g)}>
                  {g}
                </button>
              ))}
            </div>
            {grade === "СС1" && (
              <label className="cc-check">
                <input type="checkbox" checked={complexTechno} onChange={(e) => setComplexTechno(e.target.checked)} />
                <span>Складні техногенні умови (сейсмічність, зсуви, підтоплення) — потрібна експертиза МОС</span>
              </label>
            )}
          </div>

          <div className="cc-field">
            <label className="cc-field-label">Підстава <span style={{color: "var(--c-late, #c0392b)"}}>*</span></label>
            <input className="cp-input" type="text" value={basis} onChange={(e) => setBasis(e.target.value)}
              placeholder="Напр.: Розрахунок за ДБН А.2.2-3, додано підземний паркінг" autoFocus />
          </div>

          {/* Прев'ю наслідків */}
          <div className="cc-preview">
            <div className="cc-preview-h">Що зміниться у проєкті</div>

            {!gradeChanged && !scopeChanged && (
              <div className="cc-row-neutral">Клас і обсяг експертизи не змінюються.</div>
            )}

            {gradeChanged && (
              <div className="cc-change-row">
                <span className="cc-change-key">Клас наслідків</span>
                <span className="cc-change-from">{obj.grade}</span>
                <span className="cc-arrow">→</span>
                <span className="cc-change-to">{grade}</span>
              </div>
            )}

            {scopeChanged && (
              <div className="cc-change-row">
                <span className="cc-change-key">Обсяг експертизи</span>
                <span className="cc-change-from">{SC[oldScope]?.label || "—"}</span>
                <span className="cc-arrow">→</span>
                <span className="cc-change-to">{SC[newScope]?.label || "—"}</span>
              </div>
            )}

            {added.length > 0 && (
              <div className="cc-delta-group is-add">
                <div className="cc-delta-title">Додаються задачі ({added.length})</div>
                {added.map(t => (
                  <div key={t.id} className="cc-delta-item">
                    <span className="cc-delta-sign">+</span>
                    <span><window.Ico e={t.icon} /> {t.title}</span>
                    <span className="doc-type" style={{marginLeft: "auto"}}>{t.section}</span>
                  </div>
                ))}
              </div>
            )}

            {removed.length > 0 && (
              <div className="cc-delta-group is-remove">
                <div className="cc-delta-title">Стають необов'язковими ({removed.length})</div>
                {removed.map(t => (
                  <div key={t.id} className="cc-delta-item">
                    <span className="cc-delta-sign">−</span>
                    <span><window.Ico e={t.icon} /> {t.title}</span>
                    <span className="doc-type" style={{marginLeft: "auto"}}>{t.section}</span>
                  </div>
                ))}
                <div className="cc-delta-note">Не видаляються автоматично — позначаються як необов'язкові, рішення за ГІПом.</div>
              </div>
            )}

            {(gradeChanged || scopeChanged) && (
              <div className="cc-safe">
                <window.Icon.Check />
                <span>Вже зроблена робота зберігається{doneCount > 0 ? ` (${doneCount} ${window.plural(doneCount, "виконана задача", "виконані задачі", "виконаних задач")} експертизи)` : ""}. Перестворення проєкту не відбувається.</span>
              </div>
            )}
          </div>
        </div>

        <div className="report-toolbar" style={{borderTop: "1px solid var(--line)", borderBottom: "none", justifyContent: "flex-end", gap: 8}}>
          <button className="btn" onClick={onClose}>Скасувати</button>
          <button className="btn btn-primary" disabled={!canConfirm}
            style={!canConfirm ? {opacity: 0.5, pointerEvents: "none"} : {}}
            onClick={submit}>
            Підтвердити зміну
          </button>
        </div>
      </div>
    </>
  );
}
window.ConsequenceClassModal = ConsequenceClassModal;