// ============================================================================
// Оплата на картку — блок у картці ЗАМОВЛЕННЯ (всі менеджери).
// Показується при способі оплати «Банківська картка» (або якщо по замовленню
// вже є очікування). Плашки активних карток (банк/отримувач/залишок ліміту) +
// «Скопіювати реквізити» (шаблон з № замовлення і сумою; створює очікування
// оплати — залишок ліміту зменшується одразу) + статуси очікувань + скрін.
// Скрін ≠ оплата: статус «перевірте» — квитанція може бути фейк.
// ============================================================================
const { useState: ocpUseState, useEffect: ocpUseEffect, useRef: ocpUseRef } = React;

const ocpFmt = (n) => (Number(n) || 0).toLocaleString("uk-UA");
async function ocpJson(url, opts) {
  const r = await fetch(url, opts);
  let j = {}; try { j = await r.json(); } catch {}
  if (!r.ok) throw new Error(j.error || ("HTTP " + r.status));
  return j;
}

// ЄДИНИЙ шаблон реквізитів (дзеркало серверного cardRequisitesText)
function ocpRequisitesText(card, orderId, amount) {
  return [
    `Реквізити для оплати замовлення №${orderId}`,
    "",
    "Номер картки:",
    card.numberGrouped,
    "",
    `Отримувач: ${card.holder}`,
    `Банк: ${card.bank}`,
    `Сума до сплати: ${amount} грн`,
    "",
    "Будь ласка, не вказуйте призначення або коментар до платежу.",
    "У разі зазначення коментаря платіж буде повернено на картку відправника.",
    "",
    "Після оплати, будь ласка, надішліть квитанцію. Дякуємо!",
  ].join("\n");
}

// Реквізити для оплати на ФОП-рахунок (безготівковий розрахунок, без комісії для клієнта)
function ocpFopRequisitesText(fop, orderId, amount) {
  return [
    `Реквізити для оплати замовлення №${orderId}`,
    "",
    `Отримувач: ${fop.name}`,
    `ЄДРПОУ/РНОКПП: ${fop.edrpou}`,
    `IBAN: ${fop.iban}`,
    fop.bank ? `Банк: ${fop.bank}` : null,
    `Сума до сплати: ${amount} грн`,
    `Призначення платежу: Оплата за замовлення №${orderId}`,
    "",
    "Після оплати, будь ласка, надішліть квитанцію. Дякуємо!",
  ].filter(Boolean).join("\n");
}

// Модал прикріплення скріна: Ctrl+V із буфера, drag&drop або вибір файлу
function OcpShotModal({ title, onFile, onClose }) {
  const ref = ocpUseRef(null);
  const [drag, setDrag] = ocpUseState(0);
  ocpUseEffect(() => {
    const onPaste = (e) => {
      const items = (e.clipboardData && e.clipboardData.items) || [];
      for (const it of items) {
        if (it.type && it.type.startsWith("image/")) {
          const f = it.getAsFile();
          if (f) { e.preventDefault(); onFile(f); return; }
        }
      }
    };
    window.addEventListener("paste", onPaste);
    return () => window.removeEventListener("paste", onPaste);
  }, []);
  const take = (list) => { const f = Array.from(list || []).find(x => x.type.startsWith("image/")) || (list && list[0]); if (f) onFile(f); };
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.6)", zIndex: 95, display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: "min(420px, 94vw)", background: "var(--bg-panel)", borderRadius: 12, border: "1px solid var(--border-default)", padding: 18, display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Icon name="image-plus" size={15} color="var(--accent)"/>
          <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600, color: "var(--fg-primary)" }}>{title || "Скрин оплати"}</span>
          <button onClick={onClose} style={{ width: 26, height: 26, border: 0, background: "transparent", color: "var(--fg-muted)", cursor: "pointer" }}><Icon name="x" size={15}/></button>
        </div>
        <input ref={ref} type="file" accept="image/*" onChange={e => { take(e.target.files); e.target.value = ""; }} style={{ display: "none" }}/>
        <div
          onDragEnter={e => { e.preventDefault(); setDrag(n => n + 1); }}
          onDragOver={e => e.preventDefault()}
          onDragLeave={() => setDrag(n => Math.max(0, n - 1))}
          onDrop={e => { e.preventDefault(); setDrag(0); take(e.dataTransfer && e.dataTransfer.files); }}
          onClick={() => ref.current && ref.current.click()}
          style={{
            border: "2px dashed " + (drag ? "rgba(103,232,249,.8)" : "var(--border-strong)"), borderRadius: 12,
            padding: "28px 16px", textAlign: "center", cursor: "pointer", color: drag ? "#67E8F9" : "var(--fg-muted)",
            background: drag ? "rgba(103,232,249,.07)" : "transparent", fontSize: 12.5, lineHeight: 1.6,
          }}>
          <Icon name="clipboard-paste" size={22} style={{ marginBottom: 6 }}/>
          <div><b style={{ color: "var(--fg-secondary)" }}>Ctrl+V</b> — вставити з буфера</div>
          <div>перетягніть фото сюди · або натисніть, щоб обрати файл</div>
        </div>
      </div>
    </div>
  );
}

