// order-print.jsx — друкований бланк кадрового наказу (A4), верстка 1:1 за фірмовим
// зразком ТОВ «УКРБУДПРОЄКТ» (наказ ГІП): шапка з логотипом + контакти, зелена лінія,
// реєстраційний рядок, «НАКАЗ №» по центру, НАКАЗУЮ з нумерованими пунктами,
// підпис директорки + печатка, підвал з ТМ. Блок ознайомлення — на продовженні.
// Тіло редаговане (contentEditable). Авто-перенос на 2-гу сторінку за переповнення.

function OrderHeader({ co }) {
  return (
    <React.Fragment>
      <div className="onk-head">
        <img src="logo-horizontal-black.svg" alt={co.shortName} className="onk-logo" />
        <div className="onk-contacts">
          <div>тел. <b>{co.phone}</b></div>
          <div>{co.email} · {co.web}</div>
        </div>
      </div>
      <div className="onk-rule"></div>
      <div className="onk-reg">
        {co.fullName} · Код ЄДРПОУ {co.edrpou} · {co.address}
      </div>
    </React.Fragment>
  );
}

function OrderFooter({ co, page, total }) {
  return (
    <div className="onk-foot">
      <div className="onk-foot-l">
        <div>{co.tmText}</div>
        <div>{co.tmCert}</div>
      </div>
      <div className="onk-foot-c"><span className="onk-flag">🇺🇦</span> Слава Україні · Героям слава</div>
      <div className="onk-foot-r">стор. <b>{page}</b> з {total}</div>
    </div>
  );
}

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

  const co = window.COMPANY || {};
  const p = window.getTeam(order.personId) || { name: (order.f && order.f.name) || "" };
  const T = window.ORDER_TYPES[order.type] || {};
  const body = window.buildOrderBody(order);
  const titleText = (order.titleText) || (T.title ? T.title.charAt(0).toUpperCase() + T.title.slice(1) : "Наказ");
  const fioNom = window.declineFio(p.name, "nom");
  const dDot = (iso) => window.dateDots(iso);

  // Авто-перенос: вимірюємо контент 1-ї сторінки; якщо переповнює — ознайомлення на стор. 2
  const flowRef = React.useRef(null);
  const [twoPages, setTwoPages] = React.useState(false);
  React.useLayoutEffect(() => {
    const el = flowRef.current;
    if (!el) return;
    // корисна висота A4 за вирахуванням полів і підвалу ≈ 960px
    setTwoPages(el.scrollHeight > 952);
  }, [order]);

  const doPrint = () => window.print();

  const AckBlock = (
    <div className="onk-ack">
      <div className="onk-ack-h">З наказом ознайомлений(а):</div>
      <div className="onk-ack-grid">
        <div className="onk-ack-col">
          <div className="onk-ack-name">{fioNom}</div>
          <div className="onk-ack-line"></div>
          <div className="onk-ack-cap">(прізвище, ім'я, по батькові)</div>
        </div>
        <div className="onk-ack-col onk-ack-narrow">
          <div className="onk-ack-spacer"></div>
          <div className="onk-ack-line"></div>
          <div className="onk-ack-cap">підпис</div>
        </div>
        <div className="onk-ack-col onk-ack-narrow">
          <div className="onk-ack-date">{dDot(order.ackDate || order.date)}</div>
          <div className="onk-ack-line"></div>
          <div className="onk-ack-cap">дата</div>
        </div>
      </div>
    </div>
  );

  return (
    <React.Fragment>
      <OrderPrintStyles />
      <div className="onk-root">
        <div className="onk-backdrop" onClick={onClose}></div>

        <div className="onk-toolbar">
          <div className="onk-toolbar-title">Наказ № {order.no} · {T.label}</div>
          <div className="onk-toolbar-actions">
            <span className="onk-edit-hint">Текст можна редагувати перед друком</span>
            <button className="btn" onClick={onClose}>Закрити</button>
            <button className="btn btn-primary" onClick={doPrint}><window.Ico name="download" /> Друк / PDF</button>
          </div>
        </div>

        <div className="onk-scroll">
          {/* ───────── Сторінка 1 ───────── */}
          <div className="onk-sheet">
            <OrderHeader co={co} />

            <div className="onk-flow">
              <div className="onk-content" ref={flowRef}>
              <div className="onk-orderrow">
                <span className="onk-place">{co.city || "м. Одеса"}</span>
                <span className="onk-no">НАКАЗ №&nbsp;&nbsp;{order.no}</span>
                <span className="onk-date">від&nbsp;&nbsp;{dDot(order.date)}&nbsp;&nbsp;р.</span>
              </div>

              <div className="onk-title" contentEditable suppressContentEditableWarning>{titleText}</div>

              <p className="onk-preamble" contentEditable suppressContentEditableWarning>{body.preamble},</p>

              <div className="onk-nakazuyu">НАКАЗУЮ:</div>

              <ol className="onk-points">
                {body.points.map((pt, i) => (
                  <li key={i}><span className="onk-pt" contentEditable suppressContentEditableWarning>{pt}</span></li>
                ))}
              </ol>

              {body.basis && (
                <p className="onk-basis">
                  <span className="onk-basis-l">Підстава:</span>{" "}
                  <span contentEditable suppressContentEditableWarning>{body.basis}</span>
                </p>
              )}

              {/* Підпис */}
              <div className="onk-sign">
                <div className="onk-sign-l">
                  <div className="onk-sign-role">{co.directorRole} {co.shortName}</div>
                  <div className="onk-sign-basis">діє на підставі {co.directorBasis || "Статуту"} · м.п.</div>
                  <div className="onk-stamp" aria-hidden="true">
                    {co.stampImg ? <img src={co.stampImg} alt="" /> : <span>М.П.</span>}
                  </div>
                </div>
                <div className="onk-sign-r">
                  {co.signImg && <img className="onk-sign-img" src={co.signImg} alt="" />}
                  <div className="onk-sign-line"></div>
                  <div className="onk-sign-name">{co.directorSign || co.directorFull || co.director}</div>
                </div>
              </div>

              {/* Ознайомлення — на стор. 1, якщо вміщається */}
              {!twoPages && AckBlock}
              </div>
              <div className="onk-spacer"></div>
            </div>

            <OrderFooter co={co} page={1} total={twoPages ? 2 : 1} />
          </div>

          {/* ───────── Сторінка 2 (продовження) ───────── */}
          {twoPages && (
            <div className="onk-sheet onk-sheet-2">
              <div className="onk-cont">Продовження наказу № {order.no} від {dDot(order.date)} р.</div>
              {AckBlock}
              <OrderFooter co={co} page={2} total={2} />
            </div>
          )}
        </div>
      </div>
    </React.Fragment>
  );
}

