// edrpou-request.jsx — Запит до Держстату про відомості з ЄДРПОУ.
// Відтворення офіційної форми: рамкові таблиці з ФІКСОВАНОЮ розкладкою (table-layout:fixed)
// + перенесення тексту, щоб поля НЕ виходили за межі клітинок.
const EDR_FOOTNOTE = "Класифікації, а також посилання на Кодифікатор адміністративно-територіальних одиниць та територій територіальних громад, затверджений наказом Міністерства розвитку громад та територій України від 26 листопада 2020 року № 290 (в редакції наказу від 12 січня 2021 року № 3), розміщені на офіційному вебсайті Держстату (www.ukrstat.gov.ua) у розділі «Методологія та класифікатори».";

function EdrCell({ cap, children, minH }) {
  const def = (children === 0 || children) ? String(children) : "";
  return (
    <div className="er-cellwrap">
      <textarea className="er-fill" rows={1} defaultValue={def} style={minH ? { minHeight: minH } : null} />
      {cap ? <div className="er-cap">{cap}</div> : null}
    </div>
  );
}

function EdrChk({ on, toggle }) {
  return <span className={"er-chk" + (on ? " is-on" : "")} onClick={toggle}>{on ? "✓" : ""}</span>;
}

// Набір категорій (спільний для розділів 1 і 2)
function EdrCategories({ withSubject }) {
  const row = (label, cap) => (
    <tr>
      <td className="er-lbl">{label}</td>
      <td className="er-val"><EdrCell cap={cap} /></td>
    </tr>
  );
  return (
    <table className="er-tbl er-cats">
      <colgroup><col style={{ width: "34%" }} /><col style={{ width: "66%" }} /></colgroup>
      <tbody>
        {withSubject && (
          <tr>
            <td className="er-lbl">найменування суб’єкта</td>
            <td className="er-val"><EdrCell cap="(найменування юридичної особи або відокремленого підрозділу)" /></td>
          </tr>
        )}
        {row("організаційно-правова форма", "(код або назва)")}
        {row("територіальна належність", "(код або назва)")}
        {row("місцезнаходження", "(адреса)")}
        {row("вид економічної діяльності", "(код або назва)")}
        {row("за період / станом на", "(зазначте)")}
        <tr>
          <td className="er-lbl" rowSpan={2}>реєстраційні відомості:</td>
          <td className="er-val"><div className="er-inline"><span className="er-sub">створення</span><EdrCell cap="(зазначте дату або період)" /></div></td>
        </tr>
        <tr>
          <td className="er-val"><div className="er-inline"><span className="er-sub">припинення</span><EdrCell cap="(зазначте дату або період)" /></div></td>
        </tr>
      </tbody>
    </table>
  );
}