const OCP_STATUS = {
  waiting:      { label: "⏳ Очікуємо оплату",                 color: "#FBBF24" },
  receipt_sent: { label: "🧾 Скрін надіслано — перевірте оплату", color: "#67E8F9" },
  confirmed:    { label: "✅ Оплату підтверджено",             color: "#6EE7B7" },
  cancelled:    { label: "✖ Скасовано",                        color: "var(--fg-muted)" },
};

function OrderCardPayBlock({ order, isMobile }) {
  const [cards, setCards] = ocpUseState(null);
  const [exps, setExps] = ocpUseState([]);
  const [busy, setBusy] = ocpUseState("");
  const [err, setErr] = ocpUseState("");
  const [shotExp, setShotExp] = ocpUseState(null); // очікування, для якого відкрито модал скріна
  const [showFop, setShowFop] = ocpUseState(false); // «Клієнт хоче оплатити на ФОП»
  const [fops, setFops] = ocpUseState(null);
  const [chosenFopId, setChosenFopId] = ocpUseState(null); // ФОП, обраний менеджером для цього замовлення
  const [comment, setComment] = ocpUseState(""); // коментар → опис у балансі постачальника (порожньо = авто)

  // Спосіб оплати: спершу id (Хорошоп), фолбек — текст. 32 = Plata by Mono (онлайн на сайті),
  // 26 = Банківська картка.
  const pid = order.paymentId != null ? order.paymentId
            : /plata/i.test(String(order.payment || "")) ? 32
            : /карт|card/i.test(String(order.payment || "")) ? 26 : null;
  const isPlata = pid === 32;
  // Horoshop віддає різні формулювання картки; Plata теж містить «карткою» — виключаємо
  const isCardPay = !isPlata && /карт|card/i.test(String(order.payment || ""));

  const load = () => {
    ocpJson("/api/cards/active").then(j => setCards(j.cards || [])).catch(() => setCards([]));
    ocpJson(`/api/cards/expectations?orderId=${order.id}`).then(j => setExps((j.expectations || []).filter(e => e.status !== "cancelled"))).catch(() => setExps([]));
  };
  ocpUseEffect(load, [order.id]);

  const openFop = () => {
    setShowFop(v => !v);
    if (fops === null) ocpJson(`/api/payment-fops?amount=${amount}`)
      .then(j => setFops({ list: j.fops || [], totalRemaining: j.totalRemaining, reserve: j.reserve, yearElapsedPct: j.yearElapsedPct, idleDays: j.idleDays }))
      .catch(() => setFops({ list: [] }));
  };
  // Завантажуємо раніше зроблений вибір ФОПа (щоб підсвітити)
  ocpUseEffect(() => {
    ocpJson(`/api/payment-fops/choice?orderId=${order.id}`).then(j => { if (j.choice) setChosenFopId(j.choice.fopId); }).catch(() => {});
  }, [order.id]);
  const copyFopReq = (fop) => {
    copyText(ocpFopRequisitesText(fop, order.id, amount));
    setChosenFopId(fop.id);
    // Фіксуємо вибір — підказка Mono пріоритезуватиме цей ФОП
    ocpJson("/api/payment-fops/choose", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ orderId: order.id, fopId: fop.id, fopName: fop.name }),
    }).catch(() => {});
  };

  const amount = Math.round(Number(order.total) || 0);

  const copyReq = (card) => {
    // Копіюємо СИНХРОННО (інакше Safari губить user gesture), очікування — паралельно
    copyText(ocpRequisitesText(card, order.id, amount));
    ocpJson(`/api/cards/${card.id}/copy`, {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ orderId: order.id, amount, comment: comment.trim() }),
    }).then(() => load()).catch(e => setErr(e.message));
  };

  const sendShot = (exp, file) => {
    setShotExp(null);
    const reader = new FileReader();
    reader.onload = () => {
      setBusy("shot" + exp.id);
      ocpJson(`/api/cards/expectations/${exp.id}/screenshot`, {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ dataB64: reader.result, name: file.name || "receipt.png" }),
      }).then(() => { setBusy(""); load(); })
        .catch(er => { setBusy(""); setErr(er.message); });
    };
    reader.readAsDataURL(file);
  };

  const cancelExp = (exp) => {
    if (!window.confirm("Скасувати очікування оплати на цю картку? Ліміт повернеться.")) return;
    ocpJson(`/api/cards/expectations/${exp.id}/cancel`, { method: "POST" }).then(load).catch(e => setErr(e.message));
  };

  const list = cards || [];
  if (isPlata) return null; // Plata by Mono — клієнт платить онлайн на сайті, реквізити не потрібні
  if (!isCardPay && exps.length === 0) return null;
  if (cards === null) return null;

  const lbl = { fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 6 };

  return (
    <div>
      <div style={lbl}>Оплата на картку</div>
      {shotExp && <OcpShotModal title={`Скрин оплати · заказ №${shotExp.orderId}`} onFile={(f) => sendShot(shotExp, f)} onClose={() => setShotExp(null)}/>}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>

        {/* Очікування по цьому замовленню */}
        {exps.map(e => {
          const st = OCP_STATUS[e.status] || OCP_STATUS.waiting;
          return (
            <div key={e.id} style={{ padding: "10px 14px", background: "var(--bg-raised)", border: "1px solid " + (e.overdue ? "rgba(251,191,36,.5)" : "var(--border-default)"), borderRadius: 8, display: "flex", flexDirection: "column", gap: 5 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                <Icon name="credit-card" size={14} style={{ color: st.color, flexShrink: 0 }}/>
                <span style={{ fontSize: 12.5, fontWeight: 600, color: st.color }}>{st.label}</span>
                {e.overdue && <span style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, background: "rgba(251,191,36,.14)", border: "1px solid rgba(251,191,36,.4)", color: "#FBBF24" }}>понад 14 год</span>}
                {e.mono && e.mono.found && <span title="Знайдено надходження цієї суми у виписці Mono" style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, background: "rgba(110,231,183,.12)", border: "1px solid rgba(110,231,183,.4)", color: "#6EE7B7" }}>💰 є у виписці Mono</span>}
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--fg-primary)", marginLeft: "auto" }}>{ocpFmt(e.amount)} ₴</span>
              </div>
              <div style={{ fontSize: 12, color: "var(--fg-secondary)", paddingLeft: 22 }}>
                {e.card ? `${e.card.numberGrouped} · ${e.card.bank} · ${e.card.holder}` : "картку видалено"}
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: 22, flexWrap: "wrap" }}>
                <span style={{ fontSize: 11, color: "var(--fg-muted)" }}>
                  {new Date(e.createdAt).toLocaleString("uk-UA", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}{e.manager ? " · " + e.manager : ""}
                  {e.confirmedBy ? " · " + e.confirmedBy : ""}
                </span>
                <span style={{ flex: 1 }}/>
                {e.status === "waiting" && (
                  <React.Fragment>
                    <button onClick={() => { setErr(""); setShotExp(e); }} disabled={busy === "shot" + e.id} style={{ height: isMobile ? 30 : 26, padding: "0 10px", borderRadius: 6, border: "1px solid rgba(103,232,249,.5)", background: "rgba(103,232,249,.1)", color: "#67E8F9", fontSize: 11.5, cursor: "pointer", fontFamily: "inherit", display: "inline-flex", alignItems: "center", gap: 5 }}>
                      <Icon name="paperclip" size={11}/>{busy === "shot" + e.id ? "Надсилаю…" : "Скрин оплати"}
                    </button>
                    <button onClick={() => cancelExp(e)} title="Скасувати очікування" style={{ height: isMobile ? 30 : 26, width: 28, borderRadius: 6, border: "1px solid var(--border-default)", background: "transparent", color: "#FCA5A5", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="x" size={12}/></button>
                  </React.Fragment>
                )}
              </div>
            </div>
          );
        })}

        {/* Коментар до оплати — піде в баланс постачальника після підтвердження.
            Показуємо лише коли є картки постачальника (для них працює авто-запис). */}
        {isCardPay && exps.length === 0 && list.some(c => c.supplierKey) && (
          <div>
            <div style={{ ...lbl, marginBottom: 4 }}>Коментар у баланс (необов'язково)</div>
            <input value={comment} onChange={(e) => setComment(e.target.value)}
              placeholder="за замовчуванням — авто: «Оплата на карту …»"
              style={{ width: "100%", boxSizing: "border-box", background: "var(--bg-base)", border: "1px solid var(--border-default)", borderRadius: 7, padding: "8px 10px", color: "var(--fg-primary)", fontSize: 12.5, fontFamily: "inherit", outline: "none" }}/>
          </div>
        )}

        {/* Плашки активних карток — лише при способі «Банківська картка» І поки картку
            ще не обрано (є очікування → інші картки ховаємо; повернуться після скасування) */}
        {isCardPay && exps.length === 0 && list.map(c => {
          const short = c.remaining != null && c.remaining < amount;
          return (
            <div key={c.id} style={{ padding: "10px 14px", background: "var(--bg-raised)", border: "1px solid var(--border-default)", borderRadius: 8, display: "flex", flexDirection: "column", gap: 5 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                <Icon name="credit-card" size={14} style={{ color: "var(--accent)", flexShrink: 0 }}/>
                <span style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-primary)" }}>{c.bank}</span>
                <span style={{ fontSize: 12, color: "var(--fg-secondary)" }}>{c.holder}</span>
                {c.remaining != null && (
                  <span title={`Ліміт ${ocpFmt(c.limitAmount)} ₴ / ${c.limitDays} дн.`} style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, marginLeft: "auto", background: short ? "rgba(248,113,113,.12)" : "rgba(110,231,183,.1)", border: "1px solid " + (short ? "rgba(248,113,113,.45)" : "rgba(110,231,183,.35)"), color: short ? "#FCA5A5" : "#6EE7B7", whiteSpace: "nowrap" }}>
                    залишок {ocpFmt(c.remaining)} ₴
                  </span>
                )}
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-primary)", paddingLeft: 22 }}>{c.numberGrouped}</div>
              {short && <div style={{ fontSize: 11, color: "#FCA5A5", paddingLeft: 22 }}>Сума замовлення ({ocpFmt(amount)} ₴) перевищує залишок ліміту цієї картки</div>}
              <button onClick={() => copyReq(c)} style={{ marginLeft: 22, alignSelf: "flex-start", height: isMobile ? 34 : 28, padding: "0 12px", borderRadius: 7, border: "1px solid var(--accent-ring)", background: "var(--accent-soft)", color: "var(--accent)", fontSize: 12, fontWeight: 500, cursor: "pointer", fontFamily: "inherit", display: "inline-flex", alignItems: "center", gap: 6 }}>
                <Icon name="copy" size={12}/> Скопіювати реквізити
              </button>
            </div>
          );
        })}
        {isCardPay && exps.length === 0 && list.length === 0 && <div style={{ fontSize: 12, color: "var(--fg-muted)" }}>Немає активних карток — увімкніть у вкладці «Картки».</div>}

        {/* Клієнт хоче оплатити на ФОП (безготівковий, без комісії) — показ ФОП-рахунків */}
        {isCardPay && exps.length === 0 && (
          <React.Fragment>
            <button onClick={openFop} style={{ alignSelf: "flex-start", height: isMobile ? 32 : 28, padding: "0 12px", borderRadius: 7, border: "1px dashed var(--border-strong)", background: "transparent", color: "var(--fg-secondary)", fontSize: 12, fontWeight: 500, cursor: "pointer", fontFamily: "inherit", display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="building-2" size={13}/> {showFop ? "Сховати ФОП-рахунки" : "Клієнт хоче оплатити на ФОП"}
            </button>
            {showFop && fops === null && <div style={{ fontSize: 12, color: "var(--fg-muted)" }}>Завантаження ФОП-рахунків…</div>}
            {showFop && fops && fops.list && fops.list.length === 0 && <div style={{ fontSize: 12, color: "var(--fg-muted)" }}>Немає ФОПів з реквізитами — заповніть у «Відправники НП».</div>}
            {showFop && fops && fops.list && fops.list.length > 0 && fops.totalRemaining != null && (
              <div style={{ fontSize: 11, color: "var(--fg-muted)", paddingLeft: 2 }}>
                Залишок ліміту по всіх ФОПах до кінця року: <b style={{ color: "var(--fg-secondary)" }}>{ocpFmt(fops.totalRemaining)} ₴</b>{fops.reserve ? ` · резерв ${ocpFmt(fops.reserve)} ₴ на кожен ФОП уже враховано` : ""}{fops.yearElapsedPct != null ? ` · рік пройдено на ${fops.yearElapsedPct}%` : ""}
              </div>
            )}
            {showFop && fops && fops.list && fops.list.map(f => {
              const short = f.remaining != null && f.remaining < amount;
              const chosen = chosenFopId === f.id;
              return (
                <div key={f.id} style={{ padding: "10px 14px", background: "var(--bg-raised)", border: "1px solid " + (chosen ? "var(--accent-ring)" : "var(--border-default)"), borderRadius: 8, display: "flex", flexDirection: "column", gap: 5 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <Icon name="building-2" size={14} style={{ color: "var(--accent)", flexShrink: 0 }}/>
                    <span style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-primary)" }}>{f.name}</span>
                    {chosen && <span style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, background: "var(--accent-soft)", border: "1px solid var(--accent-ring)", color: "var(--accent)" }}>✅ обрано</span>}
                    {f.recommend && <span title={f.recommendReason || "Рекомендований для цієї оплати"} style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, background: "rgba(110,231,183,.12)", border: "1px solid rgba(110,231,183,.4)", color: "#6EE7B7" }}>⭐ радимо</span>}
                    {f.idle && <span title={`Без операцій ${f.idleDays} дн. — варто провести оплату, щоб ФОП не лежав`} style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, background: "rgba(251,191,36,.12)", border: "1px solid rgba(251,191,36,.4)", color: "#FBBF24" }}>💤 {f.idleDays} дн.</span>}
                    {f.remaining != null && (
                      <span title={`Залишок річного ліміту ${ocpFmt(f.remaining)} ₴${f.pct != null ? ` · використано ${f.pct}%` : ""}`} style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 7px", borderRadius: 999, marginLeft: "auto", background: short ? "rgba(248,113,113,.12)" : "rgba(110,231,183,.1)", border: "1px solid " + (short ? "rgba(248,113,113,.45)" : "rgba(110,231,183,.35)"), color: short ? "#FCA5A5" : "#6EE7B7", whiteSpace: "nowrap" }}>
                        ліміт {ocpFmt(f.remaining)} ₴{f.pct != null ? ` · ${f.pct}%` : ""}
                      </span>
                    )}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--fg-secondary)", paddingLeft: 22 }}>ЄДРПОУ {f.edrpou || "—"}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--fg-primary)", paddingLeft: 22, wordBreak: "break-all" }}>{f.iban}</div>
                  {f.recommend && f.recommendReason && <div style={{ fontSize: 11, color: "#6EE7B7", paddingLeft: 22 }}>⭐ {f.recommendReason}</div>}
                  {f.perMonthLeft != null && f.remaining != null && f.remaining > 0 && (
                    <div style={{ fontSize: 11, color: f.aheadOfPace ? "#FBBF24" : "var(--fg-muted)", paddingLeft: 22 }}>
                      {f.aheadOfPace ? "⚠ випереджає темп року · " : ""}можна ще ≈{ocpFmt(f.perMonthLeft)} ₴/міс, щоб розтягнути до кінця року
                    </div>
                  )}
                  {short && <div style={{ fontSize: 11, color: "#FCA5A5", paddingLeft: 22 }}>Сума ({ocpFmt(amount)} ₴) більша за залишок річного ліміту цього ФОПа</div>}
                  <button onClick={() => copyFopReq(f)} style={{ marginLeft: 22, alignSelf: "flex-start", height: isMobile ? 34 : 28, padding: "0 12px", borderRadius: 7, border: "1px solid var(--accent-ring)", background: "var(--accent-soft)", color: "var(--accent)", fontSize: 12, fontWeight: 500, cursor: "pointer", fontFamily: "inherit", display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <Icon name="copy" size={12}/> Скопіювати реквізити
                  </button>
                </div>
              );
            })}
          </React.Fragment>
        )}

        {err && <div style={{ fontSize: 11.5, color: "#FCA5A5" }}>{err}</div>}
      </div>
    </div>
  );
}

window.OrderCardPayBlock = OrderCardPayBlock;