// edrpou-page.jsx — UI: автопідтягування контрагента за ЄДРПОУ, майстер «Новий
// замовник» і майстер «Новий договір» (із графіком платежів). Дані — edrpou-data.jsx.

// локальне поле форми (Babel-скрипти не ділять область — own copy)
function OWField({ label, children, wide }) {
  return (
    <label className={`ow-field ${wide ? "ow-wide" : ""}`}>
      <span className="ow-label">{label}</span>
      {children}
    </label>
  );
}

// ─────────── Поле пошуку за ЄДРПОУ ───────────
function EdrpouLookup({ onFound, autoFocus }) {
  const [code, setCode] = React.useState("");
  const [state, setState] = React.useState("idle"); // idle | loading | found | error
  const [msg, setMsg] = React.useState("");
  const [rec, setRec] = React.useState(null);
  const ref = React.useRef(null);
  React.useEffect(() => { if (autoFocus && ref.current) ref.current.focus(); }, [autoFocus]);

  const run = async () => {
    setState("loading"); setMsg(""); setRec(null);
    const r = await window.lookupEdrpou(code);
    if (r.found) {
      setState("found"); setRec(r); setMsg(`${r.source} · перевірено ${window.formatDate(r.checkedAt)}`);
      onFound && onFound(r);
    } else {
      setState("error"); setMsg(r.error);
    }
  };

  return (
    <div className="edr-lookup">
      <div className="edr-lookup-row">
        <div className={`edr-input ${state}`}>
          <window.Ico name="search" />
          <input
            ref={ref} value={code} inputMode="numeric" placeholder="Код ЄДРПОУ (8) або РНОКПП ФОП (10)"
            onChange={(e) => { setCode(e.target.value.replace(/\D/g, "").slice(0, 10)); setState("idle"); }}
            onKeyDown={(e) => e.key === "Enter" && run()}
          />
        </div>
        <button className="btn btn-primary" disabled={state === "loading" || code.length < 8} onClick={run}>
          {state === "loading" ? "Пошук…" : <><window.Ico name="download" /> Підтягнути</>}
        </button>
      </div>
      {state === "found" && rec && (
        <div className="edr-result">
          <div className="edr-result-h">
            <window.Ico name="checkCircle" /> Знайдено в реєстрі
            <span className={`status-tag tone-${rec.status === "active" ? "live" : "late"}`}>
              {rec.status === "active" ? "Зареєстровано" : "Припинено"}
            </span>
          </div>
          <div className="edr-result-name">{rec.name}</div>
          <div className="edr-result-grid">
            <div><span>ЄДРПОУ</span>{rec.edrpou}</div>
            <div><span>КВЕД</span>{rec.kved} · {rec.kvedText}</div>
            <div><span>Адреса</span>{rec.address}</div>
            <div><span>Керівник</span>{rec.director} ({rec.directorRole})</div>
            <div><span>ПДВ</span>{rec.vatPayer ? "платник ПДВ" : "неплатник ПДВ"}</div>
            <div><span>Реєстрація</span>{window.formatDate(rec.registeredDate)}</div>
          </div>
          <div className="edr-result-src">{msg}</div>
        </div>
      )}
      {state === "error" && <div className="edr-error"><window.Ico name="alert" /> {msg}</div>}
      <div className="edr-hint">Демо-реєстр. На бекенді — реальний запит до ЄДР (Opendatabot / ДПС / Дія). Спробуйте код <b>43217890</b> або <b>42889106</b>.</div>
    </div>
  );
}