function EdrpouRequestDoc({ onClose }) {
  const co = window.COMPANY || {};
  const today = (window.dateDots && window.SYS_DATE) ? window.dateDots(window.SYS_DATE) : "";
  // За замовчуванням — запит витягу щодо власної юр.особи, надання й рахунок е-поштою.
  const [chk, setChk] = React.useState({ s3jur: true, dEl: true, bEl: true });
  const t = (k) => setChk((s) => ({ ...s, [k]: !s[k] }));
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  const Box = (k) => <EdrChk on={!!chk[k]} toggle={() => t(k)} />;

  const SecBar = ({ n, title }) => (
    <div className="er-secbar">{n}. {title} <span className="er-secbar-hint">(зазначте)</span></div>
  );
  const TwoChoice = (a, b, ka, kb) => (
    <table className="er-tbl er-choice">
      <colgroup><col style={{ width: "50%" }} /><col style={{ width: "50%" }} /></colgroup>
      <tbody><tr>
        <td>{Box(ka)} {a}</td>
        <td>{Box(kb)} {b}</td>
      </tr></tbody>
    </table>
  );

  return (
    <React.Fragment>
      <EdrpouStyles />
      <div className="er-root">
        <div className="er-backdrop" onClick={onClose}></div>
        <div className="er-toolbar">
          <div className="er-toolbar-title">Запит до Держстату · відомості з ЄДРПОУ</div>
          <div className="er-toolbar-actions">
            <span className="er-edit-hint">Натисніть клітинку, щоб вписати · ✓ — відмітити</span>
            <button className="btn" onClick={onClose}>Закрити</button>
            <button className="btn btn-primary" onClick={() => window.print()}><window.Ico name="download" /> Друк / PDF</button>
          </div>
        </div>
        <div className="er-scroll">
          <div className="er-a4">
            {/* ── ШАПКА ── */}
            {/* ── ФІРМОВИЙ БЛАНК ── */}
            <div className="er-blank">
              <div className="er-blank-head">
                <img className="er-blank-logo" src="logo-horizontal-black.svg" alt={co.shortName} />
                <div className="er-blank-contacts">тел. <b>{co.phone}</b><br />{co.email ? <b>{co.email}</b> : null}</div>
              </div>
              <div className="er-blank-reg"><b>{co.fullName}</b> &nbsp;·&nbsp; Код ЄДРПОУ {co.edrpou} &nbsp;·&nbsp; {co.address}</div>
            </div>

            {/* ── вих.№ / дата / кому — у стилі нашого бланку ── */}
            <div className="er-meta">
              <div className="er-out">
                <div className="er-out-lbl">Вих. №</div><input className="er-out-fill" type="text" defaultValue="" />
                <div className="er-out-lbl">від</div><input className="er-out-fill" type="text" defaultValue={today} />
              </div>
              <div className="er-to">
                <div className="er-to-lbl">Кому</div>
                <textarea className="er-to-area" rows={3} defaultValue={"Головному управлінню статистики\nв Одеській області\n65026, м. Одеса, вул. Польська, 20а"} />
              </div>
            </div>

            <div className="er-title">Запит<br />про надання відомостей з Єдиного державного реєстру<br />підприємств та організацій України</div>
            <div className="er-lead">Прошу надати відомості з Реєстру у вигляді:</div>

            {/* ── РОЗДІЛ 1 ── */}
            <SecBar n="1" title="ДАНИХ ЩОДО КІЛЬКОСТІ СУБ’ЄКТІВ РЕЄСТРУ" />
            {TwoChoice("юридичних осіб", "відокремлених підрозділів юридичних осіб", "s1jur", "s1vp")}
            <div className="er-note">інформація щодо яких відповідає таким категоріям даних: <i>(зазначте категорію або сукупність цих категорій)</i></div>
            <EdrCategories />
            <div className="er-foot">{EDR_FOOTNOTE}</div>

            {/* ── РОЗДІЛ 2 ── */}
            <SecBar n="2" title="ДАНИХ ЩОДО ПЕРЕЛІКУ СУБ’ЄКТІВ РЕЄСТРУ" />
            {TwoChoice("юридичних осіб", "відокремлених підрозділів юридичних осіб", "s2jur", "s2vp")}
            <div className="er-note">інформація щодо яких відповідає таким категоріям даних: <i>(зазначте категорію або сукупність цих категорій)</i></div>
            <EdrCategories withSubject />
            <div className="er-foot">{EDR_FOOTNOTE}</div>

            {/* ── РОЗДІЛ 3 ── */}
            <SecBar n="3" title="ДАНИХ ЩОДО СУБ’ЄКТА" />
            {TwoChoice("юридичної особи", "відокремленого підрозділу юридичної особи", "s3jur", "s3vp")}
            <table className="er-tbl er-subj">
              <colgroup><col style={{ width: "28%" }} /><col style={{ width: "72%" }} /></colgroup>
              <tbody>
                {[0, 1, 2, 3, 4, 5].map((i) => (
                  <tr key={i}>
                    <td className="er-val"><EdrCell cap="(код за ЄДРПОУ)">{i === 0 ? co.edrpou : ""}</EdrCell></td>
                    <td className="er-val"><EdrCell cap="(найменування юридичної особи або відокремленого підрозділу)">{i === 0 ? (co.fullName || co.shortName) : ""}</EdrCell></td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="er-foot">Інформація за встановленою формою наводиться незалежно від кількості даних щодо суб’єкта.</div>

            {/* ── СПОСІБ НАДАННЯ ── */}
            <div className="er-note er-strong">Інформацію прошу надати:</div>
            <table className="er-tbl er-deliver">
              <colgroup><col style={{ width: "26%" }} /><col style={{ width: "74%" }} /></colgroup>
              <tbody>
                <tr><td>{Box("dPaper")} паперова</td>
                    <td><div className="er-inline"><span>поштою за наведеною адресою:</span><EdrCell cap="(адреса)" /></div>
                        <div className="er-inline"><span>особисто в руки</span><EdrCell cap="(прізвище, ім’я, по батькові)" /></div></td></tr>
                <tr><td>{Box("dEl")} електронна</td>
                    <td><div className="er-inline"><span>електронною поштою на адресу:</span><EdrCell cap="(електронна адреса)">{co.email}</EdrCell></div></td></tr>
              </tbody>
            </table>
            <div className="er-foot">Отриману інформацію зобов’язуюсь повністю або частково не тиражувати та не розповсюджувати без погодження з територіальним органом Держстату.</div>

            <div className="er-note er-strong">Рахунок на оплату послуг прошу:</div>
            <table className="er-tbl er-deliver">
              <colgroup><col style={{ width: "40%" }} /><col style={{ width: "60%" }} /></colgroup>
              <tbody>
                <tr><td>{Box("bHand")} надати особисто в руки</td><td><EdrCell cap="(прізвище, ім’я, по батькові)" /></td></tr>
                <tr><td>{Box("bEl")} направити в електронній формі</td><td><EdrCell cap="(електронна адреса)">{co.email}</EdrCell></td></tr>
              </tbody>
            </table>

            {/* ── ПІДПИС ── */}
            <table className="er-tbl er-sign">
              <colgroup><col style={{ width: "30%" }} /><col style={{ width: "30%" }} /><col style={{ width: "40%" }} /></colgroup>
              <tbody>
                <tr>
                  <td><EdrCell cap="(дата)">{today}</EdrCell></td>
                  <td><EdrCell cap="(підпис)" /></td>
                  <td><EdrCell cap="(Власне ім’я ПРІЗВИЩЕ)">{co.directorSign || ""}</EdrCell></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.EdrpouRequestDoc = EdrpouRequestDoc;

function EdrpouStyles() {
  return (
    <style>{`
      .er-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
        --ink:#161B29; --line:#222; }
      .er-backdrop { position: absolute; inset: 0; background: rgba(4,18,26,.55); backdrop-filter: blur(2px); }
      .er-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); }
      .er-toolbar-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
      .er-toolbar-actions { display: flex; gap: 10px; align-items: center; }
      .er-edit-hint { font-size: 11.5px; color: #6b7280; margin-right: 4px; }
      .er-scroll { position: relative; z-index: 1; flex: 1 1 auto; overflow: auto; padding: 24px 20px 60px; }

      .er-a4 { width: 794px; min-height: 1123px; margin: 0 auto; background: #fff; color: #161B29; box-sizing: border-box;
        padding: 14mm 14mm 12mm; box-shadow: 0 18px 50px rgba(0,0,0,.30);
        font-family: "Times New Roman","PT Serif",Georgia,serif; font-size: 10px; line-height: 1.25; }
      .er-a4 [contenteditable]:focus { outline: 2px solid #cfd6dc; outline-offset: 1px; }

      /* ── фірмовий бланк зверху ── */
      .er-blank { padding-bottom: 6px; border-bottom: 1.5px solid #2c343a; margin-bottom: 8px; }
      .er-blank-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
      .er-blank-logo { height: 26px; width: auto; display: block; filter: brightness(0); }
      .er-blank-contacts { text-align: right; font-size: 9px; color: #3a4150; line-height: 1.5; font-family: "Ysabeau Office","Segoe UI",Arial,sans-serif; }
      .er-blank-contacts b { color: #161B29; font-weight: 600; }
      .er-blank-reg { margin-top: 5px; font-size: 9px; color: #6b7280; font-family: "Ysabeau Office","Segoe UI",Arial,sans-serif; }
      .er-blank-reg b { color: #3a4150; font-weight: 600; }

      /* ── вих/від + кому у стилі бланку ── */
      .er-meta { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; margin: 10px 0 2px; }
      .er-out { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; max-width: 290px; align-items: baseline; }
      .er-out-lbl { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; white-space: nowrap; font-family: "Ysabeau Office","Segoe UI",Arial,sans-serif; }
      .er-out-fill { width: 100%; box-sizing: border-box; border: none; border-bottom: .5px solid #d8d3c4;
        background: transparent; font-family: "Times New Roman","PT Serif",Georgia,serif; font-size: 14pt;
        line-height: 1.3; padding: 0 2px 1px; outline: none; }
      .er-out-fill:focus { background: #eaf3ff; }
      .er-to { text-align: right; max-width: 330px; font-size: 14pt; line-height: 1.35; }
      .er-to-area { width: 100%; box-sizing: border-box; border: none; background: transparent; text-align: right;
        font-family: "Times New Roman","PT Serif",Georgia,serif; font-size: 14pt; line-height: 1.35;
        padding: 0; outline: none; resize: none; overflow: hidden; field-sizing: content; }
      .er-to-area:focus { background: #eaf3ff; }
      .er-to-lbl { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b7280; margin-bottom: 3px; font-family: "Ysabeau Office","Segoe UI",Arial,sans-serif; }
      .er-to-name { font-weight: 600; }

      /* ── таблиці: фіксована розкладка + перенос, щоб НЕ виходили за межі ── */
      .er-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 2px; }
      .er-tbl td { border: .75px solid var(--line); padding: 2px 4px; vertical-align: top;
        word-break: break-word; overflow-wrap: anywhere; }
      .er-fill { width: 100%; box-sizing: border-box; display: block; border: none; background: transparent;
        font-family: "Times New Roman","PT Serif",Georgia,serif; font-size: 14pt; color: inherit;
        line-height: 1.2; padding: 0; margin: 0; outline: none; resize: none; overflow: hidden;
        white-space: pre-wrap; word-break: break-word; field-sizing: content; min-height: 19px; }
      .er-fill:focus { background: #eaf3ff; }
      .er-cap { font-size: 7.5px; font-style: italic; color: #555; text-align: center; line-height: 1.1; margin-top: 1px; }
      .er-cellwrap { display: block; }
      .er-cellwrap + .er-cellwrap { border-top: .75px solid var(--line); margin-top: 2px; padding-top: 2px; }

      .er-lbl { background: #fafafa; font-size: 9.5px; }
      .er-sub { font-style: italic; color: #333; display: inline-block; min-width: 64px; }
      .er-inline { display: flex; gap: 6px; align-items: flex-start; }
      .er-inline > span { flex: 0 0 auto; padding-top: 1px; }
      .er-inline .er-cellwrap { flex: 1 1 auto; }
      .er-empty { height: 4px; padding: 0; border: none; }

      .er-title { text-align: center; font-weight: 700; font-size: 12px; line-height: 1.3; margin: 10px 0 8px; }
      .er-lead { margin: 0 0 6px; }
      .er-note { margin: 4px 0; }
      .er-note i { font-size: 8.5px; color: #555; }
      .er-strong { font-weight: 700; }
      .er-foot { font-size: 8px; color: #444; text-align: justify; margin: 2px 0 8px; line-height: 1.2; }

      .er-secbar { border: 1px solid var(--line); background: #f0f0f0; text-align: center; font-weight: 700;
        font-size: 11px; padding: 3px; margin: 8px 0 0; }
      .er-secbar-hint { font-weight: 400; font-size: 9px; }
      .er-choice td { text-align: left; font-weight: 600; padding: 3px 6px; }

      .er-chk { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line);
        text-align: center; line-height: 11px; font-size: 10px; cursor: pointer; vertical-align: middle;
        color: #0a7d3a; font-weight: 700; }
      .er-chk.is-on { background: #eafaf0; }

      @media print {
        body * { visibility: hidden !important; }
        .er-root, .er-root * { visibility: visible !important; }
        .er-root { position: absolute !important; inset: 0 !important; }
        .er-backdrop, .er-toolbar { display: none !important; }
        .er-scroll { overflow: visible !important; padding: 0 !important; margin: 0 !important; display: block !important; }
        .er-a4 { box-shadow: none !important; width: auto !important; min-height: 0 !important; padding: 0 !important; }
        .er-chk { cursor: default; }
        [contenteditable]:focus { outline: none !important; }
        .er-secbar, .er-tbl, .er-foot, tr, td { page-break-inside: avoid; }
        @page { size: A4; margin: 12mm; }
      }
    `}</style>
  );
}