// project-procurement-tab.jsx — вкладка «План закупівель» у воркспейсі проєкту ГО.
// Рядки плану зберігаються у project.procurements (JSON) і персистяться через
// ProjectsStore.save() → PATCH /projects/{id}. Редагування — інлайн у таблиці.
//
// Авто-підказка процедури за порогами політики Екоклуб/PIN (курс USD→€ = 1.15):
//   < 2 500 €            → Проста закупівля
//   2 500 – 19 999 €     → Спрощена
//   20 000 – (100k/300k) → Переговорна
//   ≥ 100 000 € (посл/мат) / ≥ 300 000 € (роботи) → Тендер

(function () {
  const RATE = 1.15; // USD за 1 € (курс із затвердженого плану)

  // ── Тип закупівлі ──
  const TYPES = [
    { key: "Services", uk: "Послуги" },
    { key: "Works",    uk: "Роботи" },
    { key: "Goods",    uk: "Товари / Матеріали" },
  ];
  const typeUk = (t) => (TYPES.find(x => x.key === t) || {}).uk || t || "—";
  const isWorks = (t) => /work|роб/i.test(t || "");

  // ── Процедури (канонічні ключі + двомовні підписи) ──
  const PROC = {
    simple:     { en: "Simple purchase",          uk: "Проста закупівля", tone: "neutral" },
    simplified: { en: "Simplified procedure",     uk: "Спрощена",         tone: "blue" },
    negotiated: { en: "Negotiated procedure",     uk: "Переговорна",      tone: "amber" },
    tender:     { en: "Open International Tender", uk: "Тендер",           tone: "violet" },
  };
  const PROC_ORDER = ["simple", "simplified", "negotiated", "tender"];
  function procKey(s) {
    s = (s || "").toLowerCase();
    if (s.includes("tender") || s.includes("тендер")) return "tender";
    if (s.includes("negoti") || s.includes("перегов")) return "negotiated";
    if (s.includes("simplif") || s.includes("спрощ")) return "simplified";
    if (s.includes("simple") || s.includes("прост")) return "simple";
    return null;
  }
  // Рекомендована процедура за вартістю USD і типом
  function recommend(type, usd) {
    if (usd === "" || usd == null) return null;
    const v = Number(usd);
    if (isNaN(v)) return null;
    const eur = v / RATE;
    const hi = isWorks(type) ? 300000 : 100000;
    if (eur < 2500) return "simple";
    if (eur < 20000) return "simplified";
    if (eur < hi) return "negotiated";
    return "tender";
  }

  // ── Статуси (відомі — кольоровий чип; решта — звичайний текст) ──
  const STAT_TONE = {
    "Заплановано": "neutral", "В процесі": "amber", "Оновлення дат": "amber",
    "Виконано": "live", "Завершено": "live",
    "Попередньо скасовано": "neutral", "Скасовано": "late",
  };
  const STAT_OPTS = ["Заплановано", "В процесі", "Оновлення дат", "Виконано", "Попередньо скасовано", "Скасовано"];

  const fmtUsd = (v) => (v === "" || v == null || isNaN(Number(v))) ? "—"
    : "$" + Number(v).toLocaleString("uk-UA", { maximumFractionDigits: 0 });

  // textarea, що автоматично росте під увесь текст (щоб назва не обрізалась)
  function AutoTextarea(props) {
    const ref = React.useRef(null);
    const fit = (el) => { if (el) { el.style.height = "auto"; el.style.height = el.scrollHeight + "px"; } };
    React.useLayoutEffect(() => { fit(ref.current); });
    return <textarea {...props} ref={ref} onInput={e => fit(e.target)} />;
  }

  function ProcurementTab({ project, role, onChange }) {
    const canEdit = role === "director"; // тільки директор (рішення: доступ лише директорці)
    const [rows, setRows] = React.useState(() =>
      (project.procurements || []).map(r => ({ ...r })));
    const [showHint, setShowHint] = React.useState(true);
    const [libOpen, setLibOpen] = React.useState(false);
    const [formsIdx, setFormsIdx] = React.useState(null);

    // Записати локальні рядки у проєкт і персистити
    const commit = (next) => {
      project.procurements = next.map(r => ({ ...r }));
      onChange && onChange();
    };
    const setField = (id, field, val) =>
      setRows(prev => prev.map(r => r.id === id ? { ...r, [field]: val } : r));
    const save = () => commit(rows);

    const addRow = () => {
      const n = { id: "pr-" + Math.random().toString(36).slice(2, 7), title: "", budgetLine: "",
        type: "Services", valueUsd: "", procedure: "", startDate: "", needDate: "", status: "Заплановано", note: "" };
      const next = [...rows, n];
      setRows(next); commit(next);
    };
    const removeRow = (id) => {
      if (!window.confirm("Видалити рядок плану закупівель?")) return;
      const next = rows.filter(r => r.id !== id);
      setRows(next); commit(next);
    };
    const saveRowPatch = (patch) => {
      const next = rows.map((r, i) => i === formsIdx ? { ...r, ...patch } : r);
      setRows(next); commit(next);
    };

    // ── Зведення ──
    const totalUsd = rows.reduce((a, r) => a + (Number(r.valueUsd) || 0), 0);
    const active = rows.filter(r => !/скасов/i.test(r.status || ""));
    const mismatches = rows.filter(r => {
      const rec = recommend(r.type, r.valueUsd);
      const cur = procKey(r.procedure);
      return rec && cur && rec !== cur;
    });
    const byProc = {};
    rows.forEach(r => { const k = procKey(r.procedure); if (k) byProc[k] = (byProc[k] || 0) + 1; });

    const COLS = 10;

    return (
      <div className="prj-procurement">
        <div className="hint-box" style={{ marginTop: 0 }}>
          <b>План закупівель.</b> Затверджений ПІН попередній план закупівель проєкту.
          {canEdit && <> Поля редагуються прямо в таблиці — дати, вартість, процедуру і статус.</>}
          {" "}Колонка «Процедура» підсвічує рекомендацію за порогами політики (курс USD→€ {RATE}).
        </div>

        {/* Зведення */}
        <div className="kpi-row" style={{ marginBottom: 14 }}>
          <div className="kpi"><div className="kpi-label">Позицій плану</div><div className="kpi-value">{rows.length}</div><div className="kpi-sub">{active.length} активних</div></div>
          <div className="kpi"><div className="kpi-label">Орієнтовна вартість</div><div className="kpi-value">{fmtUsd(totalUsd)}</div><div className="kpi-sub">сума по позиціях</div></div>
          <div className="kpi"><div className="kpi-label">За процедурами</div><div className="kpi-value" style={{ fontSize: 15, fontWeight: 600 }}>{PROC_ORDER.filter(k => byProc[k]).map(k => `${byProc[k]} ${PROC[k].uk.toLowerCase()}`).join(" · ") || "—"}</div></div>
          <div className={`kpi ${mismatches.length ? "is-warn" : ""}`}><div className="kpi-label">Розбіжності процедури</div><div className="kpi-value">{mismatches.length}</div><div className="kpi-sub">{mismatches.length ? "не збігається з порогом" : "усе за порогами"}</div></div>
        </div>

        <div className="toolbar" style={{ marginBottom: 8 }}>
          <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--ink-2)", cursor: "pointer" }}>
            <input type="checkbox" checked={showHint} onChange={e => setShowHint(e.target.checked)} />
            Підказка процедури за порогами
          </label>
          <div style={{ flex: 1 }}></div>
          {window.ProcurementCriteriaLibrary && <button className="btn btn-sm" onClick={() => setLibOpen(true)}>Критерії оцінки</button>}
        </div>

        <div style={{ overflowX: "auto" }}>
          <table className="data-table proc-table">
            <thead>
              <tr>
                <th style={{ width: 36 }}>№</th>
                <th style={{ minWidth: 240 }}>Закупівля</th>
                <th style={{ width: 130 }}>Бюджетна лінія</th>
                <th style={{ width: 110 }}>Тип</th>
                <th className="num-col" style={{ width: 110 }}>Вартість, $</th>
                <th style={{ width: 190 }}>Процедура</th>
                <th style={{ width: 130 }}>Старт</th>
                <th style={{ width: 130 }}>Потрібно до</th>
                <th style={{ width: 200 }}>Статус</th>
                <th style={{ width: 92 }}>Форми</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => {
                const rec = recommend(r.type, r.valueUsd);
                const cur = procKey(r.procedure);
                const mismatch = rec && cur && rec !== cur;
                const statTone = STAT_TONE[r.status];
                return (
                  <tr key={r.id} className={/скасов/i.test(r.status || "") ? "row-muted" : ""}>
                    <td className="td-mono" style={{ color: "var(--ink-3)" }}>{i + 1}</td>
                    {/* Закупівля */}
                    <td>
                      {canEdit
                        ? <AutoTextarea className="proc-ta" value={r.title} placeholder="Назва закупівлі"
                            onChange={e => setField(r.id, "title", e.target.value)} onBlur={save} />
                        : <span style={{ fontWeight: 500 }}>{r.title}</span>}
                    </td>
                    {/* Бюджетна лінія */}
                    <td>
                      {canEdit
                        ? <input className="proc-in" value={r.budgetLine || ""} placeholder="—"
                            onChange={e => setField(r.id, "budgetLine", e.target.value)} onBlur={save} />
                        : <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{r.budgetLine}</span>}
                    </td>
                    {/* Тип */}
                    <td>
                      {canEdit
                        ? <select className="proc-in" value={r.type || "Services"}
                            onChange={e => { setField(r.id, "type", e.target.value); }} onBlur={save}>
                            {TYPES.map(t => <option key={t.key} value={t.key}>{t.uk}</option>)}
                          </select>
                        : <span style={{ fontSize: 12.5 }}>{typeUk(r.type)}</span>}
                    </td>
                    {/* Вартість USD */}
                    <td className="num-col">
                      {canEdit
                        ? <input className="proc-in num-col" type="number" value={r.valueUsd ?? ""} placeholder="—"
                            onChange={e => setField(r.id, "valueUsd", e.target.value === "" ? "" : Number(e.target.value))} onBlur={save} />
                        : <span className="num-bold">{fmtUsd(r.valueUsd)}</span>}
                    </td>
                    {/* Процедура + підказка */}
                    <td>
                      {canEdit
                        ? <select className="proc-in" value={cur || ""}
                            onChange={e => { setField(r.id, "procedure", e.target.value ? PROC[e.target.value].en : ""); }} onBlur={save}>
                            <option value="">— не задано —</option>
                            {PROC_ORDER.map(k => <option key={k} value={k}>{PROC[k].uk}</option>)}
                          </select>
                        : <span className={`status-tag tone-${cur ? PROC[cur].tone : "neutral"}`}>{cur ? PROC[cur].uk : "—"}</span>}
                      {showHint && rec && (
                        <div className={`proc-hint ${mismatch ? "is-warn" : "is-ok"}`} title={mismatch ? "Не збігається з рекомендацією за порогом" : "Відповідає порогу"}>
                          {mismatch ? "▲ за порогом: " : "✓ "}{PROC[rec].uk}
                        </div>
                      )}
                    </td>
                    {/* Дати */}
                    <td>
                      {canEdit
                        ? <input className="proc-in" type="date" value={r.startDate || ""}
                            onChange={e => setField(r.id, "startDate", e.target.value)} onBlur={save} />
                        : <span className="td-mono" style={{ fontSize: 12 }}>{r.startDate ? window.formatDate(r.startDate) : "—"}</span>}
                    </td>
                    <td>
                      {canEdit
                        ? <input className="proc-in" type="date" value={r.needDate || ""}
                            onChange={e => setField(r.id, "needDate", e.target.value)} onBlur={save} />
                        : <span className="td-mono" style={{ fontSize: 12 }}>{r.needDate ? window.formatDate(r.needDate) : "—"}</span>}
                    </td>
                    {/* Статус */}
                    <td>
                      {canEdit
                        ? <React.Fragment>
                            <input className="proc-in" list="proc-stat-opts" value={r.status || ""} placeholder="—"
                              onChange={e => setField(r.id, "status", e.target.value)} onBlur={save} />
                          </React.Fragment>
                        : (statTone
                            ? <span className={`status-tag tone-${statTone}`}>{r.status}</span>
                            : <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{r.status || "—"}</span>)}
                    </td>
                    <td>
                      <div className="proc-actions">
                        <button className="proc-form-btn" title="Пакет документів закупівлі" onClick={() => setFormsIdx(i)}>Форми{(r.prf || (r.case && (r.case.bidders || []).length)) ? " ✓" : ""}</button>
                        {canEdit && <button className="prj-row-del" title="Видалити рядок" onClick={() => removeRow(r.id)}><window.Icon.X /></button>}
                      </div>
                    </td>
                  </tr>
                );
              })}
              {rows.length === 0 && <tr><td colSpan={COLS}><div className="empty" style={{ padding: "10px 0" }}>План закупівель порожній.</div></td></tr>}
            </tbody>
          </table>
        </div>
        <datalist id="proc-stat-opts">{STAT_OPTS.map(s => <option key={s} value={s} />)}</datalist>

        {canEdit && (
          <button className="btn btn-sm" style={{ marginTop: 12 }} onClick={addRow}><window.Icon.Plus /> Додати закупівлю</button>
        )}

        {libOpen && window.ProcurementCriteriaLibrary &&
          <window.ProcurementCriteriaLibrary onClose={() => setLibOpen(false)} project={project} role={role} />}

        {formsIdx != null && rows[formsIdx] && window.ProcurementFormsHub &&
          <window.ProcurementFormsHub row={rows[formsIdx]} planIndex={formsIdx} project={project} role={role}
            onSave={saveRowPatch} onClose={() => setFormsIdx(null)} />}
      </div>
    );
  }

  window.ProjectProcurementTab = ProcurementTab;
})();