function OrderPrintStyles() {
  return (
    <style>{`
      .onk-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; }
      .onk-backdrop { position: absolute; inset: 0; background: rgba(4,18,26,.55); backdrop-filter: blur(2px); }
      .onk-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); }
      .onk-toolbar-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
      .onk-toolbar-actions { display: flex; gap: 10px; align-items: center; }
      .onk-edit-hint { font-size: 11.5px; color: var(--ink-3); margin-right: 4px; }
      .onk-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; }

      .onk-sheet { width: 210mm; max-width: 100%; min-height: 297mm; background: #fff; color: #1a1a1a;
        padding: 14mm 18mm 12mm; box-shadow: 0 18px 50px rgba(0,0,0,.32); box-sizing: border-box;
        font-family: "PT Serif", "Times New Roman", Georgia, serif; line-height: 1.5; font-size: 12.5px;
        display: flex; flex-direction: column; }
      .onk-sheet [contenteditable]:focus { outline: 2px solid #bfe0cd; outline-offset: 2px; border-radius: 2px; }

      /* Шапка */
      .onk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
      .onk-logo { height: 30px; width: auto; }
      .onk-contacts { text-align: right; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 9px;
        color: #2c343a; line-height: 1.7; padding-top: 2px; white-space: nowrap; }
      .onk-contacts b { font-weight: 700; }
      .onk-rule { height: 2px; background: #068B49; margin: 9px 0 6px; border-radius: 1px; }
      .onk-reg { font-family: "Nunito Sans", system-ui, sans-serif; font-size: 8.6px; color: #3a444a;
        letter-spacing: .01em; line-height: 1.4; }

      .onk-flow { display: flex; flex-direction: column; flex: 1 1 auto; }
      .onk-content { display: flex; flex-direction: column; }
      .onk-spacer { flex: 1 1 auto; min-height: 12px; }

      /* Рядок наказу */
      .onk-orderrow { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 4px; font-size: 14px; }
      .onk-place { font-weight: 400; }
      .onk-no { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
      .onk-date { font-weight: 400; }

      .onk-title { font-style: italic; font-size: 13.5px; margin: 16px 0 18px; }

      .onk-preamble { margin: 0 0 6px; text-align: justify; text-indent: 2.2em; }
      .onk-nakazuyu { text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .12em; margin: 14px 0 14px; }

      .onk-points { list-style: none; counter-reset: onk; margin: 0; padding: 0; }
      .onk-points li { counter-increment: onk; position: relative; padding-left: 34px; margin-bottom: 12px; }
      .onk-points li::before { content: counter(onk) "."; position: absolute; left: 0; top: 0; width: 26px;
        text-align: right; font-weight: 700; }
      .onk-pt { display: block; text-align: justify; text-wrap: pretty; }

      .onk-basis { font-size: 11.5px; margin: 14px 0 0; text-align: justify; }
      .onk-basis-l { font-weight: 700; }

      /* Підпис */
      .onk-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 34px; }
      .onk-sign-l { position: relative; flex: 0 1 auto; padding-top: 10px; }
      .onk-sign-role { font-weight: 700; font-size: 12.5px; }
      .onk-sign-basis { font-family: "Nunito Sans", system-ui, sans-serif; font-size: 9.5px; color: #5a646a; margin-top: 3px; }
      .onk-stamp { position: absolute; left: 64px; top: -34px; width: 104px; height: 104px; border: 1.5px dashed #c4d2c9;
        border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9aa6ad; font-size: 11px;
        font-family: "Nunito Sans", system-ui, sans-serif; opacity: .8; pointer-events: none; }
      .onk-stamp img { width: 100%; height: 100%; object-fit: contain; }
      .onk-sign-r { flex: 0 0 auto; width: 250px; text-align: center; position: relative; }
      .onk-sign-img { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); height: 64px; }
      .onk-sign-line { border-bottom: 1px solid #1a1a1a; height: 28px; }
      .onk-sign-name { font-weight: 700; font-size: 13px; text-align: right; margin-top: 4px; }

      /* Ознайомлення */
      .onk-ack { margin-top: 30px; }
      .onk-ack-h { font-size: 12.5px; margin-bottom: 22px; }
      .onk-ack-grid { display: flex; align-items: flex-end; gap: 30px; }
      .onk-ack-col { flex: 1 1 auto; }
      .onk-ack-col.onk-ack-narrow { flex: 0 0 150px; }
      .onk-ack-name { font-weight: 700; font-size: 13px; padding-bottom: 3px; }
      .onk-ack-date { font-weight: 700; font-size: 13px; padding-bottom: 3px; text-align: center; }
      .onk-ack-spacer { height: 19px; }
      .onk-ack-line { border-bottom: 1px solid #1a1a1a; }
      .onk-ack-cap { font-family: "Nunito Sans", system-ui, sans-serif; font-size: 8.5px; color: #8a949a; margin-top: 3px; }
      .onk-ack-col.onk-ack-narrow .onk-ack-cap { text-align: center; }

      /* Продовження */
      .onk-cont { font-style: italic; font-size: 12.5px; margin-bottom: 30px; }

      /* Підвал */
      .onk-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between;
        gap: 16px; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 8px; color: #9aa6ad; }
      .onk-foot-l { line-height: 1.5; }
      .onk-foot-c { font-style: italic; white-space: nowrap; }
      .onk-flag { font-style: normal; }
      .onk-foot-r { white-space: nowrap; }
      .onk-foot-r b { color: #5a646a; }

      @media (max-width: 760px) { .onk-sheet { padding: 10mm; } .onk-ack-grid { flex-wrap: wrap; } }

      @media print {
        body * { visibility: hidden !important; }
        .onk-root, .onk-root * { visibility: visible !important; }
        .onk-root { position: absolute !important; inset: 0 !important; z-index: 9999; }
        .onk-backdrop, .onk-toolbar { display: none !important; }
        .onk-scroll { overflow: visible !important; padding: 0 !important; display: block !important; gap: 0 !important; }
        .onk-sheet { box-shadow: none !important; width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
        .onk-sheet-2 { break-before: page; page-break-before: always; }
        [contenteditable]:focus { outline: none !important; }
        @page { size: A4; margin: 16mm; }
      }
    `}</style>
  );
}

window.OrderPrintDoc = OrderPrintDoc;