// ─────────── Майстер «Новий замовник» ───────────
function ClientWizard({ onClose }) {
  const [f, setF] = React.useState({ name: "", short: "", type: "legal", edrpou: "", address: "", director: "", vatPayer: true,
    cName: "", cRole: "", cPhone: "", cEmail: "", note: "" });
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));

  const onFound = (r) => setF(prev => ({ ...prev,
    name: r.name, short: r.short, type: r.type, edrpou: r.edrpou, address: r.address,
    director: r.director, vatPayer: !!r.vatPayer,
    cName: prev.cName || (r.director !== "—" ? r.director : ""), cRole: prev.cRole || r.directorRole || "",
  }));

  const valid = f.name.trim() && f.edrpou.trim();
  const save = () => {
    window.addClient({
      name: f.name.trim(), short: (f.short || f.name).trim(), type: f.type, edrpou: f.edrpou.trim(),
      address: f.address.trim(), director: f.director.trim(), vatPayer: f.vatPayer,
      contact: { name: f.cName.trim(), role: f.cRole.trim(), phone: f.cPhone.trim(), email: f.cEmail.trim() },
      rating: 0, since: window.SYS_DATE, note: f.note.trim(),
    });
    onClose(true);
  };

  return (
    <div className="ow-root">
      <div className="ow-backdrop" onClick={() => onClose(false)}></div>
      <div className="ow-modal" style={{ width: 680 }}>
        <div className="ow-head">
          <div>
            <div className="ow-title">Новий замовник</div>
            <div className="ow-sub">введіть код ЄДРПОУ — реквізити підтягнуться автоматично</div>
          </div>
          <button className="ow-x" onClick={() => onClose(false)}><window.Ico name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        </div>
        <div className="ow-body">
          <EdrpouLookup onFound={onFound} autoFocus />

          <div className="ow-step-label" style={{ marginTop: 18 }}>Картка замовника</div>
          <div className="ow-grid">
            <OWField label="Повна назва" wide><input value={f.name} onChange={e => set("name", e.target.value)} /></OWField>
            <OWField label="Коротка назва"><input value={f.short} onChange={e => set("short", e.target.value)} /></OWField>
            <OWField label="Тип">
              <select value={f.type} onChange={e => set("type", e.target.value)}>
                <option value="legal">Юр. особа</option>
                <option value="state">Держ. установа</option>
                <option value="individual">ФОП / фіз. особа</option>
              </select>
            </OWField>
            <OWField label="ЄДРПОУ / РНОКПП"><input value={f.edrpou} onChange={e => set("edrpou", e.target.value)} /></OWField>
            <OWField label="Платник ПДВ">
              <select value={f.vatPayer ? "1" : "0"} onChange={e => set("vatPayer", e.target.value === "1")}>
                <option value="1">Так</option>
                <option value="0">Ні</option>
              </select>
            </OWField>
            <OWField label="Юридична адреса" wide><input value={f.address} onChange={e => set("address", e.target.value)} /></OWField>
            <OWField label="Керівник" wide><input value={f.director} onChange={e => set("director", e.target.value)} /></OWField>
            <OWField label="Контактна особа"><input value={f.cName} onChange={e => set("cName", e.target.value)} placeholder="ПІБ" /></OWField>
            <OWField label="Посада"><input value={f.cRole} onChange={e => set("cRole", e.target.value)} /></OWField>
            <OWField label="Телефон"><input value={f.cPhone} onChange={e => set("cPhone", e.target.value)} placeholder="+380…" /></OWField>
            <OWField label="E-mail"><input value={f.cEmail} onChange={e => set("cEmail", e.target.value)} /></OWField>
          </div>
          <div className="ow-foot">
            <span className="ow-foot-hint">Реквізити можна відкоригувати вручну перед збереженням.</span>
            <button className="btn" onClick={() => onClose(false)}>Скасувати</button>
            <button className="btn btn-primary" disabled={!valid} onClick={save}>Додати замовника</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────── Майстер «Новий договір» ───────────
function ContractWizard({ onClose, presetClientId }) {
  window.useCounterparties();
  const clients = window.DATA.CLIENTS;
  const SYS = window.SYS_DATE || "2026-05-29";
  const [clientId, setClientId] = React.useState(presetClientId || (clients[0] && clients[0].id) || "");
  const [newClient, setNewClient] = React.useState(false);
  const [f, setF] = React.useState({
    number: window.nextContractNumber(), date: SYS, objName: "", objAddr: "",
    total: 1000000, vat: "included", tpl: "stages4", subject: "розроблення проєктно-кошторисної документації",
  });
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));

  // ── інтеграція з Робочим простором (Докс) ──
  const [doksKey, setDoksKey] = React.useState("");
  const [doks, setDoks] = React.useState(null);
  const [doksState, setDoksState] = React.useState("idle"); // idle|loading|ok|error
  const [doksMsg, setDoksMsg] = React.useState("");
  const pullDoks = async () => {
    setDoksState("loading"); setDoksMsg("");
    const r = await window.doksPull(doksKey);
    if (!r.found) { setDoksState("error"); setDoksMsg(r.error); setDoks(null); return; }
    setDoks(r); setDoksState("ok"); setDoksMsg(`${r.source} · синхронізовано ${window.formatDate(r.syncedAt)}`);
    setF(prev => ({ ...prev,
      objName: r.objName, objAddr: r.objAddr, total: r.total,
      subject: r.kind === "supervision" ? "здійснення авторського нагляду" : "розроблення проєктної документації та супроводу експертизи",
      execEntity: r.vatBase ? "tov" : "fop",
    }));
  };

  const client = window.getClient(clientId);
  const schedule = (doks && doks.schedule) ? doks.schedule : window.buildSchedule(f.tpl, Number(f.total) || 0, f.date);
  const m = window.formatMoney;

  const valid = clientId && f.objName.trim() && Number(f.total) > 0;
  const save = (openBlank) => {
    const objId = "obj-" + Date.now();
    window.DATA.OBJECTS.push({
      id: objId, code: f.number.replace("/", "-"), name: f.objName.trim(),
      client: client ? client.name : "", address: f.objAddr.trim(), workType: "new", _added: true,
      edessb: doks ? doks.edessb : undefined,
    });
    const rec = window.addContract({
      number: f.number.trim(), date: f.date, client: clientId, obj: objId,
      total: Number(f.total), status: "draft", subject: f.subject, vatMode: f.vat,
      schedule: schedule.map(s => ({ ...s })),
      execEntity: f.execEntity || "tov",
      doksKey: doks ? doks.key : null,
      kosht: doks ? doks.kosht : null,
      gip: doks ? doks.gip : null,
      consequenceClass: doks ? doks.consequenceClass : null,
      stage: doks ? doks.stage : null,
      taskFromDoks: doks ? doks.taskReady : false,
    });
    onClose(rec, openBlank);
  };

  if (newClient) {
    return <ClientWizard onClose={(added) => { setNewClient(false); if (added) { window.dispatchEvent(new Event("ukrbud-cp")); const list = window.DATA.CLIENTS; setClientId(list[list.length - 1].id); } }} />;
  }

  return (
    <div className="ow-root">
      <div className="ow-backdrop" onClick={() => onClose(null)}></div>
      <div className="ow-modal" style={{ width: 680 }}>
        <div className="ow-head">
          <div>
            <div className="ow-title">Новий договір</div>
            <div className="ow-sub">№ {f.number} · {window.formatDate(f.date)}</div>
          </div>
          <button className="ow-x" onClick={() => onClose(null)}><window.Ico name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        </div>
        <div className="ow-body">
          <div className="doks-panel">
            <div className="doks-panel-h">
              <span className="doks-badge"><window.Ico name="package" /> Робочий простір · Докс</span>
              <span className="doks-panel-sub">підтягнути Завдання, кошторис і ціну з проєкту</span>
            </div>
            <div className="doks-panel-row">
              <div className={`edr-input ${doksState}`} style={{ flex: 1 }}>
                <window.Ico name="search" />
                <input value={doksKey} placeholder="Код проєкту в Докс (напр. О-1, УКП-2025-47, АН-89)"
                       onChange={e => { setDoksKey(e.target.value); setDoksState("idle"); }}
                       onKeyDown={e => e.key === "Enter" && pullDoks()} />
              </div>
              <button className="btn btn-primary" disabled={doksState === "loading" || !doksKey.trim()} onClick={pullDoks}>
                {doksState === "loading" ? "Синхронізація…" : <><window.Ico name="download" /> Підтягнути</>}
              </button>
            </div>
            {doksState === "ok" && doks && (
              <div className="doks-result">
                <div className="doks-result-h"><window.Ico name="checkCircle" /> {doks.projectName}</div>
                <div className="doks-result-meta">
                  <span>{doks.taskReady ? "Завдання готове → Дод. 1" : "Завдання не завершене"}</span>
                  <span className="dot"></span><span>{doks.consequenceClass} · {doks.stage}</span>
                  <span className="dot"></span><span>ГІП {doks.gip}</span>
                </div>
                <table className="doks-kosht">
                  <tbody>
                    {doks.kosht.map((k, i) => (
                      <tr key={i}><td>{k.name}</td><td className="doks-form">форма {k.form}</td><td className="doks-sum">{m(k.sum)} ₴</td></tr>
                    ))}
                    <tr className="doks-kosht-total"><td colSpan={2}>Договірна ціна (без ПДВ) → у договір і план фінансування</td><td className="doks-sum">{m(doks.total)} ₴</td></tr>
                  </tbody>
                </table>
                <div className="doks-result-src">{doksMsg} · Виконавець: {doks.vatBase ? "ТОВ (платник ПДВ)" : "ФОП (неплатник ПДВ)"}</div>
              </div>
            )}
            {doksState === "error" && <div className="edr-error"><window.Ico name="alert" /> {doksMsg}</div>}
            {doksState === "idle" && <div className="edr-hint">Демо. На бекенді — реальний API-обмін із Робочим простором. Спробуйте код <b>О-1</b>, <b>УКП-2025-47</b> або <b>АН-89</b>.</div>}
          </div>

          <div className="ow-grid">
            <OWField label="Замовник" wide>
              <div style={{ display: "flex", gap: 8 }}>
                <select value={clientId} onChange={e => setClientId(e.target.value)} style={{ flex: 1 }}>
                  {clients.map(c => <option key={c.id} value={c.id}>{c.short} · {c.edrpou}</option>)}
                </select>
                <button className="btn" onClick={() => setNewClient(true)} title="Додати за ЄДРПОУ"><window.Ico name="plus" /> ЄДРПОУ</button>
              </div>
            </OWField>
            {client && (
              <div className="cw-client-card">
                <div><b>{client.name}</b></div>
                <div>ЄДРПОУ {client.edrpou} · {client.vatPayer === false ? "неплатник ПДВ" : "платник ПДВ"}</div>
                {client.address && <div>{client.address}</div>}
              </div>
            )}
            <OWField label="№ договору"><input value={f.number} onChange={e => set("number", e.target.value)} /></OWField>
            <OWField label="Дата"><input type="date" value={f.date} onChange={e => set("date", e.target.value)} /></OWField>
            <OWField label="Предмет договору" wide><input value={f.subject} onChange={e => set("subject", e.target.value)} /></OWField>
            <OWField label="Об'єкт (назва)" wide><input value={f.objName} onChange={e => set("objName", e.target.value)} placeholder="напр. Капітальний ремонт…" /></OWField>
            <OWField label="Адреса об'єкта" wide><input value={f.objAddr} onChange={e => set("objAddr", e.target.value)} /></OWField>
            <OWField label="Сума договору, ₴"><input type="number" value={f.total} onChange={e => set("total", +e.target.value)} /></OWField>
            <OWField label="ПДВ">
              <select value={f.vat} onChange={e => set("vat", e.target.value)}>
                <option value="included">У т.ч. ПДВ 20%</option>
                <option value="ontop">+ ПДВ 20% зверху</option>
                <option value="none">Без ПДВ</option>
              </select>
            </OWField>
            <OWField label="Графік платежів" wide>
              <select value={f.tpl} onChange={e => set("tpl", e.target.value)}>
                {window.CONTRACT_SCHEDULE_TEMPLATES.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
              </select>
            </OWField>
          </div>

          {/* Прев'ю графіка */}
          <div className="cw-sched">
            <div className="cw-sched-h">Графік платежів</div>
            <table className="cw-sched-table">
              <tbody>
                {schedule.map((s, i) => (
                  <tr key={i}>
                    <td className="cw-sched-stage">{s.stage}</td>
                    <td className="cw-sched-pct">{s.pct}%</td>
                    <td className="cw-sched-amt">{m(s.amount)} ₴</td>
                    <td className="cw-sched-due">до {window.formatDate(s.dueDate)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="ow-foot">
            <span className="ow-foot-hint">Договір створиться як чернетка.</span>
            <button className="btn" onClick={() => onClose(null)}>Скасувати</button>
            <button className="btn" disabled={!valid} onClick={() => save(false)}>Створити</button>
            <button className="btn btn-primary" disabled={!valid} onClick={() => save(true)}>Створити й відкрити бланк</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.EdrpouLookup = EdrpouLookup;
window.ClientWizard = ClientWizard;
window.ContractWizard = ContractWizard;