// ============================================================================
// Модал «Створити ТТН» для ЗАМОВЛЕННЯ (Етап 3 переносу ТТН у CRM, owner-only).
// Префіл отримувача з замовлення (ПІБ/телефон/місто/№ відділення з адреси),
// параметри й створення — спільний LsTtnPanel (рекомендований ФОП, превʼю,
// післяплата: ФОП=контроль оплати, фізособа=наложений платіж).
// Використовує window-глобалі leads-модуля: LsField/LsInput/LsAutocomplete/
// lsNpCities/lsNpWarehouses/lsNpStreets/LsTtnPanel — підключати ПІСЛЯ них.
// ============================================================================
const { useState: otUseState } = React;

// Автопідбір шаблону обʼєму (обʼємна вага, кг) за назвою товару — від більших до менших
const OT_VOL_RULES = [
  { re: /(3d[\s-]?принтер|принтер|бфп|монітор|монитор|телевізор|телевизор|проектор|мікрохвильов|микроволн|духовк|гриль|хлібопічк|хлебопечк|кондиціонер)/i, vol: 15 },
  { re: /(кавоварк|кофеварк|кофемашин|кавомашин|мультиварк|мультипічк|пилосос|пылесос|блендер|соковижим|м['']?ясорубк|мясорубк|зволожувач|увлажнитель|обігрівач|обогреватель|тостер|фритюрниц|аерогриль|аэрогриль|пароварк|вентилятор|термопот|чайник)/i, vol: 10 },
  { re: /(ноутбук|laptop|macbook|консоль|playstation|xbox|nintendo|колонк|саундбар|soundbar|акустик|планшет|ipad|роутер|маршрутизатор|монопод|штатив|мікрофон|микрофон|праск|утюг|фен\b|стайлер)/i, vol: 5 },
  { re: /(навушник|наушник|смартфон|телефон|iphone|годинник|часы|watch|павербанк|powerbank|зарядн|кабел|чохол|чехол|флешк|ssd|hdd|миш(а|к)|клавіатур|клавиатур|трекер|стилус|бритв|тример|триммер|епілятор|эпилятор)/i, vol: 2 },
];
function otSuggestVol(titles) {
  const s = (titles || []).join(" ");
  for (const r of OT_VOL_RULES) if (r.re.test(s)) return r.vol;
  return null;
}

function otPrefill(order) {
  const addr = String(order.address || "");
  const branchMatch = addr.match(/№\s*(\d+)/);
  const isCourier = /кур'?[єе]р|адресн/i.test(String(order.delivery || ""));
  const clean = (v) => (v && v !== "—" ? String(v) : "");

  // Адресна доставка: розбираємо вулицю/будинок/квартиру з рядка адреси замовлення.
  // Формати: «<місто>, вул. Шевченка, 12А, кв. 5» / «<місто>, ул. Поджигателя Семена 5, 10»
  let street = "", house = "", flat = "";
  if (isCourier && addr) {
    let rest = addr;
    const city = clean(order.city);
    if (city && rest.startsWith(city)) rest = rest.slice(city.length);
    rest = rest.replace(/^[,\s]+/, "")
               .replace(/^(?:вул|ул|улица|вулиця|просп|проспект|пр-т|бул|бульвар|пров|пер|провулок|переулок)[.\s]+/i, "");
    const parts = rest.split(",").map(s => s.trim()).filter(Boolean);
    street = parts[0] || "";
    house  = (parts[1] || "").replace(/^буд[.\s]*/i, "");
    flat   = (parts[2] || "").replace(/^кв[.\s]*/i, "");
    // будинок «приклеєний» у кінці вулиці: «Поджигателя Семена 5» → вулиця + будинок
    const m = street.match(/^(.{3,}?)[,\s]+(\d+[а-яА-Яa-zA-Z\/\-]*)$/);
    if (m) {
      if (!house) { street = m[1].trim(); house = m[2]; }
      else if (!flat && parts.length === 2) { street = m[1].trim(); flat = house; house = m[2]; } // «вул. Х 5, 10» = буд. 5, кв. 10
    }
  }

  return {
    recipient: "fiz",
    npName: clean(order.client),
    npPhone: clean(order.phone),
    npCity: clean(order.city),
    npBranch: branchMatch ? branchMatch[1] : "",
    npDelivery: isCourier ? "address" : "branch",
    npStreet: street, npHouse: house, npFlat: flat,
  };
}

