// donor-act.jsx — Акт за шаблоном донора (PIN / Екоклуб).
// Формується з виконаних задач проєкту (коментар = рядок акта, нотатка = опис),
// + скріншоти у «Описовому звіті». Виконавець — ФОП, Замовник — ГО, без ПДВ.
// Завантажувати ПІСЛЯ invoice-template.jsx (потрібен window.moneyInWords) і image-slot.js.

(function () {
  const MONTHS_GEN = ["січня", "лютого", "березня", "квітня", "травня", "червня",
    "липня", "серпня", "вересня", "жовтня", "листопада", "грудня"];
  const fullDateUA = (iso) => {
    if (!iso) return null;
    const d = new Date(iso + "T00:00:00");
    if (isNaN(d)) return iso;
    return `«${String(d.getDate()).padStart(2, "0")}» ${MONTHS_GEN[d.getMonth()]} ${d.getFullYear()} р.`;
  };
  const ddmm = (iso) => {
    if (!iso) return "";
    const d = new Date(iso + "T00:00:00");
    if (isNaN(d)) return iso;
    return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth() + 1).padStart(2, "0")}`;
  };
  const money2 = (n) => Number(n || 0).toLocaleString("uk-UA", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  // ════════════ БІЛДЕР АКТА ════════════
  function DonorActBuilder({ project, onClose, onOpenDoc }) {
    const seed = project.actSeed || {};
    const SYS = window.SYS_DATE || "2026-05-29";
    const [hdr, setHdr] = React.useState({
      no: seed.no || "1",
      date: seed.date || SYS,
      place: seed.place || "Рівне",
      contractNo: seed.contractNo || project.number || "",
      contractDate: seed.contractDate || (project.contract && project.contract.date) || project.start || "",
      amount: seed.amount != null ? String(seed.amount) : "",
    });
    const up = (k, v) => setHdr(p => ({ ...p, [k]: v }));

    // Послуги — з виконаних задач проєкту
    const doneTasks = (project.tasks || []).filter(t => t.status === "done");
    const [items, setItems] = React.useState(
      doneTasks.map(t => ({ id: t.id, include: true, text: t.title, date: t.actDate || "", desc: t.note || "" }))
    );
    const setItem = (id, patch) => setItems(prev => prev.map(it => it.id === id ? { ...it, ...patch } : it));
    const addItem = () => setItems(prev => [...prev, { id: "ai-" + Math.random().toString(36).slice(2, 6), include: true, text: "", date: "", desc: "" }]);
    const removeItem = (id) => setItems(prev => prev.filter(it => it.id !== id));

    React.useEffect(() => {
      const onKey = (e) => e.key === "Escape" && onClose();
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [onClose]);

    const chosen = items.filter(it => it.include && it.text.trim());
    const build = () => {
      const partner = window.getNgoPartner(project.partner);
      onOpenDoc({
        no: hdr.no, dateISO: hdr.date, place: hdr.place,
        contractNo: hdr.contractNo, contractDateISO: hdr.contractDate,
        amount: Number(hdr.amount) || 0,
        execEntity: project.execEntity,
        partner,
        services: chosen.map(it => ({ id: it.id, text: it.text.trim(), date: it.date, desc: it.desc.trim(), slotId: "actshot-" + project.id + "-" + it.id })),
      });
    };

    return (
      <React.Fragment>
        <div className="drawer-overlay" onClick={onClose}></div>
        <div className="report-modal" style={{ maxWidth: 720, inset: "auto", top: 30, bottom: "auto", maxHeight: "calc(100vh - 60px)", left: "50%", transform: "translateX(-50%)", width: "calc(100% - 48px)" }}>
          <div className="report-toolbar">
            <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
            <div className="nt-head-icon"><window.Ico name="clipboard" /></div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Акт за шаблоном донора · {window.getDonor(project.donor)?.name}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Послуги тягнуться з виконаних задач — відредагуйте за потреби</div>
            </div>
          </div>

          <div style={{ flex: 1, overflowY: "auto", padding: "20px 26px" }}>
            <div className="cp-grid">
              <div className="cp-row"><label className="cp-label">№ акта</label><input className="cp-input" value={hdr.no} onChange={e => up("no", e.target.value)} /></div>
              <div className="cp-row"><label className="cp-label">Дата акта</label><input className="cp-input" type="date" value={hdr.date} onChange={e => up("date", e.target.value)} /></div>
              <div className="cp-row"><label className="cp-label">№ договору</label><input className="cp-input" value={hdr.contractNo} onChange={e => up("contractNo", e.target.value)} /></div>
              <div className="cp-row"><label className="cp-label">Дата договору</label><input className="cp-input" type="date" value={hdr.contractDate} onChange={e => up("contractDate", e.target.value)} /></div>
              <div className="cp-row"><label className="cp-label">Місто</label><input className="cp-input" value={hdr.place} onChange={e => up("place", e.target.value)} /></div>
              <div className="cp-row"><label className="cp-label">Сума, ₴ (без ПДВ)</label><input className="cp-input" type="number" step="0.01" value={hdr.amount} onChange={e => up("amount", e.target.value)} placeholder="напр. 12466.20" /></div>
            </div>

            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "18px 0 8px" }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink)" }}>Перелік послуг ({chosen.length})</div>
              <button className="btn btn-sm" onClick={addItem}><window.Icon.Plus /> Додати рядок</button>
            </div>
            <div className="dact-items">
              {items.map(it => (
                <div key={it.id} className={`dact-item ${it.include ? "" : "is-off"}`}>
                  <label className="dact-chk" title="Включити в акт">
                    <input type="checkbox" checked={it.include} onChange={e => setItem(it.id, { include: e.target.checked })} />
                  </label>
                  <div className="dact-item-body">
                    <div className="dact-item-row">
                      <input className="cp-input" value={it.text} onChange={e => setItem(it.id, { text: e.target.value })} placeholder="Опис послуги (рядок акта)" style={{ flex: 1 }} />
                      <input className="cp-input" type="date" value={it.date} onChange={e => setItem(it.id, { date: e.target.value })} style={{ width: 150 }} title="Дата послуги" />
                      <button className="prj-row-del" onClick={() => removeItem(it.id)} title="Прибрати"><window.Ico name="x" size={13} /></button>
                    </div>
                    <input className="cp-input" value={it.desc} onChange={e => setItem(it.id, { desc: e.target.value })} placeholder="Опис для звіту (під скріншот)" style={{ width: "100%", marginTop: 6, fontSize: 12.5 }} />
                  </div>
                </div>
              ))}
            </div>

            <div className="hint-box" style={{ marginTop: 14 }}>
              У друкованій формі буде <b>Акт</b> + <b>Реквізити сторін</b> + <b>Описовий звіт</b>, де під кожною послугою — місце для скріншота (перетягніть зображення). Виконавець — <b>{window.COMPANY_FOP?.shortName}</b>, Замовник — <b>{window.getNgoPartner(project.partner)?.name}</b>, без ПДВ.
            </div>
          </div>

          <div className="report-foot" style={{ display: "flex", gap: 10, justifyContent: "flex-end", padding: "14px 26px", borderTop: "1px solid var(--line)" }}>
            <button className="btn btn-ghost" onClick={onClose}>Скасувати</button>
            <button className="btn btn-primary" disabled={!chosen.length} onClick={build}>Переглянути / друк</button>
          </div>
        </div>
      </React.Fragment>
    );
  }
  window.DonorActBuilder = DonorActBuilder;

  // ════════════ ДРУКОВАНА ФОРМА ════════════
  function DonorActPrintDoc({ model, onClose }) {
    React.useEffect(() => {
      const onKey = (e) => e.key === "Escape" && onClose();
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [onClose]);
    if (!model) return null;
    const fop = window.COMPANY_FOP || {};
    const r = (model.partner && model.partner.requisites) || {};
    const cust = model.partner || {};
    const words = model.amount > 0 ? window.moneyInWords(model.amount) : "";
    const doPrint = () => window.print();

    return (
      <React.Fragment>
        <DActStyles />
        <div className="dact-root">
          <div className="dact-backdrop" onClick={onClose}></div>
          <div className="dact-toolbar">
            <div className="dact-toolbar-title">Акт наданих послуг № {model.no} · шаблон донора</div>
            <div style={{ display: "flex", gap: 10 }}>
              <button className="btn" onClick={onClose}>Закрити</button>
              <button className="btn btn-primary" onClick={doPrint}><window.Icon.Check /> Друк / Зберегти PDF</button>
            </div>
          </div>

          <div className="dact-scroll">
            {/* ── СТОРІНКА 1: АКТ ── */}
            <div className="dact-sheet">
              <h1 className="dact-h1">Акт прийому-передачі наданих послуг №{model.no}</h1>
              <div className="dact-sub">за Договором № {model.contractNo || "____"} від {fullDateUA(model.contractDateISO) || "«__» ________ 20__ р."}</div>
              <div className="dact-place"><span>м. {model.place}, Україна</span><span>{fullDateUA(model.dateISO)}</span></div>

              <p className="dact-p">
                Ми, що нижче підписалися, представник Замовника – {r.fullName || cust.name} в особі {(r.directorRole || "керівника").toLowerCase()} {r.director || "________"}, що діє на підставі {r.basis || "Статуту"} (далі – Замовник), з одного боку та фізична особа-підприємець {fop.directorFull} (далі – Виконавець), що діє на підставі запису про проведення державної реєстрації в Єдиному державному реєстрі юридичних осіб, фізичних осіб-підприємців та громадських формувань № {fop.edrRecord || "________"} від {fop.edrDate ? fullDateUA(fop.edrDate).replace(/[«»]/g, "").replace(" р.", " р.") : "________"} з іншого боку, разом «Сторони», уклали акт про те, що за умовами Договору № {model.contractNo || "____"} від {fullDateUA(model.contractDateISO) || "____"} Виконавцем були надані Замовнику послуги згідно умов договору:
              </p>

              <ul className="dact-services">
                {model.services.map(s => (
                  <li key={s.id}>{s.text}{s.date ? `, ${ddmm(s.date)}` : ""}</li>
                ))}
              </ul>

              <p className="dact-p">Детальний перелік та опис виконаних робіт наведено в Описовому звіті про надані послуги до Акту здачі-приймання наданих послуг № {model.no} від {fullDateUA(model.dateISO)} за Договором № {model.contractNo || "____"} від {fullDateUA(model.contractDateISO) || "____"}.</p>

              <p className="dact-p"><b>Вартість послуг за Актом виконаних робіт становить {money2(model.amount)} грн ({words}) без ПДВ.</b></p>

              <p className="dact-p">Підписанням даного Акту Сторони засвідчують, що Виконавець надав послуги відповідно до умов Договору, а Замовник прийняв та оплатив. Сторони претензій одна до одної не мають.</p>

              {/* Реквізити сторін */}
              <div className="dact-req-h">Реквізити сторін:</div>
              <div className="dact-req">
                <div className="dact-req-col">
                  <div className="dact-req-role">Виконавець</div>
                  <div className="dact-req-name">Фізична особа-підприємець {fop.directorFull}</div>
                  <div className="dact-req-line">{fop.address}</div>
                  <div className="dact-req-line">ІПН: {fop.edrpou}</div>
                  <div className="dact-req-line">тел. {fop.phone}</div>
                  <div className="dact-req-line mono">IBAN {fop.iban}</div>
                  <div className="dact-req-line">в {fop.bank}, МФО {fop.mfo}</div>
                  <div className="dact-req-line">E-mail: {fop.email}</div>
                  <div className="dact-sign">
                    <div>Фізична особа-підприємець</div>
                    <div className="dact-sign-row"><span className="dact-sign-slot"></span><span>{fop.directorSign || "М.І. Підкапка"}</span></div>
                    <div className="dact-stamp">б.п.</div>
                  </div>
                </div>
                <div className="dact-req-col">
                  <div className="dact-req-role">Замовник</div>
                  <div className="dact-req-name">{r.fullName || cust.name}</div>
                  <div className="dact-req-line">{r.address}</div>
                  {r.addressFact && <div className="dact-req-line">Фактична адреса: {r.addressFact}</div>}
                  <div className="dact-req-line">ЄДРПОУ: {r.edrpou || cust.edrpou}</div>
                  <div className="dact-req-line mono">IBAN: {r.iban}</div>
                  <div className="dact-req-line">в {r.bank}</div>
                  <div className="dact-req-line">E-mail: {r.email}</div>
                  <div className="dact-sign">
                    <div>{r.directorRole || "Керівник"}</div>
                    <div className="dact-sign-row"><span className="dact-sign-slot"></span><span>{r.directorShort || "________"}</span></div>
                    <div className="dact-stamp">м.п.</div>
                  </div>
                </div>
              </div>
            </div>

            {/* ── СТОРІНКА 2+: ОПИСОВИЙ ЗВІТ ── */}
            <div className="dact-sheet">
              <h2 className="dact-h2">Описовий звіт про надані послуги</h2>
              <div className="dact-sub">до Акту здачі-приймання наданих послуг № {model.no} від {fullDateUA(model.dateISO)}<br />за Договором № {model.contractNo || "____"} від {fullDateUA(model.contractDateISO) || "____"}</div>
              <p className="dact-p">У рамках послуг за Актом здачі-приймання наданих послуг № {model.no} від {fullDateUA(model.dateISO)} мною, {fop.directorFull}, були надані наступні послуги:</p>

              <div className="dact-report">
                {model.services.map((s, i) => (
                  <div key={s.id} className="dact-rep-item">
                    <div className="dact-rep-title">• {s.text}{s.date ? `, ${ddmm(s.date)}.` : "."}</div>
                    {s.desc && <div className="dact-rep-desc">{s.desc}</div>}
                    <image-slot id={s.slotId} shape="rect" placeholder="Перетягніть скріншот" style={{ display: "block", width: "100%", height: "220px", marginTop: "8px" }}></image-slot>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
  window.DonorActPrintDoc = DonorActPrintDoc;

  function DActStyles() {
    return (
      <style>{`
        .dact-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; }
        .dact-backdrop { position: absolute; inset: 0; background: rgba(4,18,26,0.55); backdrop-filter: blur(2px); }
        .dact-toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
          gap: 16px; padding: 12px 20px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
        .dact-toolbar-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
        .dact-scroll { position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; padding: 28px 20px 60px;
          display: flex; flex-direction: column; align-items: center; gap: 24px; }
        .dact-sheet { width: 210mm; max-width: 100%; min-height: 297mm; background: #fff; color: #14181c;
          padding: 18mm 18mm 16mm; box-shadow: 0 18px 50px rgba(0,0,0,0.32); box-sizing: border-box;
          font-family: "PT Serif", Georgia, "Times New Roman", serif; line-height: 1.5; font-size: 12.5px; }
        .dact-sheet .mono { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; word-break: break-all; }
        .dact-h1 { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 4px; }
        .dact-h2 { font-size: 15px; font-weight: 700; text-align: center; margin: 0 0 4px; }
        .dact-sub { font-size: 12px; text-align: center; color: #2c343a; margin-bottom: 16px; }
        .dact-place { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 14px; }
        .dact-p { margin: 0 0 11px; text-align: justify; }
        .dact-services { margin: 0 0 12px; padding-left: 22px; }
        .dact-services li { margin-bottom: 4px; }
        .dact-req-h { font-weight: 700; margin: 18px 0 8px; }
        .dact-req { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
        .dact-req-role { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
        .dact-req-name { font-weight: 700; font-size: 12px; margin-bottom: 3px; text-wrap: pretty; }
        .dact-req-line { font-size: 11px; color: #2c343a; line-height: 1.45; }
        .dact-sign { margin-top: 12px; }
        .dact-sign-row { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0 2px; }
        .dact-sign-slot { flex: 1; border-bottom: 1px solid #14181c; height: 14px; max-width: 150px; }
        .dact-stamp { font-size: 11px; color: #6b7780; }
        .dact-report { margin-top: 8px; }
        .dact-rep-item { margin-bottom: 16px; break-inside: avoid; }
        .dact-rep-title { font-weight: 600; margin-bottom: 3px; }
        .dact-rep-desc { font-size: 12px; color: #2c343a; margin-bottom: 4px; }
        @media print {
          .dact-toolbar { display: none; }
          .dact-root { position: static; }
          .dact-backdrop { display: none; }
          .dact-scroll { padding: 0; display: block; }
          .dact-sheet { box-shadow: none; width: 100%; min-height: auto; page-break-after: always; padding: 0; }
        }
      `}</style>
    );
  }
})();