// edrpou-guide.jsx — процедура «Отримати довідку з ЄДРПОУ»:
// покрокова інструкція + реквізити для оплати + контакти ГУ статистики в Одеській обл.
// (дані з офіційної сторінки Держстату). Звідси відкривається готовий бланк запиту.
const EDR_PAY = [
  ["Одержувач", "Головне управління статистики в Одеській області"],
  ["Код ЄДРПОУ одержувача", "02361819"],
  ["Рахунок (IBAN)", "UA728201720313281004201002548"],
  ["Банк одержувача", "Державна казначейська служба України, м. Київ"],
  ["Код класифікації доходів", "25010100"],
  ["Призначення платежу", "25010100 «Надання відомостей з ЄДРПОУ»"],
  ["Сума", "99,84 грн (без ПДВ, 2026 р.)"],
];

function EdrpouGuide({ onClose, onOpenForm }) {
  const [copied, setCopied] = React.useState("");
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  const copy = (text, tag) => {
    try { navigator.clipboard.writeText(text); setCopied(tag); setTimeout(() => setCopied(""), 1500); } catch (e) {}
  };
  const payText = EDR_PAY.map(([k, v]) => `${k}: ${v}`).join("\n");

  const Step = ({ n, title, children }) => (
    <div className="eg-step">
      <div className="eg-step-n">{n}</div>
      <div className="eg-step-body"><div className="eg-step-title">{title}</div><div className="eg-step-text">{children}</div></div>
    </div>
  );

  return (
    <React.Fragment>
      <EdrpouGuideStyles />
      <div className="eg-root">
        <div className="eg-backdrop" onClick={onClose}></div>
        <div className="eg-panel">
          <div className="eg-head">
            <div>
              <div className="eg-title">Отримати довідку з ЄДРПОУ</div>
              <div className="eg-sub">Порядок дій · Головне управління статистики в Одеській області</div>
            </div>
            <button className="btn" onClick={onClose}>Закрити</button>
          </div>

          <div className="eg-scroll">
            <div className="eg-section-h">Порядок дій</div>
            <Step n="1" title="Сформувати запит">
              Відкрийте бланк запиту, у <b>Розділі 3 «Дані щодо суб’єкта»</b> впишіть код ЄДРПОУ та найменування, підпишіть (директор).
              <div style={{ marginTop: 8 }}><button className="btn btn-primary" onClick={onOpenForm}><window.Ico name="download" /> Відкрити бланк запиту</button></div>
            </Step>
            <Step n="2" title="Оплатити послугу — 99,84 грн (без ПДВ)">
              За реквізитами нижче. <b>У призначенні платежу обов’язково</b>: «25010100 Надання відомостей з ЄДРПОУ». Поштові витрати — за рахунок замовника.
            </Step>
            <Step n="3" title="Надіслати запит + підтвердження оплати">
              Е-поштою на <b>edrpou@od.ukrstat.gov.ua</b> (або особисто / поштою на адресу нижче). Підтвердження оплати — квитанція, платіжне доручення або реквізити платежу.
            </Step>
            <Step n="4" title="Отримати відомості — до 5 днів">
              Орган статистики надає відомості у <b>п’ятиденний строк</b> (п. 16 Положення про ЄДРПОУ), у паперовій або електронній формі — як зазначено в запиті.
            </Step>

            <div className="eg-section-h">
              Реквізити для оплати
              <button className="eg-copy" onClick={() => copy(payText, "all")}>{copied === "all" ? "✓ Скопійовано" : "Копіювати все"}</button>
            </div>
            <table className="eg-pay">
              <tbody>
                {EDR_PAY.map(([k, v]) => (
                  <tr key={k}>
                    <td className="eg-pay-k">{k}</td>
                    <td className="eg-pay-v">{v}{(k.indexOf("IBAN") >= 0) && <button className="eg-copy eg-copy-sm" onClick={() => copy(v, "iban")}>{copied === "iban" ? "✓" : "копі"}</button>}</td>
                  </tr>
                ))}
              </tbody>
            </table>

            <div className="eg-section-h">Контакти органу</div>
            <div className="eg-contacts">
              <div><b>Адреса:</b> 65026, м. Одеса, вул. Польська, 20а</div>
              <div><b>Телефон:</b> +38 (063) 857-53-30</div>
              <div><b>E-mail:</b> edrpou@od.ukrstat.gov.ua, gus@od.ukrstat.gov.ua</div>
            </div>

            <div className="eg-note">⚠ Передача отриманих відомостей третім особам на комерційній основі заборонена. Послуга платна; відомості формуються після отримання запиту та підтвердження оплати.</div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.EdrpouGuide = EdrpouGuide;

function EdrpouGuideStyles() {
  return (
    <style>{`
      .eg-root { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
      .eg-backdrop { position: absolute; inset: 0; background: rgba(4,18,26,.55); backdrop-filter: blur(2px); }
      .eg-panel { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column;
        background: var(--bg-elev, #fff); border: 1px solid var(--line, #e2e6ea); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.34); overflow: hidden; }
      .eg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line, #e2e6ea); }
      .eg-title { font-size: 17px; font-weight: 700; color: var(--ink, #161B29); }
      .eg-sub { font-size: 12px; color: var(--ink-3, #6b7280); margin-top: 2px; }
      .eg-scroll { overflow: auto; padding: 16px 20px 22px; }
      .eg-section-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700;
        color: var(--ink, #161B29); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 10px; }
      .eg-section-h:first-child { margin-top: 4px; }
      .eg-step { display: flex; gap: 12px; margin-bottom: 14px; }
      .eg-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #2c343a; color: #fff;
        font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
      .eg-step-title { font-weight: 650; font-size: 14px; color: var(--ink, #161B29); margin-bottom: 2px; }
      .eg-step-text { font-size: 13px; line-height: 1.5; color: var(--ink-2, #3a4150); }
      .eg-pay { width: 100%; border-collapse: collapse; font-size: 13px; }
      .eg-pay td { border-bottom: 1px solid var(--line, #eef1f3); padding: 6px 4px; vertical-align: top; }
      .eg-pay-k { color: var(--ink-3, #6b7280); width: 44%; }
      .eg-pay-v { color: var(--ink, #161B29); font-weight: 500; }
      .eg-copy { border: 1px solid var(--line, #d7dde2); background: #f6f8f9; color: var(--ink-2, #3a4150); border-radius: 7px;
        font-size: 11px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
      .eg-copy:hover { background: #eef3f5; }
      .eg-copy-sm { margin-left: 8px; padding: 1px 6px; font-size: 10px; }
      .eg-contacts { font-size: 13px; line-height: 1.7; color: var(--ink-2, #3a4150); }
      .eg-note { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--ink-3, #6b7280); background: #fbf7ee; border: 1px solid #ece3cf; border-radius: 8px; padding: 10px 12px; }
    `}</style>
  );
}