function OrderTtnModal({ order, onClose, onStatusSet }) {
  const [f, setF] = otUseState(() => otPrefill(order));
  const set = (k) => (v) => setF(p => ({ ...p, [k]: v }));
  const isAddr = f.npDelivery === "address";
  const [busyStatus, setBusyStatus] = otUseState(false);

  // ТТН створена → одним кліком перевести замовлення в «Готова ТТН» (13) і закрити
  const alreadyReady = order.statusId === 13;
  const setReadyAndClose = async () => {
    if (busyStatus) return;
    setBusyStatus(true);
    try {
      await API.setOrderStatus(order.id, 13);
      onStatusSet && onStatusSet(13, "ttn_ready");
      onClose();
    } catch (e) {
      setBusyStatus(false);
      alert("Не вдалося змінити статус: " + (e.message || e));
    }
  };

  // Товари замовлення в ЦІЙ ЕН (буває 2 ТТН з різних складів — нотифаер шле PDF
  // у групу постачальника саме обраних товарів). Дефолт — усі.
  const raw = order.productsRaw || [];
  const [selProd, setSelProd] = otUseState(() => raw.map(() => true));
  const toggleProd = (i) => setSelProd(p => p.map((v, j) => j === i ? !v : v));
  const selected = raw.filter((_, i) => selProd[i]);
  const ttnProducts = selected.map(p => ({ article: String(p.article || ""), title: String(p.title || ""), quantity: Number(p.quantity) || 1 }));
  const selText = selected.map(p => p.title).join(", ") || (order.products || []).join(", ");

  const total = Math.round(Number(order.total) || 0);
  // Післяплата від факту оплати: не оплачено → сума до стягнення = підсумок замовлення
  // (передоплата/доплата через «Знижку/Націнку менеджера» ВЖЕ врахована Хорошопом у total_sum).
  // Оплачено → післяплати немає, але вручну ввімкнути можна.
  const payed = order.payed == 1;
  const codOn = !payed;
  const hasPrepay = order.managerDiscount != null && Number(order.managerDiscount) !== 0;
  const descr = ("Замовлення №" + order.id + ": " + (order.products || []).join(", ")).slice(0, 95);
  const defaults = {
    cargoType: "Parcel", weight: "2",
    volume: otSuggestVol(order.products),  // автошаблон габаритів за назвою товару
    cost: String(Math.max(300, total)),
    codOn, codAmount: codOn ? String(total) : "",
  };

  const pill = (active) => ({
    height: 30, padding: "0 11px", borderRadius: 999, fontFamily: "inherit", fontSize: 12, fontWeight: 500, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0,
    border: "1px solid " + (active ? "rgba(225,29,72,.5)" : "var(--border-default)"),
    background: active ? "rgba(225,29,72,.12)" : "var(--bg-raised)",
    color: active ? "#FB7185" : "var(--fg-secondary)",
  });

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.6)", zIndex: 80, display: "flex", alignItems: "center", justifyContent: "center",
      padding: "max(14px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom))", boxSizing: "border-box" }}>
      <div style={{ width: "min(640px, 96vw)", maxHeight: "100%", overflowY: "auto", overflowX: "hidden", background: "var(--bg-panel)", borderRadius: 12, border: "1px solid var(--border-default)", boxShadow: "0 24px 64px rgba(0,0,0,.5)", display: "flex", flexDirection: "column" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
          <span style={{ width: 30, height: 30, borderRadius: 8, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "rgba(225,29,72,.14)", color: "#FB7185" }}><Icon name="truck" size={15}/></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: "var(--fg-primary)" }}>ТТН для замовлення №{order.id}</div>
            <div style={{ fontSize: 11.5, color: "var(--fg-muted)" }}>{(order.products || []).join(" · ").slice(0, 80) || "—"} · {total.toLocaleString("uk-UA")} ₴ · {order.payment}</div>
          </div>
          <button onClick={onClose} style={{ width: 28, height: 28, border: 0, background: "transparent", color: "var(--fg-muted)", borderRadius: 6, cursor: "pointer" }}><Icon name="x" size={16}/></button>
        </div>

        <div style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Отримувач — префіл із замовлення, можна виправити. Юрособа = НП тягне компанію з реєстру за ЄДРПОУ */}
          <LsField label="Отримувач">
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              <button onClick={() => set("recipient")("fiz")} style={pill(f.recipient !== "ur")}>Фізособа</button>
              <button onClick={() => set("recipient")("ur")} style={pill(f.recipient === "ur")}>Юрособа (ЄДРПОУ)</button>
            </div>
          </LsField>
          {f.recipient === "ur" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <LsField label="ЄДРПОУ юрособи"><LsInput value={f.edrpou || ""} onChange={set("edrpou")} placeholder="12345678" mono/></LsField>
              <div style={{ fontSize: 11, color: "var(--fg-muted)", alignSelf: "end", paddingBottom: 6, lineHeight: 1.4 }}>Компанію НП знайде у своєму реєстрі за ЄДРПОУ. ПІБ нижче — контактна особа отримувача.</div>
            </div>
          )}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <LsField label={f.recipient === "ur" ? "ПІБ контактної особи" : "ПІБ отримувача"}><LsInput value={f.npName} onChange={set("npName")} placeholder="Прізвище Ім'я По батькові"/></LsField>
            <LsField label="Телефон"><LsInput value={f.npPhone} onChange={set("npPhone")} placeholder="+38 0XX XXX XX XX" mono/></LsField>
          </div>
          <LsField label="Доставка">
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              <button onClick={() => set("npDelivery")("branch")} style={pill(f.npDelivery === "branch")}>На відділення</button>
              <button onClick={() => set("npDelivery")("address")} style={pill(f.npDelivery === "address")}>Адресна (кур'єр)</button>
            </div>
          </LsField>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <LsField label="Місто"><LsAutocomplete value={f.npCity} onChange={set("npCity")} placeholder="Місто" fetcher={lsNpCities}/></LsField>
            {isAddr
              ? <LsField label="Вулиця"><LsAutocomplete value={f.npStreet} onChange={set("npStreet")} placeholder="Почніть вводити вулицю…" fetcher={(q) => lsNpStreets(f.npCity, q)}/></LsField>
              : <LsField label="Відділення"><LsAutocomplete value={f.npBranch} onChange={set("npBranch")} placeholder="№ або адреса" minChars={1} fetcher={(q) => lsNpWarehouses(f.npCity, q)}/></LsField>}
          </div>
          {isAddr && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <LsField label="Будинок"><LsInput value={f.npHouse} onChange={set("npHouse")} placeholder="12А" mono/></LsField>
              <LsField label="Квартира (необов'язково)"><LsInput value={f.npFlat} onChange={set("npFlat")} placeholder="5" mono/></LsField>
            </div>
          )}
          {raw.length > 1 && (
            <LsField label={"Товари в цій ТТН (" + selected.length + "/" + raw.length + ")"}>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {raw.map((p, i) => (
                  <label key={i} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: selProd[i] ? "var(--fg-primary)" : "var(--fg-muted)", cursor: "pointer" }}>
                    <input type="checkbox" checked={!!selProd[i]} onChange={() => toggleProd(i)} style={{ accentColor: "#FB7185" }}/>
                    <span style={{ flex: 1 }}>{p.title}{Number(p.quantity) > 1 ? " — " + p.quantity + " шт" : ""}</span>
                  </label>
                ))}
              </div>
              {selected.length === 0 && <div style={{ fontSize: 11, color: "#FCA5A5", marginTop: 4 }}>Оберіть хоча б один товар</div>}
              <div style={{ fontSize: 10.5, color: "var(--fg-muted)", marginTop: 4 }}>Решту товарів відправите окремою ТТН — кожна піде у свою групу постачальника.</div>
            </LsField>
          )}
          <div style={{ fontSize: 11, color: "var(--fg-muted)" }}>Адреса із замовлення: {order.address || "—"} · {order.delivery}</div>
          <div style={{ fontSize: 11.5, color: payed ? "#6EE7B7" : "#FBBF24" }}>
            {payed
              ? "Замовлення ОПЛАЧЕНО — післяплата вимкнена (можна ввімкнути вручну нижче)."
              : "Не оплачено — післяплата " + total.toLocaleString("uk-UA") + " ₴" +
                (hasPrepay ? " (" + (order.managerDiscountTitle || "передоплата") + " " + Number(order.managerDiscount).toLocaleString("uk-UA") + " ₴ вже врахована в сумі)" : "")}
          </div>

          {/* Відправник + параметри + превʼю + створення */}
          <LsTtnPanel f={f} setF={setF} orderId={order.id} descr={descr} defaults={defaults} productsText={selText} products={ttnProducts}/>

          {/* ТТН створена → перевести замовлення в «Готова ТТН» (нотифаер підхопить за ~5 хв) або просто закрити */}
          {f.ttn && (
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", alignItems: "center", paddingTop: 12, borderTop: "1px solid var(--border-subtle)" }}>
              <span style={{ flex: 1, fontSize: 11, color: "var(--fg-muted)" }}>
                {alreadyReady ? "Замовлення вже у статусі «Готова ТТН»." : "У статусі «Готова ТТН» нотифаер відправить PDF у групу постачальника (~5 хв)."}
              </span>
              <button onClick={onClose} style={{ height: 34, padding: "0 14px", borderRadius: 8, border: "1px solid var(--border-default)", background: "var(--bg-raised)", color: "var(--fg-secondary)", fontSize: 12.5, fontWeight: 500, cursor: "pointer", fontFamily: "inherit" }}>Закрити</button>
              {!alreadyReady && (
                <button onClick={setReadyAndClose} disabled={busyStatus} style={{ height: 34, padding: "0 14px", borderRadius: 8, border: "1px solid rgba(110,231,183,.45)", background: "rgba(110,231,183,.14)", color: "#6EE7B7", fontSize: 12.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", opacity: busyStatus ? 0.6 : 1 }}>
                  {busyStatus ? "Переводжу…" : "Підтвердити → «Готова ТТН»"}
                </button>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.OrderTtnModal = OrderTtnModal;
